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

@vaadin/checkbox-group

Package Overview
Dependencies
Maintainers
19
Versions
408
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@vaadin/checkbox-group - npm Package Compare versions

Comparing version 22.0.0-alpha6 to 22.0.0-alpha7

50

package.json
{
"name": "@vaadin/checkbox-group",
"version": "22.0.0-alpha6",
"version": "22.0.0-alpha7",
"publishConfig": {
"access": "public"
},
"description": "vaadin-checkbox-group",
"license": "Apache-2.0",
"repository": {
"type": "git",
"url": "https://github.com/vaadin/web-components.git",
"directory": "packages/checkbox-group"
},
"author": "Vaadin Ltd",
"homepage": "https://vaadin.com/components",
"bugs": {
"url": "https://github.com/vaadin/web-components/issues"
},
"main": "vaadin-checkbox-group.js",
"module": "vaadin-checkbox-group.js",
"repository": "vaadin/web-components",
"files": [
"src",
"theme",
"vaadin-*.d.ts",
"vaadin-*.js"
],
"keywords": [

@@ -15,21 +34,9 @@ "Vaadin",

],
"author": "Vaadin Ltd",
"license": "Apache-2.0",
"bugs": {
"url": "https://github.com/vaadin/web-components/issues"
},
"homepage": "https://vaadin.com/components",
"files": [
"vaadin-*.d.ts",
"vaadin-*.js",
"src",
"theme"
],
"dependencies": {
"@polymer/polymer": "^3.0.0",
"@vaadin/checkbox": "^22.0.0-alpha6",
"@vaadin/vaadin-element-mixin": "^22.0.0-alpha6",
"@vaadin/vaadin-lumo-styles": "^22.0.0-alpha6",
"@vaadin/vaadin-material-styles": "^22.0.0-alpha6",
"@vaadin/vaadin-themable-mixin": "^22.0.0-alpha6"
"@vaadin/checkbox": "22.0.0-alpha7",
"@vaadin/component-base": "22.0.0-alpha7",
"@vaadin/vaadin-lumo-styles": "22.0.0-alpha7",
"@vaadin/vaadin-material-styles": "22.0.0-alpha7",
"@vaadin/vaadin-themable-mixin": "22.0.0-alpha7"
},

@@ -41,6 +48,3 @@ "devDependencies": {

},
"publishConfig": {
"access": "public"
},
"gitHead": "4b136b1c7da8942960e7255f40c27859125b3a45"
"gitHead": "8e89419c6b44a1d225d5859e180d7b35e47ddb52"
}

@@ -0,7 +1,12 @@

