@vaadin/checkbox-group 24.2.0-dev.e9803eea7 → 24.2.0-rc1

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.
Files changed (4) hide show
  1. package/package.json +10 -10
  2. package/src/vaadin-checkbox-group.js +22 -4
  3. package/web-types.json +232 -0
  4. package/web-types.lit.json +111 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/checkbox-group",
3
- "version": "24.2.0-dev.e9803eea7",
3
+ "version": "24.2.0-rc1",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -36,22 +36,22 @@
36
36
  ],
37
37
  "dependencies": {
38
38
  "@polymer/polymer": "^3.0.0",
39
- "@vaadin/a11y-base": "24.2.0-dev.e9803eea7",
40
- "@vaadin/checkbox": "24.2.0-dev.e9803eea7",
41
- "@vaadin/component-base": "24.2.0-dev.e9803eea7",
42
- "@vaadin/field-base": "24.2.0-dev.e9803eea7",
43
- "@vaadin/vaadin-lumo-styles": "24.2.0-dev.e9803eea7",
44
- "@vaadin/vaadin-material-styles": "24.2.0-dev.e9803eea7",
45
- "@vaadin/vaadin-themable-mixin": "24.2.0-dev.e9803eea7"
39
+ "@vaadin/a11y-base": "24.2.0-rc1",
40
+ "@vaadin/checkbox": "24.2.0-rc1",
41
+ "@vaadin/component-base": "24.2.0-rc1",
42
+ "@vaadin/field-base": "24.2.0-rc1",
43
+ "@vaadin/vaadin-lumo-styles": "24.2.0-rc1",
44
+ "@vaadin/vaadin-material-styles": "24.2.0-rc1",
45
+ "@vaadin/vaadin-themable-mixin": "24.2.0-rc1"
46
46
  },
47
47
  "devDependencies": {
48
48
  "@esm-bundle/chai": "^4.3.4",
49
- "@vaadin/testing-helpers": "^0.4.3",
49
+ "@vaadin/testing-helpers": "^0.5.0",
50
50
  "sinon": "^13.0.2"
51
51
  },
52
52
  "web-types": [
53
53
  "web-types.json",
54
54
  "web-types.lit.json"
55
55
  ],
56
- "gitHead": "a065b79b9d5a189e457fab312cc8aff0d7f2f910"
56
+ "gitHead": "012bef350bbf29865748f4c78338dd17c6f61a74"
57
57
  }
package/src/vaadin-checkbox-group.js CHANGED
@@ -3,12 +3,13 @@
3
3
  * Copyright (c) 2018 - 2023 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
- import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
7
6
  import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
8
7
  import { DisabledMixin } from '@vaadin/a11y-base/src/disabled-mixin.js';
