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

@vaadin/vaadin-checkbox

Package Overview
Dependencies
Maintainers
16
Versions
262
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@vaadin/vaadin-checkbox - npm Package Compare versions

Comparing version 2.5.0 to 3.0.0-alpha1

83

package.json
{
"name": "@vaadin/vaadin-checkbox",
"version": "3.0.0-alpha1",
"description": "vaadin-checkbox",
"main": "vaadin-checkbox.js",
"module": "vaadin-checkbox.js",
"repository": "vaadin/vaadin-checkbox",
"keywords": [

@@ -10,7 +15,2 @@ "Vaadin",

],
"repository": "vaadin/vaadin-checkbox",
"homepage": "https://vaadin.com/components",
"name": "@vaadin/vaadin-checkbox",
"version": "2.5.0",
"main": "vaadin-checkbox.js",
"author": "Vaadin Ltd",

@@ -21,2 +21,3 @@ "license": "Apache-2.0",

},
"homepage": "https://vaadin.com/components",
"files": [

@@ -28,28 +29,68 @@ "vaadin-*.d.ts",

],
"resolutions": {
"inherits": "2.0.3",
"samsam": "1.1.3",
"supports-color": "3.1.2",
"type-detect": "1.0.0"
"scripts": {
"analyze": "polymer analyze vaadin-* > analysis.json",
"debug": "web-test-runner test/*.test.js --watch",
"dist": "rimraf dist && npm run analyze && rollup -c rollup.config.js && cp analysis.json dist",
"check-version": "magi check-version",
"lint": "npm run lint:js && npm run lint:css && npm run lint:types",
"lint:css": "stylelint src/*.js theme/**/*-styles.js",
"lint:js": "eslint src theme test",
"lint:types": "tsc",
"prestart": "npm run analyze",
"preversion": "magi update-version",
"screenshots": "hermione test/visual/test.js --update-refs",
"serve:dist": "web-dev-server --app-index dist/index.html --open",
"start": "web-dev-server --node-resolve --open",
"test": "web-test-runner test/*.test.js --coverage",
"test:sauce": "TEST_ENV=sauce npm test",
"test:visual": "hermione test/visual/test.js"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.js": [
"eslint --fix",
"prettier --write"
]
},
"dependencies": {
"@polymer/polymer": "^3.0.0",
"@vaadin/vaadin-control-state-mixin": "^2.2.1",
"@vaadin/vaadin-themable-mixin": "^1.6.1",
"@vaadin/vaadin-lumo-styles": "^1.4.1",
"@vaadin/vaadin-material-styles": "^1.2.0",
"@vaadin/vaadin-themable-mixin": "^1.6.2",
"@vaadin/vaadin-lumo-styles": "^1.6.1",
"@vaadin/vaadin-material-styles": "^1.3.2",
"@vaadin/vaadin-element-mixin": "^2.4.1"
},
"scripts": {
"generate-typings": "gen-typescript-declarations --outDir . --verify"
},
"devDependencies": {
"@esm-bundle/chai": "^4.1.5",
"@open-wc/rollup-plugin-html": "^1.2.5",
"@open-wc/testing-helpers": "^1.8.0",
"@polymer/iron-component-page": "^4.0.0",
"@polymer/iron-test-helpers": "^3.0.0",
"@webcomponents/webcomponentsjs": "^2.0.0",
"wct-browser-legacy": "^1.0.1",
"@vaadin/vaadin-demo-helpers": "^3.0.0",
"@polymer/iron-form": "^3.0.0",
"@vaadin/vaadin-button": "^2.4.0"
"@rollup/plugin-node-resolve": "^11.0.0",
"@web/dev-server": "~0.0.25",
"@web/test-runner": "~0.10.0",
"@web/test-runner-saucelabs": "~0.1.3",
"eslint": "^7.14.0",
"eslint-config-prettier": "^6.15.0",
"eslint-plugin-prettier": "^3.1.4",
"hermione": "^3.9.0",
"hermione-esm": "^0.4.0",
"hermione-sauce": "^0.1.0",
"husky": "^4.3.0",
"lint-staged": "^10.5.1",
"magi-cli": "^0.28.0",
"prettier": "^2.2.0",
"rimraf": "^3.0.2",
"rollup": "^2.34.1",
"rollup-plugin-terser": "^7.0.2",
"sinon": "^9.2.0",
"stylelint": "^13.8.0",
"stylelint-config-prettier": "^8.0.2",
"stylelint-config-vaadin": "^0.2.7",
"typescript": "^4.1.2"
}
}

79

README.md

@@ -1,11 +0,1 @@