/**
* @license
* Copyright (c) 2021 Vaadin Ltd.
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
*/
import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
import { DisabledMixin } from '@vaadin/component-base/src/disabled-mixin.js';
import { FocusMixin } from '@vaadin/component-base/src/focus-mixin.js';
import { FieldMixin } from '@vaadin/field-base/src/field-mixin.js';
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
import { DirMixin } from '@vaadin/vaadin-element-mixin/vaadin-dir-mixin.js';
import { CheckboxElement } from '@vaadin/checkbox/src/vaadin-checkbox.js';
/**

@@ -17,3 +22,3 @@ * Fired when the `invalid` property changes.

export interface CheckboxGroupElementEventMap {
export interface CheckboxGroupCustomEventMap {
'invalid-changed': CheckboxGroupInvalidChangedEvent;

@@ -24,6 +29,6 @@

export interface CheckboxGroupEventMap extends HTMLElementEventMap, CheckboxGroupElementEventMap {}
export interface CheckboxGroupEventMap extends HTMLElementEventMap, CheckboxGroupCustomEventMap {}
/**
* `<vaadin-checkbox-group>` is a Polymer element for grouping vaadin-checkboxes.
* `<vaadin-checkbox-group>` is a web component that allows the user to choose several items from a group of binary choices.
*

@@ -42,20 +47,21 @@ * ```html

*
* Part name | Description
* ----------------|----------------
* `label` | The label element
* `group-field` | The element that wraps checkboxes
* `error-message` | The error message element
* Part name | Description
* ---------------------|----------------
* `label` | The slotted label element wrapper
* `group-field` | The checkbox elements wrapper
* `helper-text` | The slotted helper text element wrapper
* `error-message` | The slotted error message element wrapper
* `required-indicator` | The `required` state indicator element
*
* The following state attributes are available for styling:
*
* Attribute | Description | Part name
* -----------|-------------|------------
* `disabled` | Set when the checkbox group and its children are disabled. | :host
* `focused` | Set when the checkbox group contains focus | :host
* `has-label` | Set when the element has a label | :host
* `has-value` | Set when the element has a value | :host
* `has-helper` | Set when the element has helper text or slot | :host
* `has-error-message` | Set when the element has an error message, regardless if the field is valid or not | :host
* `required` | Set when the element is required | :host
* `invalid` | Set when the element is invalid | :host
* Attribute | Description | Part name
* --------------------|-------------------------------------------|------------
* `disabled` | Set when the element is disabled | :host
* `invalid` | Set when the element is invalid | :host
* `focused` | Set when the element is focused | :host
* `has-label` | Set when the element has a label | :host
* `has-value` | Set when the element has a value | :host
* `has-helper` | Set when the element has helper text | :host
* `has-error-message` | Set when the element has an error message | :host
*

@@ -67,15 +73,5 @@ * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.

*/
declare class CheckboxGroupElement extends ThemableMixin(DirMixin(HTMLElement)) {
declare class CheckboxGroup extends FieldMixin(FocusMixin(DisabledMixin(DirMixin(ThemableMixin(HTMLElement))))) {
/**
* The current disabled state of the checkbox group. True if group and all internal checkboxes are disabled.
*/
disabled: boolean | null | undefined;
/**
* String used for the label element.
*/
label: string | null | undefined;
/**
* Value of the checkbox group.
* The value of the checkbox group.
* Note: toggling the checkboxes modifies the value by creating new

@@ -87,44 +83,5 @@ * array each time, to override Polymer dirty-checking for arrays.

/**
* Error to show when the input value is invalid.
* @attr {string} error-message
*/
errorMessage: string | null | undefined;
/**
* String used for the helper text.
* @attr {string} helper-text
*/
helperText: string | null;
/**
* Specifies that the user must fill in a value.
*/
required: boolean | null | undefined;
/**
* This property is set to true when the control value is invalid.
*/
invalid: boolean;
/**
* Returns true if `value` is valid.
*
* @returns True if the value is valid.
*/
validate(): boolean;
_addCheckboxToValue(value: string): void;
_removeCheckboxFromValue(value: string): void;
_changeSelectedCheckbox(checkbox: CheckboxElement | null): void;
_containsFocus(): boolean;
_setFocused(focused: boolean): void;
addEventListener<K extends keyof CheckboxGroupEventMap>(
type: K,
listener: (this: CheckboxGroupElement, ev: CheckboxGroupEventMap[K]) => void,
listener: (this: CheckboxGroup, ev: CheckboxGroupEventMap[K]) => void,
options?: boolean | AddEventListenerOptions

@@ -135,3 +92,3 @@ ): void;

type: K,
listener: (this: CheckboxGroupElement, ev: CheckboxGroupEventMap[K]) => void,
listener: (this: CheckboxGroup, ev: CheckboxGroupEventMap[K]) => void,
options?: boolean | EventListenerOptions

@@ -143,6 +100,6 @@ ): void;

interface HTMLElementTagNameMap {
'vaadin-checkbox-group': CheckboxGroupElement;
'vaadin-checkbox-group': CheckboxGroup;
}
}
export { CheckboxGroupElement };
export { CheckboxGroup };

