@momentum-design/components 0.110.1 → 0.111.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/browser/index.js +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 +752 -483
- package/dist/react/index.d.ts +2 -2
- package/dist/react/index.js +2 -2
- 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,149 +4,63 @@
|
|
|
4
4
|
"modules": [
|
|
5
5
|
{
|
|
6
6
|
"kind": "javascript-module",
|
|
7
|
-
"path": "components/
|
|
7
|
+
"path": "components/accordionbutton/accordionbutton.component.js",
|
|
8
8
|
"declarations": [
|
|
9
9
|
{
|
|
10
10
|
"kind": "class",
|
|
11
|
-
"description": "An accordion contains a header and body section with
|
|
12
|
-
"name": "
|
|
11
|
+
"description": "An accordion button contains a header and body section with optional slots inside the heading which are focusable.\n\nThe header section contains:\n- Prefix Icon\n- Header Text\n\nThe body section contains:\n- Default slot - User can place any content inside the body section.\n\nThe accordion button can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>\nThere are two types of variants based on that the border styling of the accordion gets reflected. <br/>\nThere are two sizes of accordion, one is small and the other is large.\nSmall size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.\n\nBy default, the header text in the accordion heading is of H3 with an aria-level of '3'.\nIf this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.\n\nAn accordion can be disabled, and when it's disabled, the header section will not be clickable.\n\nIf you do need any controls on your accordion heading, then it's advised to use `accordion` component.\n\nIf an accordion button is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion button.",
|
|
12
|
+
"name": "AccordionButton",
|
|
13
13
|
"cssProperties": [
|
|
14
14
|
{
|
|
15
|
-
"description": "The border color of the accordion.",
|
|
16
|
-
"name": "--mdc-accordionbutton-border-color"
|
|
17
|
-
"inheritedFrom": {
|
|
18
|
-
"name": "AccordionButton",
|
|
19
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
20
|
-
}
|
|
15
|
+
"description": "The border color of the accordion button.",
|
|
16
|
+
"name": "--mdc-accordionbutton-border-color"
|
|
21
17
|
},
|
|
22
18
|
{
|
|
23
|
-
"description": "The hover color of the accordion.",
|
|
24
|
-
"name": "--mdc-accordionbutton-hover-color"
|
|
25
|
-
"inheritedFrom": {
|
|
26
|
-
"name": "AccordionButton",
|
|
27
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
28
|
-
}
|
|
19
|
+
"description": "The hover color of the accordion button.",
|
|
20
|
+
"name": "--mdc-accordionbutton-hover-color"
|
|
29
21
|
},
|
|
30
22
|
{
|
|
31
|
-
"description": "The active color of the accordion.",
|
|
32
|
-
"name": "--mdc-accordionbutton-active-color"
|
|
33
|
-
"inheritedFrom": {
|
|
34
|
-
"name": "AccordionButton",
|
|
35
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
36
|
-
}
|
|
23
|
+
"description": "The active color of the accordion button.",
|
|
24
|
+
"name": "--mdc-accordionbutton-active-color"
|
|
37
25
|
},
|
|
38
26
|
{
|
|
39
|
-
"description": "The disabled color of the accordion.",
|
|
40
|
-
"name": "--mdc-accordionbutton-disabled-color"
|
|
41
|
-
"inheritedFrom": {
|
|
42
|
-
"name": "AccordionButton",
|
|
43
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
44
|
-
}
|
|
27
|
+
"description": "The disabled color of the accordion button.",
|
|
28
|
+
"name": "--mdc-accordionbutton-disabled-color"
|
|
45
29
|
}
|
|
46
30
|
],
|
|
47
31
|
"cssParts": [
|
|
48
32
|
{
|
|
49
|
-
"description": "The header section of the accordion.",
|
|
50
|
-
"name": "header-section"
|
|
51
|
-
"inheritedFrom": {
|
|
52
|
-
"name": "AccordionButton",
|
|
53
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
54
|
-
}
|
|
55
|
-
},
|
|
56
|
-
{
|
|
57
|
-
"description": "The leading header of the accordion.",
|
|
58
|
-
"name": "leading-header",
|
|
59
|
-
"inheritedFrom": {
|
|
60
|
-
"name": "AccordionButton",
|
|
61
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
62
|
-
}
|
|
33
|
+
"description": "The header section of the accordion button.",
|
|
34
|
+
"name": "header-section"
|
|
63
35
|
},
|
|
64
36
|
{
|
|
65
|
-
"description": "The
|
|
66
|
-
"name": "
|
|
67
|
-
"inheritedFrom": {
|
|
68
|
-
"name": "AccordionButton",
|
|
69
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
70
|
-
}
|
|
37
|
+
"description": "The header button section of the accordion button.",
|
|
38
|
+
"name": "header-button-section"
|
|
71
39
|
},
|
|
72
40
|
{
|
|
73
|
-
"description": "The
|
|
74
|
-
"name": "
|
|
41
|
+
"description": "The leading header of the accordion button.",
|
|
42
|
+
"name": "leading-header"
|
|
75
43
|
},
|
|
76
44
|
{
|
|
77
|
-
"description": "The
|
|
78
|
-
"name": "
|
|
79
|
-
"inheritedFrom": {
|
|
80
|
-
"name": "AccordionButton",
|
|
81
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
82
|
-
}
|
|
45
|
+
"description": "The trailing header of the accordion button.",
|
|
46
|
+
"name": "trailing-header"
|
|
83
47
|
},
|
|
84
48
|
{
|
|
85
|
-
"description": "The header
|
|
86
|
-
"name": "
|
|
87
|
-
"inheritedFrom": {
|
|
88
|
-
"name": "AccordionButton",
|
|
89
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
90
|
-
}
|
|
49
|
+
"description": "The trailing header icon of the accordion button.",
|
|
50
|
+
"name": "trailing-header__icon"
|
|
91
51
|
},
|
|
92
52
|
{
|
|
93
|
-
"description": "The
|
|
94
|
-
"name": "
|
|
95
|
-
"inheritedFrom": {
|
|
96
|
-
"name": "AccordionButton",
|
|
97
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
98
|
-
}
|
|
53
|
+
"description": "The body section of the accordion button.",
|
|
54
|
+
"name": "body-section"
|
|
99
55
|
}
|
|
100
56
|
],
|
|
101
57
|
"slots": [
|
|
102
|
-
{
|
|
103
|
-
"description": "The leading controls slot of the accordion on the header section.",
|
|
104
|
-
"name": "leading-controls"
|
|
105
|
-
},
|
|
106
|
-
{
|
|
107
|
-
"description": "The trailing controls slot of the accordion on the header section.",
|
|
108
|
-
"name": "trailing-controls"
|
|
109
|
-
},
|
|
110
58
|
{
|
|
111
59
|
"description": "The default slot contains the body section of the accordion. User can place anything inside this body slot.",
|
|
112
|
-
"name": "default"
|
|
113
|
-
"inheritedFrom": {
|
|
114
|
-
"name": "AccordionButton",
|
|
115
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
116
|
-
}
|
|
60
|
+
"name": "default"
|
|
117
61
|
}
|
|
118
62
|
],
|
|
119
63
|
"members": [
|
|
120
|
-
{
|
|
121
|
-
"kind": "method",
|
|
122
|
-
"name": "renderHeader",
|
|
123
|
-
"privacy": "protected",
|
|
124
|
-
"return": {
|
|
125
|
-
"type": {
|
|
126
|
-
"text": ""
|
|
127
|
-
}
|
|
128
|
-
},
|
|
129
|
-
"description": "Renders the header section of the accordion.\nThis includes the leading icon, text and controls, and the trailing controls.\nThe trailing controls include the expand/collapse button.\nThe button is disabled if the accordion is disabled.\nThe button is also given the aria-controls attribute set to the id of the body section.\nThe button is also given the aria-expanded attribute set to the expanded state of the accordion.\nThe prefix icon of the button is set to the expanded state of the accordion.",
|
|
130
|
-
"inheritedFrom": {
|
|
131
|
-
"name": "AccordionButton",
|
|
132
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
133
|
-
}
|
|
134
|
-
},
|
|
135
|
-
{
|
|
136
|
-
"kind": "field",
|
|
137
|
-
"name": "disabled",
|
|
138
|
-
"type": {
|
|
139
|
-
"text": "boolean | undefined"
|
|
140
|
-
},
|
|
141
|
-
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
142
|
-
"default": "undefined",
|
|
143
|
-
"attribute": "disabled",
|
|
144
|
-
"reflects": true,
|
|
145
|
-
"inheritedFrom": {
|
|
146
|
-
"name": "DisabledMixin",
|
|
147
|
-
"module": "utils/mixins/DisabledMixin.js"
|
|
148
|
-
}
|
|
149
|
-
},
|
|
150
64
|
{
|
|
151
65
|
"kind": "field",
|
|
152
66
|
"name": "size",
|
|
@@ -156,11 +70,7 @@
|
|
|
156
70
|
"description": "The size of the accordion item.",
|
|
157
71
|
"default": "'small'",
|
|
158
72
|
"attribute": "size",
|
|
159
|
-
"reflects": true
|
|
160
|
-
"inheritedFrom": {
|
|
161
|
-
"name": "AccordionButton",
|
|
162
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
163
|
-
}
|
|
73
|
+
"reflects": true
|
|
164
74
|
},
|
|
165
75
|
{
|
|
166
76
|
"kind": "field",
|
|
@@ -171,11 +81,7 @@
|
|
|
171
81
|
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
172
82
|
"default": "'default'",
|
|
173
83
|
"attribute": "variant",
|
|
174
|
-
"reflects": true
|
|
175
|
-
"inheritedFrom": {
|
|
176
|
-
"name": "AccordionButton",
|
|
177
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
178
|
-
}
|
|
84
|
+
"reflects": true
|
|
179
85
|
},
|
|
180
86
|
{
|
|
181
87
|
"kind": "field",
|
|
@@ -186,11 +92,7 @@
|
|
|
186
92
|
"description": "The aria level of the accordion component.",
|
|
187
93
|
"default": "3",
|
|
188
94
|
"attribute": "data-aria-level",
|
|
189
|
-
"reflects": true
|
|
190
|
-
"inheritedFrom": {
|
|
191
|
-
"name": "AccordionButton",
|
|
192
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
193
|
-
}
|
|
95
|
+
"reflects": true
|
|
194
96
|
},
|
|
195
97
|
{
|
|
196
98
|
"kind": "field",
|
|
@@ -201,11 +103,7 @@
|
|
|
201
103
|
"description": "The visibility of the accordion button.",
|
|
202
104
|
"default": "false",
|
|
203
105
|
"attribute": "expanded",
|
|
204
|
-
"reflects": true
|
|
205
|
-
"inheritedFrom": {
|
|
206
|
-
"name": "AccordionButton",
|
|
207
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
208
|
-
}
|
|
106
|
+
"reflects": true
|
|
209
107
|
},
|
|
210
108
|
{
|
|
211
109
|
"kind": "field",
|
|
@@ -215,11 +113,7 @@
|
|
|
215
113
|
},
|
|
216
114
|
"description": "The header text of the accordion item.",
|
|
217
115
|
"attribute": "header-text",
|
|
218
|
-
"reflects": true
|
|
219
|
-
"inheritedFrom": {
|
|
220
|
-
"name": "AccordionButton",
|
|
221
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
222
|
-
}
|
|
116
|
+
"reflects": true
|
|
223
117
|
},
|
|
224
118
|
{
|
|
225
119
|
"kind": "field",
|
|
@@ -228,11 +122,7 @@
|
|
|
228
122
|
"text": "IconNames | undefined"
|
|
229
123
|
},
|
|
230
124
|
"description": "The leading icon that is displayed before the header text.",
|
|
231
|
-
"attribute": "prefix-icon"
|
|
232
|
-
"inheritedFrom": {
|
|
233
|
-
"name": "AccordionButton",
|
|
234
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
235
|
-
}
|
|
125
|
+
"attribute": "prefix-icon"
|
|
236
126
|
},
|
|
237
127
|
{
|
|
238
128
|
"kind": "method",
|
|
@@ -243,11 +133,7 @@
|
|
|
243
133
|
"text": "void"
|
|
244
134
|
}
|
|
245
135
|
},
|
|
246
|
-
"description": "Handles the click event of the header section.\nIf the accordion is disabled, it will not toggle the expanded state.\nIt will dispatch the `shown` event with the current expanded state."
|
|
247
|
-
"inheritedFrom": {
|
|
248
|
-
"name": "AccordionButton",
|
|
249
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
250
|
-
}
|
|
136
|
+
"description": "Handles the click event of the header section.\nIf the accordion is disabled, it will not toggle the expanded state.\nIt will dispatch the `shown` event with the current expanded state."
|
|
251
137
|
},
|
|
252
138
|
{
|
|
253
139
|
"kind": "method",
|
|
@@ -258,11 +144,7 @@
|
|
|
258
144
|
"text": "void"
|
|
259
145
|
}
|
|
260
146
|
},
|
|
261
|
-
"description": "Dispatches the `shown` event with the current expanded state.\nThe event is cancelable and bubbles.\nThe event detail contains the current expanded state."
|
|
262
|
-
"inheritedFrom": {
|
|
263
|
-
"name": "AccordionButton",
|
|
264
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
265
|
-
}
|
|
147
|
+
"description": "Dispatches the `shown` event with the current expanded state.\nThe event is cancelable and bubbles.\nThe event detail contains the current expanded state."
|
|
266
148
|
},
|
|
267
149
|
{
|
|
268
150
|
"kind": "method",
|
|
@@ -282,11 +164,7 @@
|
|
|
282
164
|
"description": "The KeyboardEvent fired."
|
|
283
165
|
}
|
|
284
166
|
],
|
|
285
|
-
"description": "Handles the keydown event of the component.\nIf the key pressed is either Enter or Space, it calls the handleHeaderClick method.\nThis allows keyboard users to toggle the accordion button using these keys."
|
|
286
|
-
"inheritedFrom": {
|
|
287
|
-
"name": "AccordionButton",
|
|
288
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
289
|
-
}
|
|
167
|
+
"description": "Handles the keydown event of the component.\nIf the key pressed is either Enter or Space, it calls the handleHeaderClick method.\nThis allows keyboard users to toggle the accordion button using these keys."
|
|
290
168
|
},
|
|
291
169
|
{
|
|
292
170
|
"kind": "method",
|
|
@@ -305,11 +183,7 @@
|
|
|
305
183
|
"text": "IconNames"
|
|
306
184
|
}
|
|
307
185
|
}
|
|
308
|
-
]
|
|
309
|
-
"inheritedFrom": {
|
|
310
|
-
"name": "AccordionButton",
|
|
311
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
312
|
-
}
|
|
186
|
+
]
|
|
313
187
|
},
|
|
314
188
|
{
|
|
315
189
|
"kind": "method",
|
|
@@ -319,10 +193,16 @@
|
|
|
319
193
|
"type": {
|
|
320
194
|
"text": "TemplateResult | typeof nothing"
|
|
321
195
|
}
|
|
322
|
-
}
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
196
|
+
}
|
|
197
|
+
},
|
|
198
|
+
{
|
|
199
|
+
"kind": "method",
|
|
200
|
+
"name": "renderHeader",
|
|
201
|
+
"privacy": "protected",
|
|
202
|
+
"return": {
|
|
203
|
+
"type": {
|
|
204
|
+
"text": "TemplateResult"
|
|
205
|
+
}
|
|
326
206
|
}
|
|
327
207
|
},
|
|
328
208
|
{
|
|
@@ -334,11 +214,7 @@
|
|
|
334
214
|
"text": ""
|
|
335
215
|
}
|
|
336
216
|
},
|
|
337
|
-
"description": "Returns the icon name based on the expanded state.\nIf the accordion button is disabled, it always returns the arrow down icon.\nOtherwise, it returns the arrow up icon if the accordion button is expanded, otherwise the arrow down icon."
|
|
338
|
-
"inheritedFrom": {
|
|
339
|
-
"name": "AccordionButton",
|
|
340
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
341
|
-
}
|
|
217
|
+
"description": "Returns the icon name based on the expanded state.\nIf the accordion button is disabled, it always returns the arrow down icon.\nOtherwise, it returns the arrow up icon if the accordion button is expanded, otherwise the arrow down icon."
|
|
342
218
|
},
|
|
343
219
|
{
|
|
344
220
|
"kind": "method",
|
|
@@ -348,45 +224,32 @@
|
|
|
348
224
|
"type": {
|
|
349
225
|
"text": "TemplateResult | typeof nothing"
|
|
350
226
|
}
|
|
351
|
-
},
|
|
352
|
-
"inheritedFrom": {
|
|
353
|
-
"name": "AccordionButton",
|
|
354
|
-
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
355
|
-
}
|
|
356
|
-
}
|
|
357
|
-
],
|
|
358
|
-
"events": [
|
|
359
|
-
{
|
|
360
|
-
"description": "(React: onShown) This event is triggered when the accordion is expanded.",
|
|
361
|
-
"name": "shown",
|
|
362
|
-
"reactName": "onShown",
|
|
363
|
-
"inheritedFrom": {
|
|
364
|
-
"name": "AccordionButton",
|
|
365
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
366
227
|
}
|
|
367
|
-
}
|
|
368
|
-
],
|
|
369
|
-
"superclass": {
|
|
370
|
-
"name": "AccordionButton",
|
|
371
|
-
"module": "/src/components/accordionbutton/accordionbutton.component"
|
|
372
|
-
},
|
|
373
|
-
"tagName": "mdc-accordion",
|
|
374
|
-
"jsDoc": "/**\n * An accordion contains a header and body section with a focusable heading that can be expanded or collapsed.\n *\n * The header section contains:\n * - Prefix Icon\n * - Header Text\n * - Leading Slot - Contains the leading controls of the accordion on the header section. This will be placed on the leading side, after the header text.\n * - Trailing Slot - Contains the trailing controls of the accordion on the header section. This will be placed on the trailing side, before the expand/collapse button.\n *\n * The body section contains:\n * - Default slot - User can place any content inside the body section.\n *\n * The accordion can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>\n * There are two types of variants based on that the border styling of the accordion gets reflected. <br/>\n * There are two sizes of accordion, one is small and the other is large.\n * Small size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.\n *\n * By default, the header text in the accordion heading is of H3 with an aria-level of '3'.\n * If this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.\n *\n * An accordion can be disabled, and when it's disabled, the header section will not be clickable.\n *\n * If you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n *\n * If an accordion is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion.\n *\n * @tagname mdc-accordion\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @slot leading-controls - The leading controls slot of the accordion on the header section.\n * @slot trailing-controls - The trailing controls slot of the accordion on the header section.\n * @slot default - The default slot contains the body section of the accordion. User can place anything inside this body slot.\n *\n * @event shown - (React: onShown) This event is triggered when the accordion is expanded.\n *\n * @cssproperty --mdc-accordionbutton-border-color - The border color of the accordion.\n * @cssproperty --mdc-accordionbutton-hover-color - The hover color of the accordion.\n * @cssproperty --mdc-accordionbutton-active-color - The active color of the accordion.\n * @cssproperty --mdc-accordionbutton-disabled-color - The disabled color of the accordion.\n *\n * @csspart header-section - The header section of the accordion.\n * @csspart leading-header - The leading header of the accordion.\n * @csspart trailing-header - The trailing header of the accordion.\n * @csspart trailing-header__button - The trailing header button of the accordion.\n * @csspart body-section - The body section of the accordion.\n */",
|
|
375
|
-
"customElement": true,
|
|
376
|
-
"attributes": [
|
|
228
|
+
},
|
|
377
229
|
{
|
|
230
|
+
"kind": "field",
|
|
378
231
|
"name": "disabled",
|
|
379
232
|
"type": {
|
|
380
233
|
"text": "boolean | undefined"
|
|
381
234
|
},
|
|
382
235
|
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
383
236
|
"default": "undefined",
|
|
384
|
-
"
|
|
237
|
+
"attribute": "disabled",
|
|
238
|
+
"reflects": true,
|
|
385
239
|
"inheritedFrom": {
|
|
386
240
|
"name": "DisabledMixin",
|
|
387
|
-
"module": "
|
|
241
|
+
"module": "utils/mixins/DisabledMixin.js"
|
|
388
242
|
}
|
|
389
|
-
}
|
|
243
|
+
}
|
|
244
|
+
],
|
|
245
|
+
"events": [
|
|
246
|
+
{
|
|
247
|
+
"description": "(React: onShown) This event is triggered when the accordion button is expanded.",
|
|
248
|
+
"name": "shown",
|
|
249
|
+
"reactName": "onShown"
|
|
250
|
+
}
|
|
251
|
+
],
|
|
252
|
+
"attributes": [
|
|
390
253
|
{
|
|
391
254
|
"name": "size",
|
|
392
255
|
"type": {
|
|
@@ -394,11 +257,7 @@
|
|
|
394
257
|
},
|
|
395
258
|
"description": "The size of the accordion item.",
|
|
396
259
|
"default": "'small'",
|
|
397
|
-
"fieldName": "size"
|
|
398
|
-
"inheritedFrom": {
|
|
399
|
-
"name": "AccordionButton",
|
|
400
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
401
|
-
}
|
|
260
|
+
"fieldName": "size"
|
|
402
261
|
},
|
|
403
262
|
{
|
|
404
263
|
"name": "variant",
|
|
@@ -407,11 +266,7 @@
|
|
|
407
266
|
},
|
|
408
267
|
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
409
268
|
"default": "'default'",
|
|
410
|
-
"fieldName": "variant"
|
|
411
|
-
"inheritedFrom": {
|
|
412
|
-
"name": "AccordionButton",
|
|
413
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
414
|
-
}
|
|
269
|
+
"fieldName": "variant"
|
|
415
270
|
},
|
|
416
271
|
{
|
|
417
272
|
"name": "data-aria-level",
|
|
@@ -420,11 +275,7 @@
|
|
|
420
275
|
},
|
|
421
276
|
"description": "The aria level of the accordion component.",
|
|
422
277
|
"default": "3",
|
|
423
|
-
"fieldName": "dataAriaLevel"
|
|
424
|
-
"inheritedFrom": {
|
|
425
|
-
"name": "AccordionButton",
|
|
426
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
427
|
-
}
|
|
278
|
+
"fieldName": "dataAriaLevel"
|
|
428
279
|
},
|
|
429
280
|
{
|
|
430
281
|
"name": "expanded",
|
|
@@ -433,11 +284,7 @@
|
|
|
433
284
|
},
|
|
434
285
|
"description": "The visibility of the accordion button.",
|
|
435
286
|
"default": "false",
|
|
436
|
-
"fieldName": "expanded"
|
|
437
|
-
"inheritedFrom": {
|
|
438
|
-
"name": "AccordionButton",
|
|
439
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
440
|
-
}
|
|
287
|
+
"fieldName": "expanded"
|
|
441
288
|
},
|
|
442
289
|
{
|
|
443
290
|
"name": "header-text",
|
|
@@ -445,11 +292,7 @@
|
|
|
445
292
|
"text": "string | undefined"
|
|
446
293
|
},
|
|
447
294
|
"description": "The header text of the accordion item.",
|
|
448
|
-
"fieldName": "headerText"
|
|
449
|
-
"inheritedFrom": {
|
|
450
|
-
"name": "AccordionButton",
|
|
451
|
-
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
452
|
-
}
|
|
295
|
+
"fieldName": "headerText"
|
|
453
296
|
},
|
|
454
297
|
{
|
|
455
298
|
"name": "prefix-icon",
|
|
@@ -457,13 +300,35 @@
|
|
|
457
300
|
"text": "IconNames | undefined"
|
|
458
301
|
},
|
|
459
302
|
"description": "The leading icon that is displayed before the header text.",
|
|
460
|
-
"fieldName": "prefixIcon"
|
|
303
|
+
"fieldName": "prefixIcon"
|
|
304
|
+
},
|
|
305
|
+
{
|
|
306
|
+
"name": "disabled",
|
|
307
|
+
"type": {
|
|
308
|
+
"text": "boolean | undefined"
|
|
309
|
+
},
|
|
310
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
311
|
+
"default": "undefined",
|
|
312
|
+
"fieldName": "disabled",
|
|
461
313
|
"inheritedFrom": {
|
|
462
|
-
"name": "
|
|
463
|
-
"module": "src/
|
|
314
|
+
"name": "DisabledMixin",
|
|
315
|
+
"module": "src/utils/mixins/DisabledMixin.ts"
|
|
464
316
|
}
|
|
465
317
|
}
|
|
466
|
-
]
|
|
318
|
+
],
|
|
319
|
+
"mixins": [
|
|
320
|
+
{
|
|
321
|
+
"name": "DisabledMixin",
|
|
322
|
+
"module": "/src/utils/mixins/DisabledMixin"
|
|
323
|
+
}
|
|
324
|
+
],
|
|
325
|
+
"superclass": {
|
|
326
|
+
"name": "Component",
|
|
327
|
+
"module": "/src/models"
|
|
328
|
+
},
|
|
329
|
+
"tagName": "mdc-accordionbutton",
|
|
330
|
+
"jsDoc": "/**\n * An accordion button contains a header and body section with optional slots inside the heading which are focusable.\n *\n * The header section contains:\n * - Prefix Icon\n * - Header Text\n *\n * The body section contains:\n * - Default slot - User can place any content inside the body section.\n *\n * The accordion button can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>\n * There are two types of variants based on that the border styling of the accordion gets reflected. <br/>\n * There are two sizes of accordion, one is small and the other is large.\n * Small size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.\n *\n * By default, the header text in the accordion heading is of H3 with an aria-level of '3'.\n * If this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.\n *\n * An accordion can be disabled, and when it's disabled, the header section will not be clickable.\n *\n * If you do need any controls on your accordion heading, then it's advised to use `accordion` component.\n *\n * If an accordion button is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion button.\n *\n * @tagname mdc-accordionbutton\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @slot default - The default slot contains the body section of the accordion. User can place anything inside this body slot.\n *\n * @event shown - (React: onShown) This event is triggered when the accordion button is expanded.\n *\n * @cssproperty --mdc-accordionbutton-border-color - The border color of the accordion button.\n * @cssproperty --mdc-accordionbutton-hover-color - The hover color of the accordion button.\n * @cssproperty --mdc-accordionbutton-active-color - The active color of the accordion button.\n * @cssproperty --mdc-accordionbutton-disabled-color - The disabled color of the accordion button.\n *\n * @csspart header-section - The header section of the accordion button.\n * @csspart header-button-section - The header button section of the accordion button.\n * @csspart leading-header - The leading header of the accordion button.\n * @csspart trailing-header - The trailing header of the accordion button.\n * @csspart trailing-header__icon - The trailing header icon of the accordion button.\n * @csspart body-section - The body section of the accordion button.\n */",
|
|
331
|
+
"customElement": true
|
|
467
332
|
}
|
|
468
333
|
],
|
|
469
334
|
"exports": [
|
|
@@ -471,8 +336,8 @@
|
|
|
471
336
|
"kind": "js",
|
|
472
337
|
"name": "default",
|
|
473
338
|
"declaration": {
|
|
474
|
-
"name": "
|
|
475
|
-
"module": "components/
|
|
339
|
+
"name": "AccordionButton",
|
|
340
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
476
341
|
}
|
|
477
342
|
}
|
|
478
343
|
]
|
|
@@ -630,63 +495,149 @@
|
|
|
630
495
|
},
|
|
631
496
|
{
|
|
632
497
|
"kind": "javascript-module",
|
|
633
|
-
"path": "components/
|
|
498
|
+
"path": "components/accordion/accordion.component.js",
|
|
634
499
|
"declarations": [
|
|
635
500
|
{
|
|
636
501
|
"kind": "class",
|
|
637
|
-
"description": "An accordion
|
|
638
|
-
"name": "
|
|
502
|
+
"description": "An accordion contains a header and body section with a focusable heading that can be expanded or collapsed.\n\nThe header section contains:\n- Prefix Icon\n- Header Text\n- Leading Slot - Contains the leading controls of the accordion on the header section. This will be placed on the leading side, after the header text.\n- Trailing Slot - Contains the trailing controls of the accordion on the header section. This will be placed on the trailing side, before the expand/collapse button.\n\nThe body section contains:\n- Default slot - User can place any content inside the body section.\n\nThe accordion can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>\nThere are two types of variants based on that the border styling of the accordion gets reflected. <br/>\nThere are two sizes of accordion, one is small and the other is large.\nSmall size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.\n\nBy default, the header text in the accordion heading is of H3 with an aria-level of '3'.\nIf this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.\n\nAn accordion can be disabled, and when it's disabled, the header section will not be clickable.\n\nIf you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n\nIf an accordion is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion.",
|
|
503
|
+
"name": "Accordion",
|
|
639
504
|
"cssProperties": [
|
|
640
505
|
{
|
|
641
|
-
"description": "The border color of the accordion
|
|
642
|
-
"name": "--mdc-accordionbutton-border-color"
|
|
506
|
+
"description": "The border color of the accordion.",
|
|
507
|
+
"name": "--mdc-accordionbutton-border-color",
|
|
508
|
+
"inheritedFrom": {
|
|
509
|
+
"name": "AccordionButton",
|
|
510
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
511
|
+
}
|
|
643
512
|
},
|
|
644
513
|
{
|
|
645
|
-
"description": "The hover color of the accordion
|
|
646
|
-
"name": "--mdc-accordionbutton-hover-color"
|
|
514
|
+
"description": "The hover color of the accordion.",
|
|
515
|
+
"name": "--mdc-accordionbutton-hover-color",
|
|
516
|
+
"inheritedFrom": {
|
|
517
|
+
"name": "AccordionButton",
|
|
518
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
519
|
+
}
|
|
647
520
|
},
|
|
648
521
|
{
|
|
649
|
-
"description": "The active color of the accordion
|
|
650
|
-
"name": "--mdc-accordionbutton-active-color"
|
|
522
|
+
"description": "The active color of the accordion.",
|
|
523
|
+
"name": "--mdc-accordionbutton-active-color",
|
|
524
|
+
"inheritedFrom": {
|
|
525
|
+
"name": "AccordionButton",
|
|
526
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
527
|
+
}
|
|
651
528
|
},
|
|
652
529
|
{
|
|
653
|
-
"description": "The disabled color of the accordion
|
|
654
|
-
"name": "--mdc-accordionbutton-disabled-color"
|
|
530
|
+
"description": "The disabled color of the accordion.",
|
|
531
|
+
"name": "--mdc-accordionbutton-disabled-color",
|
|
532
|
+
"inheritedFrom": {
|
|
533
|
+
"name": "AccordionButton",
|
|
534
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
535
|
+
}
|
|
655
536
|
}
|
|
656
537
|
],
|
|
657
538
|
"cssParts": [
|
|
658
539
|
{
|
|
659
|
-
"description": "The header section of the accordion
|
|
660
|
-
"name": "header-section"
|
|
540
|
+
"description": "The header section of the accordion.",
|
|
541
|
+
"name": "header-section",
|
|
542
|
+
"inheritedFrom": {
|
|
543
|
+
"name": "AccordionButton",
|
|
544
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
545
|
+
}
|
|
661
546
|
},
|
|
662
547
|
{
|
|
663
|
-
"description": "The header
|
|
664
|
-
"name": "header
|
|
548
|
+
"description": "The leading header of the accordion.",
|
|
549
|
+
"name": "leading-header",
|
|
550
|
+
"inheritedFrom": {
|
|
551
|
+
"name": "AccordionButton",
|
|
552
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
553
|
+
}
|
|
665
554
|
},
|
|
666
555
|
{
|
|
667
|
-
"description": "The
|
|
668
|
-
"name": "
|
|
556
|
+
"description": "The trailing header of the accordion.",
|
|
557
|
+
"name": "trailing-header",
|
|
558
|
+
"inheritedFrom": {
|
|
559
|
+
"name": "AccordionButton",
|
|
560
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
561
|
+
}
|
|
669
562
|
},
|
|
670
563
|
{
|
|
671
|
-
"description": "The trailing header of the accordion
|
|
672
|
-
"name": "trailing-
|
|
564
|
+
"description": "The trailing header button of the accordion.",
|
|
565
|
+
"name": "trailing-header__button"
|
|
673
566
|
},
|
|
674
567
|
{
|
|
675
|
-
"description": "The
|
|
676
|
-
"name": "
|
|
568
|
+
"description": "The body section of the accordion.",
|
|
569
|
+
"name": "body-section",
|
|
570
|
+
"inheritedFrom": {
|
|
571
|
+
"name": "AccordionButton",
|
|
572
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
573
|
+
}
|
|
677
574
|
},
|
|
678
575
|
{
|
|
679
|
-
"description": "The
|
|
680
|
-
"name": "
|
|
576
|
+
"description": "The header button section of the accordion button.",
|
|
577
|
+
"name": "header-button-section",
|
|
578
|
+
"inheritedFrom": {
|
|
579
|
+
"name": "AccordionButton",
|
|
580
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
581
|
+
}
|
|
582
|
+
},
|
|
583
|
+
{
|
|
584
|
+
"description": "The trailing header icon of the accordion button.",
|
|
585
|
+
"name": "trailing-header__icon",
|
|
586
|
+
"inheritedFrom": {
|
|
587
|
+
"name": "AccordionButton",
|
|
588
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
589
|
+
}
|
|
681
590
|
}
|
|
682
591
|
],
|
|
683
592
|
"slots": [
|
|
593
|
+
{
|
|
594
|
+
"description": "The leading controls slot of the accordion on the header section.",
|
|
595
|
+
"name": "leading-controls"
|
|
596
|
+
},
|
|
597
|
+
{
|
|
598
|
+
"description": "The trailing controls slot of the accordion on the header section.",
|
|
599
|
+
"name": "trailing-controls"
|
|
600
|
+
},
|
|
684
601
|
{
|
|
685
602
|
"description": "The default slot contains the body section of the accordion. User can place anything inside this body slot.",
|
|
686
|
-
"name": "default"
|
|
603
|
+
"name": "default",
|
|
604
|
+
"inheritedFrom": {
|
|
605
|
+
"name": "AccordionButton",
|
|
606
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
607
|
+
}
|
|
687
608
|
}
|
|
688
609
|
],
|
|
689
610
|
"members": [
|
|
611
|
+
{
|
|
612
|
+
"kind": "method",
|
|
613
|
+
"name": "renderHeader",
|
|
614
|
+
"privacy": "protected",
|
|
615
|
+
"return": {
|
|
616
|
+
"type": {
|
|
617
|
+
"text": ""
|
|
618
|
+
}
|
|
619
|
+
},
|
|
620
|
+
"description": "Renders the header section of the accordion.\nThis includes the leading icon, text and controls, and the trailing controls.\nThe trailing controls include the expand/collapse button.\nThe button is disabled if the accordion is disabled.\nThe button is also given the aria-controls attribute set to the id of the body section.\nThe button is also given the aria-expanded attribute set to the expanded state of the accordion.\nThe prefix icon of the button is set to the expanded state of the accordion.",
|
|
621
|
+
"inheritedFrom": {
|
|
622
|
+
"name": "AccordionButton",
|
|
623
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
624
|
+
}
|
|
625
|
+
},
|
|
626
|
+
{
|
|
627
|
+
"kind": "field",
|
|
628
|
+
"name": "disabled",
|
|
629
|
+
"type": {
|
|
630
|
+
"text": "boolean | undefined"
|
|
631
|
+
},
|
|
632
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
633
|
+
"default": "undefined",
|
|
634
|
+
"attribute": "disabled",
|
|
635
|
+
"reflects": true,
|
|
636
|
+
"inheritedFrom": {
|
|
637
|
+
"name": "AccordionButton",
|
|
638
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
639
|
+
}
|
|
640
|
+
},
|
|
690
641
|
{
|
|
691
642
|
"kind": "field",
|
|
692
643
|
"name": "size",
|
|
@@ -696,7 +647,11 @@
|
|
|
696
647
|
"description": "The size of the accordion item.",
|
|
697
648
|
"default": "'small'",
|
|
698
649
|
"attribute": "size",
|
|
699
|
-
"reflects": true
|
|
650
|
+
"reflects": true,
|
|
651
|
+
"inheritedFrom": {
|
|
652
|
+
"name": "AccordionButton",
|
|
653
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
654
|
+
}
|
|
700
655
|
},
|
|
701
656
|
{
|
|
702
657
|
"kind": "field",
|
|
@@ -707,7 +662,11 @@
|
|
|
707
662
|
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
708
663
|
"default": "'default'",
|
|
709
664
|
"attribute": "variant",
|
|
710
|
-
"reflects": true
|
|
665
|
+
"reflects": true,
|
|
666
|
+
"inheritedFrom": {
|
|
667
|
+
"name": "AccordionButton",
|
|
668
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
669
|
+
}
|
|
711
670
|
},
|
|
712
671
|
{
|
|
713
672
|
"kind": "field",
|
|
@@ -718,7 +677,11 @@
|
|
|
718
677
|
"description": "The aria level of the accordion component.",
|
|
719
678
|
"default": "3",
|
|
720
679
|
"attribute": "data-aria-level",
|
|
721
|
-
"reflects": true
|
|
680
|
+
"reflects": true,
|
|
681
|
+
"inheritedFrom": {
|
|
682
|
+
"name": "AccordionButton",
|
|
683
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
684
|
+
}
|
|
722
685
|
},
|
|
723
686
|
{
|
|
724
687
|
"kind": "field",
|
|
@@ -729,7 +692,11 @@
|
|
|
729
692
|
"description": "The visibility of the accordion button.",
|
|
730
693
|
"default": "false",
|
|
731
694
|
"attribute": "expanded",
|
|
732
|
-
"reflects": true
|
|
695
|
+
"reflects": true,
|
|
696
|
+
"inheritedFrom": {
|
|
697
|
+
"name": "AccordionButton",
|
|
698
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
699
|
+
}
|
|
733
700
|
},
|
|
734
701
|
{
|
|
735
702
|
"kind": "field",
|
|
@@ -739,7 +706,11 @@
|
|
|
739
706
|
},
|
|
740
707
|
"description": "The header text of the accordion item.",
|
|
741
708
|
"attribute": "header-text",
|
|
742
|
-
"reflects": true
|
|
709
|
+
"reflects": true,
|
|
710
|
+
"inheritedFrom": {
|
|
711
|
+
"name": "AccordionButton",
|
|
712
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
713
|
+
}
|
|
743
714
|
},
|
|
744
715
|
{
|
|
745
716
|
"kind": "field",
|
|
@@ -748,7 +719,11 @@
|
|
|
748
719
|
"text": "IconNames | undefined"
|
|
749
720
|
},
|
|
750
721
|
"description": "The leading icon that is displayed before the header text.",
|
|
751
|
-
"attribute": "prefix-icon"
|
|
722
|
+
"attribute": "prefix-icon",
|
|
723
|
+
"inheritedFrom": {
|
|
724
|
+
"name": "AccordionButton",
|
|
725
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
726
|
+
}
|
|
752
727
|
},
|
|
753
728
|
{
|
|
754
729
|
"kind": "method",
|
|
@@ -759,7 +734,11 @@
|
|
|
759
734
|
"text": "void"
|
|
760
735
|
}
|
|
761
736
|
},
|
|
762
|
-
"description": "Handles the click event of the header section.\nIf the accordion is disabled, it will not toggle the expanded state.\nIt will dispatch the `shown` event with the current expanded state."
|
|
737
|
+
"description": "Handles the click event of the header section.\nIf the accordion is disabled, it will not toggle the expanded state.\nIt will dispatch the `shown` event with the current expanded state.",
|
|
738
|
+
"inheritedFrom": {
|
|
739
|
+
"name": "AccordionButton",
|
|
740
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
741
|
+
}
|
|
763
742
|
},
|
|
764
743
|
{
|
|
765
744
|
"kind": "method",
|
|
@@ -770,7 +749,11 @@
|
|
|
770
749
|
"text": "void"
|
|
771
750
|
}
|
|
772
751
|
},
|
|
773
|
-
"description": "Dispatches the `shown` event with the current expanded state.\nThe event is cancelable and bubbles.\nThe event detail contains the current expanded state."
|
|
752
|
+
"description": "Dispatches the `shown` event with the current expanded state.\nThe event is cancelable and bubbles.\nThe event detail contains the current expanded state.",
|
|
753
|
+
"inheritedFrom": {
|
|
754
|
+
"name": "AccordionButton",
|
|
755
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
756
|
+
}
|
|
774
757
|
},
|
|
775
758
|
{
|
|
776
759
|
"kind": "method",
|
|
@@ -790,7 +773,11 @@
|
|
|
790
773
|
"description": "The KeyboardEvent fired."
|
|
791
774
|
}
|
|
792
775
|
],
|
|
793
|
-
"description": "Handles the keydown event of the component.\nIf the key pressed is either Enter or Space, it calls the handleHeaderClick method.\nThis allows keyboard users to toggle the accordion button using these keys."
|
|
776
|
+
"description": "Handles the keydown event of the component.\nIf the key pressed is either Enter or Space, it calls the handleHeaderClick method.\nThis allows keyboard users to toggle the accordion button using these keys.",
|
|
777
|
+
"inheritedFrom": {
|
|
778
|
+
"name": "AccordionButton",
|
|
779
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
780
|
+
}
|
|
794
781
|
},
|
|
795
782
|
{
|
|
796
783
|
"kind": "method",
|
|
@@ -809,7 +796,11 @@
|
|
|
809
796
|
"text": "IconNames"
|
|
810
797
|
}
|
|
811
798
|
}
|
|
812
|
-
]
|
|
799
|
+
],
|
|
800
|
+
"inheritedFrom": {
|
|
801
|
+
"name": "AccordionButton",
|
|
802
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
803
|
+
}
|
|
813
804
|
},
|
|
814
805
|
{
|
|
815
806
|
"kind": "method",
|
|
@@ -819,16 +810,10 @@
|
|
|
819
810
|
"type": {
|
|
820
811
|
"text": "TemplateResult | typeof nothing"
|
|
821
812
|
}
|
|
822
|
-
}
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
"name": "renderHeader",
|
|
827
|
-
"privacy": "protected",
|
|
828
|
-
"return": {
|
|
829
|
-
"type": {
|
|
830
|
-
"text": "TemplateResult"
|
|
831
|
-
}
|
|
813
|
+
},
|
|
814
|
+
"inheritedFrom": {
|
|
815
|
+
"name": "AccordionButton",
|
|
816
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
832
817
|
}
|
|
833
818
|
},
|
|
834
819
|
{
|
|
@@ -840,7 +825,11 @@
|
|
|
840
825
|
"text": ""
|
|
841
826
|
}
|
|
842
827
|
},
|
|
843
|
-
"description": "Returns the icon name based on the expanded state.\nIf the accordion button is disabled, it always returns the arrow down icon.\nOtherwise, it returns the arrow up icon if the accordion button is expanded, otherwise the arrow down icon."
|
|
828
|
+
"description": "Returns the icon name based on the expanded state.\nIf the accordion button is disabled, it always returns the arrow down icon.\nOtherwise, it returns the arrow up icon if the accordion button is expanded, otherwise the arrow down icon.",
|
|
829
|
+
"inheritedFrom": {
|
|
830
|
+
"name": "AccordionButton",
|
|
831
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
832
|
+
}
|
|
844
833
|
},
|
|
845
834
|
{
|
|
846
835
|
"kind": "method",
|
|
@@ -850,32 +839,45 @@
|
|
|
850
839
|
"type": {
|
|
851
840
|
"text": "TemplateResult | typeof nothing"
|
|
852
841
|
}
|
|
853
|
-
}
|
|
854
|
-
},
|
|
855
|
-
{
|
|
856
|
-
"kind": "field",
|
|
857
|
-
"name": "disabled",
|
|
858
|
-
"type": {
|
|
859
|
-
"text": "boolean | undefined"
|
|
860
842
|
},
|
|
861
|
-
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
862
|
-
"default": "undefined",
|
|
863
|
-
"attribute": "disabled",
|
|
864
|
-
"reflects": true,
|
|
865
843
|
"inheritedFrom": {
|
|
866
|
-
"name": "
|
|
867
|
-
"module": "
|
|
844
|
+
"name": "AccordionButton",
|
|
845
|
+
"module": "components/accordionbutton/accordionbutton.component.js"
|
|
868
846
|
}
|
|
869
847
|
}
|
|
870
848
|
],
|
|
871
849
|
"events": [
|
|
872
850
|
{
|
|
873
|
-
"description": "(React: onShown) This event is triggered when the accordion
|
|
851
|
+
"description": "(React: onShown) This event is triggered when the accordion is expanded.",
|
|
874
852
|
"name": "shown",
|
|
875
|
-
"reactName": "onShown"
|
|
853
|
+
"reactName": "onShown",
|
|
854
|
+
"inheritedFrom": {
|
|
855
|
+
"name": "AccordionButton",
|
|
856
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
857
|
+
}
|
|
876
858
|
}
|
|
877
859
|
],
|
|
860
|
+
"superclass": {
|
|
861
|
+
"name": "AccordionButton",
|
|
862
|
+
"module": "/src/components/accordionbutton/accordionbutton.component"
|
|
863
|
+
},
|
|
864
|
+
"tagName": "mdc-accordion",
|
|
865
|
+
"jsDoc": "/**\n * An accordion contains a header and body section with a focusable heading that can be expanded or collapsed.\n *\n * The header section contains:\n * - Prefix Icon\n * - Header Text\n * - Leading Slot - Contains the leading controls of the accordion on the header section. This will be placed on the leading side, after the header text.\n * - Trailing Slot - Contains the trailing controls of the accordion on the header section. This will be placed on the trailing side, before the expand/collapse button.\n *\n * The body section contains:\n * - Default slot - User can place any content inside the body section.\n *\n * The accordion can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>\n * There are two types of variants based on that the border styling of the accordion gets reflected. <br/>\n * There are two sizes of accordion, one is small and the other is large.\n * Small size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.\n *\n * By default, the header text in the accordion heading is of H3 with an aria-level of '3'.\n * If this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.\n *\n * An accordion can be disabled, and when it's disabled, the header section will not be clickable.\n *\n * If you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n *\n * If an accordion is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion.\n *\n * @tagname mdc-accordion\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @slot leading-controls - The leading controls slot of the accordion on the header section.\n * @slot trailing-controls - The trailing controls slot of the accordion on the header section.\n * @slot default - The default slot contains the body section of the accordion. User can place anything inside this body slot.\n *\n * @event shown - (React: onShown) This event is triggered when the accordion is expanded.\n *\n * @cssproperty --mdc-accordionbutton-border-color - The border color of the accordion.\n * @cssproperty --mdc-accordionbutton-hover-color - The hover color of the accordion.\n * @cssproperty --mdc-accordionbutton-active-color - The active color of the accordion.\n * @cssproperty --mdc-accordionbutton-disabled-color - The disabled color of the accordion.\n *\n * @csspart header-section - The header section of the accordion.\n * @csspart leading-header - The leading header of the accordion.\n * @csspart trailing-header - The trailing header of the accordion.\n * @csspart trailing-header__button - The trailing header button of the accordion.\n * @csspart body-section - The body section of the accordion.\n */",
|
|
866
|
+
"customElement": true,
|
|
878
867
|
"attributes": [
|
|
868
|
+
{
|
|
869
|
+
"name": "disabled",
|
|
870
|
+
"type": {
|
|
871
|
+
"text": "boolean | undefined"
|
|
872
|
+
},
|
|
873
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
874
|
+
"default": "undefined",
|
|
875
|
+
"fieldName": "disabled",
|
|
876
|
+
"inheritedFrom": {
|
|
877
|
+
"name": "AccordionButton",
|
|
878
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
879
|
+
}
|
|
880
|
+
},
|
|
879
881
|
{
|
|
880
882
|
"name": "size",
|
|
881
883
|
"type": {
|
|
@@ -883,7 +885,11 @@
|
|
|
883
885
|
},
|
|
884
886
|
"description": "The size of the accordion item.",
|
|
885
887
|
"default": "'small'",
|
|
886
|
-
"fieldName": "size"
|
|
888
|
+
"fieldName": "size",
|
|
889
|
+
"inheritedFrom": {
|
|
890
|
+
"name": "AccordionButton",
|
|
891
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
892
|
+
}
|
|
887
893
|
},
|
|
888
894
|
{
|
|
889
895
|
"name": "variant",
|
|
@@ -892,7 +898,11 @@
|
|
|
892
898
|
},
|
|
893
899
|
"description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
|
|
894
900
|
"default": "'default'",
|
|
895
|
-
"fieldName": "variant"
|
|
901
|
+
"fieldName": "variant",
|
|
902
|
+
"inheritedFrom": {
|
|
903
|
+
"name": "AccordionButton",
|
|
904
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
905
|
+
}
|
|
896
906
|
},
|
|
897
907
|
{
|
|
898
908
|
"name": "data-aria-level",
|
|
@@ -901,7 +911,11 @@
|
|
|
901
911
|
},
|
|
902
912
|
"description": "The aria level of the accordion component.",
|
|
903
913
|
"default": "3",
|
|
904
|
-
"fieldName": "dataAriaLevel"
|
|
914
|
+
"fieldName": "dataAriaLevel",
|
|
915
|
+
"inheritedFrom": {
|
|
916
|
+
"name": "AccordionButton",
|
|
917
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
918
|
+
}
|
|
905
919
|
},
|
|
906
920
|
{
|
|
907
921
|
"name": "expanded",
|
|
@@ -910,7 +924,11 @@
|
|
|
910
924
|
},
|
|
911
925
|
"description": "The visibility of the accordion button.",
|
|
912
926
|
"default": "false",
|
|
913
|
-
"fieldName": "expanded"
|
|
927
|
+
"fieldName": "expanded",
|
|
928
|
+
"inheritedFrom": {
|
|
929
|
+
"name": "AccordionButton",
|
|
930
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
931
|
+
}
|
|
914
932
|
},
|
|
915
933
|
{
|
|
916
934
|
"name": "header-text",
|
|
@@ -918,7 +936,11 @@
|
|
|
918
936
|
"text": "string | undefined"
|
|
919
937
|
},
|
|
920
938
|
"description": "The header text of the accordion item.",
|
|
921
|
-
"fieldName": "headerText"
|
|
939
|
+
"fieldName": "headerText",
|
|
940
|
+
"inheritedFrom": {
|
|
941
|
+
"name": "AccordionButton",
|
|
942
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
943
|
+
}
|
|
922
944
|
},
|
|
923
945
|
{
|
|
924
946
|
"name": "prefix-icon",
|
|
@@ -926,35 +948,13 @@
|
|
|
926
948
|
"text": "IconNames | undefined"
|
|
927
949
|
},
|
|
928
950
|
"description": "The leading icon that is displayed before the header text.",
|
|
929
|
-
"fieldName": "prefixIcon"
|
|
930
|
-
},
|
|
931
|
-
{
|
|
932
|
-
"name": "disabled",
|
|
933
|
-
"type": {
|
|
934
|
-
"text": "boolean | undefined"
|
|
935
|
-
},
|
|
936
|
-
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
937
|
-
"default": "undefined",
|
|
938
|
-
"fieldName": "disabled",
|
|
951
|
+
"fieldName": "prefixIcon",
|
|
939
952
|
"inheritedFrom": {
|
|
940
|
-
"name": "
|
|
941
|
-
"module": "src/
|
|
953
|
+
"name": "AccordionButton",
|
|
954
|
+
"module": "src/components/accordionbutton/accordionbutton.component.ts"
|
|
942
955
|
}
|
|
943
956
|
}
|
|
944
|
-
]
|
|
945
|
-
"mixins": [
|
|
946
|
-
{
|
|
947
|
-
"name": "DisabledMixin",
|
|
948
|
-
"module": "/src/utils/mixins/DisabledMixin"
|
|
949
|
-
}
|
|
950
|
-
],
|
|
951
|
-
"superclass": {
|
|
952
|
-
"name": "Component",
|
|
953
|
-
"module": "/src/models"
|
|
954
|
-
},
|
|
955
|
-
"tagName": "mdc-accordionbutton",
|
|
956
|
-
"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 */",
|
|
957
|
-
"customElement": true
|
|
957
|
+
]
|
|
958
958
|
}
|
|
959
959
|
],
|
|
960
960
|
"exports": [
|
|
@@ -962,8 +962,8 @@
|
|
|
962
962
|
"kind": "js",
|
|
963
963
|
"name": "default",
|
|
964
964
|
"declaration": {
|
|
965
|
-
"name": "
|
|
966
|
-
"module": "components/
|
|
965
|
+
"name": "Accordion",
|
|
966
|
+
"module": "components/accordion/accordion.component.js"
|
|
967
967
|
}
|
|
968
968
|
}
|
|
969
969
|
]
|
|
@@ -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
|
],
|