@vaadin/slider 25.1.0-alpha3 → 25.1.0-alpha4
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 +2 -1
- package/src/vaadin-range-slider.js +114 -78
- package/src/vaadin-slider-mixin.d.ts +2 -1
- package/src/vaadin-slider-mixin.js +38 -127
- package/src/vaadin-slider.d.ts +2 -1
- package/src/vaadin-slider.js +62 -15
- package/web-types.json +369 -1
- package/web-types.lit.json +141 -1
package/src/vaadin-slider.d.ts
CHANGED
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
*/
|
|
6
6
|
import { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js';
|
|
7
7
|
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
|
8
|
+
import { FieldMixin } from '@vaadin/field-base/src/field-mixin.js';
|
|
8
9
|
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
9
10
|
import { SliderMixin } from './vaadin-slider-mixin.js';
|
|
10
11
|
|
|
@@ -39,7 +40,7 @@ export interface SliderEventMap extends HTMLElementEventMap, SliderCustomEventMa
|
|
|
39
40
|
* @fires {Event} change - Fired when the user commits a value change.
|
|
40
41
|
* @fires {CustomEvent} value-changed - Fired when the `value` property changes.
|
|
41
42
|
*/
|
|
42
|
-
declare class Slider extends SliderMixin(FocusMixin(ThemableMixin(ElementMixin(HTMLElement)))) {
|
|
43
|
+
declare class Slider extends FieldMixin(SliderMixin(FocusMixin(ThemableMixin(ElementMixin(HTMLElement))))) {
|
|
43
44
|
/**
|
|
44
45
|
* The value of the slider.
|
|
45
46
|
*/
|
package/src/vaadin-slider.js
CHANGED
|
@@ -10,6 +10,8 @@ import { defineCustomElement } from '@vaadin/component-base/src/define.js';
|
|
|
10
10
|
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
|
11
11
|
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
|
|
12
12
|
import { generateUniqueId } from '@vaadin/component-base/src/unique-id-utils.js';
|
|
13
|
+
import { FieldMixin } from '@vaadin/field-base/src/field-mixin.js';
|
|
14
|
+
import { field } from '@vaadin/field-base/src/styles/field-base-styles.js';
|
|
13
15
|
import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
|
|
14
16
|
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
15
17
|
import { sliderStyles } from './styles/vaadin-slider-base-styles.js';
|
|
@@ -29,12 +31,13 @@ import { SliderMixin } from './vaadin-slider-mixin.js';
|
|
|
29
31
|
* @customElement
|
|
30
32
|
* @extends HTMLElement
|
|
31
33
|
* @mixes ElementMixin
|
|
34
|
+
* @mixes FieldMixin
|
|
32
35
|
* @mixes FocusMixin
|
|
33
36
|
* @mixes SliderMixin
|
|
34
37
|
* @mixes ThemableMixin
|
|
35
38
|
*/
|
|
36
|
-
class Slider extends
|
|
37
|
-
FocusMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))),
|
|
39
|
+
class Slider extends FieldMixin(
|
|
40
|
+
SliderMixin(FocusMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement)))))),
|
|
38
41
|
) {
|
|
39
42
|
static get is() {
|
|
40
43
|
return 'vaadin-slider';
|
|
@@ -42,15 +45,27 @@ class Slider extends SliderMixin(
|
|
|
42
45
|
|
|
43
46
|
static get styles() {
|
|
44
47
|
return [
|
|
48
|
+
field,
|
|
45
49
|
sliderStyles,
|
|
46
50
|
css`
|
|
47
51
|
:host([focus-ring]) [part='thumb'] {
|
|
48
|
-
outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
|
|
52
|
+
outline: var(--vaadin-focus-ring-width) var(--_outline-style, solid) var(--vaadin-focus-ring-color);
|
|
49
53
|
outline-offset: 1px;
|
|
50
54
|
}
|
|
51
55
|
|
|
52
|
-
|
|
53
|
-
|
|
56
|
+
#controls {
|
|
57
|
+
grid-template-columns:
|
|
58
|
+
[track-start fill-start]
|
|
59
|
+
calc(var(--value) * var(--_track-width))
|
|
60
|
+
[fill-end thumb1]
|
|
61
|
+
var(--_thumb-width)
|
|
62
|
+
calc((1 - var(--value)) * var(--_track-width))
|
|
63
|
+
[track-end];
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
[part='track-fill'] {
|
|
67
|
+
border-start-start-radius: inherit;
|
|
68
|
+
border-end-start-radius: inherit;
|
|
54
69
|
}
|
|
55
70
|
`,
|
|
56
71
|
];
|
|
@@ -60,6 +75,10 @@ class Slider extends SliderMixin(
|
|
|
60
75
|
return 'sliderComponent';
|
|
61
76
|
}
|
|
62
77
|
|
|
78
|
+
static get lumoInjector() {
|
|
79
|
+
return { ...super.lumoInjector, includeBaseStyles: true };
|
|
80
|
+
}
|
|
81
|
+
|
|
63
82
|
static get properties() {
|
|
64
83
|
return {
|
|
65
84
|
/**
|
|
@@ -80,17 +99,28 @@ class Slider extends SliderMixin(
|
|
|
80
99
|
const percent = this.__getPercentFromValue(value);
|
|
81
100
|
|
|
82
101
|
return html`
|
|
83
|
-
<div
|
|
84
|
-
<div
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
102
|
+
<div class="vaadin-slider-container">
|
|
103
|
+
<div part="label" @click="${this.focus}">
|
|
104
|
+
<slot name="label"></slot>
|
|
105
|
+
<span part="required-indicator" aria-hidden="true"></span>
|
|
106
|
+
</div>
|
|
107
|
+
|
|
108
|
+
<div id="controls" style="${styleMap({ '--value': percent })}">
|
|
109
|
+
<div part="track">
|
|
110
|
+
<div part="track-fill"></div>
|
|
111
|
+
</div>
|
|
112
|
+
<div part="thumb"></div>
|
|
113
|
+
<slot name="input"></slot>
|
|
114
|
+
</div>
|
|
115
|
+
|
|
116
|
+
<div part="helper-text">
|
|
117
|
+
<slot name="helper"></slot>
|
|
118
|
+
</div>
|
|
119
|
+
|
|
120
|
+
<div part="error-message">
|
|
121
|
+
<slot name="error-message"></slot>
|
|
122
|
+
</div>
|
|
91
123
|
</div>
|
|
92
|
-
<div part="thumb" style="${styleMap({ insetInlineStart: `${percent}%` })}"></div>
|
|
93
|
-
<slot name="input"></slot>
|
|
94
124
|
`;
|
|
95
125
|
}
|
|
96
126
|
|
|
@@ -107,6 +137,7 @@ class Slider extends SliderMixin(
|
|
|
107
137
|
|
|
108
138
|
const input = this.querySelector('[slot="input"]');
|
|
109
139
|
this._inputElement = input;
|
|
140
|
+
this.ariaTarget = input;
|
|
110
141
|
}
|
|
111
142
|
|
|
112
143
|
/**
|
|
@@ -168,6 +199,16 @@ class Slider extends SliderMixin(
|
|
|
168
199
|
super.focus(options);
|
|
169
200
|
}
|
|
170
201
|
|
|
202
|
+
/**
|
|
203
|
+
* @protected
|
|
204
|
+
* @override
|
|
205
|
+
*/
|
|
206
|
+
blur() {
|
|
207
|
+
if (this._inputElement) {
|
|
208
|
+
this._inputElement.blur();
|
|
209
|
+
}
|
|
210
|
+
}
|
|
211
|
+
|
|
171
212
|
/**
|
|
172
213
|
* @private
|
|
173
214
|
* @override
|
|
@@ -176,6 +217,12 @@ class Slider extends SliderMixin(
|
|
|
176
217
|
this.value = this.__value[0];
|
|
177
218
|
}
|
|
178
219
|
|
|
220
|
+
/** @private */
|
|
221
|
+
__onInput(event) {
|
|
222
|
+
this.__updateValue(event.target.value, 0);
|
|
223
|
+
this.__commitValue();
|
|
224
|
+
}
|
|
225
|
+
|
|
179
226
|
/** @private */
|
|
180
227
|
__onKeyDown(event) {
|
|
181
228
|
const arrowKeys = ['ArrowLeft', 'ArrowDown', 'ArrowRight', 'ArrowUp'];
|
package/web-types.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
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-alpha4",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -10,6 +10,94 @@
|
|
|
10
10
|
"name": "vaadin-range-slider",
|
|
11
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```",
|
|
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,6 +323,10 @@
|
|
|
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."
|
|
@@ -154,6 +334,10 @@
|
|
|
154
334
|
{
|
|
155
335
|
"name": "value-changed",
|
|
156
336
|
"description": "Fired when the `value` property changes."
|
|
337
|
+
},
|
|
338
|
+
{
|
|
339
|
+
"name": "invalid-changed",
|
|
340
|
+
"description": "Fired when the `invalid` property changes."
|
|
157
341
|
}
|
|
158
342
|
]
|
|
159
343
|
}
|
|
@@ -162,6 +346,94 @@
|
|
|
162
346
|
"name": "vaadin-slider",
|
|
163
347
|
"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```",
|
|
164
348
|
"attributes": [
|
|
349
|
+
{
|
|
350
|
+
"name": "label",
|
|
351
|
+
"description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
|
|
352
|
+
"value": {
|
|
353
|
+
"type": [
|
|
354
|
+
"string",
|
|
355
|
+
"null",
|
|
356
|
+
"undefined"
|
|
357
|
+
]
|
|
358
|
+
}
|
|
359
|
+
},
|
|
360
|
+
{
|
|
361
|
+
"name": "invalid",
|
|
362
|
+
"description": "Set to true when the field is invalid.",
|
|
363
|
+
"value": {
|
|
364
|
+
"type": [
|
|
365
|
+
"boolean",
|
|
366
|
+
"null",
|
|
367
|
+
"undefined"
|
|
368
|
+
]
|
|
369
|
+
}
|
|
370
|
+
},
|
|
371
|
+
{
|
|
372
|
+
"name": "manual-validation",
|
|
373
|
+
"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.",
|
|
374
|
+
"value": {
|
|
375
|
+
"type": [
|
|
376
|
+
"boolean",
|
|
377
|
+
"null",
|
|
378
|
+
"undefined"
|
|
379
|
+
]
|
|
380
|
+
}
|
|
381
|
+
},
|
|
382
|
+
{
|
|
383
|
+
"name": "required",
|
|
384
|
+
"description": "Specifies that the user must fill in a value.",
|
|
385
|
+
"value": {
|
|
386
|
+
"type": [
|
|
387
|
+
"boolean",
|
|
388
|
+
"null",
|
|
389
|
+
"undefined"
|
|
390
|
+
]
|
|
391
|
+
}
|
|
392
|
+
},
|
|
393
|
+
{
|
|
394
|
+
"name": "error-message",
|
|
395
|
+
"description": "Error to show when the field is invalid.",
|
|
396
|
+
"value": {
|
|
397
|
+
"type": [
|
|
398
|
+
"string",
|
|
399
|
+
"null",
|
|
400
|
+
"undefined"
|
|
401
|
+
]
|
|
402
|
+
}
|
|
403
|
+
},
|
|
404
|
+
{
|
|
405
|
+
"name": "helper-text",
|
|
406
|
+
"description": "String used for the helper text.",
|
|
407
|
+
"value": {
|
|
408
|
+
"type": [
|
|
409
|
+
"string",
|
|
410
|
+
"null",
|
|
411
|
+
"undefined"
|
|
412
|
+
]
|
|
413
|
+
}
|
|
414
|
+
},
|
|
415
|
+
{
|
|
416
|
+
"name": "accessible-name",
|
|
417
|
+
"description": "String used to label the component to screen reader users.",
|
|
418
|
+
"value": {
|
|
419
|
+
"type": [
|
|
420
|
+
"string",
|
|
421
|
+
"null",
|
|
422
|
+
"undefined"
|
|
423
|
+
]
|
|
424
|
+
}
|
|
425
|
+
},
|
|
426
|
+
{
|
|
427
|
+
"name": "accessible-name-ref",
|
|
428
|
+
"description": "Id of the element used as label of the component to screen reader users.",
|
|
429
|
+
"value": {
|
|
430
|
+
"type": [
|
|
431
|
+
"string",
|
|
432
|
+
"null",
|
|
433
|
+
"undefined"
|
|
434
|
+
]
|
|
435
|
+
}
|
|
436
|
+
},
|
|
165
437
|
{
|
|
166
438
|
"name": "disabled",
|
|
167
439
|
"description": "If true, the user cannot interact with this element.",
|
|
@@ -242,6 +514,94 @@
|
|
|
242
514
|
],
|
|
243
515
|
"js": {
|
|
244
516
|
"properties": [
|
|
517
|
+
{
|
|
518
|
+
"name": "label",
|
|
519
|
+
"description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
|
|
520
|
+
"value": {
|
|
521
|
+
"type": [
|
|
522
|
+
"string",
|
|
523
|
+
"null",
|
|
524
|
+
"undefined"
|
|
525
|
+
]
|
|
526
|
+
}
|
|
527
|
+
},
|
|
528
|
+
{
|
|
529
|
+
"name": "invalid",
|
|
530
|
+
"description": "Set to true when the field is invalid.",
|
|
531
|
+
"value": {
|
|
532
|
+
"type": [
|
|
533
|
+
"boolean",
|
|
534
|
+
"null",
|
|
535
|
+
"undefined"
|
|
536
|
+
]
|
|
537
|
+
}
|
|
538
|
+
},
|
|
539
|
+
{
|
|
540
|
+
"name": "manualValidation",
|
|
541
|
+
"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.",
|
|
542
|
+
"value": {
|
|
543
|
+
"type": [
|
|
544
|
+
"boolean",
|
|
545
|
+
"null",
|
|
546
|
+
"undefined"
|
|
547
|
+
]
|
|
548
|
+
}
|
|
549
|
+
},
|
|
550
|
+
{
|
|
551
|
+
"name": "required",
|
|
552
|
+
"description": "Specifies that the user must fill in a value.",
|
|
553
|
+
"value": {
|
|
554
|
+
"type": [
|
|
555
|
+
"boolean",
|
|
556
|
+
"null",
|
|
557
|
+
"undefined"
|
|
558
|
+
]
|
|
559
|
+
}
|
|
560
|
+
},
|
|
561
|
+
{
|
|
562
|
+
"name": "errorMessage",
|
|
563
|
+
"description": "Error to show when the field is invalid.",
|
|
564
|
+
"value": {
|
|
565
|
+
"type": [
|
|
566
|
+
"string",
|
|
567
|
+
"null",
|
|
568
|
+
"undefined"
|
|
569
|
+
]
|
|
570
|
+
}
|
|
571
|
+
},
|
|
572
|
+
{
|
|
573
|
+
"name": "helperText",
|
|
574
|
+
"description": "String used for the helper text.",
|
|
575
|
+
"value": {
|
|
576
|
+
"type": [
|
|
577
|
+
"string",
|
|
578
|
+
"null",
|
|
579
|
+
"undefined"
|
|
580
|
+
]
|
|
581
|
+
}
|
|
582
|
+
},
|
|
583
|
+
{
|
|
584
|
+
"name": "accessibleName",
|
|
585
|
+
"description": "String used to label the component to screen reader users.",
|
|
586
|
+
"value": {
|
|
587
|
+
"type": [
|
|
588
|
+
"string",
|
|
589
|
+
"null",
|
|
590
|
+
"undefined"
|
|
591
|
+
]
|
|
592
|
+
}
|
|
593
|
+
},
|
|
594
|
+
{
|
|
595
|
+
"name": "accessibleNameRef",
|
|
596
|
+
"description": "Id of the element used as label of the component to screen reader users.",
|
|
597
|
+
"value": {
|
|
598
|
+
"type": [
|
|
599
|
+
"string",
|
|
600
|
+
"null",
|
|
601
|
+
"undefined"
|
|
602
|
+
]
|
|
603
|
+
}
|
|
604
|
+
},
|
|
245
605
|
{
|
|
246
606
|
"name": "disabled",
|
|
247
607
|
"description": "If true, the user cannot interact with this element.",
|
|
@@ -310,6 +670,10 @@
|
|
|
310
670
|
}
|
|
311
671
|
],
|
|
312
672
|
"events": [
|
|
673
|
+
{
|
|
674
|
+
"name": "validated",
|
|
675
|
+
"description": "Fired whenever the field is validated."
|
|
676
|
+
},
|
|
313
677
|
{
|
|
314
678
|
"name": "change",
|
|
315
679
|
"description": "Fired when the user commits a value change."
|
|
@@ -317,6 +681,10 @@
|
|
|
317
681
|
{
|
|
318
682
|
"name": "value-changed",
|
|
319
683
|
"description": "Fired when the `value` property changes."
|
|
684
|
+
},
|
|
685
|
+
{
|
|
686
|
+
"name": "invalid-changed",
|
|
687
|
+
"description": "Fired when the `invalid` property changes."
|
|
320
688
|
}
|
|
321
689
|
]
|
|
322
690
|
}
|