@@ -8,8 +8,11 @@ /**

import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
import { DisabledMixin } from '@vaadin/component-base/src/disabled-mixin.js';
import { FocusMixin } from '@vaadin/component-base/src/focus-mixin.js';
import { FieldMixin } from '@vaadin/field-base/src/field-mixin.js';
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
import { DirMixin } from '@vaadin/vaadin-element-mixin/vaadin-dir-mixin.js';
import { CheckboxElement } from '@vaadin/checkbox/src/vaadin-checkbox.js';
import { Checkbox } from '@vaadin/checkbox/src/vaadin-checkbox.js';
/**
* `<vaadin-checkbox-group>` is a Polymer element for grouping vaadin-checkboxes.
* `<vaadin-checkbox-group>` is a web component that allows the user to choose several items from a group of binary choices.
*

@@ -28,20 +31,21 @@ * ```html

*
* Part name | Description
* ----------------|----------------
* `label` | The label element
* `group-field` | The element that wraps checkboxes
* `error-message` | The error message element
* Part name | Description
* ---------------------|----------------
* `label` | The slotted label element wrapper
* `group-field` | The checkbox elements wrapper
* `helper-text` | The slotted helper text element wrapper
* `error-message` | The slotted error message element wrapper
* `required-indicator` | The `required` state indicator element
*
* The following state attributes are available for styling:
*
* Attribute | Description | Part name
* -----------|-------------|------------
* `disabled` | Set when the checkbox group and its children are disabled. | :host
* `focused` | Set when the checkbox group contains focus | :host
* `has-label` | Set when the element has a label | :host
* `has-value` | Set when the element has a value | :host
* `has-helper` | Set when the element has helper text or slot | :host
* `has-error-message` | Set when the element has an error message, regardless if the field is valid or not | :host
* `required` | Set when the element is required | :host
* `invalid` | Set when the element is invalid | :host
* Attribute | Description | Part name
* --------------------|-------------------------------------------|------------
* `disabled` | Set when the element is disabled | :host
* `invalid` | Set when the element is invalid | :host
* `focused` | Set when the element is focused | :host
* `has-label` | Set when the element has a label | :host
* `has-value` | Set when the element has a value | :host
* `has-helper` | Set when the element has helper text | :host
* `has-error-message` | Set when the element has an error message | :host
*

@@ -56,5 +60,11 @@ * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.

* @mixes DirMixin
* @element vaadin-checkbox-group
* @mixes DisabledMixin
* @mixes FocusMixin
* @mixes FieldMixin
*/
class CheckboxGroupElement extends ThemableMixin(DirMixin(PolymerElement)) {
class CheckboxGroup extends FieldMixin(FocusMixin(DisabledMixin(DirMixin(ThemableMixin(PolymerElement))))) {
static get is() {
return 'vaadin-checkbox-group';
}
static get template() {

@@ -82,3 +92,3 @@ return html`

[part='label']:empty {
:host(:not([has-label])) [part='label'] {
display: none;

@@ -89,22 +99,18 @@ }

<div class="vaadin-group-field-container">
<label part="label">[[label]]</label>
<div part="label">
<slot name="label"></slot>
<span part="required-indicator" aria-hidden="true"></span>
</div>
<div part="group-field">
<slot id="slot"></slot>
<slot></slot>
</div>
<div
part="helper-text"
aria-live="assertive"
aria-hidden$="[[_getHelperTextAriaHidden(helperText, _hasSlottedHelper)]]"
>
<slot name="helper">[[helperText]]</slot>
<div part="helper-text">
<slot name="helper"></slot>
</div>
<div
part="error-message"
aria-live="assertive"
aria-hidden$="[[_getErrorMessageAriaHidden(invalid, errorMessage)]]"
>[[errorMessage]]</div
>
<div part="error-message">
<slot name="error-message"></slot>
</div>
</div>

@@ -114,28 +120,6 @@ `;

static get is() {
return 'vaadin-checkbox-group';
}
static get properties() {
return {
/**
* The current disabled state of the checkbox group. True if group and all internal checkboxes are disabled.
*/
disabled: {
type: Boolean,
reflectToAttribute: true,
observer: '_disabledChanged'
},
/**
* String used for the label element.
*/
label: {
type: String,
value: '',
observer: '_labelChanged'
},
/**
* Value of the checkbox group.
* The value of the checkbox group.
* Note: toggling the checkboxes modifies the value by creating new

@@ -150,46 +134,3 @@ * array each time, to override Polymer dirty-checking for arrays.

notify: true
},
/**
* Error to show when the input value is invalid.
* @attr {string} error-message
*/
errorMessage: {
type: String,
value: '',
observer: '_errorMessageChanged'
},
/**
* String used for the helper text.
* @attr {string} helper-text
* @type {string | null}
*/
helperText: {
type: String,
value: '',
observer: '_helperTextChanged'
},
/**
* Specifies that the user must fill in a value.
*/
required: {
type: Boolean,
reflectToAttribute: true
},
/**
* This property is set to true when the control value is invalid.
* @type {boolean}
*/
invalid: {
type: Boolean,
reflectToAttribute: true,
notify: true,
value: false
},
/** @private */
_hasSlottedHelper: Boolean
}
};

@@ -199,57 +140,29 @@ }

static get observers() {
return ['_updateValue(value, value.splices)'];
return ['__valueChanged(value, value.splices)'];
}
constructor() {
super();
this.__registerCheckbox = this.__registerCheckbox.bind(this);
this.__unregisterCheckbox = this.__unregisterCheckbox.bind(this);
this.__onCheckboxCheckedChanged = this.__onCheckboxCheckedChanged.bind(this);
}
ready() {
super.ready();
this.addEventListener('focusin', () => this._setFocused(this._containsFocus()));
this.ariaTarget = this;
this.addEventListener('focusout', (e) => {
// validate when stepping out of the checkbox group
if (
!this._checkboxes.some(
(checkbox) => e.relatedTarget === checkbox || checkbox.shadowRoot.contains(e.relatedTarget)
)
) {
this.validate();
this._setFocused(false);
}
});
// See https://github.com/vaadin/vaadin-web-components/issues/94
this.setAttribute('role', 'group');
const checkedChangedListener = (e) => {
this._changeSelectedCheckbox(e.target);
};
this._observer = new FlattenedNodesObserver(this, ({ addedNodes, removedNodes }) => {
const addedCheckboxes = this.__filterCheckboxes(addedNodes);
const removedCheckboxes = this.__filterCheckboxes(removedNodes);
this._observer = new FlattenedNodesObserver(this, (info) => {
const addedCheckboxes = this._filterCheckboxes(info.addedNodes);
addedCheckboxes.forEach(this.__registerCheckbox);
removedCheckboxes.forEach(this.__unregisterCheckbox);
addedCheckboxes.forEach((checkbox) => {
checkbox.addEventListener('checked-changed', checkedChangedListener);
if (this.disabled) {
checkbox.disabled = true;
}
if (checkbox.checked) {
this._addCheckboxToValue(checkbox.value);
} else if (this.value.indexOf(checkbox.value) > -1) {
checkbox.checked = true;
}
});
this._filterCheckboxes(info.removedNodes).forEach((checkbox) => {
checkbox.removeEventListener('checked-changed', checkedChangedListener);
if (checkbox.checked) {
this._removeCheckboxFromValue(checkbox.value);
}
});
this._setOrToggleHasHelperAttribute();
const hasValue = (checkbox) => {
const { value } = checkbox;
return checkbox.hasAttribute('value') || (value && value !== 'on');
};
if (!addedCheckboxes.every(hasValue)) {
console.warn('Please add value attribute to all checkboxes in checkbox group');
}
this.__warnOfCheckboxesWithoutValue(addedCheckboxes);
});

@@ -259,160 +172,194 @@ }

/**
* Returns true if `value` is valid.
* Override method inherited from `ValidateMixin`
* to validate the value array.
*
* @return {boolean} True if the value is valid.
* @override
* @return {boolean}
*/
validate() {
this.invalid = this.required && this.value.length === 0;
return !this.invalid;
checkValidity() {
return !this.required || this.value.length > 0;
}
/** @private */
get _checkboxes() {
return this._filterCheckboxes(this.querySelectorAll('*'));
/**
* @param {!Array<!Node>} nodes
* @return {!Array<!Checkbox>}
* @private
*/
__filterCheckboxes(nodes) {
return nodes.filter((child) => child instanceof Checkbox);
}
/** @private */
_filterCheckboxes(nodes) {
return Array.from(nodes).filter((child) => child instanceof CheckboxElement);
/**
* A collection of the checkboxes.
*
* @return {!Array<!Checkbox>}
* @private
*/
get __checkboxes() {
return this.__filterCheckboxes([...this.children]);
}
/** @private */
_disabledChanged(disabled) {
this.setAttribute('aria-disabled', disabled);
/**
* @param {!Array<!Checkbox>} checkboxes
* @private
*/
__warnOfCheckboxesWithoutValue(checkboxes) {
const hasCheckboxesWithoutValue = checkboxes.some((checkbox) => {
const { value } = checkbox;
this._checkboxes.forEach((checkbox) => (checkbox.disabled = disabled));
return !checkbox.hasAttribute('value') && (!value || value === 'on');
});
if (hasCheckboxesWithoutValue) {
console.warn('Please provide the value attribute to all the checkboxes inside the checkbox group.');
}
}
/**
* @param {string} value
* @protected
* Registers the checkbox after adding it to the group.
*
* @param {!Checkbox} checkbox
* @private
*/
_addCheckboxToValue(value) {
if (this.value.indexOf(value) === -1) {
this.value = this.value.concat(value);
__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;
}
}
/**
* @param {string} value
* @protected
* Unregisters the checkbox before removing it from the group.
*
* @param {!Checkbox} checkbox
* @private
*/
_removeCheckboxFromValue(value) {
this.value = this.value.filter((v) => v !== value);
__unregisterCheckbox(checkbox) {
checkbox.removeEventListener('checked-changed', this.__onCheckboxCheckedChanged);
if (checkbox.checked) {
this.__removeCheckboxFromValue(checkbox.value);
}
}
/**
* @param {CheckboxElement} checkbox
* Override method inherited from `DisabledMixin`
* to propagate the `disabled` property to the checkboxes.
*
* @param {boolean} newValue
* @param {boolean} oldValue
* @override
* @protected
*/
_changeSelectedCheckbox(checkbox) {
if (this._updatingValue) {
_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 (checkbox.checked) {
this._addCheckboxToValue(checkbox.value);
} else {
this._removeCheckboxFromValue(checkbox.value);
if (oldValue !== newValue) {
this.__checkboxes.forEach((checkbox) => {
checkbox.disabled = newValue;
});
}
}
/** @private */
_updateValue(value) {
// setting initial value to empty array, skip validation
if (value.length === 0 && this._oldValue === undefined) {
return;
/**
* @param {string} value
* @private
*/
__addCheckboxToValue(value) {
if (!this.value.includes(value)) {
this.value = [...this.value, value];
}
}
if (value.length) {
this.setAttribute('has-value', '');
} else {
this.removeAttribute('has-value');
/**
* @param {string} value
* @private
*/
__removeCheckboxFromValue(value) {
if (this.value.includes(value)) {
this.value = this.value.filter((v) => v !== value);
}
this._oldValue = value;
// set a flag to avoid updating loop
this._updatingValue = true;
// reflect the value array to checkboxes
this._checkboxes.forEach((checkbox) => {
checkbox.checked = value.indexOf(checkbox.value) > -1;
});
this._updatingValue = false;
this.validate();
}
/** @private */
_labelChanged(label) {
this._setOrToggleAttribute('has-label', !!label);
}
/**
* @param {!CustomEvent} event
* @private
*/
__onCheckboxCheckedChanged(event) {
const checkbox = event.target;
/** @private */
_errorMessageChanged(errorMessage) {
this._setOrToggleAttribute('has-error-message', !!errorMessage);
if (checkbox.checked) {
this.__addCheckboxToValue(checkbox.value);
} else {
this.__removeCheckboxFromValue(checkbox.value);
}
}
/** @private */
_helperTextChanged(helperText) {
this._setOrToggleAttribute('has-helper', !!helperText);
}
/** @private */
_setOrToggleAttribute(name, value) {
if (!name) {
/**
* @param {string | null | undefined} value
* @private
*/
__valueChanged(value) {
// setting initial value to empty array, skip validation
if (value.length === 0 && this.__oldValue === undefined) {
return;
}
if (value) {
this.setAttribute(name, typeof value === 'boolean' ? '' : value);
} else {
this.removeAttribute(name);
}
}
this.__oldValue = value;
/** @private */
_getErrorMessageAriaHidden(invalid, errorMessage) {
return (!errorMessage || !invalid).toString();
this.toggleAttribute('has-value', value.length > 0);
this.__checkboxes.forEach((checkbox) => {
checkbox.checked = value.includes(checkbox.value);
});
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
*/
_containsFocus() {
const activeElement = this.getRootNode().activeElement;
return this.contains(activeElement);
_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) {
if (focused) {
this.setAttribute('focused', '');
} else {
this.removeAttribute('focused');
super._setFocused(focused);
if (!focused) {
this.validate();
}
}
/** @private */
_setOrToggleHasHelperAttribute() {
const slottedNodes = this.shadowRoot.querySelector(`[name="helper"]`).assignedNodes();
// Only has slotted helper if not a text node
// Text nodes are added by the helperText prop and not the helper slot
// The filter is added due to shady DOM triggering this slotchange event on helperText prop change
this._hasSlottedHelper = slottedNodes.filter((node) => node.nodeType !== 3).length > 0;
this._setOrToggleAttribute('has-helper', this._hasSlottedHelper ? 'slotted' : !!this.helperText);
}
/** @private */
_getHelperTextAriaHidden(helperText, hasSlottedHelper) {
return (!(helperText || hasSlottedHelper)).toString();
}
}
customElements.define(CheckboxGroupElement.is, CheckboxGroupElement);
customElements.define(CheckboxGroup.is, CheckboxGroup);
export { CheckboxGroupElement };
export { CheckboxGroup };
import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
import '@vaadin/vaadin-lumo-styles/color.js';
import '@vaadin/vaadin-lumo-styles/sizing.js';
import '@vaadin/vaadin-lumo-styles/spacing.js';
import '@vaadin/vaadin-lumo-styles/style.js';
import '@vaadin/vaadin-lumo-styles/typography.js';
import { helper } from '@vaadin/vaadin-lumo-styles/mixins/helper.js';
import { requiredField } from '@vaadin/vaadin-lumo-styles/mixins/required-field.js';

@@ -17,3 +22,4 @@

:host::before {
height: var(--lumo-size-m);
/* Effective height of vaadin-checkbox */
height: var(--lumo-size-s);
box-sizing: border-box;

@@ -29,6 +35,2 @@ display: inline-flex;

[part='label'] {
padding-bottom: 0.7em;
}
:host([disabled]) [part='label'] {

@@ -44,51 +46,6 @@ color: var(--lumo-disabled-text-color);

:host(:hover:not([disabled]):not([focused])) [part='label'],
:host(:hover:not([disabled]):not([focused])) [part='helper-text'],
:host(:hover:not([disabled]):not([focused])) [part='helper-text'] ::slotted(*) {
:host(:hover:not([disabled]):not([focused])) [part='helper-text'] {
color: var(--lumo-body-text-color);
}
:host([has-helper]) [part='helper-text']::before {
content: '';
display: block;
height: 0.4em;
}
[part='helper-text'],
[part='helper-text'] ::slotted(*) {
display: block;
color: var(--lumo-secondary-text-color);
font-size: var(--lumo-font-size-xs);
line-height: var(--lumo-line-height-xs);
margin-left: calc(var(--lumo-border-radius-m) / 4);
transition: color 0.2s;
}
/* helper-text position */
:host([has-helper][theme~='helper-above-field']) [part='helper-text']::before {
display: none;
}
:host([has-helper][theme~='helper-above-field']) [part='helper-text']::after {
content: '';
display: block;
height: 0.4em;
}
:host([has-helper][theme~='helper-above-field']) [part='label'] {
order: 0;
padding-bottom: 0.4em;
}
:host([has-helper][theme~='helper-above-field']) [part='helper-text'] {
order: 1;
}
:host([has-helper][theme~='helper-above-field']) [part='group-field'] {
order: 2;
}
:host([has-helper][theme~='helper-above-field']) [part='error-message'] {
order: 3;
}
/* Touch device adjustment */

@@ -102,4 +59,4 @@ @media (pointer: coarse) {

registerStyles('vaadin-checkbox-group', [requiredField, checkboxGroup], {
registerStyles('vaadin-checkbox-group', [requiredField, helper, checkboxGroup], {
moduleId: 'lumo-checkbox-group'
});
import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
import '@vaadin/vaadin-material-styles/color.js';
import { helper } from '@vaadin/vaadin-material-styles/mixins/helper.js';
import { requiredField } from '@vaadin/vaadin-material-styles/mixins/required-field.js';

@@ -28,11 +29,2 @@

[part='label']:empty {
display: none;
}
[part='label']:empty::before {
content: '\\00a0';
position: absolute;
}
:host([theme~='vertical']) [part='group-field'] {

@@ -51,24 +43,6 @@ display: flex;

}
/* According to material theme guidelines, helper text should be hidden when error message is set and input is invalid */
:host([has-helper][invalid][has-error-message]) [part='helper-text'] {
display: none;
}
:host([has-helper]) [part='helper-text']::before {
content: '';
display: block;
height: 6px;
}
[part='helper-text'],
[part='helper-text'] ::slotted(*) {
font-size: 0.75rem;
line-height: 1;
color: var(--material-secondary-text-color);
}
`;
registerStyles('vaadin-checkbox-group', [requiredField, checkboxGroup], {
registerStyles('vaadin-checkbox-group', [requiredField, helper, checkboxGroup], {
moduleId: 'material-checkbox-group'
});
SocketSocket SOC 2 Logo

Product

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

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc