@vaadin/checkbox-group 23.2.0-dev.8a7678b70 → 23.3.0-alpha1
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/README.md +3 -3
- package/package.json +14 -8
- package/src/vaadin-checkbox-group.d.ts +15 -7
- package/src/vaadin-checkbox-group.js +20 -14
- package/web-types.json +188 -0
- package/web-types.lit.json +97 -0
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
A web component that allows the user to choose several items from a group of binary choices.
|
|
4
4
|
|
|
5
|
-
[Documentation + Live Demo ↗](https://vaadin.com/docs/latest/
|
|
5
|
+
[Documentation + Live Demo ↗](https://vaadin.com/docs/latest/components/checkbox)
|
|
6
6
|
|
|
7
7
|
[](https://www.npmjs.com/package/@vaadin/checkbox-group)
|
|
8
8
|
[](https://discord.gg/PHmkCKC)
|
|
@@ -32,7 +32,7 @@ import '@vaadin/checkbox-group';
|
|
|
32
32
|
|
|
33
33
|
## Themes
|
|
34
34
|
|
|
35
|
-
Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/
|
|
35
|
+
Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
|
|
36
36
|
The [main entrypoint](https://github.com/vaadin/web-components/blob/master/packages/checkbox-group/vaadin-checkbox-group.js) of the package uses the Lumo theme.
|
|
37
37
|
|
|
38
38
|
To use the Material theme, import the component from the `theme/material` folder:
|
|
@@ -55,7 +55,7 @@ import '@vaadin/checkbox-group/src/vaadin-checkbox-group.js';
|
|
|
55
55
|
|
|
56
56
|
## Contributing
|
|
57
57
|
|
|
58
|
-
Read the [contributing guide](https://vaadin.com/docs/latest/
|
|
58
|
+
Read the [contributing guide](https://vaadin.com/docs/latest/contributing/overview) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
|
|
59
59
|
|
|
60
60
|
## License
|
|
61
61
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/checkbox-group",
|
|
3
|
-
"version": "23.
|
|
3
|
+
"version": "23.3.0-alpha1",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -23,7 +23,9 @@
|
|
|
23
23
|
"src",
|
|
24
24
|
"theme",
|
|
25
25
|
"vaadin-*.d.ts",
|
|
26
|
-
"vaadin-*.js"
|
|
26
|
+
"vaadin-*.js",
|
|
27
|
+
"web-types.json",
|
|
28
|
+
"web-types.lit.json"
|
|
27
29
|
],
|
|
28
30
|
"keywords": [
|
|
29
31
|
"Vaadin",
|
|
@@ -34,16 +36,20 @@
|
|
|
34
36
|
],
|
|
35
37
|
"dependencies": {
|
|
36
38
|
"@polymer/polymer": "^3.0.0",
|
|
37
|
-
"@vaadin/checkbox": "23.
|
|
38
|
-
"@vaadin/component-base": "23.
|
|
39
|
-
"@vaadin/vaadin-lumo-styles": "23.
|
|
40
|
-
"@vaadin/vaadin-material-styles": "23.
|
|
41
|
-
"@vaadin/vaadin-themable-mixin": "23.
|
|
39
|
+
"@vaadin/checkbox": "23.3.0-alpha1",
|
|
40
|
+
"@vaadin/component-base": "23.3.0-alpha1",
|
|
41
|
+
"@vaadin/vaadin-lumo-styles": "23.3.0-alpha1",
|
|
42
|
+
"@vaadin/vaadin-material-styles": "23.3.0-alpha1",
|
|
43
|
+
"@vaadin/vaadin-themable-mixin": "23.3.0-alpha1"
|
|
42
44
|
},
|
|
43
45
|
"devDependencies": {
|
|
44
46
|
"@esm-bundle/chai": "^4.3.4",
|
|
45
47
|
"@vaadin/testing-helpers": "^0.3.2",
|
|
46
48
|
"sinon": "^13.0.2"
|
|
47
49
|
},
|
|
48
|
-
"
|
|
50
|
+
"web-types": [
|
|
51
|
+
"web-types.json",
|
|
52
|
+
"web-types.lit.json"
|
|
53
|
+
],
|
|
54
|
+
"gitHead": "beabc527d4b1274eb798ff701d406fed45cfe638"
|
|
49
55
|
}
|
|
@@ -19,10 +19,17 @@ export type CheckboxGroupInvalidChangedEvent = CustomEvent<{ value: boolean }>;
|
|
|
19
19
|
*/
|
|
20
20
|
export type CheckboxGroupValueChangedEvent = CustomEvent<{ value: string[] }>;
|
|
21
21
|
|
|
22
|
+
/**
|
|
23
|
+
* Fired whenever the field is validated.
|
|
24
|
+
*/
|
|
25
|
+
export type CheckboxGroupValidatedEvent = CustomEvent<{ valid: boolean }>;
|
|
26
|
+
|
|
22
27
|
export interface CheckboxGroupCustomEventMap {
|
|
23
28
|
'invalid-changed': CheckboxGroupInvalidChangedEvent;
|
|
24
29
|
|
|
25
30
|
'value-changed': CheckboxGroupValueChangedEvent;
|
|
31
|
+
|
|
32
|
+
validated: CheckboxGroupValidatedEvent;
|
|
26
33
|
}
|
|
27
34
|
|
|
28
35
|
export interface CheckboxGroupEventMap extends HTMLElementEventMap, CheckboxGroupCustomEventMap {}
|
|
@@ -62,30 +69,31 @@ export interface CheckboxGroupEventMap extends HTMLElementEventMap, CheckboxGrou
|
|
|
62
69
|
* `has-helper` | Set when the element has helper text | :host
|
|
63
70
|
* `has-error-message` | Set when the element has an error message | :host
|
|
64
71
|
*
|
|
65
|
-
* See [Styling Components](https://vaadin.com/docs/latest/
|
|
72
|
+
* See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
|
|
66
73
|
*
|
|
67
74
|
* @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
|
|
68
75
|
* @fires {CustomEvent} value-changed - Fired when the `value` property changes.
|
|
76
|
+
* @fires {CustomEvent} validated - Fired whenever the field is validated.
|
|
69
77
|
*/
|
|
70
78
|
declare class CheckboxGroup extends FieldMixin(FocusMixin(DisabledMixin(ElementMixin(ThemableMixin(HTMLElement))))) {
|
|
71
79
|
/**
|
|
72
|
-
*
|
|
73
|
-
*
|
|
74
|
-
* array
|
|
75
|
-
*
|
|
80
|
+
* An array containing values of the currently checked checkboxes.
|
|
81
|
+
*
|
|
82
|
+
* The array is immutable so toggling checkboxes always results in
|
|
83
|
+
* creating a new array.
|
|
76
84
|
*/
|
|
77
85
|
value: string[];
|
|
78
86
|
|
|
79
87
|
addEventListener<K extends keyof CheckboxGroupEventMap>(
|
|
80
88
|
type: K,
|
|
81
89
|
listener: (this: CheckboxGroup, ev: CheckboxGroupEventMap[K]) => void,
|
|
82
|
-
options?:
|
|
90
|
+
options?: AddEventListenerOptions | boolean,
|
|
83
91
|
): void;
|
|
84
92
|
|
|
85
93
|
removeEventListener<K extends keyof CheckboxGroupEventMap>(
|
|
86
94
|
type: K,
|
|
87
95
|
listener: (this: CheckboxGroup, ev: CheckboxGroupEventMap[K]) => void,
|
|
88
|
-
options?:
|
|
96
|
+
options?: EventListenerOptions | boolean,
|
|
89
97
|
): void;
|
|
90
98
|
}
|
|
91
99
|
|
|
@@ -9,6 +9,7 @@ import { Checkbox } from '@vaadin/checkbox/src/vaadin-checkbox.js';
|
|
|
9
9
|
import { DisabledMixin } from '@vaadin/component-base/src/disabled-mixin.js';
|
|
10
10
|
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
|
11
11
|
import { FocusMixin } from '@vaadin/component-base/src/focus-mixin.js';
|
|
12
|
+
import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
|
|
12
13
|
import { FieldMixin } from '@vaadin/field-base/src/field-mixin.js';
|
|
13
14
|
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
14
15
|
|
|
@@ -47,10 +48,11 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
|
|
|
47
48
|
* `has-helper` | Set when the element has helper text | :host
|
|
48
49
|
* `has-error-message` | Set when the element has an error message | :host
|
|
49
50
|
*
|
|
50
|
-
* See [Styling Components](https://vaadin.com/docs/latest/
|
|
51
|
+
* See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
|
|
51
52
|
*
|
|
52
53
|
* @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
|
|
53
54
|
* @fires {CustomEvent} value-changed - Fired when the `value` property changes.
|
|
55
|
+
* @fires {CustomEvent} validated - Fired whenever the field is validated.
|
|
54
56
|
*
|
|
55
57
|
* @extends HTMLElement
|
|
56
58
|
* @mixes ThemableMixin
|
|
@@ -110,30 +112,30 @@ class CheckboxGroup extends FieldMixin(FocusMixin(DisabledMixin(ElementMixin(The
|
|
|
110
112
|
<slot name="error-message"></slot>
|
|
111
113
|
</div>
|
|
112
114
|
</div>
|
|
115
|
+
|
|
116
|
+
<slot name="tooltip"></slot>
|
|
113
117
|
`;
|
|
114
118
|
}
|
|
115
119
|
|
|
116
120
|
static get properties() {
|
|
117
121
|
return {
|
|
118
122
|
/**
|
|
119
|
-
*
|
|
120
|
-
*
|
|
121
|
-
* array
|
|
122
|
-
*
|
|
123
|
+
* An array containing values of the currently checked checkboxes.
|
|
124
|
+
*
|
|
125
|
+
* The array is immutable so toggling checkboxes always results in
|
|
126
|
+
* creating a new array.
|
|
127
|
+
*
|
|
123
128
|
* @type {!Array<!string>}
|
|
124
129
|
*/
|
|
125
130
|
value: {
|
|
126
131
|
type: Array,
|
|
127
132
|
value: () => [],
|
|
128
133
|
notify: true,
|
|
134
|
+
observer: '__valueChanged',
|
|
129
135
|
},
|
|
130
136
|
};
|
|
131
137
|
}
|
|
132
138
|
|
|
133
|
-
static get observers() {
|
|
134
|
-
return ['__valueChanged(value, value.splices)'];
|
|
135
|
-
}
|
|
136
|
-
|
|
137
139
|
constructor() {
|
|
138
140
|
super();
|
|
139
141
|
|
|
@@ -160,6 +162,9 @@ class CheckboxGroup extends FieldMixin(FocusMixin(DisabledMixin(ElementMixin(The
|
|
|
160
162
|
|
|
161
163
|
this.__warnOfCheckboxesWithoutValue(addedCheckboxes);
|
|
162
164
|
});
|
|
165
|
+
|
|
166
|
+
this._tooltipController = new TooltipController(this);
|
|
167
|
+
this.addController(this._tooltipController);
|
|
163
168
|
}
|
|
164
169
|
|
|
165
170
|
/**
|
|
@@ -304,23 +309,24 @@ class CheckboxGroup extends FieldMixin(FocusMixin(DisabledMixin(ElementMixin(The
|
|
|
304
309
|
|
|
305
310
|
/**
|
|
306
311
|
* @param {string | null | undefined} value
|
|
312
|
+
* @param {string | null | undefined} oldValue
|
|
307
313
|
* @private
|
|
308
314
|
*/
|
|
309
|
-
__valueChanged(value) {
|
|
315
|
+
__valueChanged(value, oldValue) {
|
|
310
316
|
// Setting initial value to empty array, skip validation
|
|
311
|
-
if (value.length === 0 &&
|
|
317
|
+
if (value.length === 0 && oldValue === undefined) {
|
|
312
318
|
return;
|
|
313
319
|
}
|
|
314
320
|
|
|
315
|
-
this.__oldValue = value;
|
|
316
|
-
|
|
317
321
|
this.toggleAttribute('has-value', value.length > 0);
|
|
318
322
|
|
|
319
323
|
this.__checkboxes.forEach((checkbox) => {
|
|
320
324
|
checkbox.checked = value.includes(checkbox.value);
|
|
321
325
|
});
|
|
322
326
|
|
|
323
|
-
|
|
327
|
+
if (oldValue !== undefined) {
|
|
328
|
+
this.validate();
|
|
329
|
+
}
|
|
324
330
|
}
|
|
325
331
|
|
|
326
332
|
/**
|
package/web-types.json
ADDED
|
@@ -0,0 +1,188 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://json.schemastore.org/web-types",
|
|
3
|
+
"name": "@vaadin/checkbox-group",
|
|
4
|
+
"version": "23.3.0-alpha1",
|
|
5
|
+
"description-markup": "markdown",
|
|
6
|
+
"contributions": {
|
|
7
|
+
"html": {
|
|
8
|
+
"elements": [
|
|
9
|
+
{
|
|
10
|
+
"name": "vaadin-checkbox-group",
|
|
11
|
+
"description": "`<vaadin-checkbox-group>` is a web component that allows the user to choose several items from a group of binary choices.\n\n```html\n<vaadin-checkbox-group label=\"Preferred language of contact:\">\n <vaadin-checkbox value=\"en\" label=\"English\"></vaadin-checkbox>\n <vaadin-checkbox value=\"fr\" label=\"Français\"></vaadin-checkbox>\n <vaadin-checkbox value=\"de\" label=\"Deutsch\"></vaadin-checkbox>\n</vaadin-checkbox-group>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|----------------\n`label` | The slotted label element wrapper\n`group-field` | The checkbox elements wrapper\n`helper-text` | The slotted helper text element wrapper\n`error-message` | The slotted error message element wrapper\n`required-indicator` | The `required` state indicator element\n\nThe following state attributes are available for styling:\n\nAttribute | Description | Part name\n--------------------|-------------------------------------------|------------\n`disabled` | Set when the element is disabled | :host\n`invalid` | Set when the element is invalid | :host\n`focused` | Set when the element is focused | :host\n`has-label` | Set when the element has a label | :host\n`has-value` | Set when the element has a value | :host\n`has-helper` | Set when the element has helper text | :host\n`has-error-message` | Set when the element has an error message | :host\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
|
|
12
|
+
"attributes": [
|
|
13
|
+
{
|
|
14
|
+
"name": "disabled",
|
|
15
|
+
"description": "If true, the user cannot interact with this element.",
|
|
16
|
+
"value": {
|
|
17
|
+
"type": [
|
|
18
|
+
"boolean",
|
|
19
|
+
"null",
|
|
20
|
+
"undefined"
|
|
21
|
+
]
|
|
22
|
+
}
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
"name": "label",
|
|
26
|
+
"description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
|
|
27
|
+
"value": {
|
|
28
|
+
"type": [
|
|
29
|
+
"string",
|
|
30
|
+
"null",
|
|
31
|
+
"undefined"
|
|
32
|
+
]
|
|
33
|
+
}
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
"name": "invalid",
|
|
37
|
+
"description": "Set to true when the field is invalid.",
|
|
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": "theme",
|
|
81
|
+
"description": "The theme variants to apply to the component.",
|
|
82
|
+
"value": {
|
|
83
|
+
"type": [
|
|
84
|
+
"string",
|
|
85
|
+
"null",
|
|
86
|
+
"undefined"
|
|
87
|
+
]
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
],
|
|
91
|
+
"js": {
|
|
92
|
+
"properties": [
|
|
93
|
+
{
|
|
94
|
+
"name": "disabled",
|
|
95
|
+
"description": "If true, the user cannot interact with this element.",
|
|
96
|
+
"value": {
|
|
97
|
+
"type": [
|
|
98
|
+
"boolean",
|
|
99
|
+
"null",
|
|
100
|
+
"undefined"
|
|
101
|
+
]
|
|
102
|
+
}
|
|
103
|
+
},
|
|
104
|
+
{
|
|
105
|
+
"name": "label",
|
|
106
|
+
"description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
|
|
107
|
+
"value": {
|
|
108
|
+
"type": [
|
|
109
|
+
"string",
|
|
110
|
+
"null",
|
|
111
|
+
"undefined"
|
|
112
|
+
]
|
|
113
|
+
}
|
|
114
|
+
},
|
|
115
|
+
{
|
|
116
|
+
"name": "invalid",
|
|
117
|
+
"description": "Set to true when the field is invalid.",
|
|
118
|
+
"value": {
|
|
119
|
+
"type": [
|
|
120
|
+
"boolean",
|
|
121
|
+
"null",
|
|
122
|
+
"undefined"
|
|
123
|
+
]
|
|
124
|
+
}
|
|
125
|
+
},
|
|
126
|
+
{
|
|
127
|
+
"name": "required",
|
|
128
|
+
"description": "Specifies that the user must fill in a value.",
|
|
129
|
+
"value": {
|
|
130
|
+
"type": [
|
|
131
|
+
"boolean",
|
|
132
|
+
"null",
|
|
133
|
+
"undefined"
|
|
134
|
+
]
|
|
135
|
+
}
|
|
136
|
+
},
|
|
137
|
+
{
|
|
138
|
+
"name": "errorMessage",
|
|
139
|
+
"description": "Error to show when the field is invalid.",
|
|
140
|
+
"value": {
|
|
141
|
+
"type": [
|
|
142
|
+
"string",
|
|
143
|
+
"null",
|
|
144
|
+
"undefined"
|
|
145
|
+
]
|
|
146
|
+
}
|
|
147
|
+
},
|
|
148
|
+
{
|
|
149
|
+
"name": "helperText",
|
|
150
|
+
"description": "String used for the helper text.",
|
|
151
|
+
"value": {
|
|
152
|
+
"type": [
|
|
153
|
+
"string",
|
|
154
|
+
"null",
|
|
155
|
+
"undefined"
|
|
156
|
+
]
|
|
157
|
+
}
|
|
158
|
+
},
|
|
159
|
+
{
|
|
160
|
+
"name": "value",
|
|
161
|
+
"description": "An array containing values of the currently checked checkboxes.\n\nThe array is immutable so toggling checkboxes always results in\ncreating a new array.",
|
|
162
|
+
"value": {
|
|
163
|
+
"type": [
|
|
164
|
+
"Array.<string>"
|
|
165
|
+
]
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
],
|
|
169
|
+
"events": [
|
|
170
|
+
{
|
|
171
|
+
"name": "validated",
|
|
172
|
+
"description": "Fired whenever the field is validated."
|
|
173
|
+
},
|
|
174
|
+
{
|
|
175
|
+
"name": "value-changed",
|
|
176
|
+
"description": "Fired when the `value` property changes."
|
|
177
|
+
},
|
|
178
|
+
{
|
|
179
|
+
"name": "invalid-changed",
|
|
180
|
+
"description": "Fired when the `invalid` property changes."
|
|
181
|
+
}
|
|
182
|
+
]
|
|
183
|
+
}
|
|
184
|
+
}
|
|
185
|
+
]
|
|
186
|
+
}
|
|
187
|
+
}
|
|
188
|
+
}
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://json.schemastore.org/web-types",
|
|
3
|
+
"name": "@vaadin/checkbox-group",
|
|
4
|
+
"version": "23.3.0-alpha1",
|
|
5
|
+
"description-markup": "markdown",
|
|
6
|
+
"framework": "lit",
|
|
7
|
+
"framework-config": {
|
|
8
|
+
"enable-when": {
|
|
9
|
+
"node-packages": [
|
|
10
|
+
"lit"
|
|
11
|
+
]
|
|
12
|
+
}
|
|
13
|
+
},
|
|
14
|
+
"contributions": {
|
|
15
|
+
"html": {
|
|
16
|
+
"elements": [
|
|
17
|
+
{
|
|
18
|
+
"name": "vaadin-checkbox-group",
|
|
19
|
+
"description": "`<vaadin-checkbox-group>` is a web component that allows the user to choose several items from a group of binary choices.\n\n```html\n<vaadin-checkbox-group label=\"Preferred language of contact:\">\n <vaadin-checkbox value=\"en\" label=\"English\"></vaadin-checkbox>\n <vaadin-checkbox value=\"fr\" label=\"Français\"></vaadin-checkbox>\n <vaadin-checkbox value=\"de\" label=\"Deutsch\"></vaadin-checkbox>\n</vaadin-checkbox-group>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|----------------\n`label` | The slotted label element wrapper\n`group-field` | The checkbox elements wrapper\n`helper-text` | The slotted helper text element wrapper\n`error-message` | The slotted error message element wrapper\n`required-indicator` | The `required` state indicator element\n\nThe following state attributes are available for styling:\n\nAttribute | Description | Part name\n--------------------|-------------------------------------------|------------\n`disabled` | Set when the element is disabled | :host\n`invalid` | Set when the element is invalid | :host\n`focused` | Set when the element is focused | :host\n`has-label` | Set when the element has a label | :host\n`has-value` | Set when the element has a value | :host\n`has-helper` | Set when the element has helper text | :host\n`has-error-message` | Set when the element has an error message | :host\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
|
|
20
|
+
"extension": true,
|
|
21
|
+
"attributes": [
|
|
22
|
+
{
|
|
23
|
+
"name": "?disabled",
|
|
24
|
+
"description": "If true, the user cannot interact with this element.",
|
|
25
|
+
"value": {
|
|
26
|
+
"kind": "expression"
|
|
27
|
+
}
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
"name": "?invalid",
|
|
31
|
+
"description": "Set to true when the field is invalid.",
|
|
32
|
+
"value": {
|
|
33
|
+
"kind": "expression"
|
|
34
|
+
}
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
"name": "?required",
|
|
38
|
+
"description": "Specifies that the user must fill in a value.",
|
|
39
|
+
"value": {
|
|
40
|
+
"kind": "expression"
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"name": ".label",
|
|
45
|
+
"description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
|
|
46
|
+
"value": {
|
|
47
|
+
"kind": "expression"
|
|
48
|
+
}
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
"name": ".errorMessage",
|
|
52
|
+
"description": "Error to show when the field is invalid.",
|
|
53
|
+
"value": {
|
|
54
|
+
"kind": "expression"
|
|
55
|
+
}
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
"name": ".helperText",
|
|
59
|
+
"description": "String used for the helper text.",
|
|
60
|
+
"value": {
|
|
61
|
+
"kind": "expression"
|
|
62
|
+
}
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
"name": ".value",
|
|
66
|
+
"description": "An array containing values of the currently checked checkboxes.\n\nThe array is immutable so toggling checkboxes always results in\ncreating a new array.",
|
|
67
|
+
"value": {
|
|
68
|
+
"kind": "expression"
|
|
69
|
+
}
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
"name": "@validated",
|
|
73
|
+
"description": "Fired whenever the field is validated.",
|
|
74
|
+
"value": {
|
|
75
|
+
"kind": "expression"
|
|
76
|
+
}
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
"name": "@value-changed",
|
|
80
|
+
"description": "Fired when the `value` property changes.",
|
|
81
|
+
"value": {
|
|
82
|
+
"kind": "expression"
|
|
83
|
+
}
|
|
84
|
+
},
|
|
85
|
+
{
|
|
86
|
+
"name": "@invalid-changed",
|
|
87
|
+
"description": "Fired when the `invalid` property changes.",
|
|
88
|
+
"value": {
|
|
89
|
+
"kind": "expression"
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
]
|
|
93
|
+
}
|
|
94
|
+
]
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
}
|