Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@vaadin/checkbox-group

Package Overview
Dependencies
Maintainers
12
Versions
409
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@vaadin/checkbox-group - npm Package Compare versions

Comparing version 24.4.0-alpha9 to 24.4.0-beta1

src/vaadin-checkbox-group-mixin.d.ts
src/vaadin-checkbox-group-mixin.js
src/vaadin-checkbox-group-styles.d.ts
src/vaadin-checkbox-group-styles.js
src/vaadin-lit-checkbox-group.d.ts
src/vaadin-lit-checkbox-group.js

23

package.json
{
"name": "@vaadin/checkbox-group",
"version": "24.4.0-alpha9",
"version": "24.4.0-beta1",
"publishConfig": {

@@ -28,3 +28,5 @@ "access": "public"

"web-types.json",
"web-types.lit.json"
"web-types.lit.json",
"!vaadin-lit-*.d.ts",
"!vaadin-lit-*.js"
],

@@ -39,10 +41,11 @@ "keywords": [

"dependencies": {
"@open-wc/dedupe-mixin": "^1.3.0",
"@polymer/polymer": "^3.0.0",
"@vaadin/a11y-base": "24.4.0-alpha9",
"@vaadin/checkbox": "24.4.0-alpha9",
"@vaadin/component-base": "24.4.0-alpha9",
"@vaadin/field-base": "24.4.0-alpha9",
"@vaadin/vaadin-lumo-styles": "24.4.0-alpha9",
"@vaadin/vaadin-material-styles": "24.4.0-alpha9",
"@vaadin/vaadin-themable-mixin": "24.4.0-alpha9"
"@vaadin/a11y-base": "24.4.0-beta1",
"@vaadin/checkbox": "24.4.0-beta1",
"@vaadin/component-base": "24.4.0-beta1",
"@vaadin/field-base": "24.4.0-beta1",
"@vaadin/vaadin-lumo-styles": "24.4.0-beta1",
"@vaadin/vaadin-material-styles": "24.4.0-beta1",
"@vaadin/vaadin-themable-mixin": "24.4.0-beta1"
},

@@ -58,3 +61,3 @@ "devDependencies": {

],
"gitHead": "effb81abe3c6283a6ec620cc0cee56069af58226"
"gitHead": "504787f741d677467ae93ca7cd31d84489366a9c"
}

1

README.md

@@ -8,3 +8,2 @@ # @vaadin/checkbox-group

[![npm version](https://badgen.net/npm/v/@vaadin/checkbox-group)](https://www.npmjs.com/package/@vaadin/checkbox-group)
[![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)

@@ -11,0 +10,0 @@ ```html

15

src/vaadin-checkbox-group.d.ts

@@ -6,7 +6,5 @@ /**

*/
import { DisabledMixin } from '@vaadin/a11y-base/src/disabled-mixin.js';
import { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js';
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
import { FieldMixin } from '@vaadin/field-base/src/field-mixin.js';
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
import { CheckboxGroupMixin } from './vaadin-checkbox-group-mixin.js';

@@ -67,2 +65,3 @@ /**

* `disabled` | Set when the element is disabled | :host
* `readonly` | Set when the element is readonly | :host
* `invalid` | Set when the element is invalid | :host

@@ -81,11 +80,3 @@ * `focused` | Set when the element is focused | :host

*/
declare class CheckboxGroup extends FieldMixin(FocusMixin(DisabledMixin(ElementMixin(ThemableMixin(HTMLElement))))) {
/**
* An array containing values of the currently checked checkboxes.
*
* The array is immutable so toggling checkboxes always results in
* creating a new array.
*/
value: string[];
declare class CheckboxGroup extends CheckboxGroupMixin(ElementMixin(ThemableMixin(HTMLElement))) {
addEventListener<K extends keyof CheckboxGroupEventMap>(

@@ -92,0 +83,0 @@ type: K,

310

src/vaadin-checkbox-group.js

@@ -6,13 +6,12 @@ /**

*/
import '@vaadin/checkbox/src/vaadin-checkbox.js';
import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
import { DisabledMixin } from '@vaadin/a11y-base/src/disabled-mixin.js';
import { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js';
import { Checkbox } from '@vaadin/checkbox/src/vaadin-checkbox.js';
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
import { SlotObserver } from '@vaadin/component-base/src/slot-observer.js';
import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
import { FieldMixin } from '@vaadin/field-base/src/field-mixin.js';
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
import { CheckboxGroupMixin } from './vaadin-checkbox-group-mixin.js';
import { checkboxGroupStyles } from './vaadin-checkbox-group-styles.js';
registerStyles('vaadin-checkbox-group', checkboxGroupStyles, { moduleId: 'vaadin-checkbox-group-styles' });
/**

@@ -47,2 +46,3 @@ * `<vaadin-checkbox-group>` is a web component that allows the user to choose several items from a group of binary choices.

* `disabled` | Set when the element is disabled | :host
* `readonly` | Set when the element is readonly | :host
* `invalid` | Set when the element is invalid | :host

@@ -64,8 +64,6 @@ * `focused` | Set when the element is focused | :host

* @mixes ThemableMixin
* @mixes DisabledMixin
* @mixes ElementMixin
* @mixes FocusMixin
* @mixes FieldMixin
* @mixes CheckboxGroupMixin
*/
class CheckboxGroup extends FieldMixin(FocusMixin(DisabledMixin(ElementMixin(ThemableMixin(PolymerElement))))) {
class CheckboxGroup extends CheckboxGroupMixin(ElementMixin(ThemableMixin(PolymerElement))) {
static get is() {

@@ -77,33 +75,2 @@ return 'vaadin-checkbox-group';

return html`
<style>
:host {
display: inline-flex;
}
:host::before {
content: '\\2003';
width: 0;
display: inline-block;
}
:host([hidden]) {
display: none !important;
}
.vaadin-group-field-container {
display: flex;
flex-direction: column;
width: 100%;
}
[part='group-field'] {
display: flex;
flex-wrap: wrap;
}
:host(:not([has-label])) [part='label'] {
display: none;
}
</style>
<div class="vaadin-group-field-container">

@@ -131,261 +98,2 @@ <div part="label">

}
static get properties() {
return {
/**
* An array containing values of the currently checked checkboxes.
*
* The array is immutable so toggling checkboxes always results in
* creating a new array.
*
* @type {!Array<!string>}
*/
value: {
type: Array,
value: () => [],
notify: true,
observer: '__valueChanged',
},
};
}
constructor() {
super();
this.__registerCheckbox = this.__registerCheckbox.bind(this);
this.__unregisterCheckbox = this.__unregisterCheckbox.bind(this);
this.__onCheckboxCheckedChanged = this.__onCheckboxCheckedChanged.bind(this);
this._tooltipController = new TooltipController(this);
this._tooltipController.addEventListener('tooltip-changed', (event) => {
const tooltip = event.detail.node;
if (tooltip && tooltip.isConnected) {
// Tooltip element has been added to the DOM
const inputs = this.__checkboxes.map((checkbox) => checkbox.inputElement);
this._tooltipController.setAriaTarget(inputs);
} else {
// Tooltip element is no longer connected
this._tooltipController.setAriaTarget([]);
}
});
}
/**
* A collection of the checkboxes.
*
* @return {!Array<!Checkbox>}
* @private
*/
get __checkboxes() {
return this.__filterCheckboxes([...this.children]);
}
/** @protected */
ready() {
super.ready();
this.ariaTarget = this;
// See https://github.com/vaadin/vaadin-web-components/issues/94
this.setAttribute('role', 'group');
const slot = this.shadowRoot.querySelector('slot:not([name])');
this._observer = new SlotObserver(slot, ({ addedNodes, removedNodes }) => {
const addedCheckboxes = this.__filterCheckboxes(addedNodes);
const removedCheckboxes = this.__filterCheckboxes(removedNodes);
addedCheckboxes.forEach(this.__registerCheckbox);
removedCheckboxes.forEach(this.__unregisterCheckbox);
const inputs = this.__checkboxes.map((checkbox) => checkbox.inputElement);
this._tooltipController.setAriaTarget(inputs);
this.__warnOfCheckboxesWithoutValue(addedCheckboxes);
});
this.addController(this._tooltipController);
}
/**
* Override method inherited from `ValidateMixin`
* to validate the value array.
*
* @override
* @return {boolean}
*/
checkValidity() {
return !this.required || this.value.length > 0;
}
/**
* @param {!Array<!Node>} nodes
* @return {!Array<!Checkbox>}
* @private
*/
__filterCheckboxes(nodes) {
return nodes.filter((child) => child instanceof Checkbox);
}
/**
* @param {!Array<!Checkbox>} checkboxes
* @private
*/
__warnOfCheckboxesWithoutValue(checkboxes) {
const hasCheckboxesWithoutValue = checkboxes.some((checkbox) => {
const { value } = checkbox;
return !checkbox.hasAttribute('value') && (!value || value === 'on');
});
if (hasCheckboxesWithoutValue) {
console.warn('Please provide the value attribute to all the checkboxes inside the checkbox group.');
}
}
/**
* Registers the checkbox after adding it to the group.
*
* @param {!Checkbox} checkbox
* @private
*/
__registerCheckbox(checkbox) {
checkbox.addEventListener('checked-changed', this.__onCheckboxCheckedChanged);
if (this.disabled) {
checkbox.disabled = true;
}
if (checkbox.checked) {
this.__addCheckboxToValue(checkbox.value);
} else if (this.value.includes(checkbox.value)) {
checkbox.checked = true;
}
}
/**
* Unregisters the checkbox before removing it from the group.
*
* @param {!Checkbox} checkbox
* @private
*/
__unregisterCheckbox(checkbox) {
checkbox.removeEventListener('checked-changed', this.__onCheckboxCheckedChanged);
if (checkbox.checked) {
this.__removeCheckboxFromValue(checkbox.value);
}
}
/**
* Override method inherited from `DisabledMixin`
* to propagate the `disabled` property to the checkboxes.
*
* @param {boolean} newValue
* @param {boolean} oldValue
* @override
* @protected
*/
_disabledChanged(newValue, oldValue) {
super._disabledChanged(newValue, oldValue);
// Prevent updating the `disabled` property for the checkboxes at initialization.
// Otherwise, the checkboxes may end up enabled regardless the `disabled` attribute
// intentionally added by the user on some of them.
if (!newValue && oldValue === undefined) {
return;
}
if (oldValue !== newValue) {
this.__checkboxes.forEach((checkbox) => {
checkbox.disabled = newValue;
});
}
}
/**
* @param {string} value
* @private
*/
__addCheckboxToValue(value) {
if (!this.value.includes(value)) {
this.value = [...this.value, value];
}
}
/**
* @param {string} value
* @private
*/
__removeCheckboxFromValue(value) {
if (this.value.includes(value)) {
this.value = this.value.filter((v) => v !== value);
}
}
/**
* @param {!CustomEvent} event
* @private
*/
__onCheckboxCheckedChanged(event) {
const checkbox = event.target;
if (checkbox.checked) {
this.__addCheckboxToValue(checkbox.value);
} else {
this.__removeCheckboxFromValue(checkbox.value);
}
}
/**
* @param {string | null | undefined} value
* @param {string | null | undefined} oldValue
* @private
*/
__valueChanged(value, oldValue) {
// Setting initial value to empty array, skip validation
if (value.length === 0 && oldValue === undefined) {
return;
}
this.toggleAttribute('has-value', value.length > 0);
this.__checkboxes.forEach((checkbox) => {
checkbox.checked = value.includes(checkbox.value);
});
if (oldValue !== undefined) {
this.validate();
}
}
/**
* Override method inherited from `FocusMixin`
* to prevent removing the `focused` attribute
* when focus moves between checkboxes inside the group.
*
* @param {!FocusEvent} event
* @return {boolean}
* @protected
*/
_shouldRemoveFocus(event) {
return !this.contains(event.relatedTarget);
}
/**
* Override method inherited from `FocusMixin`
* to run validation when the group loses focus.
*
* @param {boolean} focused
* @override
* @protected
*/
_setFocused(focused) {
super._setFocused(focused);
// Do not validate when focusout is caused by document
// losing focus, which happens on browser tab switch.
if (!focused && document.hasFocus()) {
this.validate();
}
}
}

@@ -392,0 +100,0 @@

6

theme/lumo/vaadin-checkbox-group-styles.js

@@ -42,4 +42,4 @@ import '@vaadin/vaadin-lumo-styles/color.js';

:host(:hover:not([disabled]):not([focused])) [part='label'],
:host(:hover:not([disabled]):not([focused])) [part='helper-text'] {
:host(:hover:not([readonly]):not([disabled]):not([focused])) [part='label'],
:host(:hover:not([readonly]):not([disabled]):not([focused])) [part='helper-text'] {
color: var(--lumo-body-text-color);

@@ -50,3 +50,3 @@ }

@media (pointer: coarse) {
:host(:hover:not([disabled]):not([focused])) [part='label'] {
:host(:hover:not([readonly]):not([disabled]):not([focused])) [part='label'] {
color: var(--lumo-secondary-text-color);

@@ -53,0 +53,0 @@ }

34

web-types.json
{
"$schema": "https://json.schemastore.org/web-types",
"name": "@vaadin/checkbox-group",
"version": "24.4.0-alpha9",
"version": "24.4.0-beta1",
"description-markup": "markdown",

@@ -11,3 +11,3 @@ "contributions": {

"name": "vaadin-checkbox-group",
"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.",
"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`readonly` | Set when the element is readonly | :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.",
"attributes": [

@@ -103,2 +103,13 @@ {

{
"name": "readonly",
"description": "When true, the user cannot modify the value of the checkbox group.\nThe difference between `disabled` and `readonly` is that in the\nread-only checkbox group, all the checkboxes are also read-only,\nand therefore remain focusable and announced by screen readers.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "theme",

@@ -213,2 +224,13 @@ "description": "The theme variants to apply to the component.",

}
},
{
"name": "readonly",
"description": "When true, the user cannot modify the value of the checkbox group.\nThe difference between `disabled` and `readonly` is that in the\nread-only checkbox group, all the checkboxes are also read-only,\nand therefore remain focusable and announced by screen readers.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
}

@@ -222,8 +244,8 @@ ],

{
"name": "invalid-changed",
"description": "Fired when the `invalid` property changes."
},
{
"name": "value-changed",
"description": "Fired when the `value` property changes."
},
{
"name": "invalid-changed",
"description": "Fired when the `invalid` property changes."
}

@@ -230,0 +252,0 @@ ]

19

web-types.lit.json
{
"$schema": "https://json.schemastore.org/web-types",
"name": "@vaadin/checkbox-group",
"version": "24.4.0-alpha9",
"version": "24.4.0-beta1",
"description-markup": "markdown",

@@ -19,3 +19,3 @@ "framework": "lit",

"name": "vaadin-checkbox-group",
"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.",
"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`readonly` | Set when the element is readonly | :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.",
"extension": true,

@@ -45,2 +45,9 @@ "attributes": [

{
"name": "?readonly",
"description": "When true, the user cannot modify the value of the checkbox group.\nThe difference between `disabled` and `readonly` is that in the\nread-only checkbox group, all the checkboxes are also read-only,\nand therefore remain focusable and announced by screen readers.",
"value": {
"kind": "expression"
}
},
{
"name": ".label",

@@ -95,4 +102,4 @@ "description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",

{
"name": "@value-changed",
"description": "Fired when the `value` property changes.",
"name": "@invalid-changed",
"description": "Fired when the `invalid` property changes.",
"value": {

@@ -103,4 +110,4 @@ "kind": "expression"

{
"name": "@invalid-changed",
"description": "Fired when the `invalid` property changes.",
"name": "@value-changed",
"description": "Fired when the `value` property changes.",
"value": {

@@ -107,0 +114,0 @@ "kind": "expression"

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc