├── .stylelintrc
├── vaadin-checkbox.html
├── screenshot.png
├── .gitignore
├── vaadin-checkbox-group.html
├── theme
├── lumo
│ ├── vaadin-checkbox.html
│ ├── vaadin-checkbox-group.html
│ ├── vaadin-checkbox-group-styles.html
│ └── vaadin-checkbox-styles.html
└── material
│ ├── vaadin-checkbox.html
│ ├── vaadin-checkbox-group.html
│ ├── vaadin-checkbox-group-styles.html
│ └── vaadin-checkbox-styles.html
├── demo
├── .eslintrc.json
├── checkbox-demo.js
├── index.html
├── demos.json
├── checkbox-validation-demos.html
├── checkbox-styling-demos.html
├── checkbox-theme-variants-demos.html
├── checkbox-presentation-demos.html
└── checkbox-basic-demos.html
├── gen-tsd.json
├── test
├── test-suites.js
├── visual
│ ├── screens
│ │ └── vaadin-checkbox
│ │ │ ├── focus-tests-lumo
│ │ │ └── focus
│ │ │ │ ├── chrome.png
│ │ │ │ └── firefox.png
│ │ │ ├── group-tests-lumo
│ │ │ └── default
│ │ │ │ ├── chrome.png
│ │ │ │ └── firefox.png
│ │ │ ├── default-tests-lumo
│ │ │ ├── checked
│ │ │ │ ├── chrome.png
│ │ │ │ └── firefox.png
│ │ │ ├── default
│ │ │ │ ├── chrome.png
│ │ │ │ └── firefox.png
│ │ │ └── focus-ring
│ │ │ │ ├── chrome.png
│ │ │ │ └── firefox.png
│ │ │ ├── focus-tests-material
│ │ │ └── focus
│ │ │ │ ├── chrome.png
│ │ │ │ └── firefox.png
│ │ │ ├── group-tests-material
│ │ │ └── default
│ │ │ │ ├── chrome.png
│ │ │ │ └── firefox.png
│ │ │ ├── validation-tests-lumo
│ │ │ └── error
│ │ │ │ ├── chrome.png
│ │ │ │ └── firefox.png
│ │ │ ├── default-rtl-tests-lumo
│ │ │ ├── checked
│ │ │ │ ├── chrome.png
│ │ │ │ └── firefox.png
│ │ │ └── default
│ │ │ │ ├── chrome.png
│ │ │ │ └── firefox.png
│ │ │ ├── default-tests-material
│ │ │ ├── checked
│ │ │ │ ├── chrome.png
│ │ │ │ └── firefox.png
│ │ │ ├── default
│ │ │ │ ├── chrome.png
│ │ │ │ └── firefox.png
│ │ │ └── focus-ring
│ │ │ │ ├── chrome.png
│ │ │ │ └── firefox.png
│ │ │ ├── helper-text-tests-lumo
│ │ │ └── default
│ │ │ │ ├── chrome.png
│ │ │ │ └── firefox.png
│ │ │ ├── disabled-group-tests-lumo
│ │ │ └── default
│ │ │ │ ├── chrome.png
│ │ │ │ └── firefox.png
│ │ │ ├── validation-rtl-tests-lumo
│ │ │ └── error
│ │ │ │ ├── chrome.png
│ │ │ │ └── firefox.png
│ │ │ ├── validation-tests-material
│ │ │ └── error
│ │ │ │ ├── chrome.png
│ │ │ │ └── firefox.png
│ │ │ ├── wrapping-group-tests-lumo
│ │ │ └── default
│ │ │ │ ├── chrome.png
│ │ │ │ └── firefox.png
│ │ │ ├── wrapping-rtl-tests-lumo
│ │ │ └── default
│ │ │ │ ├── chrome.png
│ │ │ │ └── firefox.png
│ │ │ ├── default-rtl-tests-material
│ │ │ ├── checked
│ │ │ │ ├── chrome.png
│ │ │ │ └── firefox.png
│ │ │ └── default
│ │ │ │ ├── chrome.png
│ │ │ │ └── firefox.png
│ │ │ ├── helper-text-tests-material
│ │ │ └── default
│ │ │ │ ├── chrome.png
│ │ │ │ └── firefox.png
│ │ │ ├── validation-rtl-tests-material
│ │ │ └── error
│ │ │ │ ├── chrome.png
│ │ │ │ └── firefox.png
│ │ │ ├── wrapping-rtl-tests-material
│ │ │ └── default
│ │ │ │ ├── chrome.png
│ │ │ │ └── firefox.png
│ │ │ ├── disabled-group-tests-material
│ │ │ └── default
│ │ │ │ ├── chrome.png
│ │ │ │ └── firefox.png
│ │ │ ├── wrapping-group-tests-material
│ │ │ └── default
│ │ │ │ ├── chrome.png
│ │ │ │ └── firefox.png
│ │ │ ├── theme-vertical-group-tests-lumo
│ │ │ └── default
│ │ │ │ ├── chrome.png
│ │ │ │ └── firefox.png
│ │ │ ├── helper-text-above-field-tests-lumo
│ │ │ └── default
│ │ │ │ ├── chrome.png
│ │ │ │ └── firefox.png
│ │ │ ├── theme-vertical-group-tests-material
│ │ │ └── default
│ │ │ │ ├── chrome.png
│ │ │ │ └── firefox.png
│ │ │ └── validation-with-helper-tests-material
│ │ │ └── default
│ │ │ ├── chrome.png
│ │ │ └── firefox.png
│ ├── default-rtl.html
│ ├── test.js
│ └── default.html
├── helpers.html
├── .eslintrc
├── index.html
├── validation.html
├── accessibility.html
├── vaadin-checkbox_test.html
└── vaadin-checkbox-group_test.html
├── .eslintrc.json
├── magi-p3-post.js
├── index.html
├── .github
├── ISSUE_TEMPLATE
│ └── config.yml
└── workflows
│ ├── visual-tests.yml.disabled
│ └── unit-tests.yml
├── .gemini.yml
├── ISSUE_TEMPLATE.md
├── vaadin-directory-description.md
├── bower.json
├── package.json
├── wct.conf.js
├── README.md
├── LICENSE
└── src
├── vaadin-checkbox.html
└── vaadin-checkbox-group.html
/.stylelintrc:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "stylelint-config-vaadin"
3 | }
4 |
--------------------------------------------------------------------------------
/vaadin-checkbox.html:
--------------------------------------------------------------------------------
1 | vaadin-checkbox
6 | vaadin-checkbox tests
7 |
8 |
9 |
10 |
11 |
12 |
20 |
21 |
--------------------------------------------------------------------------------
/ISSUE_TEMPLATE.md:
--------------------------------------------------------------------------------
1 | ### Description
2 |
3 |
4 | ### Expected outcome
5 |
6 |
7 | ### Actual outcome
8 |
9 |
10 | ### Live Demo
11 |
12 |
13 | ### Steps to reproduce
14 |
19 |
20 | ### Browsers Affected
21 |
22 | - [ ] Chrome
23 | - [ ] Firefox
24 | - [ ] Safari
25 | - [ ] Edge
26 | - [ ] IE 11
27 | - [ ] iOS Safari
28 | - [ ] Android Chrome
29 |
--------------------------------------------------------------------------------
/vaadin-directory-description.md:
--------------------------------------------------------------------------------
1 |
2 | # <vaadin-checkbox>
3 |
4 | [](https://vaadin.com/directory/component/vaadinvaadin-checkbox)
5 |
6 | [<vaadin-checkbox>](https://vaadin.com/components/vaadin-checkbox) is a Web Component providing an accessible and customizable checkbox, part of the [Vaadin components](https://vaadin.com/components).
7 |
8 |
9 | [Checked
14 | Unchecked
15 | Indeterminate
16 | ```
17 |
--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Vaadin Checkbox Examples
7 |
8 |
9 |
19 |
20 |
21 |
22 |
23 |
24 |
27 |
28 |
33 |
34 |
35 |
36 |
37 |
38 |
--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vaadin-checkbox",
3 | "homepage": "https://vaadin.com/components",
4 | "authors": [
5 | "Vaadin Ltd"
6 | ],
7 | "description": "vaadin-checkbox",
8 | "main": [
9 | "vaadin-checkbox.html",
10 | "theme/material/vaadin-checkbox-group.html",
11 | "theme/material/vaadin-checkbox.html"
12 | ],
13 | "keywords": [
14 | "Vaadin",
15 | "checkbox",
16 | "web-components",
17 | "web-component",
18 | "polymer"
19 | ],
20 | "license": "Apache-2.0",
21 | "ignore": [
22 | "**/.*",
23 | "node_modules",
24 | "bower_components",
25 | "package-lock.json",
26 | "wct.conf.js"
27 | ],
28 | "dependencies": {
29 | "polymer": "^2.0.0",
30 | "vaadin-control-state-mixin": "vaadin/vaadin-control-state-mixin#^2.2.1",
31 | "vaadin-themable-mixin": "vaadin/vaadin-themable-mixin#^1.6.1",
32 | "vaadin-lumo-styles": "vaadin/vaadin-lumo-styles#^1.4.1",
33 | "vaadin-material-styles": "vaadin/vaadin-material-styles#^1.2.0",
34 | "vaadin-element-mixin": "vaadin/vaadin-element-mixin#^2.4.1"
35 | },
36 | "devDependencies": {
37 | "iron-component-page": "^3.0.0",
38 | "iron-test-helpers": "^2.0.0",
39 | "webcomponentsjs": "^1.0.1",
40 | "web-component-tester": "^6.1.5",
41 | "vaadin-demo-helpers": "vaadin/vaadin-demo-helpers#^3.0.0",
42 | "iron-form": "^2.0.1",
43 | "vaadin-button": "vaadin/vaadin-button#^2.4.0"
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/demo/demos.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Vaadin Checkbox",
3 | "pages": [
4 | {
5 | "name": "Basics",
6 | "url": "checkbox-basic-demos",
7 | "src": "checkbox-basic-demos.html",
8 | "meta": {
9 | "title": "Vaadin Checkbox Basics",
10 | "description": "",
11 | "image": ""
12 | }
13 | }
14 | ,
15 | {
16 | "name": "Validation",
17 | "url": "checkbox-validation-demos",
18 | "src": "checkbox-validation-demos.html",
19 | "meta": {
20 | "title": "Vaadin Checkbox Validations",
21 | "description": "",
22 | "image": ""
23 | }
24 | }
25 | ,
26 | {
27 | "name": "Presentation",
28 | "url": "checkbox-presentation-demos",
29 | "src": "checkbox-presentation-demos.html",
30 | "meta": {
31 | "title": "Vaadin Checkbox Presentations",
32 | "description": "",
33 | "image": ""
34 | }
35 | }
36 | ,
37 | {
38 | "name": "Theme Variants",
39 | "url": "checkbox-theme-variants-demos",
40 | "src": "checkbox-theme-variants-demos.html",
41 | "meta": {
42 | "title": "vaadin-checkbox Theme Variants",
43 | "description": "",
44 | "image": ""
45 | }
46 | }
47 | ,
48 | {
49 | "name": "Styling",
50 | "url": "checkbox-styling-demos",
51 | "src": "checkbox-styling-demos.html",
52 | "meta": {
53 | "title": "vaadin-checkbox-group Styling Examples",
54 | "description": "",
55 | "image": ""
56 | }
57 | }
58 | ]
59 | }
60 |
--------------------------------------------------------------------------------
/.github/workflows/visual-tests.yml.disabled:
--------------------------------------------------------------------------------
1 | name: Visual Tests
2 |
3 | # all pull requests
4 | on: pull_request
5 |
6 | jobs:
7 | visual-tests:
8 | name: Polymer 2 on SauceLabs
9 | runs-on: ubuntu-latest
10 | steps:
11 | - name: Set up Node 12.x
12 | uses: actions/setup-node@v2
13 | with:
14 | node-version: 12.x
15 |
16 | - name: Check out the source code
17 | uses: actions/checkout@v2
18 |
19 | - name: Install latest npm
20 | # magi-cli 1.0 requires npm 7 or higher
21 | run: "npm install -g npm@8"
22 |
23 | - name: Install global npm dependencies
24 | # bower is needed to run 'bower install'
25 | # gemini is needed to run the visual tests step
26 | run: "npm install --quiet --no-progress --global bower gemini@^4.0.0 gemini-sauce gemini-polyserve"
27 |
28 | - name: Install project npm dependencies
29 | run: "npm ci"
30 |
31 | - name: Install project Bower dependencies
32 | run: "bower install --quiet"
33 |
34 | - name: Run visual tests on SauceLabs
35 | run: "gemini test --reporter html --reporter flat test/visual"
36 | env:
37 | SAUCE_USERNAME: ${{ secrets.SAUCE_USERNAME }}
38 | SAUCE_ACCESS_KEY: ${{ secrets.SAUCE_ACCESS_KEY }}
39 |
40 | - name: Publish the Visual Tests failures report as an Artifact for this Workflow run
41 | if: ${{ failure() }}
42 | uses: actions/upload-artifact@v2
43 | with:
44 | name: Visual tests failures report
45 | path: gemini-report/
46 |
--------------------------------------------------------------------------------
/demo/checkbox-validation-demos.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
8 |
9 | Required
10 |
11 |
12 |
13 | Option one
14 | Option two
15 | Option three
16 |
17 | Submit
18 |
27 |
28 |
29 |
30 |
31 |
39 |
40 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@vaadin/vaadin-checkbox",
3 | "version": "2.6.1",
4 | "description": "vaadin-checkbox",
5 | "main": "vaadin-checkbox.html",
6 | "repository": "vaadin/vaadin-checkbox",
7 | "keywords": [
8 | "Vaadin",
9 | "checkbox",
10 | "web-components",
11 | "web-component",
12 | "polymer"
13 | ],
14 | "author": "Vaadin Ltd",
15 | "license": "Apache-2.0",
16 | "bugs": {
17 | "url": "https://github.com/vaadin/vaadin-checkbox/issues"
18 | },
19 | "homepage": "https://vaadin.com/components",
20 | "files": [
21 | "vaadin-*.d.ts",
22 | "vaadin-*.js",
23 | "src",
24 | "theme"
25 | ],
26 | "husky": {
27 | "hooks": {
28 | "pre-commit": "npm run lint"
29 | }
30 | },
31 | "scripts": {
32 | "test": "wct",
33 | "check": "npm-run-all --parallel check:*",
34 | "check:bower": "magi check-bower",
35 | "check:version": "magi check-version",
36 | "lint": "npm-run-all --parallel lint:*",
37 | "lint:css": "stylelint *.html src/*.html demo/*.html theme/**/*.html test/*html",
38 | "lint:html": "eslint *.html src demo test --ext .html",
39 | "lint:js": "eslint *.js test",
40 | "lint:polymer": "polymer lint --rules polymer-2 --input ./src/*.html ./theme/**/*.html",
41 | "prestart": "polymer analyze vaadin-* > analysis.json",
42 | "start": "polymer serve --port 3000 --open",
43 | "preversion": "magi update-version"
44 | },
45 | "devDependencies": {
46 | "@vaadin/vaadin-component-dev-dependencies": "^3.2.0"
47 | },
48 | "overrides": {
49 | "wct-sauce": {
50 | "sauce-connect-launcher": "vaadin/sauce-connect-launcher#upgrade-sauce-connect-5"
51 | }
52 | }
53 | }
54 |
--------------------------------------------------------------------------------
/wct.conf.js:
--------------------------------------------------------------------------------
1 | var envIndex = process.argv.indexOf('--env') + 1;
2 | var env = envIndex ? process.argv[envIndex] : undefined;
3 |
4 | // workaround for Android 7+ blocking all HTTP traffic
5 | // see https://wiki.saucelabs.com/display/DOCS/Known+Issues
6 | // add it to your own local `/etc/hosts` to run SauceLabs tests locally
7 | var tunneledLocalhost = 'localhost-for-saucelabs';
8 |
9 | module.exports = {
10 | testTimeout: 180 * 1000,
11 | verbose: false,
12 | plugins: {
13 | local: {
14 | browserOptions: {
15 | chrome: [
16 | 'headless',
17 | 'disable-gpu',
18 | 'no-sandbox'
19 | ]
20 | }
21 | },
22 | },
23 |
24 | registerHooks: function(context) {
25 | const testBrowsers = [
26 | {
27 | deviceName: 'Android GoogleAPI Emulator',
28 | platformName: 'Android',
29 | platformVersion: '11.0',
30 | browserName: 'Chrome',
31 | },
32 | 'iOS Simulator/iphone@10.3', // should be 9.x, but SauceLabs does not provide that
33 | 'macOS 11/safari@latest',
34 | 'Windows 10/microsoftedge@latest',
35 | 'Windows 10/internet explorer@11',
36 | 'Windows 10/chrome@latest',
37 | 'Windows 10/firefox@latest',
38 | ];
39 |
40 | if (env === 'saucelabs') {
41 | context.options.webserver = context.options.webserver || {};
42 | context.options.webserver.hostname = tunneledLocalhost;
43 | context.options.plugins.sauce.tunnelOptions = {
44 | tunnelDomains: tunneledLocalhost
45 | };
46 |
47 | context.options.plugins.sauce.browsers = testBrowsers;
48 | }
49 |
50 | // Map legacy tunnel-identifier option to new tunnel-name option
51 | context.hookLate('prepare', (done) => {
52 | context.options.activeBrowsers.forEach((browser) => {
53 | browser['tunnel-name'] = browser['tunnel-identifier'];
54 | delete browser['tunnel-identifier'];
55 | });
56 | done();
57 | });
58 | }
59 | };
60 |
--------------------------------------------------------------------------------
/demo/checkbox-styling-demos.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
8 | Customizing font
9 |
10 |
11 |
17 |
18 | Option one
19 | Option two
20 | Option three
21 |
22 |
23 |
24 |
25 | Customizing icon color
26 |
27 |
28 |
29 |
30 |
35 |
36 |
37 |
38 | Option one
39 | Option two
40 | Option three
41 |
42 |
43 |
44 |
45 |
46 |
54 |
55 |
--------------------------------------------------------------------------------
/theme/material/vaadin-checkbox-group-styles.html:
--------------------------------------------------------------------------------
1 |
5 |
6 |
70 |
71 |
72 |
--------------------------------------------------------------------------------
/demo/checkbox-theme-variants-demos.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
8 | Orientation
9 |
10 |
11 | Horizontal
12 |
13 | Option one
14 | Option two
15 | Option three
16 |
17 |
18 | Vertical
19 |
20 | Option one
21 | Option two
22 | Option three
23 |
24 |
25 |
26 |
27 | Helper text position
28 |
29 |
30 | Below
31 |
32 | Option one
33 | Option two
34 | Option three
35 |
36 |
37 | Above
38 |
39 | Option one
40 | Option two
41 | Option three
42 |
43 |
44 |
45 |
46 |
47 |
55 |
56 |
--------------------------------------------------------------------------------
/test/validation.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | vaadin-checkbox validation tests
6 |
7 |
8 |
16 |
17 |
18 | Checkbox 1
19 | Checkbox 2
20 | Checkbox 3
21 |
22 |
23 |
24 |
72 |
--------------------------------------------------------------------------------
/test/visual/default-rtl.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
19 | Are you drunk?
20 |
21 |
22 | Yes
23 |
24 |
25 |
26 | No
27 |
28 |
29 |
30 | Maybe
31 |
32 |
33 |
37 |
38 |
39 |
40 | 1
41 | 2
42 |
43 |
44 |
45 |
46 |
47 | Checkbox 1
48 | Checkbox 2
49 | Checkbox 3
50 | Checkbox 4
51 | Checkbox 5
52 | Checkbox 6
53 | Checkbox 7
54 | Checkbox 8
55 | Checkbox 9
56 | Checkbox 10
57 |
58 |
59 |
60 |
68 |
69 |
70 |
--------------------------------------------------------------------------------
/demo/checkbox-presentation-demos.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
8 |
9 | Customizing checkbox label
10 |
11 |
12 |
13 |
14 |
18 |
19 |
23 |
24 |
28 |
29 |
33 |
34 |
35 |
36 |
37 | Multi-line label
38 |
39 |
40 |
41 |
42 | Option one
43 | Description
44 |
45 |
46 |
47 | Option two
48 | Description
49 |
50 |
51 |
52 | Option three
53 | Description
54 |
55 |
56 |
57 |
58 |
59 |
60 |
68 |
69 |
--------------------------------------------------------------------------------
/.github/workflows/unit-tests.yml:
--------------------------------------------------------------------------------
1 | name: Unit Tests
2 |
3 | # all pull requests
4 | on: pull_request
5 |
6 | jobs:
7 | # Running local tests is disabled due to outdated dependencies
8 | # see https://github.com/vaadin/components-team-tasks/issues/628
9 | # unit-tests-p2:
10 | # name: Polymer 2 on the CI agent
11 | # runs-on: ubuntu-latest
12 | # steps:
13 | # - name: Set up Node 16.x
14 | # uses: actions/setup-node@v4
15 | # with:
16 | # node-version: 16.x
17 | #
18 | # - name: Check out the source code
19 | # uses: actions/checkout@v2
20 | #
21 | # - name: Install global npm dependencies
22 | # # bower is needed to run 'bower install'
23 | # # polymer-cli is needed to run the lint step
24 | # run: "npm install --quiet --no-progress --global bower polymer-cli"
25 | #
26 | # - name: Install project npm dependencies
27 | # run: "npm ci"
28 | #
29 | # - name: Install project Bower dependencies
30 | # run: "bower install --quiet"
31 | #
32 | # - name: Run automated magi-cli checks
33 | # run: "npm run check"
34 | #
35 | # - name: Run a linter
36 | # run: "npm run lint"
37 | #
38 | # # the full set of environments is tested with Polymer 3 below
39 | # - name: Run unit tests locally (in the VM instance running this job)
40 | # run: "xvfb-run -s '-screen 0 1024x768x24' npm test"
41 |
42 | unit-tests-p3:
43 | name: Polymer 3 on SauceLabs
44 | runs-on: ubuntu-latest
45 | steps:
46 | - name: Set up Node 16.x
47 | uses: actions/setup-node@v4
48 | with:
49 | node-version: 16.x
50 |
51 | - name: Check out the (Polymer 2) source code
52 | uses: actions/checkout@v2
53 |
54 | - name: Install global npm dependencies
55 | # bower and polymer-modulizer are needed to run the Polymer 3 conversion step
56 | run: "npm install --quiet --no-progress --global bower magi-cli polymer-modulizer"
57 |
58 | - name: Convert the source code to Polymer 3
59 | run: |
60 | git config --local user.email "github-actions[bot]@users.noreply.github.com"
61 | git config --local user.name "github-actions[bot]"
62 | magi p3-convert --out . --import-style=name
63 |
64 | # workaround for running tests on Android on SauceLabs (see wct.conf.js)
65 | - name: Add 'localhost-for-saucelabs' to /etc/hosts
66 | run: echo "127.0.0.1 localhost-for-saucelabs" | sudo tee -a /etc/hosts
67 |
68 | - name: Run unit tests on SauceLabs
69 | run: "npm test -- --env saucelabs"
70 | env:
71 | SAUCE_USERNAME: ${{ secrets.SAUCE_USERNAME }}
72 | SAUCE_ACCESS_KEY: ${{ secrets.SAUCE_ACCESS_KEY }}
73 |
--------------------------------------------------------------------------------
/theme/lumo/vaadin-checkbox-group-styles.html:
--------------------------------------------------------------------------------
1 |
5 |
6 |
100 |
101 |
102 |
--------------------------------------------------------------------------------
/test/accessibility.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | vaadin-checkbox tests
6 |
7 |
8 |
14 |
15 | Vaadin Checkbox
16 |
17 |
18 |
19 |
81 |
82 |
--------------------------------------------------------------------------------
/test/visual/test.js:
--------------------------------------------------------------------------------
1 | gemini.suite('vaadin-checkbox', function(rootSuite) {
2 | function wait(actions, find) {
3 | actions.wait(5000);
4 | }
5 |
6 | function goToAboutBlank(actions, find) {
7 | // Firefox stops responding on socket after a test, workaround:
8 | return actions.executeJS(function(window) {
9 | window.location.href = 'about:blank'; // just go away, please!
10 | });
11 | }
12 |
13 | rootSuite
14 | .before(wait)
15 | .after(goToAboutBlank);
16 |
17 | ['lumo', 'material'].forEach(theme => {
18 | gemini.suite(`default-tests-${theme}`, function(suite) {
19 | suite
20 | .setUrl(`default.html?theme=${theme}`)
21 | .setCaptureElements('#default-tests')
22 | .capture('default')
23 | .capture('focus-ring', function(actions) {
24 | actions.executeJS(function(window) {
25 | window.document.querySelector('vaadin-checkbox').setAttribute('focus-ring', '');
26 | });
27 | })
28 | .capture('checked', function(actions) {
29 | actions.executeJS(function(window) {
30 | window.document.querySelector('vaadin-checkbox').checked = true;
31 | });
32 | });
33 | });
34 |
35 | gemini.suite(`group-tests-${theme}`, (suite) => {
36 | suite
37 | .setUrl(`default.html?theme=${theme}`)
38 | .setCaptureElements('#group-tests')
39 | .capture('default');
40 | });
41 |
42 | gemini.suite(`theme-vertical-group-tests-${theme}`, (suite) => {
43 | suite
44 | .setUrl(`default.html?theme=${theme}`)
45 | .setCaptureElements('#theme-vertical-group-tests')
46 | .capture('default');
47 | });
48 |
49 | gemini.suite(`disabled-group-tests-${theme}`, (suite) => {
50 | suite
51 | .setUrl(`default.html?theme=${theme}`)
52 | .setCaptureElements('#disabled-group-tests')
53 | .capture('default');
54 | });
55 |
56 | gemini.suite(`validation-tests-${theme}`, function(suite) {
57 | suite
58 | .setUrl(`default.html?theme=${theme}`)
59 | .setCaptureElements('#validation-tests')
60 | .capture('error');
61 | });
62 |
63 | gemini.suite(`focus-tests-${theme}`, function(suite) {
64 | suite
65 | .setUrl(`default.html?theme=${theme}`)
66 | .setCaptureElements('#focus-tests')
67 | .capture('focus');
68 | });
69 |
70 | gemini.suite(`wrapping-group-tests-${theme}`, function(suite) {
71 | suite
72 | .setUrl(`default.html?theme=${theme}`)
73 | .setCaptureElements('#wrapping-group-tests')
74 | .capture('default');
75 | });
76 |
77 | gemini.suite(`helper-text-tests-${theme}`, function(suite) {
78 | suite
79 | .setUrl(`default.html?theme=${theme}`)
80 | .setCaptureElements('#helper-text-tests')
81 | .capture('default');
82 | });
83 |
84 | if (theme === 'lumo') {
85 | gemini.suite(`helper-text-above-field-tests-${theme}`, function(suite) {
86 | suite
87 | .setUrl(`default.html?theme=${theme}`)
88 | .setCaptureElements('#helper-text-above-field-tests')
89 | .capture('default');
90 | });
91 | }
92 |
93 | if (theme === 'material') {
94 | gemini.suite(`validation-with-helper-tests-${theme}`, function(suite) {
95 | suite
96 | .setUrl(`default.html?theme=${theme}`)
97 | .setCaptureElements('#validation-with-helper-tests')
98 | .capture('default');
99 | });
100 | }
101 |
102 | gemini.suite(`default-rtl-tests-${theme}`, function(suite) {
103 | suite
104 | .setUrl(`default-rtl.html?theme=${theme}`)
105 | .setCaptureElements('#default-tests')
106 | .capture('default')
107 | .capture('checked', function(actions) {
108 | actions.executeJS(function(window) {
109 | window.document.querySelector('vaadin-checkbox').checked = true;
110 | });
111 | });
112 | });
113 |
114 | gemini.suite(`validation-rtl-tests-${theme}`, function(suite) {
115 | suite
116 | .setUrl(`default-rtl.html?theme=${theme}`)
117 | .setCaptureElements('#validation-tests')
118 | .capture('error');
119 | });
120 |
121 | gemini.suite(`wrapping-rtl-tests-${theme}`, function(suite) {
122 | suite
123 | .setUrl(`default-rtl.html?theme=${theme}`)
124 | .setCaptureElements('#wrapping-group-tests')
125 | .capture('default');
126 | });
127 | });
128 |
129 | });
130 |
--------------------------------------------------------------------------------
/theme/material/vaadin-checkbox-styles.html:
--------------------------------------------------------------------------------
1 |
4 |
5 |
145 |
146 |
147 |
--------------------------------------------------------------------------------
/test/visual/default.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
18 | Are you drunk?
19 |
20 |
21 | Yes
22 |
23 |
24 |
25 | No
26 |
27 |
28 |
29 | Maybe
30 |
31 |
32 | Empty labels
33 |
36 |
37 |
38 |
39 | 1
40 | 2
41 |
42 |
43 |
44 |
45 |
46 | 1
47 | 2
48 |
49 |
50 |
51 |
52 |
53 | 1
54 | 2
55 |
56 |
57 |
58 |
59 |
60 | 1
61 | 2
62 |
63 |
64 |
65 |
66 |
67 | 1
68 | 2
69 |
70 |
71 |
72 |
73 |
74 | 1
75 | 2
76 |
77 |
78 |
79 |
80 |
83 | 1
84 | 2
85 |
86 |
87 |
88 |
89 |
90 | 1
91 | 2
92 |
93 |
94 |
95 |
96 |
97 | Checkbox 1
98 | Checkbox 2
99 | Checkbox 3
100 | Checkbox 4
101 | Checkbox 5
102 | Checkbox 6
103 | Checkbox 7
104 | Checkbox 8
105 | Checkbox 9
106 | Checkbox 10
107 |
108 |
109 |
110 |
119 |
120 |
121 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # <vaadin-checkbox>
2 |
3 | > ⚠️ Starting from Vaadin 20, the source code and issues for this component are migrated to the [`vaadin/web-components`](https://github.com/vaadin/web-components/tree/master/packages/vaadin-checkbox) monorepository.
4 | > This repository contains the source code and releases of `` for the Vaadin versions 10 to 19.
5 |
6 | [<vaadin-checkbox>](https://vaadin.com/components/vaadin-checkbox) is a Web Component providing an accessible and customizable checkbox, part of the [Vaadin components](https://vaadin.com/components).
7 |
8 | [Live Demo ↗](https://vaadin.com/components/vaadin-checkbox/html-examples)
9 | |
10 | [API documentation ↗](https://vaadin.com/components/vaadin-checkbox/html-api)
11 |
12 | [](https://www.npmjs.com/package/@vaadin/vaadin-checkbox)
13 | [](https://www.webcomponents.org/element/vaadin/vaadin-checkbox)
14 | [](https://vaadin.com/directory/component/vaadinvaadin-checkbox)
15 | [](https://discord.gg/PHmkCKC)
16 |
17 |
28 | ```html
29 | Checked
30 | Unchecked
31 | Indeterminate
32 | ```
33 |
34 | [
5 |
6 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
129 |
130 |
131 |
132 |
133 |
134 |
183 |
184 |
185 |
--------------------------------------------------------------------------------
/demo/checkbox-basic-demos.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
8 | Basic usage
9 |
10 |
11 | Option
12 |
13 |
14 |
15 | Basic usage with checkbox group
16 |
17 |
18 |
19 | Option one
20 | Option two
21 | Option three
22 |
23 |
24 |
25 |
26 | Disabled state
27 |
28 |
29 |
30 | Option one
31 | Option two
32 | Option three
33 |
34 |
35 |
36 | Option one
37 | Option two
38 | Option three
39 |
40 |
45 |
46 |
47 |
48 | Helper text
49 | Use the helper-text attribute or add content to the helper slot to set helper content.
50 |
51 |
52 |
54 | Option one
55 | Option two
56 | Option three
57 |
58 |
59 |
60 | Pick an option
61 | Option one
62 | Option two
63 | Option three
64 |
65 |
66 |
71 |
72 |
73 |
74 | Object list
75 |
76 |
77 |
96 |
97 |
98 | Value change event
99 |
100 |
101 |
102 | Option one
103 | Option two
104 | Option three
105 |
106 | Selected value:
107 |
116 |
117 |
118 |
119 |
120 | Indeterminate checkbox
121 | An indeterminate checkbox is neither checked nor
124 | unchecked. A typical use case
125 | is a “Select All” checkbox indicating that some, but not all, items are selected.
126 |
127 |
128 |
129 | Select All
130 | Option one
131 | Option two
132 |
159 |
160 |
161 |
162 |
163 |
164 |
172 |
173 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Apache License
2 | Version 2.0, January 2004
3 | http://www.apache.org/licenses/
4 |
5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
6 |
7 | 1. Definitions.
8 |
9 | "License" shall mean the terms and conditions for use, reproduction,
10 | and distribution as defined by Sections 1 through 9 of this document.
11 |
12 | "Licensor" shall mean the copyright owner or entity authorized by
13 | the copyright owner that is granting the License.
14 |
15 | "Legal Entity" shall mean the union of the acting entity and all
16 | other entities that control, are controlled by, or are under common
17 | control with that entity. For the purposes of this definition,
18 | "control" means (i) the power, direct or indirect, to cause the
19 | direction or management of such entity, whether by contract or
20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the
21 | outstanding shares, or (iii) beneficial ownership of such entity.
22 |
23 | "You" (or "Your") shall mean an individual or Legal Entity
24 | exercising permissions granted by this License.
25 |
26 | "Source" form shall mean the preferred form for making modifications,
27 | including but not limited to software source code, documentation
28 | source, and configuration files.
29 |
30 | "Object" form shall mean any form resulting from mechanical
31 | transformation or translation of a Source form, including but
32 | not limited to compiled object code, generated documentation,
33 | and conversions to other media types.
34 |
35 | "Work" shall mean the work of authorship, whether in Source or
36 | Object form, made available under the License, as indicated by a
37 | copyright notice that is included in or attached to the work
38 | (an example is provided in the Appendix below).
39 |
40 | "Derivative Works" shall mean any work, whether in Source or Object
41 | form, that is based on (or derived from) the Work and for which the
42 | editorial revisions, annotations, elaborations, or other modifications
43 | represent, as a whole, an original work of authorship. For the purposes
44 | of this License, Derivative Works shall not include works that remain
45 | separable from, or merely link (or bind by name) to the interfaces of,
46 | the Work and Derivative Works thereof.
47 |
48 | "Contribution" shall mean any work of authorship, including
49 | the original version of the Work and any modifications or additions
50 | to that Work or Derivative Works thereof, that is intentionally
51 | submitted to Licensor for inclusion in the Work by the copyright owner
52 | or by an individual or Legal Entity authorized to submit on behalf of
53 | the copyright owner. For the purposes of this definition, "submitted"
54 | means any form of electronic, verbal, or written communication sent
55 | to the Licensor or its representatives, including but not limited to
56 | communication on electronic mailing lists, source code control systems,
57 | and issue tracking systems that are managed by, or on behalf of, the
58 | Licensor for the purpose of discussing and improving the Work, but
59 | excluding communication that is conspicuously marked or otherwise
60 | designated in writing by the copyright owner as "Not a Contribution."
61 |
62 | "Contributor" shall mean Licensor and any individual or Legal Entity
63 | on behalf of whom a Contribution has been received by Licensor and
64 | subsequently incorporated within the Work.
65 |
66 | 2. Grant of Copyright License. Subject to the terms and conditions of
67 | this License, each Contributor hereby grants to You a perpetual,
68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable
69 | copyright license to reproduce, prepare Derivative Works of,
70 | publicly display, publicly perform, sublicense, and distribute the
71 | Work and such Derivative Works in Source or Object form.
72 |
73 | 3. Grant of Patent License. Subject to the terms and conditions of
74 | this License, each Contributor hereby grants to You a perpetual,
75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable
76 | (except as stated in this section) patent license to make, have made,
77 | use, offer to sell, sell, import, and otherwise transfer the Work,
78 | where such license applies only to those patent claims licensable
79 | by such Contributor that are necessarily infringed by their
80 | Contribution(s) alone or by combination of their Contribution(s)
81 | with the Work to which such Contribution(s) was submitted. If You
82 | institute patent litigation against any entity (including a
83 | cross-claim or counterclaim in a lawsuit) alleging that the Work
84 | or a Contribution incorporated within the Work constitutes direct
85 | or contributory patent infringement, then any patent licenses
86 | granted to You under this License for that Work shall terminate
87 | as of the date such litigation is filed.
88 |
89 | 4. Redistribution. You may reproduce and distribute copies of the
90 | Work or Derivative Works thereof in any medium, with or without
91 | modifications, and in Source or Object form, provided that You
92 | meet the following conditions:
93 |
94 | (a) You must give any other recipients of the Work or
95 | Derivative Works a copy of this License; and
96 |
97 | (b) You must cause any modified files to carry prominent notices
98 | stating that You changed the files; and
99 |
100 | (c) You must retain, in the Source form of any Derivative Works
101 | that You distribute, all copyright, patent, trademark, and
102 | attribution notices from the Source form of the Work,
103 | excluding those notices that do not pertain to any part of
104 | the Derivative Works; and
105 |
106 | (d) If the Work includes a "NOTICE" text file as part of its
107 | distribution, then any Derivative Works that You distribute must
108 | include a readable copy of the attribution notices contained
109 | within such NOTICE file, excluding those notices that do not
110 | pertain to any part of the Derivative Works, in at least one
111 | of the following places: within a NOTICE text file distributed
112 | as part of the Derivative Works; within the Source form or
113 | documentation, if provided along with the Derivative Works; or,
114 | within a display generated by the Derivative Works, if and
115 | wherever such third-party notices normally appear. The contents
116 | of the NOTICE file are for informational purposes only and
117 | do not modify the License. You may add Your own attribution
118 | notices within Derivative Works that You distribute, alongside
119 | or as an addendum to the NOTICE text from the Work, provided
120 | that such additional attribution notices cannot be construed
121 | as modifying the License.
122 |
123 | You may add Your own copyright statement to Your modifications and
124 | may provide additional or different license terms and conditions
125 | for use, reproduction, or distribution of Your modifications, or
126 | for any such Derivative Works as a whole, provided Your use,
127 | reproduction, and distribution of the Work otherwise complies with
128 | the conditions stated in this License.
129 |
130 | 5. Submission of Contributions. Unless You explicitly state otherwise,
131 | any Contribution intentionally submitted for inclusion in the Work
132 | by You to the Licensor shall be under the terms and conditions of
133 | this License, without any additional terms or conditions.
134 | Notwithstanding the above, nothing herein shall supersede or modify
135 | the terms of any separate license agreement you may have executed
136 | with Licensor regarding such Contributions.
137 |
138 | 6. Trademarks. This License does not grant permission to use the trade
139 | names, trademarks, service marks, or product names of the Licensor,
140 | except as required for reasonable and customary use in describing the
141 | origin of the Work and reproducing the content of the NOTICE file.
142 |
143 | 7. Disclaimer of Warranty. Unless required by applicable law or
144 | agreed to in writing, Licensor provides the Work (and each
145 | Contributor provides its Contributions) on an "AS IS" BASIS,
146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
147 | implied, including, without limitation, any warranties or conditions
148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
149 | PARTICULAR PURPOSE. You are solely responsible for determining the
150 | appropriateness of using or redistributing the Work and assume any
151 | risks associated with Your exercise of permissions under this License.
152 |
153 | 8. Limitation of Liability. In no event and under no legal theory,
154 | whether in tort (including negligence), contract, or otherwise,
155 | unless required by applicable law (such as deliberate and grossly
156 | negligent acts) or agreed to in writing, shall any Contributor be
157 | liable to You for damages, including any direct, indirect, special,
158 | incidental, or consequential damages of any character arising as a
159 | result of this License or out of the use or inability to use the
160 | Work (including but not limited to damages for loss of goodwill,
161 | work stoppage, computer failure or malfunction, or any and all
162 | other commercial damages or losses), even if such Contributor
163 | has been advised of the possibility of such damages.
164 |
165 | 9. Accepting Warranty or Additional Liability. While redistributing
166 | the Work or Derivative Works thereof, You may choose to offer,
167 | and charge a fee for, acceptance of support, warranty, indemnity,
168 | or other liability obligations and/or rights consistent with this
169 | License. However, in accepting such obligations, You may act only
170 | on Your own behalf and on Your sole responsibility, not on behalf
171 | of any other Contributor, and only if You agree to indemnify,
172 | defend, and hold each Contributor harmless for any liability
173 | incurred by, or claims asserted against, such Contributor by reason
174 | of your accepting any such warranty or additional liability.
175 |
176 | END OF TERMS AND CONDITIONS
177 |
178 | Copyright 2017 Vaadin Ltd.
179 |
180 | Licensed under the Apache License, Version 2.0 (the "License");
181 | you may not use this file except in compliance with the License.
182 | You may obtain a copy of the License at
183 |
184 | http://www.apache.org/licenses/LICENSE-2.0
185 |
186 | Unless required by applicable law or agreed to in writing, software
187 | distributed under the License is distributed on an "AS IS" BASIS,
188 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
189 | See the License for the specific language governing permissions and
190 | limitations under the License.
191 |
--------------------------------------------------------------------------------
/src/vaadin-checkbox.html:
--------------------------------------------------------------------------------
1 |
6 |
7 |
14 |
15 |
52 |
53 |
54 |
55 |
63 |
64 |
65 |
67 |
68 |
69 |
70 |
340 |
341 |
--------------------------------------------------------------------------------
/test/vaadin-checkbox_test.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | vaadin-checkbox tests
6 |
7 |
8 |
17 |
18 |
19 |
23 |
24 |
25 |
44 |
45 |
46 |
47 |
48 | Vaadin Checkbox with Terms & Conditions
49 |
50 |
51 |
52 |
53 |
54 |
56 |
57 |
58 |
59 |
60 |
62 |
63 |
64 |
414 |
415 |
--------------------------------------------------------------------------------
/src/vaadin-checkbox-group.html:
--------------------------------------------------------------------------------
1 |
6 |
7 |
14 |
15 |
45 |
46 |
47 |
[[label]]
48 |
49 |
50 |
52 |
53 |
56 | [[helperText]]
57 |
58 |
59 |
[[errorMessage]]
63 |
64 |
67 |
68 |
455 |
456 |
--------------------------------------------------------------------------------
/test/vaadin-checkbox-group_test.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | vaadin-checkbox-group tests
6 |
7 |
8 |
17 |
18 |
19 | Checkbox 1
20 | Checkbox 2
21 | Checkbox 3
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 | foo
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 | Checkbox a
54 | Checkbox b
55 | Checkbox c
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 | Checkbox 1
66 | Checkbox 2
67 | Checkbox 3
68 | Checkbox 4
69 | Checkbox 5
70 | Checkbox 6
71 | Checkbox 7
72 | Checkbox 8
73 | Checkbox 9
74 | Checkbox 10
75 | Checkbox 11
76 | Checkbox 12
77 |
78 |
79 |
80 |
81 |
589 |
590 |
--------------------------------------------------------------------------------
](https://vaadin.com/components/vaadin-checkbox)
10 |
11 | ## Example Usage
12 | ```html
13 | 
16 | Gabriella
17 | 
21 | Rudi
22 | 
26 | Hamsa
27 | 
31 | Jacob
32 |