@vaadin/slider 25.1.0-alpha3 → 25.1.0-alpha5
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/package.json +10 -8
- package/src/styles/vaadin-slider-base-styles.js +45 -25
- package/src/vaadin-range-slider.d.ts +76 -1
- package/src/vaadin-range-slider.js +171 -77
- package/src/vaadin-slider-mixin.d.ts +2 -1
- package/src/vaadin-slider-mixin.js +47 -125
- package/src/vaadin-slider.d.ts +72 -1
- package/src/vaadin-slider.js +112 -15
- package/web-types.json +379 -3
- package/web-types.lit.json +157 -3
package/web-types.json
CHANGED
|
@@ -1,15 +1,103 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/slider",
|
|
4
|
-
"version": "25.1.0-
|
|
4
|
+
"version": "25.1.0-alpha5",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
8
8
|
"elements": [
|
|
9
9
|
{
|
|
10
10
|
"name": "vaadin-range-slider",
|
|
11
|
-
"description": "`<vaadin-range-slider>` is a web component that represents a range slider\nfor selecting a subset of the given range.\n\n```html\n<vaadin-range-slider min=\"0\" max=\"100\" step=\"1\"></vaadin-range-slider>\n
|
|
11
|
+
"description": "`<vaadin-range-slider>` is a web component that represents a range slider\nfor selecting a subset of the given range.\n\n```html\n<vaadin-range-slider min=\"0\" max=\"100\" step=\"1\"></vaadin-range-slider>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|-----------------\n`label` | The label element\n`required-indicator` | The required indicator element\n`helper-text` | The helper text element\n`error-message` | The error message element\n`track` | The slider track\n`track-fill` | The filled portion of the track\n`thumb` | The slider thumb (applies to both thumbs)\n`thumb-start` | The start (lower value) thumb\n`thumb-end` | The end (upper value) thumb\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n----------------|-------------\n`disabled` | Set when the slider is disabled\n`readonly` | Set when the slider is read-only\n`focused` | Set when the slider has focus\n`focus-ring` | Set when the slider is focused using the keyboard\n`start-focused` | Set when the start thumb has focus\n`end-focused` | Set when the end thumb has focus\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------|\n`--vaadin-field-default-width` |\n`--vaadin-input-field-error-color` |\n`--vaadin-input-field-error-font-size` |\n`--vaadin-input-field-error-font-weight` |\n`--vaadin-input-field-helper-color` |\n`--vaadin-input-field-helper-font-size` |\n`--vaadin-input-field-helper-font-weight` |\n`--vaadin-input-field-label-color` |\n`--vaadin-input-field-label-font-size` |\n`--vaadin-input-field-label-font-weight` |\n`--vaadin-input-field-required-indicator` |\n`--vaadin-slider-fill-background` |\n`--vaadin-slider-thumb-height` |\n`--vaadin-slider-thumb-width` |\n`--vaadin-slider-track-background` |\n`--vaadin-slider-track-border-radius` |\n`--vaadin-slider-track-height` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
12
12
|
"attributes": [
|
|
13
|
+
{
|
|
14
|
+
"name": "label",
|
|
15
|
+
"description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
|
|
16
|
+
"value": {
|
|
17
|
+
"type": [
|
|
18
|
+
"string",
|
|
19
|
+
"null",
|
|
20
|
+
"undefined"
|
|
21
|
+
]
|
|
22
|
+
}
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
"name": "invalid",
|
|
26
|
+
"description": "Set to true when the field is invalid.",
|
|
27
|
+
"value": {
|
|
28
|
+
"type": [
|
|
29
|
+
"boolean",
|
|
30
|
+
"null",
|
|
31
|
+
"undefined"
|
|
32
|
+
]
|
|
33
|
+
}
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
"name": "manual-validation",
|
|
37
|
+
"description": "Set to true to enable manual validation mode. This mode disables automatic\nconstraint validation, allowing you to control the validation process yourself.\nYou can still trigger constraint validation manually with the `validate()` method\nor use `checkValidity()` to assess the component's validity without affecting\nthe invalid state. In manual validation mode, you can also manipulate\nthe `invalid` property directly through your application logic without conflicts\nwith the component's internal validation.",
|
|
38
|
+
"value": {
|
|
39
|
+
"type": [
|
|
40
|
+
"boolean",
|
|
41
|
+
"null",
|
|
42
|
+
"undefined"
|
|
43
|
+
]
|
|
44
|
+
}
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"name": "required",
|
|
48
|
+
"description": "Specifies that the user must fill in a value.",
|
|
49
|
+
"value": {
|
|
50
|
+
"type": [
|
|
51
|
+
"boolean",
|
|
52
|
+
"null",
|
|
53
|
+
"undefined"
|
|
54
|
+
]
|
|
55
|
+
}
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
"name": "error-message",
|
|
59
|
+
"description": "Error to show when the field is invalid.",
|
|
60
|
+
"value": {
|
|
61
|
+
"type": [
|
|
62
|
+
"string",
|
|
63
|
+
"null",
|
|
64
|
+
"undefined"
|
|
65
|
+
]
|
|
66
|
+
}
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
"name": "helper-text",
|
|
70
|
+
"description": "String used for the helper text.",
|
|
71
|
+
"value": {
|
|
72
|
+
"type": [
|
|
73
|
+
"string",
|
|
74
|
+
"null",
|
|
75
|
+
"undefined"
|
|
76
|
+
]
|
|
77
|
+
}
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
"name": "accessible-name",
|
|
81
|
+
"description": "String used to label the component to screen reader users.",
|
|
82
|
+
"value": {
|
|
83
|
+
"type": [
|
|
84
|
+
"string",
|
|
85
|
+
"null",
|
|
86
|
+
"undefined"
|
|
87
|
+
]
|
|
88
|
+
}
|
|
89
|
+
},
|
|
90
|
+
{
|
|
91
|
+
"name": "accessible-name-ref",
|
|
92
|
+
"description": "Id of the element used as label of the component to screen reader users.",
|
|
93
|
+
"value": {
|
|
94
|
+
"type": [
|
|
95
|
+
"string",
|
|
96
|
+
"null",
|
|
97
|
+
"undefined"
|
|
98
|
+
]
|
|
99
|
+
}
|
|
100
|
+
},
|
|
13
101
|
{
|
|
14
102
|
"name": "disabled",
|
|
15
103
|
"description": "If true, the user cannot interact with this element.",
|
|
@@ -79,6 +167,94 @@
|
|
|
79
167
|
],
|
|
80
168
|
"js": {
|
|
81
169
|
"properties": [
|
|
170
|
+
{
|
|
171
|
+
"name": "label",
|
|
172
|
+
"description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
|
|
173
|
+
"value": {
|
|
174
|
+
"type": [
|
|
175
|
+
"string",
|
|
176
|
+
"null",
|
|
177
|
+
"undefined"
|
|
178
|
+
]
|
|
179
|
+
}
|
|
180
|
+
},
|
|
181
|
+
{
|
|
182
|
+
"name": "invalid",
|
|
183
|
+
"description": "Set to true when the field is invalid.",
|
|
184
|
+
"value": {
|
|
185
|
+
"type": [
|
|
186
|
+
"boolean",
|
|
187
|
+
"null",
|
|
188
|
+
"undefined"
|
|
189
|
+
]
|
|
190
|
+
}
|
|
191
|
+
},
|
|
192
|
+
{
|
|
193
|
+
"name": "manualValidation",
|
|
194
|
+
"description": "Set to true to enable manual validation mode. This mode disables automatic\nconstraint validation, allowing you to control the validation process yourself.\nYou can still trigger constraint validation manually with the `validate()` method\nor use `checkValidity()` to assess the component's validity without affecting\nthe invalid state. In manual validation mode, you can also manipulate\nthe `invalid` property directly through your application logic without conflicts\nwith the component's internal validation.",
|
|
195
|
+
"value": {
|
|
196
|
+
"type": [
|
|
197
|
+
"boolean",
|
|
198
|
+
"null",
|
|
199
|
+
"undefined"
|
|
200
|
+
]
|
|
201
|
+
}
|
|
202
|
+
},
|
|
203
|
+
{
|
|
204
|
+
"name": "required",
|
|
205
|
+
"description": "Specifies that the user must fill in a value.",
|
|
206
|
+
"value": {
|
|
207
|
+
"type": [
|
|
208
|
+
"boolean",
|
|
209
|
+
"null",
|
|
210
|
+
"undefined"
|
|
211
|
+
]
|
|
212
|
+
}
|
|
213
|
+
},
|
|
214
|
+
{
|
|
215
|
+
"name": "errorMessage",
|
|
216
|
+
"description": "Error to show when the field is invalid.",
|
|
217
|
+
"value": {
|
|
218
|
+
"type": [
|
|
219
|
+
"string",
|
|
220
|
+
"null",
|
|
221
|
+
"undefined"
|
|
222
|
+
]
|
|
223
|
+
}
|
|
224
|
+
},
|
|
225
|
+
{
|
|
226
|
+
"name": "helperText",
|
|
227
|
+
"description": "String used for the helper text.",
|
|
228
|
+
"value": {
|
|
229
|
+
"type": [
|
|
230
|
+
"string",
|
|
231
|
+
"null",
|
|
232
|
+
"undefined"
|
|
233
|
+
]
|
|
234
|
+
}
|
|
235
|
+
},
|
|
236
|
+
{
|
|
237
|
+
"name": "accessibleName",
|
|
238
|
+
"description": "String used to label the component to screen reader users.",
|
|
239
|
+
"value": {
|
|
240
|
+
"type": [
|
|
241
|
+
"string",
|
|
242
|
+
"null",
|
|
243
|
+
"undefined"
|
|
244
|
+
]
|
|
245
|
+
}
|
|
246
|
+
},
|
|
247
|
+
{
|
|
248
|
+
"name": "accessibleNameRef",
|
|
249
|
+
"description": "Id of the element used as label of the component to screen reader users.",
|
|
250
|
+
"value": {
|
|
251
|
+
"type": [
|
|
252
|
+
"string",
|
|
253
|
+
"null",
|
|
254
|
+
"undefined"
|
|
255
|
+
]
|
|
256
|
+
}
|
|
257
|
+
},
|
|
82
258
|
{
|
|
83
259
|
"name": "disabled",
|
|
84
260
|
"description": "If true, the user cannot interact with this element.",
|
|
@@ -147,21 +323,121 @@
|
|
|
147
323
|
}
|
|
148
324
|
],
|
|
149
325
|
"events": [
|
|
326
|
+
{
|
|
327
|
+
"name": "validated",
|
|
328
|
+
"description": "Fired whenever the field is validated."
|
|
329
|
+
},
|
|
150
330
|
{
|
|
151
331
|
"name": "change",
|
|
152
332
|
"description": "Fired when the user commits a value change."
|
|
153
333
|
},
|
|
334
|
+
{
|
|
335
|
+
"name": "input",
|
|
336
|
+
"description": "Fired when the slider value changes during user interaction."
|
|
337
|
+
},
|
|
154
338
|
{
|
|
155
339
|
"name": "value-changed",
|
|
156
340
|
"description": "Fired when the `value` property changes."
|
|
341
|
+
},
|
|
342
|
+
{
|
|
343
|
+
"name": "invalid-changed",
|
|
344
|
+
"description": "Fired when the `invalid` property changes."
|
|
157
345
|
}
|
|
158
346
|
]
|
|
159
347
|
}
|
|
160
348
|
},
|
|
161
349
|
{
|
|
162
350
|
"name": "vaadin-slider",
|
|
163
|
-
"description": "`<vaadin-slider>` is a web component that represents a range slider\nfor selecting numerical values within a defined range.\n\n```html\n<vaadin-slider min=\"0\" max=\"100\" step=\"1\"></vaadin-slider>\n
|
|
351
|
+
"description": "`<vaadin-slider>` is a web component that represents a range slider\nfor selecting numerical values within a defined range.\n\n```html\n<vaadin-slider min=\"0\" max=\"100\" step=\"1\"></vaadin-slider>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|-----------------\n`label` | The label element\n`required-indicator` | The required indicator element\n`helper-text` | The helper text element\n`error-message` | The error message element\n`track` | The slider track\n`track-fill` | The filled portion of the track\n`thumb` | The slider thumb\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-------------|-------------\n`disabled` | Set when the slider is disabled\n`readonly` | Set when the slider is read-only\n`focused` | Set when the slider has focus\n`focus-ring` | Set when the slider is focused using the keyboard\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------|\n`--vaadin-field-default-width` |\n`--vaadin-input-field-error-color` |\n`--vaadin-input-field-error-font-size` |\n`--vaadin-input-field-error-font-weight` |\n`--vaadin-input-field-helper-color` |\n`--vaadin-input-field-helper-font-size` |\n`--vaadin-input-field-helper-font-weight` |\n`--vaadin-input-field-label-color` |\n`--vaadin-input-field-label-font-size` |\n`--vaadin-input-field-label-font-weight` |\n`--vaadin-input-field-required-indicator` |\n`--vaadin-slider-fill-background` |\n`--vaadin-slider-thumb-height` |\n`--vaadin-slider-thumb-width` |\n`--vaadin-slider-track-background` |\n`--vaadin-slider-track-border-radius` |\n`--vaadin-slider-track-height` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
164
352
|
"attributes": [
|
|
353
|
+
{
|
|
354
|
+
"name": "label",
|
|
355
|
+
"description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
|
|
356
|
+
"value": {
|
|
357
|
+
"type": [
|
|
358
|
+
"string",
|
|
359
|
+
"null",
|
|
360
|
+
"undefined"
|
|
361
|
+
]
|
|
362
|
+
}
|
|
363
|
+
},
|
|
364
|
+
{
|
|
365
|
+
"name": "invalid",
|
|
366
|
+
"description": "Set to true when the field is invalid.",
|
|
367
|
+
"value": {
|
|
368
|
+
"type": [
|
|
369
|
+
"boolean",
|
|
370
|
+
"null",
|
|
371
|
+
"undefined"
|
|
372
|
+
]
|
|
373
|
+
}
|
|
374
|
+
},
|
|
375
|
+
{
|
|
376
|
+
"name": "manual-validation",
|
|
377
|
+
"description": "Set to true to enable manual validation mode. This mode disables automatic\nconstraint validation, allowing you to control the validation process yourself.\nYou can still trigger constraint validation manually with the `validate()` method\nor use `checkValidity()` to assess the component's validity without affecting\nthe invalid state. In manual validation mode, you can also manipulate\nthe `invalid` property directly through your application logic without conflicts\nwith the component's internal validation.",
|
|
378
|
+
"value": {
|
|
379
|
+
"type": [
|
|
380
|
+
"boolean",
|
|
381
|
+
"null",
|
|
382
|
+
"undefined"
|
|
383
|
+
]
|
|
384
|
+
}
|
|
385
|
+
},
|
|
386
|
+
{
|
|
387
|
+
"name": "required",
|
|
388
|
+
"description": "Specifies that the user must fill in a value.",
|
|
389
|
+
"value": {
|
|
390
|
+
"type": [
|
|
391
|
+
"boolean",
|
|
392
|
+
"null",
|
|
393
|
+
"undefined"
|
|
394
|
+
]
|
|
395
|
+
}
|
|
396
|
+
},
|
|
397
|
+
{
|
|
398
|
+
"name": "error-message",
|
|
399
|
+
"description": "Error to show when the field is invalid.",
|
|
400
|
+
"value": {
|
|
401
|
+
"type": [
|
|
402
|
+
"string",
|
|
403
|
+
"null",
|
|
404
|
+
"undefined"
|
|
405
|
+
]
|
|
406
|
+
}
|
|
407
|
+
},
|
|
408
|
+
{
|
|
409
|
+
"name": "helper-text",
|
|
410
|
+
"description": "String used for the helper text.",
|
|
411
|
+
"value": {
|
|
412
|
+
"type": [
|
|
413
|
+
"string",
|
|
414
|
+
"null",
|
|
415
|
+
"undefined"
|
|
416
|
+
]
|
|
417
|
+
}
|
|
418
|
+
},
|
|
419
|
+
{
|
|
420
|
+
"name": "accessible-name",
|
|
421
|
+
"description": "String used to label the component to screen reader users.",
|
|
422
|
+
"value": {
|
|
423
|
+
"type": [
|
|
424
|
+
"string",
|
|
425
|
+
"null",
|
|
426
|
+
"undefined"
|
|
427
|
+
]
|
|
428
|
+
}
|
|
429
|
+
},
|
|
430
|
+
{
|
|
431
|
+
"name": "accessible-name-ref",
|
|
432
|
+
"description": "Id of the element used as label of the component to screen reader users.",
|
|
433
|
+
"value": {
|
|
434
|
+
"type": [
|
|
435
|
+
"string",
|
|
436
|
+
"null",
|
|
437
|
+
"undefined"
|
|
438
|
+
]
|
|
439
|
+
}
|
|
440
|
+
},
|
|
165
441
|
{
|
|
166
442
|
"name": "disabled",
|
|
167
443
|
"description": "If true, the user cannot interact with this element.",
|
|
@@ -242,6 +518,94 @@
|
|
|
242
518
|
],
|
|
243
519
|
"js": {
|
|
244
520
|
"properties": [
|
|
521
|
+
{
|
|
522
|
+
"name": "label",
|
|
523
|
+
"description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
|
|
524
|
+
"value": {
|
|
525
|
+
"type": [
|
|
526
|
+
"string",
|
|
527
|
+
"null",
|
|
528
|
+
"undefined"
|
|
529
|
+
]
|
|
530
|
+
}
|
|
531
|
+
},
|
|
532
|
+
{
|
|
533
|
+
"name": "invalid",
|
|
534
|
+
"description": "Set to true when the field is invalid.",
|
|
535
|
+
"value": {
|
|
536
|
+
"type": [
|
|
537
|
+
"boolean",
|
|
538
|
+
"null",
|
|
539
|
+
"undefined"
|
|
540
|
+
]
|
|
541
|
+
}
|
|
542
|
+
},
|
|
543
|
+
{
|
|
544
|
+
"name": "manualValidation",
|
|
545
|
+
"description": "Set to true to enable manual validation mode. This mode disables automatic\nconstraint validation, allowing you to control the validation process yourself.\nYou can still trigger constraint validation manually with the `validate()` method\nor use `checkValidity()` to assess the component's validity without affecting\nthe invalid state. In manual validation mode, you can also manipulate\nthe `invalid` property directly through your application logic without conflicts\nwith the component's internal validation.",
|
|
546
|
+
"value": {
|
|
547
|
+
"type": [
|
|
548
|
+
"boolean",
|
|
549
|
+
"null",
|
|
550
|
+
"undefined"
|
|
551
|
+
]
|
|
552
|
+
}
|
|
553
|
+
},
|
|
554
|
+
{
|
|
555
|
+
"name": "required",
|
|
556
|
+
"description": "Specifies that the user must fill in a value.",
|
|
557
|
+
"value": {
|
|
558
|
+
"type": [
|
|
559
|
+
"boolean",
|
|
560
|
+
"null",
|
|
561
|
+
"undefined"
|
|
562
|
+
]
|
|
563
|
+
}
|
|
564
|
+
},
|
|
565
|
+
{
|
|
566
|
+
"name": "errorMessage",
|
|
567
|
+
"description": "Error to show when the field is invalid.",
|
|
568
|
+
"value": {
|
|
569
|
+
"type": [
|
|
570
|
+
"string",
|
|
571
|
+
"null",
|
|
572
|
+
"undefined"
|
|
573
|
+
]
|
|
574
|
+
}
|
|
575
|
+
},
|
|
576
|
+
{
|
|
577
|
+
"name": "helperText",
|
|
578
|
+
"description": "String used for the helper text.",
|
|
579
|
+
"value": {
|
|
580
|
+
"type": [
|
|
581
|
+
"string",
|
|
582
|
+
"null",
|
|
583
|
+
"undefined"
|
|
584
|
+
]
|
|
585
|
+
}
|
|
586
|
+
},
|
|
587
|
+
{
|
|
588
|
+
"name": "accessibleName",
|
|
589
|
+
"description": "String used to label the component to screen reader users.",
|
|
590
|
+
"value": {
|
|
591
|
+
"type": [
|
|
592
|
+
"string",
|
|
593
|
+
"null",
|
|
594
|
+
"undefined"
|
|
595
|
+
]
|
|
596
|
+
}
|
|
597
|
+
},
|
|
598
|
+
{
|
|
599
|
+
"name": "accessibleNameRef",
|
|
600
|
+
"description": "Id of the element used as label of the component to screen reader users.",
|
|
601
|
+
"value": {
|
|
602
|
+
"type": [
|
|
603
|
+
"string",
|
|
604
|
+
"null",
|
|
605
|
+
"undefined"
|
|
606
|
+
]
|
|
607
|
+
}
|
|
608
|
+
},
|
|
245
609
|
{
|
|
246
610
|
"name": "disabled",
|
|
247
611
|
"description": "If true, the user cannot interact with this element.",
|
|
@@ -310,13 +674,25 @@
|
|
|
310
674
|
}
|
|
311
675
|
],
|
|
312
676
|
"events": [
|
|
677
|
+
{
|
|
678
|
+
"name": "validated",
|
|
679
|
+
"description": "Fired whenever the field is validated."
|
|
680
|
+
},
|
|
313
681
|
{
|
|
314
682
|
"name": "change",
|
|
315
683
|
"description": "Fired when the user commits a value change."
|
|
316
684
|
},
|
|
685
|
+
{
|
|
686
|
+
"name": "input",
|
|
687
|
+
"description": "Fired when the slider value changes during user interaction."
|
|
688
|
+
},
|
|
317
689
|
{
|
|
318
690
|
"name": "value-changed",
|
|
319
691
|
"description": "Fired when the `value` property changes."
|
|
692
|
+
},
|
|
693
|
+
{
|
|
694
|
+
"name": "invalid-changed",
|
|
695
|
+
"description": "Fired when the `invalid` property changes."
|
|
320
696
|
}
|
|
321
697
|
]
|
|
322
698
|
}
|