[![npm version](https://badgen.net/npm/v/@vaadin/vaadin-checkbox)](https://www.npmjs.com/package/@vaadin/vaadin-checkbox)
[![Bower version](https://badgen.net/github/release/vaadin/vaadin-checkbox)](https://github.com/vaadin/vaadin-checkbox/releases)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/vaadin/vaadin-checkbox)
[![Build Status](https://travis-ci.org/vaadin/vaadin-checkbox.svg?branch=master)](https://travis-ci.org/vaadin/vaadin-checkbox)
[![Coverage Status](https://coveralls.io/repos/github/vaadin/vaadin-checkbox/badge.svg?branch=master)](https://coveralls.io/github/vaadin/vaadin-checkbox?branch=master)
[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/vaadin/web-components?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
[![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/vaadinvaadin-checkbox)
[![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/vaadinvaadin-checkbox.svg)](https://vaadin.com/directory/component/vaadinvaadin-checkbox)
# <vaadin-checkbox>

@@ -19,13 +9,9 @@

<!--
```
<custom-element-demo>
<template>
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="vaadin-checkbox.html">
<next-code-block></next-code-block>
</template>
</custom-element-demo>
```
-->
[![npm version](https://badgen.net/npm/v/@vaadin/vaadin-checkbox)](https://www.npmjs.com/package/@vaadin/vaadin-checkbox)
[![Build Status](https://travis-ci.org/vaadin/vaadin-checkbox.svg?branch=master)](https://travis-ci.org/vaadin/vaadin-checkbox)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/vaadin/vaadin-checkbox)
[![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/vaadinvaadin-checkbox)
[![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/vaadinvaadin-checkbox.svg)](https://vaadin.com/directory/component/vaadinvaadin-checkbox)
[![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)
```html

@@ -41,27 +27,5 @@ <vaadin-checkbox checked>Checked</vaadin-checkbox>

The Vaadin components are distributed as Bower and npm packages.
Please note that the version range is the same, as the API has not changed.
You should not mix Bower and npm versions in the same application, though.
Unlike the official Polymer Elements, the converted Polymer 3 compatible Vaadin components
are only published on npm, not pushed to GitHub repositories.
### Polymer 2 and HTML Imports Compatible Version
Install `vaadin-checkbox`:
```sh
bower i vaadin/vaadin-checkbox --save
```
Once installed, import it in your application:
```html
<link rel="import" href="bower_components/vaadin-checkbox/vaadin-checkbox.html">
```
### Polymer 3 and ES Modules Compatible Version
Install `vaadin-checkbox`:
```sh
npm i @vaadin/vaadin-checkbox --save

@@ -86,26 +50,27 @@ ```

`theme/lumo/vaadin-checkbox.html`
`theme/lumo/vaadin-checkbox.js`
- The component with the Material theme:
`theme/material/vaadin-checkbox.html`
`theme/material/vaadin-checkbox.js`
- Alias for `theme/lumo/vaadin-checkbox.html`:
- Alias for `theme/lumo/vaadin-checkbox.js`:
`vaadin-checkbox.html`
`vaadin-checkbox.js`
## Running demos and tests in a browser
## Running API docs and tests in a browser
1. Fork the `vaadin-checkbox` repository and clone it locally.
1. Make sure you have [npm](https://www.npmjs.com/) and [Bower](https://bower.io) installed.
1. Make sure you have [node.js](https://nodejs.org/) 12.x installed.
1. When in the `vaadin-checkbox` directory, run `npm install` and then `bower install` to install dependencies.
1. Make sure you have [npm](https://www.npmjs.com/) installed.
1. When in the `vaadin-checkbox` directory, run `npm install` to install dependencies.
1. Run `npm start`, browser will automatically open the component API documentation.
1. You can also open demo or in-browser tests by adding **demo** or **test** to the URL, for example:
1. You can also open visual tests, for example:
- http://127.0.0.1:3000/components/vaadin-checkbox/demo
- http://127.0.0.1:3000/components/vaadin-checkbox/test
- http://127.0.0.1:3000/test/visual/checkbox.html

@@ -115,10 +80,12 @@

1. When in the `vaadin-checkbox` directory, run `polymer test`
1. When in the `vaadin-checkbox` directory, run `npm test`
## Debugging tests in the browser
1. Run `npm run debug`, then choose manual mode (M) and open the link in browser.
## Following the coding style
We are using [ESLint](http://eslint.org/) for linting JavaScript code. You can check if your code is following our standards by running `npm run lint`, which will automatically lint all `.js` files as well as JavaScript snippets inside `.html` files.
We are using [ESLint](http://eslint.org/) for linting JavaScript code. You can check if your code is following our standards by running `npm run lint`, which will automatically lint all `.js` files.
## Big Thanks

@@ -125,0 +92,0 @@

78

src/vaadin-checkbox-group.d.ts

@@ -1,26 +0,25 @@

/**
* DO NOT EDIT
*
* This file was automatically generated by
* https://github.com/Polymer/tools/tree/master/packages/gen-typescript-declarations
*
* To modify these typings, edit the source file(s):
* src/vaadin-checkbox-group.js
*/
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
import { DirMixin } from '@vaadin/vaadin-element-mixin/vaadin-dir-mixin.js';
// tslint:disable:variable-name Describing an API that's defined elsewhere.
import { CheckboxElement } from './vaadin-checkbox.js';
import {PolymerElement} from '@polymer/polymer/polymer-element.js';
/**
* Fired when the `invalid` property changes.
*/
export type CheckboxGroupInvalidChanged = CustomEvent<{ value: boolean }>;
import {FlattenedNodesObserver} from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
/**
* Fired when the `value` property changes.
*/
export type CheckboxGroupValueChanged = CustomEvent<{ value: Array<string> }>;
import {ThemableMixin} from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
export interface CheckboxGroupElementEventMap {
'invalid-changed': CheckboxGroupInvalidChanged;
import {DirMixin} from '@vaadin/vaadin-element-mixin/vaadin-dir-mixin.js';
'value-changed': CheckboxGroupValueChanged;
}
import {CheckboxElement} from './vaadin-checkbox.js';
export interface CheckboxGroupEventMap extends HTMLElementEventMap, CheckboxGroupElementEventMap {}
import {html} from '@polymer/polymer/lib/utils/html-tag.js';
/**

@@ -61,12 +60,11 @@ * `<vaadin-checkbox-group>` is a Polymer element for grouping vaadin-checkboxes.

* See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)
*
* @fires {CustomEvent<boolean>} invalid-changed
* @fires {CustomEvent<Array<string>>} value-changed
*/
declare class CheckboxGroupElement extends
ThemableMixin(
DirMixin(
PolymerElement)) {
declare class CheckboxGroupElement extends ThemableMixin(DirMixin(HTMLElement)) {
/**
* The current disabled state of the checkbox group. True if group and all internal checkboxes are disabled.
*/
disabled: boolean|null|undefined;
disabled: boolean | null | undefined;

@@ -76,3 +74,3 @@ /**

*/
label: string|null|undefined;
label: string | null | undefined;

@@ -91,3 +89,3 @@ /**

*/
errorMessage: string|null|undefined;
errorMessage: string | null | undefined;

@@ -98,3 +96,3 @@ /**

*/
helperText: string|null;
helperText: string | null;

@@ -104,3 +102,3 @@ /**

*/
required: boolean|null|undefined;
required: boolean | null | undefined;

@@ -111,7 +109,5 @@ /**

invalid: boolean;
ready(): void;
/**
* Returns true if `value` is valid.
* `<iron-form>` uses this to check the validity or all its elements.
*

@@ -121,16 +117,32 @@ * @returns True if the value is valid.

validate(): boolean;
_addCheckboxToValue(value: string): void;
_removeCheckboxFromValue(value: string): void;
_changeSelectedCheckbox(checkbox: CheckboxElement|null): 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,
options?: boolean | AddEventListenerOptions
): void;
removeEventListener<K extends keyof CheckboxGroupEventMap>(
type: K,
listener: (this: CheckboxGroupElement, ev: CheckboxGroupEventMap[K]) => void,
options?: boolean | EventListenerOptions
): void;
}
declare global {
interface HTMLElementTagNameMap {
"vaadin-checkbox-group": CheckboxGroupElement;
'vaadin-checkbox-group': CheckboxGroupElement;
}
}
export {CheckboxGroupElement};
export { CheckboxGroupElement };

139

src/vaadin-checkbox-group.js
/**
@license
Copyright (c) 2017 Vaadin Ltd.
This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
*/
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
* @license
* Copyright (c) 2020 Vaadin Ltd.
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
*/
import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';

@@ -12,3 +11,3 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';

import { CheckboxElement } from './vaadin-checkbox.js';
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
/**

@@ -50,7 +49,9 @@ * `<vaadin-checkbox-group>` is a Polymer element for grouping vaadin-checkboxes.

*
* @extends PolymerElement
* @fires {CustomEvent<boolean>} invalid-changed
* @fires {CustomEvent<Array<string>>} value-changed
*
* @extends HTMLElement
* @mixes ThemableMixin
* @mixes DirMixin
* @element vaadin-checkbox-group
* @demo demo/index.html
*/

@@ -60,48 +61,51 @@ class CheckboxGroupElement extends ThemableMixin(DirMixin(PolymerElement)) {

return html`
<style>
:host {
display: inline-flex;
<style>
:host {
display: inline-flex;
}
/* Prevent horizontal overflow in IE 11 instead of wrapping checkboxes */
max-width: 100%;
}
:host::before {
content: '\\2003';
width: 0;
display: inline-block;
}
:host::before {
content: "\\2003";
width: 0;
display: inline-block;
}
:host([hidden]) {
display: none !important;
}
:host([hidden]) {
display: none !important;
}
.vaadin-group-field-container {
display: flex;
flex-direction: column;
}
.vaadin-group-field-container {
display: flex;
flex-direction: column;
[part='label']:empty {
display: none;
}
</style>
/* Prevent horizontal overflow in IE 11 instead of wrapping checkboxes */
width: 100%;
}
<div class="vaadin-group-field-container">
<label part="label">[[label]]</label>
[part="label"]:empty {
display: none;
}
</style>
<div part="group-field">
<slot id="slot"></slot>
</div>
<div class="vaadin-group-field-container">
<label part="label">[[label]]</label>
<div
part="helper-text"
on-click="focus"
aria-live="assertive"
aria-hidden$="[[_getHelperTextAriaHidden(helperText, _hasSlottedHelper)]]"
>
<slot name="helper">[[helperText]]</slot>
</div>
<div part="group-field">
<slot id="slot"></slot>
<div
part="error-message"
aria-live="assertive"
aria-hidden$="[[_getErrorMessageAriaHidden(invalid, errorMessage)]]"
>[[errorMessage]]</div
>
</div>
<div part="helper-text" on-click="focus" aria-live="assertive" aria-hidden\$="[[_getHelperTextAriaHidden(helperText, _hasSlottedHelper)]]">
<slot name="helper">[[helperText]]</slot>
</div>
<div part="error-message" aria-live="assertive" aria-hidden\$="[[_getErrorMessageAriaHidden(invalid, errorMessage)]]">[[errorMessage]]</div>
</div>
`;
`;
}

@@ -187,4 +191,3 @@

/** @private */
_hasSlottedHelper: Boolean,
_hasSlottedHelper: Boolean
};

@@ -194,5 +197,3 @@ }

static get observers() {
return [
'_updateValue(value, value.splices)'
];
return ['_updateValue(value, value.splices)'];
}

@@ -205,5 +206,9 @@

this.addEventListener('focusout', e => {
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))) {
if (
!this._checkboxes.some(
(checkbox) => e.relatedTarget === checkbox || checkbox.shadowRoot.contains(e.relatedTarget)
)
) {
this.validate();

@@ -218,6 +223,6 @@ this._setFocused(false);

this._observer = new FlattenedNodesObserver(this, info => {
this._observer = new FlattenedNodesObserver(this, (info) => {
const addedCheckboxes = this._filterCheckboxes(info.addedNodes);
addedCheckboxes.forEach(checkbox => {
addedCheckboxes.forEach((checkbox) => {
checkbox.addEventListener('checked-changed', checkedChangedListener);

@@ -234,3 +239,3 @@ if (this.disabled) {

this._filterCheckboxes(info.removedNodes).forEach(checkbox => {
this._filterCheckboxes(info.removedNodes).forEach((checkbox) => {
checkbox.removeEventListener('checked-changed', checkedChangedListener);

@@ -244,5 +249,5 @@ if (checkbox.checked) {

const hasValue = checkbox => {
const {value} = checkbox;
return checkbox.hasAttribute('value') || value && value !== 'on';
const hasValue = (checkbox) => {
const { value } = checkbox;
return checkbox.hasAttribute('value') || (value && value !== 'on');
};

@@ -257,3 +262,2 @@ if (!addedCheckboxes.every(hasValue)) {

* Returns true if `value` is valid.
* `<iron-form>` uses this to check the validity or all its elements.
*

@@ -274,4 +278,3 @@ * @return {boolean} True if the value is valid.

_filterCheckboxes(nodes) {
return Array.from(nodes)
.filter(child => child instanceof CheckboxElement);
return Array.from(nodes).filter((child) => child instanceof CheckboxElement);
}

@@ -283,3 +286,3 @@

this._checkboxes.forEach(checkbox => checkbox.disabled = disabled);
this._checkboxes.forEach((checkbox) => (checkbox.disabled = disabled));
}

@@ -302,3 +305,3 @@

_removeCheckboxFromValue(value) {
this.value = this.value.filter(v => v !== value);
this.value = this.value.filter((v) => v !== value);
}

@@ -323,3 +326,3 @@

/** @private */
_updateValue(value, splices) {
_updateValue(value) {
// setting initial value to empty array, skip validation

@@ -340,3 +343,3 @@ if (value.length === 0 && this._oldValue === undefined) {

// reflect the value array to checkboxes
this._checkboxes.forEach(checkbox => {
this._checkboxes.forEach((checkbox) => {
checkbox.checked = value.indexOf(checkbox.value) > -1;

@@ -371,3 +374,3 @@ });

if (value) {
this.setAttribute(name, (typeof value === 'boolean') ? '' : value);
this.setAttribute(name, typeof value === 'boolean' ? '' : value);
} else {

@@ -412,3 +415,3 @@ this.removeAttribute(name);

// 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._hasSlottedHelper = slottedNodes.filter((node) => node.nodeType !== 3).length > 0;

@@ -415,0 +418,0 @@ this._setOrToggleAttribute('has-helper', this._hasSlottedHelper ? 'slotted' : !!this.helperText);

66

src/vaadin-checkbox.d.ts

@@ -1,25 +0,26 @@

/**
* DO NOT EDIT
*
* This file was automatically generated by
* https://github.com/Polymer/tools/tree/master/packages/gen-typescript-declarations
*
* To modify these typings, edit the source file(s):
* src/vaadin-checkbox.js
*/
import { GestureEventListeners } from '@polymer/polymer/lib/mixins/gesture-event-listeners.js';
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
// tslint:disable:variable-name Describing an API that's defined elsewhere.
import { ControlStateMixin } from '@vaadin/vaadin-control-state-mixin/vaadin-control-state-mixin.js';
import {PolymerElement} from '@polymer/polymer/polymer-element.js';
import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
import {GestureEventListeners} from '@polymer/polymer/lib/mixins/gesture-event-listeners.js';
/**
* Fired when the `checked` property changes.
*/
export type CheckboxCheckedChanged = CustomEvent<{ value: boolean }>;
import {ThemableMixin} from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
/**
* Fired when the `indeterminate` property changes.
*/
export type CheckboxIndeterminateChanged = CustomEvent<{ value: boolean }>;
import {ControlStateMixin} from '@vaadin/vaadin-control-state-mixin/vaadin-control-state-mixin.js';
export interface CheckboxElementEventMap {
'checked-changed': CheckboxCheckedChanged;
import {ElementMixin} from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
'indeterminate-changed': CheckboxIndeterminateChanged;
}
import {html} from '@polymer/polymer/lib/utils/html-tag.js';
export interface CheckboxEventMap extends HTMLElementEventMap, CheckboxElementEventMap {}

@@ -57,9 +58,9 @@ /**

* See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)
*
* @fires {CustomEvent<boolean>} checked-changed
* @fires {CustomEvent<boolean>} indeterminate-changed
*/
declare class CheckboxElement extends
ElementMixin(
ControlStateMixin(
ThemableMixin(
GestureEventListeners(
PolymerElement)))) {
declare class CheckboxElement extends ElementMixin(
ControlStateMixin(ThemableMixin(GestureEventListeners(HTMLElement)))
) {
readonly focusElement: HTMLInputElement;

@@ -86,14 +87,25 @@

*/
value: string|null|undefined;
ready(): void;
value: string | null | undefined;
_toggleChecked(): void;
addEventListener<K extends keyof CheckboxEventMap>(
type: K,
listener: (this: CheckboxElement, ev: CheckboxEventMap[K]) => void,
options?: boolean | AddEventListenerOptions
): void;
removeEventListener<K extends keyof CheckboxEventMap>(
type: K,
listener: (this: CheckboxElement, ev: CheckboxEventMap[K]) => void,
options?: boolean | EventListenerOptions
): void;
}
declare global {
interface HTMLElementTagNameMap {
"vaadin-checkbox": CheckboxElement;
'vaadin-checkbox': CheckboxElement;
}
}
export {CheckboxElement};
export { CheckboxElement };

134

src/vaadin-checkbox.js
/**
@license
Copyright (c) 2017 Vaadin Ltd.
This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
*/
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
* @license
* Copyright (c) 2020 Vaadin Ltd.
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
*/
import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
import { GestureEventListeners } from '@polymer/polymer/lib/mixins/gesture-event-listeners.js';

@@ -12,3 +11,3 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';

import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
/**

@@ -46,3 +45,6 @@ * `<vaadin-checkbox>` is a Web Component for customized checkboxes.

*
* @extends PolymerElement
* @fires {CustomEvent<boolean>} checked-changed
* @fires {CustomEvent<boolean>} indeterminate-changed
*
* @extends HTMLElement
* @mixes ElementMixin

@@ -52,59 +54,61 @@ * @mixes ControlStateMixin

* @mixes GestureEventListeners
* @demo demo/index.html
*/
class CheckboxElement extends
ElementMixin(
ControlStateMixin(
ThemableMixin(
GestureEventListeners(PolymerElement)))) {
class CheckboxElement extends ElementMixin(ControlStateMixin(ThemableMixin(GestureEventListeners(PolymerElement)))) {
static get template() {
return html`
<style>
:host {
display: inline-block;
}
<style>
:host {
display: inline-block;
}
:host([hidden]) {
display: none !important;
}
:host([hidden]) {
display: none !important;
}
label {
display: inline-flex;
align-items: baseline;
outline: none;
}
label {
display: inline-flex;
align-items: baseline;
outline: none;
}
[part="checkbox"] {
position: relative;
display: inline-block;
flex: none;
}
[part='checkbox'] {
position: relative;
display: inline-block;
flex: none;
}
input[type="checkbox"] {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: inherit;
margin: 0;
}
input[type='checkbox'] {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: inherit;
margin: 0;
}
:host([disabled]) {
-webkit-tap-highlight-color: transparent;
}
</style>
:host([disabled]) {
-webkit-tap-highlight-color: transparent;
}
</style>
<label>
<span part="checkbox">
<input type="checkbox" checked="{{checked::change}}" disabled\$="[[disabled]]" indeterminate="{{indeterminate::change}}" role="presentation" tabindex="-1">
</span>
<label>
<span part="checkbox">
<input
type="checkbox"
checked="{{checked::change}}"
disabled$="[[disabled]]"
indeterminate="{{indeterminate::change}}"
role="presentation"
tabindex="-1"
/>
</span>
<span part="label">
<slot></slot>
</span>
</label>
`;
<span part="label">
<slot></slot>
</span>
</label>
`;
}

@@ -117,3 +121,3 @@

static get version() {
return '2.5.0';
return '3.0.0-alpha1';
}

@@ -196,3 +200,5 @@

this.shadowRoot.querySelector('[part~="label"]').querySelector('slot')
this.shadowRoot
.querySelector('[part~="label"]')
.querySelector('slot')
.addEventListener('slotchange', this._updateLabelAttribute.bind(this));

@@ -217,6 +223,6 @@

// The assigned nodes considered to be empty if there is no slotted content or only one empty text node
return nodes.length === 0 ||
(nodes.length == 1
&& nodes[0].nodeType == Node.TEXT_NODE
&& nodes[0].textContent.trim() === '');
return (
nodes.length === 0 ||
(nodes.length == 1 && nodes[0].nodeType == Node.TEXT_NODE && nodes[0].textContent.trim() === '')
);
}

@@ -255,3 +261,3 @@

// KEYDOWN
this.addEventListener('keydown', e => {
this.addEventListener('keydown', (e) => {
if (this.__interactionsAllowed(e) && e.keyCode === 32) {

@@ -264,3 +270,3 @@ e.preventDefault();

// KEYUP
this.addEventListener('keyup', e => {
this.addEventListener('keyup', (e) => {
if (this.__interactionsAllowed(e) && e.keyCode === 32) {

@@ -326,3 +332,3 @@ e.preventDefault();

this.checked = !this.checked;
this.dispatchEvent(new CustomEvent('change', {composed: false, bubbles: true}));
this.dispatchEvent(new CustomEvent('change', { composed: false, bubbles: true }));
}

@@ -329,0 +335,0 @@

167

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

@@ -0,104 +1,101 @@

import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
import '@vaadin/vaadin-lumo-styles/color.js';
import '@vaadin/vaadin-lumo-styles/mixins/required-field.js';
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
const $_documentContainer = html`<dom-module id="lumo-checkbox-group" theme-for="vaadin-checkbox-group">
<template>
<style include="lumo-required-field">
:host {
color: var(--lumo-body-text-color);
font-size: var(--lumo-font-size-m);
font-family: var(--lumo-font-family);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-tap-highlight-color: transparent;
padding: var(--lumo-space-xs) 0;
}
registerStyles(
'vaadin-checkbox-group',
css`
:host {
color: var(--lumo-body-text-color);
font-size: var(--lumo-font-size-m);
font-family: var(--lumo-font-family);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-tap-highlight-color: transparent;
padding: var(--lumo-space-xs) 0;
}
:host::before {
height: var(--lumo-size-m);
box-sizing: border-box;
display: inline-flex;
align-items: center;
}
:host::before {
height: var(--lumo-size-m);
box-sizing: border-box;
display: inline-flex;
align-items: center;
}
:host([theme~="vertical"]) [part="group-field"] {
display: flex;
flex-direction: column;
}
:host([theme~='vertical']) [part='group-field'] {
display: flex;
flex-direction: column;
}
[part="label"] {
padding-bottom: 0.7em;
}
[part='label'] {
padding-bottom: 0.7em;
}
:host([disabled]) [part="label"] {
color: var(--lumo-disabled-text-color);
-webkit-text-fill-color: var(--lumo-disabled-text-color);
}
:host([disabled]) [part='label'] {
color: var(--lumo-disabled-text-color);
-webkit-text-fill-color: var(--lumo-disabled-text-color);
}
:host([focused]:not([disabled])) [part="label"] {
color: var(--lumo-primary-text-color);
}
:host([focused]:not([disabled])) [part='label'] {
color: var(--lumo-primary-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(*) {
color: var(--lumo-body-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(*) {
color: var(--lumo-body-text-color);
}
:host([has-helper]) [part="helper-text"]::before {
content: "";
display: block;
height: 0.4em;
}
: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;
}
[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 */
/* 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"]::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="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="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="helper-text"] {
order: 1;
}
:host([has-helper][theme~='helper-above-field']) [part='group-field'] {
order: 2;
}
:host([has-helper][theme~="helper-above-field"]) [part="group-field"] {
order: 2;
}
:host([has-helper][theme~='helper-above-field']) [part='error-message'] {
order: 3;
}
:host([has-helper][theme~="helper-above-field"]) [part="error-message"] {
order: 3;
/* Touch device adjustment */
@media (pointer: coarse) {
:host(:hover:not([disabled]):not([focused])) [part='label'] {
color: var(--lumo-secondary-text-color);
}
/* Touch device adjustment */
@media (pointer: coarse) {
:host(:hover:not([disabled]):not([focused])) [part="label"] {
color: var(--lumo-secondary-text-color);
}
}
</style>
</template>
</dom-module>`;
document.head.appendChild($_documentContainer.content);
}
`,
{ moduleId: 'lumo-checkbox-group', include: ['lumo-required-field'] }
);

291

theme/lumo/vaadin-checkbox-styles.js

@@ -0,182 +1,159 @@

import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
import '@vaadin/vaadin-lumo-styles/color.js';
import '@vaadin/vaadin-lumo-styles/style.js';
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
const $_documentContainer = html`<dom-module id="lumo-checkbox" theme-for="vaadin-checkbox">
<template>
<style include="lumo-checkbox-style lumo-checkbox-effects">
/* IE11 only */
::-ms-backdrop,
[part="checkbox"] {
line-height: 1;
}
</style>
</template>
</dom-module><dom-module id="lumo-checkbox-style">
<template>
<style>
:host {
-webkit-tap-highlight-color: transparent;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: default;
outline: none;
}
registerStyles(
'vaadin-checkbox',
css`
:host {
-webkit-tap-highlight-color: transparent;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
cursor: default;
outline: none;
}
[part="label"]:not([empty]) {
margin: 0.1875em 0.875em 0.1875em 0.375em;
}
[part='label']:not([empty]) {
margin: 0.1875em 0.875em 0.1875em 0.375em;
}
[part="checkbox"] {
width: calc(1em + 2px);
height: calc(1em + 2px);
margin: 0.1875em;
position: relative;
border-radius: var(--lumo-border-radius-s);
background-color: var(--lumo-contrast-20pct);
transition: transform 0.2s cubic-bezier(.12, .32, .54, 2), background-color 0.15s;
pointer-events: none;
line-height: 1.2;
}
[part='checkbox'] {
width: calc(1em + 2px);
height: calc(1em + 2px);
margin: 0.1875em;
position: relative;
border-radius: var(--lumo-border-radius-s);
background-color: var(--lumo-contrast-20pct);
transition: transform 0.2s cubic-bezier(0.12, 0.32, 0.54, 2), background-color 0.15s;
pointer-events: none;
line-height: 1.2;
}
:host([indeterminate]) [part="checkbox"],
:host([checked]) [part="checkbox"] {
background-color: var(--lumo-primary-color);
}
:host([indeterminate]) [part='checkbox'],
:host([checked]) [part='checkbox'] {
background-color: var(--lumo-primary-color);
}
/* Needed to align the checkbox nicely on the baseline */
[part="checkbox"]::before {
content: "\\2003";
}
/* Needed to align the checkbox nicely on the baseline */
[part='checkbox']::before {
content: '\\2003';
}
/* Checkmark */
[part="checkbox"]::after {
content: "";
display: inline-block;
width: 0;
height: 0;
border: 0 solid var(--lumo-primary-contrast-color);
border-width: 0.1875em 0 0 0.1875em;
box-sizing: border-box;
transform-origin: 0 0;
position: absolute;
top: 0.8125em;
left: 0.5em;
transform: scale(0.55) rotate(-135deg);
opacity: 0;
}
/* Checkmark */
[part='checkbox']::after {
content: '';
display: inline-block;
width: 0;
height: 0;
border: 0 solid var(--lumo-primary-contrast-color);
border-width: 0.1875em 0 0 0.1875em;
box-sizing: border-box;
transform-origin: 0 0;
position: absolute;
top: 0.8125em;
left: 0.5em;
transform: scale(0.55) rotate(-135deg);
opacity: 0;
}
:host([checked]) [part="checkbox"]::after {
opacity: 1;
width: 0.625em;
height: 1.0625em;
}
:host([checked]) [part='checkbox']::after {
opacity: 1;
width: 0.625em;
height: 1.0625em;
}
/* Indeterminate checkmark */
/* Indeterminate checkmark */
:host([indeterminate]) [part='checkbox']::after {
transform: none;
opacity: 1;
top: 45%;
height: 10%;
left: 22%;
right: 22%;
width: auto;
border: 0;
background-color: var(--lumo-primary-contrast-color);
transition: opacity 0.25s;
}
:host([indeterminate]) [part="checkbox"]::after {
transform: none;
opacity: 1;
top: 45%;
height: 10%;
left: 22%;
right: 22%;
width: auto;
border: 0;
background-color: var(--lumo-primary-contrast-color);
transition: opacity 0.25s;
}
/* Focus ring */
:host([focus-ring]) [part='checkbox'] {
box-shadow: 0 0 0 3px var(--lumo-primary-color-50pct);
}
/* Focus ring */
/* Disabled */
:host([disabled]) {
pointer-events: none;
color: var(--lumo-disabled-text-color);
}
:host([focus-ring]) [part="checkbox"] {
box-shadow: 0 0 0 3px var(--lumo-primary-color-50pct);
}
:host([disabled]) [part='label'] ::slotted(*) {
color: inherit;
}
/* Disabled */
:host([disabled]) [part='checkbox'] {
background-color: var(--lumo-contrast-10pct);
}
:host([disabled]) {
pointer-events: none;
color: var(--lumo-disabled-text-color);
}
:host([disabled]) [part='checkbox']::after {
border-color: var(--lumo-contrast-30pct);
}
:host([disabled]) [part="label"] ::slotted(*) {
color: inherit;
}
:host([indeterminate][disabled]) [part='checkbox']::after {
background-color: var(--lumo-contrast-30pct);
}
:host([disabled]) [part="checkbox"] {
background-color: var(--lumo-contrast-10pct);
}
/* RTL specific styles */
:host([dir='rtl']) [part='label']:not([empty]) {
margin: 0.1875em 0.375em 0.1875em 0.875em;
}
:host([disabled]) [part="checkbox"]::after {
border-color: var(--lumo-contrast-30pct);
}
/* Transition the checkmark if activated with the mouse (disabled for grid select-all this way) */
:host(:hover) [part='checkbox']::after {
transition: width 0.1s, height 0.25s;
}
:host([indeterminate][disabled]) [part="checkbox"]::after {
background-color: var(--lumo-contrast-30pct);
}
/* Used for activation "halo" */
[part='checkbox']::before {
color: transparent;
display: inline-block;
width: 100%;
height: 100%;
border-radius: inherit;
background-color: inherit;
transform: scale(1.4);
opacity: 0;
transition: transform 0.1s, opacity 0.8s;
}
/* RTL specific styles */
/* Hover */
:host(:not([checked]):not([indeterminate]):not([disabled]):hover) [part='checkbox'] {
background-color: var(--lumo-contrast-30pct);
}
:host([dir="rtl"]) [part="label"]:not([empty]) {
margin: 0.1875em 0.375em 0.1875em 0.875em;
/* Disable hover for touch devices */
@media (pointer: coarse) {
:host(:not([checked]):not([indeterminate]):not([disabled]):hover) [part='checkbox'] {
background-color: var(--lumo-contrast-20pct);
}
</style>
</template>
</dom-module><dom-module id="lumo-checkbox-effects">
<template>
<style>
/* Transition the checkmark if activated with the mouse (disabled for grid select-all this way) */
:host(:hover) [part="checkbox"]::after {
transition: width 0.1s, height 0.25s;
}
}
/* Used for activation "halo" */
[part="checkbox"]::before {
color: transparent;
display: inline-block;
width: 100%;
height: 100%;
border-radius: inherit;
background-color: inherit;
transform: scale(1.4);
opacity: 0;
transition: transform 0.1s, opacity 0.8s;
}
/* Active */
:host([active]) [part='checkbox'] {
transform: scale(0.9);
transition-duration: 0.05s;
}
/* Hover */
:host([active][checked]) [part='checkbox'] {
transform: scale(1.1);
}
:host(:not([checked]):not([indeterminate]):not([disabled]):hover) [part="checkbox"] {
background-color: var(--lumo-contrast-30pct);
}
/* Disable hover for touch devices */
@media (pointer: coarse) {
:host(:not([checked]):not([indeterminate]):not([disabled]):hover) [part="checkbox"] {
background-color: var(--lumo-contrast-20pct);
}
}
/* Active */
:host([active]) [part="checkbox"] {
transform: scale(0.9);
transition-duration: 0.05s;
}
:host([active][checked]) [part="checkbox"] {
transform: scale(1.1);
}
:host([active]:not([checked])) [part="checkbox"]::before {
transition-duration: 0.01s, 0.01s;
transform: scale(0);
opacity: 0.4;
}
</style>
</template>
</dom-module>`;
document.head.appendChild($_documentContainer.content);
:host([active]:not([checked])) [part='checkbox']::before {
transition-duration: 0.01s, 0.01s;
transform: scale(0);
opacity: 0.4;
}
`,
{ moduleId: 'lumo-checkbox' }
);

120

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

@@ -0,74 +1,72 @@

import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
import '@vaadin/vaadin-material-styles/color.js';
import '@vaadin/vaadin-material-styles/mixins/required-field.js';
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
const $_documentContainer = html`<dom-module id="material-checkbox-group" theme-for="vaadin-checkbox-group">
<template>
<style include="material-required-field">
:host {
display: inline-flex;
position: relative;
padding-top: 8px;
margin-bottom: 8px;
outline: none;
color: var(--material-body-text-color);
font-size: var(--material-body-font-size);
line-height: 24px;
font-family: var(--material-font-family);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
registerStyles(
'vaadin-checkbox-group',
css`
:host {
display: inline-flex;
position: relative;
padding-top: 8px;
margin-bottom: 8px;
outline: none;
color: var(--material-body-text-color);
font-size: var(--material-body-font-size);
line-height: 24px;
font-family: var(--material-font-family);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
:host::before {
line-height: 32px;
}
:host::before {
line-height: 32px;
}
:host([has-label]) {
padding-top: 24px;
}
:host([has-label]) {
padding-top: 24px;
}
[part="label"]:empty {
display: none;
}
[part='label']:empty {
display: none;
}
[part="label"]:empty::before {
content: " ";
position: absolute;
}
[part='label']:empty::before {
content: '\\00a0';
position: absolute;
}
:host([theme~="vertical"]) [part="group-field"] {
display: flex;
flex-direction: column;
}
:host([theme~='vertical']) [part='group-field'] {
display: flex;
flex-direction: column;
}
:host([disabled]) [part="label"] {
color: var(--material-disabled-text-color);
-webkit-text-fill-color: var(--material-disabled-text-color);
}
:host([disabled]) [part='label'] {
color: var(--material-disabled-text-color);
-webkit-text-fill-color: var(--material-disabled-text-color);
}
:host([focused]:not([invalid])) [part="label"] {
color: var(--material-primary-text-color);
}
:host([focused]:not([invalid])) [part='label'] {
color: var(--material-primary-text-color);
}
/* 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;
}
/* 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;
}
:host([has-helper]) [part='helper-text']::before {
content: '';
display: block;
height: 6px;
}
[part="helper-text"],
[part="helper-text"] ::slotted(*) {
font-size: .75rem;
line-height: 1;
color: var(--material-secondary-text-color);
}
</style>
</template>
</dom-module>`;
document.head.appendChild($_documentContainer.content);
[part='helper-text'],
[part='helper-text'] ::slotted(*) {
font-size: 0.75rem;
line-height: 1;
color: var(--material-secondary-text-color);
}
`,
{ moduleId: 'material-checkbox-group', include: ['material-required-field'] }
);

1

theme/material/vaadin-checkbox-group.js

@@ -0,2 +1,3 @@

import './vaadin-checkbox-styles.js';
import './vaadin-checkbox-group-styles.js';
import '../../src/vaadin-checkbox-group.js';

248

theme/material/vaadin-checkbox-styles.js

@@ -0,149 +1,135 @@

import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
import '@vaadin/vaadin-material-styles/color.js';
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
const $_documentContainer = html`<dom-module id="material-checkbox" theme-for="vaadin-checkbox">
<template>
<style>
:host {
display: inline-block;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
outline: none;
-webkit-tap-highlight-color: transparent;
}
registerStyles(
'vaadin-checkbox',
css`
:host {
display: inline-block;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
outline: none;
-webkit-tap-highlight-color: transparent;
}
[part="label"]:not([empty]) {
margin: 3px 12px 3px 6px;
}
[part='label']:not([empty]) {
margin: 3px 12px 3px 6px;
}
[part="native-checkbox"] {
opacity: 0;
position: absolute;
}
[part='native-checkbox'] {
opacity: 0;
position: absolute;
}
[part="checkbox"] {
display: inline-block;
width: 16px;
height: 16px;
flex: none;
margin: 4px;
position: relative;
border-radius: 2px;
box-shadow: inset 0 0 0 2px var(--material-secondary-text-color);
pointer-events: none;
line-height: 1.275;
background-color: transparent;
}
[part='checkbox'] {
display: inline-block;
width: 16px;
height: 16px;
flex: none;
margin: 4px;
position: relative;
border-radius: 2px;
box-shadow: inset 0 0 0 2px var(--material-secondary-text-color);
pointer-events: none;
line-height: 1.275;
background-color: transparent;
}
/* IE11 only */
::-ms-backdrop,
[part="checkbox"] {
line-height: 1;
}
/* Used for the ripple */
[part='checkbox']::before {
/* Needed to align the checkbox nicely on the baseline */
content: '\\2003';
display: inline-block;
width: 100%;
height: 100%;
border-radius: 50%;
background-color: var(--material-disabled-text-color);
transform: scale(0);
opacity: 0;
transition: transform 0s 0.8s, opacity 0.8s;
will-change: transform, opacity;
}
/* Used for the ripple */
[part="checkbox"]::before {
/* Needed to align the checkbox nicely on the baseline */
content: "\\2003";
display: inline-block;
width: 100%;
height: 100%;
border-radius: 50%;
background-color: var(--material-disabled-text-color);
transform: scale(0);
opacity: 0;
transition: transform 0s 0.8s, opacity 0.8s;
will-change: transform, opacity;
}
/* Used for the checkmark */
[part='checkbox']::after {
content: '';
display: inline-block;
width: 10px;
height: 19px;
border: 0 solid var(--material-background-color);
border-width: 3px 0 0 3px;
box-sizing: border-box;
transform-origin: 0 0;
position: absolute;
top: 12px;
left: 6px;
transform: scale(0) rotate(-135deg);
transition: transform 0.2s;
}
/* Used for the checkmark */
[part="checkbox"]::after {
content: "";
display: inline-block;
width: 10px;
height: 19px;
border: 0 solid var(--material-background-color);
border-width: 3px 0 0 3px;
box-sizing: border-box;
transform-origin: 0 0;
position: absolute;
top: 12px;
left: 6px;
transform: scale(0) rotate(-135deg);
transition: transform 0.2s;
}
:host([indeterminate]) [part='checkbox'],
:host([checked]) [part='checkbox'] {
background-color: var(--material-primary-color);
box-shadow: none;
}
:host([indeterminate]) [part="checkbox"],
:host([checked]) [part="checkbox"] {
background-color: var(--material-primary-color);
box-shadow: none;
}
:host([checked]) [part='checkbox']::after {
transform: scale(0.55) rotate(-135deg);
}
:host([checked]) [part="checkbox"]::after {
transform: scale(0.55) rotate(-135deg);
}
:host(:not([checked]):not([indeterminate]):not([disabled]):hover) [part='checkbox'] {
background-color: transparent;
}
:host(:not([checked]):not([indeterminate]):not([disabled]):hover) [part="checkbox"] {
background-color: transparent;
}
:host([focus-ring]) [part='checkbox']::before,
:host([active]) [part='checkbox']::before {
transition-duration: 0.08s, 0.01s;
transition-delay: 0s, 0s;
transform: scale(2.5);
opacity: 0.15;
}
:host([focus-ring]) [part="checkbox"]::before,
:host([active]) [part="checkbox"]::before {
transition-duration: 0.08s, 0.01s;
transition-delay: 0s, 0s;
transform: scale(2.5);
opacity: 0.15;
}
:host([checked]) [part='checkbox']::before {
background-color: var(--material-primary-color);
}
:host([checked]) [part="checkbox"]::before {
background-color: var(--material-primary-color);
}
:host([indeterminate]) [part='checkbox']::after {
transform: none;
opacity: 1;
top: 45%;
height: 10%;
left: 22%;
right: 22%;
width: auto;
border: 0;
background-color: var(--material-background-color);
transition: opacity 0.4s;
}
:host([indeterminate]) [part="checkbox"]::after {
transform: none;
opacity: 1;
top: 45%;
height: 10%;
left: 22%;
right: 22%;
width: auto;
border: 0;
background-color: var(--material-background-color);
transition: opacity 0.4s;
}
:host([disabled]) {
pointer-events: none;
color: var(--material-disabled-text-color);
}
:host([disabled]) {
pointer-events: none;
color: var(--material-disabled-text-color);
}
:host([disabled]) ::slotted(*) {
color: inherit;
}
:host([disabled]) ::slotted(*) {
color: inherit;
}
:host([disabled]:not([checked]):not([indeterminate])) [part='checkbox'] {
box-shadow: inset 0 0 0 2px var(--material-disabled-color);
}
:host([disabled]:not([checked]):not([indeterminate])) [part="checkbox"] {
box-shadow: inset 0 0 0 2px var(--material-disabled-color);
}
:host([disabled][checked]) [part='checkbox'],
:host([disabled][indeterminate]) [part='checkbox'] {
background-color: var(--material-disabled-color);
}
:host([disabled][checked]) [part="checkbox"],
:host([disabled][indeterminate]) [part="checkbox"] {
background-color: var(--material-disabled-color);
}
/* Workaround for vaadin-checkbox issue: https://github.com/vaadin/vaadin-checkbox/issues/16 */
[part="native-checkbox"]:checked ~ [part="checkbox"] {
opacity: 1;
}
/* RTL specific styles */
:host([dir="rtl"]) [part="label"]:not([empty]) {
margin: 3px 6px 3px 12px;
}
</style>
</template>
</dom-module>`;
document.head.appendChild($_documentContainer.content);
/* RTL specific styles */
:host([dir='rtl']) [part='label']:not([empty]) {
margin: 3px 6px 3px 12px;
}
`,
{ moduleId: 'material-checkbox' }
);

13

vaadin-checkbox-group.d.ts

@@ -1,14 +0,1 @@

/**
* DO NOT EDIT
*
* This file was automatically generated by
* https://github.com/Polymer/tools/tree/master/packages/gen-typescript-declarations
*
* To modify these typings, edit the source file(s):
* vaadin-checkbox-group.js
*/
// tslint:disable:variable-name Describing an API that's defined elsewhere.
export * from './src/vaadin-checkbox-group.js';

13

vaadin-checkbox.d.ts

@@ -1,14 +0,1 @@

/**
* DO NOT EDIT
*
* This file was automatically generated by
* https://github.com/Polymer/tools/tree/master/packages/gen-typescript-declarations
*
* To modify these typings, edit the source file(s):
* vaadin-checkbox.js
*/
// tslint:disable:variable-name Describing an API that's defined elsewhere.
export * from './src/vaadin-checkbox.js';
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