9
8
  import { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js';
10
9
  import { Checkbox } from '@vaadin/checkbox/src/vaadin-checkbox.js';
10
+ import { defineCustomElement } from '@vaadin/component-base/src/define.js';
11
11
  import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
12
+ import { SlotObserver } from '@vaadin/component-base/src/slot-observer.js';
12
13
  import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
13
14
  import { FieldMixin } from '@vaadin/field-base/src/field-mixin.js';
14
15
  import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
@@ -55,6 +56,7 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
55
56
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
56
57
  * @fires {CustomEvent} validated - Fired whenever the field is validated.
57
58
  *
59
+ * @customElement
58
60
  * @extends HTMLElement
59
61
  * @mixes ThemableMixin
60
62
  * @mixes DisabledMixin
@@ -148,6 +150,19 @@ class CheckboxGroup extends FieldMixin(FocusMixin(DisabledMixin(ElementMixin(The
148
150
  this.__registerCheckbox = this.__registerCheckbox.bind(this);
149
151
  this.__unregisterCheckbox = this.__unregisterCheckbox.bind(this);
150
152
  this.__onCheckboxCheckedChanged = this.__onCheckboxCheckedChanged.bind(this);
153
+
154
+ this._tooltipController = new TooltipController(this);
155
+ this._tooltipController.addEventListener('tooltip-changed', (event) => {
156
+ const tooltip = event.detail.node;
157
+ if (tooltip && tooltip.isConnected) {
158
+ // Tooltip element has been added to the DOM
159
+ const inputs = this.__checkboxes.map((checkbox) => checkbox.inputElement);
160
+ this._tooltipController.setAriaTarget(inputs);
161
+ } else {
162
+ // Tooltip element is no longer connected
163
+ this._tooltipController.setAriaTarget([]);
164
+ }
165
+ });
151
166
  }
152
167
 
153
168
  /**
@@ -169,17 +184,20 @@ class CheckboxGroup extends FieldMixin(FocusMixin(DisabledMixin(ElementMixin(The
169
184
  // See https://github.com/vaadin/vaadin-web-components/issues/94
170
185
  this.setAttribute('role', 'group');
171
186
 
172
- this._observer = new FlattenedNodesObserver(this, ({ addedNodes, removedNodes }) => {
187
+ const slot = this.shadowRoot.querySelector('slot:not([name])');
188
+ this._observer = new SlotObserver(slot, ({ addedNodes, removedNodes }) => {
173
189
  const addedCheckboxes = this.__filterCheckboxes(addedNodes);
174
190
  const removedCheckboxes = this.__filterCheckboxes(removedNodes);
175
191
 
176
192
  addedCheckboxes.forEach(this.__registerCheckbox);
177
193
  removedCheckboxes.forEach(this.__unregisterCheckbox);
178
194
 
195
+ const inputs = this.__checkboxes.map((checkbox) => checkbox.inputElement);
196
+ this._tooltipController.setAriaTarget(inputs);
197
+
179
198
  this.__warnOfCheckboxesWithoutValue(addedCheckboxes);
180
199
  });
181
200
 
182
- this._tooltipController = new TooltipController(this);
183
201
  this.addController(this._tooltipController);
184
202
  }
185
203
 
@@ -367,6 +385,6 @@ class CheckboxGroup extends FieldMixin(FocusMixin(DisabledMixin(ElementMixin(The
367
385
  }
368
386
  }
369
387
 
370
- customElements.define(CheckboxGroup.is, CheckboxGroup);
388
+ defineCustomElement(CheckboxGroup);
371
389
 
372
390
  export { CheckboxGroup };
package/web-types.json ADDED
@@ -0,0 +1,232 @@
1
+ {
2
+ "$schema": "https://json.schemastore.org/web-types",
3
+ "name": "@vaadin/checkbox-group",
4
+ "version": "24.2.0-rc1",
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=\"Export data\">\n <vaadin-checkbox value=\"0\" label=\"Order ID\"></vaadin-checkbox>\n <vaadin-checkbox value=\"1\" label=\"Product name\"></vaadin-checkbox>\n <vaadin-checkbox value=\"2\" label=\"Customer\"></vaadin-checkbox>\n <vaadin-checkbox value=\"3\" label=\"Status\"></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/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": "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
+ },
101
+ {
102
+ "name": "theme",
103
+ "description": "The theme variants to apply to the component.",
104
+ "value": {
105
+ "type": [
106
+ "string",
107
+ "null",
108
+ "undefined"
109
+ ]
110
+ }
111
+ }
112
+ ],
113
+ "js": {
114
+ "properties": [
115
+ {
116
+ "name": "disabled",
117
+ "description": "If true, the user cannot interact with this element.",
118
+ "value": {
119
+ "type": [
120
+ "boolean",
121
+ "null",
122
+ "undefined"
123
+ ]
124
+ }
125
+ },
126
+ {
127
+ "name": "label",
128
+ "description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
129
+ "value": {
130
+ "type": [
131
+ "string",
132
+ "null",
133
+ "undefined"
134
+ ]
135
+ }
136
+ },
137
+ {
138
+ "name": "invalid",
139
+ "description": "Set to true when the field is invalid.",
140
+ "value": {
141
+ "type": [
142
+ "boolean",
143
+ "null",
144
+ "undefined"
145
+ ]
146
+ }
147
+ },
148
+ {
149
+ "name": "required",
150
+ "description": "Specifies that the user must fill in a value.",
151
+ "value": {
152
+ "type": [
153
+ "boolean",
154
+ "null",
155
+ "undefined"
156
+ ]
157
+ }
158
+ },
159
+ {
160
+ "name": "errorMessage",
161
+ "description": "Error to show when the field is invalid.",
162
+ "value": {
163
+ "type": [
164
+ "string",
165
+ "null",
166
+ "undefined"
167
+ ]
168
+ }
169
+ },
170
+ {
171
+ "name": "helperText",
172
+ "description": "String used for the helper text.",
173
+ "value": {
174
+ "type": [
175
+ "string",
176
+ "null",
177
+ "undefined"
178
+ ]
179
+ }
180
+ },
181
+ {
182
+ "name": "accessibleName",
183
+ "description": "String used to label the component to screen reader users.",
184
+ "value": {
185
+ "type": [
186
+ "string",
187
+ "null",
188
+ "undefined"
189
+ ]
190
+ }
191
+ },
192
+ {
193
+ "name": "accessibleNameRef",
194
+ "description": "Id of the element used as label of the component to screen reader users.",
195
+ "value": {
196
+ "type": [
197
+ "string",
198
+ "null",
199
+ "undefined"
200
+ ]
201
+ }
202
+ },
203
+ {
204
+ "name": "value",
205
+ "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.",
206
+ "value": {
207
+ "type": [
208
+ "Array.<string>"
209
+ ]
210
+ }
211
+ }
212
+ ],
213
+ "events": [
214
+ {
215
+ "name": "validated",
216
+ "description": "Fired whenever the field is validated."
217
+ },
218
+ {
219
+ "name": "value-changed",
220
+ "description": "Fired when the `value` property changes."
221
+ },
222
+ {
223
+ "name": "invalid-changed",
224
+ "description": "Fired when the `invalid` property changes."
225
+ }
226
+ ]
227
+ }
228
+ }
229
+ ]
230
+ }
231
+ }
232
+ }
package/web-types.lit.json ADDED
@@ -0,0 +1,111 @@
1
+ {
2
+ "$schema": "https://json.schemastore.org/web-types",
3
+ "name": "@vaadin/checkbox-group",
4
+ "version": "24.2.0-rc1",
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=\"Export data\">\n <vaadin-checkbox value=\"0\" label=\"Order ID\"></vaadin-checkbox>\n <vaadin-checkbox value=\"1\" label=\"Product name\"></vaadin-checkbox>\n <vaadin-checkbox value=\"2\" label=\"Customer\"></vaadin-checkbox>\n <vaadin-checkbox value=\"3\" label=\"Status\"></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/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": ".accessibleName",
66
+ "description": "String used to label the component to screen reader users.",
67
+ "value": {
68
+ "kind": "expression"
69
+ }
70
+ },
71
+ {
72
+ "name": ".accessibleNameRef",
73
+ "description": "Id of the element used as label of the component to screen reader users.",
74
+ "value": {
75
+ "kind": "expression"
76
+ }
77
+ },
78
+ {
79
+ "name": ".value",
80
+ "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.",
81
+ "value": {
82
+ "kind": "expression"
83
+ }
84
+ },
85
+ {
86
+ "name": "@validated",
87
+ "description": "Fired whenever the field is validated.",
88
+ "value": {
89
+ "kind": "expression"
90
+ }
91
+ },
92
+ {
93
+ "name": "@value-changed",
94
+ "description": "Fired when the `value` property changes.",
95
+ "value": {
96
+ "kind": "expression"
97
+ }
98
+ },
99
+ {
100
+ "name": "@invalid-changed",
101
+ "description": "Fired when the `invalid` property changes.",
102
+ "value": {
103
+ "kind": "expression"
104
+ }
105
+ }
106
+ ]
107
+ }
108
+ ]
109
+ }
110
+ }
111
+ }