├── .eslintrc.json
├── .gemini.yml
├── .github
    ├── ISSUE_TEMPLATE
    │   └── config.yml
    └── workflows
    │   ├── unit-tests.yml
    │   └── visual-tests.yml.disabled
├── .gitignore
├── .stylelintrc
├── ISSUE_TEMPLATE.md
├── LICENSE
├── README.md
├── bower.json
├── demo
    ├── .eslintrc.json
    ├── checkbox-basic-demos.html
    ├── checkbox-demo.js
    ├── checkbox-presentation-demos.html
    ├── checkbox-styling-demos.html
    ├── checkbox-theme-variants-demos.html
    ├── checkbox-validation-demos.html
    ├── demos.json
    └── index.html
├── gen-tsd.json
├── index.html
├── magi-p3-post.js
├── package-lock-p3.json
├── package-lock.json
├── package.json
├── screenshot.png
├── src
    ├── vaadin-checkbox-group.html
    └── vaadin-checkbox.html
├── test
    ├── .eslintrc
    ├── accessibility.html
    ├── helpers.html
    ├── index.html
    ├── test-suites.js
    ├── vaadin-checkbox-group_test.html
    ├── vaadin-checkbox_test.html
    ├── validation.html
    └── visual
    │   ├── default-rtl.html
    │   ├── default.html
    │   ├── screens
    │       └── vaadin-checkbox
    │       │   ├── default-rtl-tests-lumo
    │       │       ├── checked
    │       │       │   ├── chrome.png
    │       │       │   └── firefox.png
    │       │       └── default
    │       │       │   ├── chrome.png
    │       │       │   └── firefox.png
    │       │   ├── default-rtl-tests-material
    │       │       ├── checked
    │       │       │   ├── chrome.png
    │       │       │   └── firefox.png
    │       │       └── default
    │       │       │   ├── chrome.png
    │       │       │   └── firefox.png
    │       │   ├── default-tests-lumo
    │       │       ├── checked
    │       │       │   ├── chrome.png
    │       │       │   └── firefox.png
    │       │       ├── default
    │       │       │   ├── chrome.png
    │       │       │   └── firefox.png
    │       │       └── focus-ring
    │       │       │   ├── chrome.png
    │       │       │   └── firefox.png
    │       │   ├── default-tests-material
    │       │       ├── checked
    │       │       │   ├── chrome.png
    │       │       │   └── firefox.png
    │       │       ├── default
    │       │       │   ├── chrome.png
    │       │       │   └── firefox.png
    │       │       └── focus-ring
    │       │       │   ├── chrome.png
    │       │       │   └── firefox.png
    │       │   ├── disabled-group-tests-lumo
    │       │       └── default
    │       │       │   ├── chrome.png
    │       │       │   └── firefox.png
    │       │   ├── disabled-group-tests-material
    │       │       └── default
    │       │       │   ├── chrome.png
    │       │       │   └── firefox.png
    │       │   ├── focus-tests-lumo
    │       │       └── focus
    │       │       │   ├── chrome.png
    │       │       │   └── firefox.png
    │       │   ├── focus-tests-material
    │       │       └── focus
    │       │       │   ├── chrome.png
    │       │       │   └── firefox.png
    │       │   ├── group-tests-lumo
    │       │       └── default
    │       │       │   ├── chrome.png
    │       │       │   └── firefox.png
    │       │   ├── group-tests-material
    │       │       └── default
    │       │       │   ├── chrome.png
    │       │       │   └── firefox.png
    │       │   ├── helper-text-above-field-tests-lumo
    │       │       └── default
    │       │       │   ├── chrome.png
    │       │       │   └── firefox.png
    │       │   ├── helper-text-tests-lumo
    │       │       └── default
    │       │       │   ├── chrome.png
    │       │       │   └── firefox.png
    │       │   ├── helper-text-tests-material
    │       │       └── default
    │       │       │   ├── chrome.png
    │       │       │   └── firefox.png
    │       │   ├── theme-vertical-group-tests-lumo
    │       │       └── default
    │       │       │   ├── chrome.png
    │       │       │   └── firefox.png
    │       │   ├── theme-vertical-group-tests-material
    │       │       └── default
    │       │       │   ├── chrome.png
    │       │       │   └── firefox.png
    │       │   ├── validation-rtl-tests-lumo
    │       │       └── error
    │       │       │   ├── chrome.png
    │       │       │   └── firefox.png
    │       │   ├── validation-rtl-tests-material
    │       │       └── error
    │       │       │   ├── chrome.png
    │       │       │   └── firefox.png
    │       │   ├── validation-tests-lumo
    │       │       └── error
    │       │       │   ├── chrome.png
    │       │       │   └── firefox.png
    │       │   ├── validation-tests-material
    │       │       └── error
    │       │       │   ├── chrome.png
    │       │       │   └── firefox.png
    │       │   ├── validation-with-helper-tests-material
    │       │       └── default
    │       │       │   ├── chrome.png
    │       │       │   └── firefox.png
    │       │   ├── wrapping-group-tests-lumo
    │       │       └── default
    │       │       │   ├── chrome.png
    │       │       │   └── firefox.png
    │       │   ├── wrapping-group-tests-material
    │       │       └── default
    │       │       │   ├── chrome.png
    │       │       │   └── firefox.png
    │       │   ├── wrapping-rtl-tests-lumo
    │       │       └── default
    │       │       │   ├── chrome.png
    │       │       │   └── firefox.png
    │       │   └── wrapping-rtl-tests-material
    │       │       └── default
    │       │           ├── chrome.png
    │       │           └── firefox.png
    │   └── test.js
├── theme
    ├── lumo
    │   ├── vaadin-checkbox-group-styles.html
    │   ├── vaadin-checkbox-group.html
    │   ├── vaadin-checkbox-styles.html
    │   └── vaadin-checkbox.html
    └── material
    │   ├── vaadin-checkbox-group-styles.html
    │   ├── vaadin-checkbox-group.html
    │   ├── vaadin-checkbox-styles.html
    │   └── vaadin-checkbox.html
├── vaadin-checkbox-group.html
├── vaadin-checkbox.html
├── vaadin-directory-description.md
└── wct.conf.js


/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "vaadin",
 3 |   "env": {
 4 |     "browser": true,
 5 |     "node": true,
 6 |     "es6": true
 7 |   },
 8 |   "plugins": [
 9 |     "html"
10 |   ],
11 |   "globals": {
12 |     "Polymer": false,
13 |     "Vaadin": false
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/.gemini.yml:
--------------------------------------------------------------------------------
 1 | rootUrl: http://localhost:8080/components/vaadin-checkbox/test/visual/
 2 | gridUrl: http://localhost:4444/wd/hub
 3 | screenshotsDir: ./test/visual/screens
 4 | 
 5 | system:
 6 |   plugins:
 7 |     polyserve:
 8 |       port: 8080
 9 |     sauce: true
10 | 
11 | browsers:
12 |   chrome:
13 |     desiredCapabilities:
14 |       browserName: "chrome"
15 |       version: "67.0"
16 |       platform: "Windows 10"
17 | 
18 |   firefox:
19 |     desiredCapabilities:
20 |       browserName: "firefox"
21 |       version: "47.0"
22 |       platform: "Windows 10"
23 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/config.yml:
--------------------------------------------------------------------------------
1 | blank_issues_enabled: false
2 | contact_links:
3 |   - name: "Web Components: Bugs and Feature Requests"
4 |     url: https://github.com/vaadin/web-components/issues/new/choose
5 |     about: Please report issues related to the TypeScript and HTML API of Vaadin components here.
6 |   - name: "Flow Components: Bugs and Feature Requests"
7 |     url: https://github.com/vaadin/flow-components/issues/new/choose
8 |     about: Please report issues related to the Java API of Vaadin components here.
9 | 


--------------------------------------------------------------------------------
/.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 | 


--------------------------------------------------------------------------------
/.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 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | bower_components
2 | node_modules
3 | yarn.lock
4 | coverage
5 | analysis.json
6 | 


--------------------------------------------------------------------------------
/.stylelintrc:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "stylelint-config-vaadin"
3 | }
4 | 


--------------------------------------------------------------------------------
/ISSUE_TEMPLATE.md:
--------------------------------------------------------------------------------
 1 | ### Description
 2 | <!-- Example: The `vaadin-checkbox` element does not get checked when clicked. -->
 3 | 
 4 | ### Expected outcome
 5 | <!-- Example: Checkbox should be checked when clicked. -->
 6 | 
 7 | ### Actual outcome
 8 | <!-- Example: Checkbox is not checked when clicked. -->
 9 | 
10 | ### Live Demo
11 | <!-- The template, click "Remix This" to edit it: https://glitch.com/edit/#!/chestnut-fly -->
12 | 
13 | ### Steps to reproduce
14 | <!-- Example
15 | 1. Put a `vaadin-checkbox` element in the page.
16 | 2. Open the page in a web browser.
17 | 3. Click the `vaadin-checkbox` element.
18 | -->
19 | 
20 | ### Browsers Affected
21 | <!-- Check all that apply -->
22 | - [ ] Chrome
23 | - [ ] Firefox
24 | - [ ] Safari
25 | - [ ] Edge
26 | - [ ] IE 11
27 | - [ ] iOS Safari
28 | - [ ] Android Chrome
29 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # &lt;vaadin-checkbox&gt;
  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 `<vaadin-checkbox>` for the Vaadin versions 10 to 19.
  5 | 
  6 | [&lt;vaadin-checkbox&gt;](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 | [![npm version](https://badgen.net/npm/v/@vaadin/vaadin-checkbox)](https://www.npmjs.com/package/@vaadin/vaadin-checkbox)
 13 | [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/vaadin/vaadin-checkbox)
 14 | [![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/vaadinvaadin-checkbox)
 15 | [![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)
 16 | 
 17 | <!--
 18 | ```
 19 | <custom-element-demo>
 20 |   <template>
 21 |     <script src="../webcomponentsjs/webcomponents-lite.js"></script>
 22 |     <link rel="import" href="vaadin-checkbox.html">
 23 |     <next-code-block></next-code-block>
 24 |   </template>
 25 | </custom-element-demo>
 26 | ```
 27 | -->
 28 | ```html
 29 | <vaadin-checkbox checked>Checked</vaadin-checkbox>
 30 | <vaadin-checkbox>Unchecked</vaadin-checkbox>
 31 | <vaadin-checkbox indeterminate>Indeterminate</vaadin-checkbox>
 32 | ```
 33 | 
 34 | [<img src="https://raw.githubusercontent.com/vaadin/vaadin-checkbox/master/screenshot.png" width="400" alt="Screenshot of vaadin-checkbox, using the default Lumo theme">](https://vaadin.com/components/vaadin-checkbox)
 35 | 
 36 | ## Installation
 37 | 
 38 | The Vaadin components are distributed as Bower and npm packages.
 39 | Please note that the version range is the same, as the API has not changed.
 40 | You should not mix Bower and npm versions in the same application, though.
 41 | 
 42 | Unlike the official Polymer Elements, the converted Polymer 3 compatible Vaadin components
 43 | are only published on npm, not pushed to GitHub repositories.
 44 | 
 45 | ### Polymer 2 and HTML Imports Compatible Version
 46 | 
 47 | Install `vaadin-checkbox`:
 48 | 
 49 | ```sh
 50 | bower i vaadin/vaadin-checkbox --save
 51 | ```
 52 | 
 53 | Once installed, import it in your application:
 54 | 
 55 | ```html
 56 | <link rel="import" href="bower_components/vaadin-checkbox/vaadin-checkbox.html">
 57 | ```
 58 | ### Polymer 3 and ES Modules Compatible Version
 59 | 
 60 | Install `vaadin-checkbox`:
 61 | 
 62 | ```sh
 63 | npm i @vaadin/vaadin-checkbox --save
 64 | ```
 65 | 
 66 | Once installed, import it in your application:
 67 | 
 68 | ```js
 69 | import '@vaadin/vaadin-checkbox/vaadin-checkbox.js';
 70 | ```
 71 | 
 72 | ## Getting Started
 73 | 
 74 | Vaadin components use the Lumo theme by default.
 75 | 
 76 | To use the Material theme, import the correspondent file from the `theme/material` folder.
 77 | 
 78 | ## The file structure for Vaadin components
 79 | 
 80 | - The component with the Lumo theme:
 81 | 
 82 |   `theme/lumo/vaadin-checkbox.html`
 83 | 
 84 | - The component with the Material theme:
 85 | 
 86 |   `theme/material/vaadin-checkbox.html`
 87 | 
 88 | - Alias for `theme/lumo/vaadin-checkbox.html`:
 89 | 
 90 |   `vaadin-checkbox.html`
 91 | 
 92 | ## Running demos and tests in a browser
 93 | 
 94 | 1. Fork the `vaadin-checkbox` repository and clone it locally.
 95 | 
 96 | 1. Make sure you have [npm](https://www.npmjs.com/) and [Bower](https://bower.io) installed.
 97 | 
 98 | 1. When in the `vaadin-checkbox` directory, run `npm install` and then `bower install` to install dependencies.
 99 | 
100 | 1. Run `npm start`, browser will automatically open the component API documentation.
101 | 
102 | 1. You can also open demo or in-browser tests by adding **demo** or **test** to the URL, for example:
103 | 
104 |   - http://127.0.0.1:3000/components/vaadin-checkbox/demo
105 |   - http://127.0.0.1:3000/components/vaadin-checkbox/test
106 | 
107 | 
108 | ## Running tests from the command line
109 | 
110 | > [!WARNING]
111 | > Running tests locally from the CLI does not work due to outdated dependencies. Run tests via SauceLabs or in the browser instead.
112 | 
113 | 1. When in the `vaadin-checkbox` directory, run `polymer test`
114 | 
115 | 
116 | ## Following the coding style
117 | 
118 | 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.
119 | 
120 | 
121 | ## Big Thanks
122 | 
123 | Cross-browser Testing Platform and Open Source <3 Provided by [Sauce Labs](https://saucelabs.com).
124 | 
125 | 
126 | ## Contributing
127 | 
128 |   To contribute to the component, please read [the guideline](https://github.com/vaadin/vaadin-core/blob/master/CONTRIBUTING.md) first.
129 | 
130 | 
131 | ## License
132 | 
133 | Apache License 2.0
134 | 
135 | Vaadin collects development time usage statistics to improve this product. For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.
136 | 


--------------------------------------------------------------------------------
/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/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "rules": {
3 |   },
4 |   "globals": {
5 |     "CheckboxDemo": false,
6 |     "DemoReadyEventEmitter": false
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/demo/checkbox-basic-demos.html:
--------------------------------------------------------------------------------
  1 | <dom-module id="checkbox-basic-demos">
  2 |   <template>
  3 |     <style include="vaadin-component-demo-shared-styles">
  4 |       :host {
  5 |         display: block;
  6 |       }
  7 |     </style>
  8 |     <h3>Basic usage</h3>
  9 |     <vaadin-demo-snippet>
 10 |       <template preserve-content>
 11 |         <vaadin-checkbox value="Option" checked>Option</vaadin-checkbox>
 12 |       </template>
 13 |     </vaadin-demo-snippet>
 14 | 
 15 |     <h3>Basic usage with checkbox group</h3>
 16 |     <vaadin-demo-snippet>
 17 |       <template preserve-content>
 18 |         <vaadin-checkbox-group label="Label" theme="vertical">
 19 |           <vaadin-checkbox value="1" checked>Option one</vaadin-checkbox>
 20 |           <vaadin-checkbox value="2">Option two</vaadin-checkbox>
 21 |           <vaadin-checkbox value="3">Option three</vaadin-checkbox>
 22 |         </vaadin-checkbox-group>
 23 |       </template>
 24 |     </vaadin-demo-snippet>
 25 | 
 26 |     <h3>Disabled state</h3>
 27 |     <vaadin-demo-snippet>
 28 |       <template preserve-content>
 29 |         <vaadin-checkbox-group label="Disabled" theme="vertical" disabled>
 30 |           <vaadin-checkbox value="1" checked>Option one</vaadin-checkbox>
 31 |           <vaadin-checkbox value="2">Option two</vaadin-checkbox>
 32 |           <vaadin-checkbox value="3">Option three</vaadin-checkbox>
 33 |         </vaadin-checkbox-group>
 34 | 
 35 |         <vaadin-checkbox-group label="Disabled item" theme="vertical">
 36 |           <vaadin-checkbox value="1">Option one</vaadin-checkbox>
 37 |           <vaadin-checkbox value="2">Option two</vaadin-checkbox>
 38 |           <vaadin-checkbox value="3" disabled>Option three</vaadin-checkbox>
 39 |         </vaadin-checkbox-group>
 40 |         <style>
 41 |           vaadin-checkbox-group:first-of-type {
 42 |             margin-right: 200px;
 43 |           }
 44 |         </style>
 45 |       </template>
 46 |     </vaadin-demo-snippet>
 47 | 
 48 |     <h3>Helper text</h3>
 49 |     <p>Use the <code>helper-text</code> attribute or add content to the <code>helper</code> slot to set helper content.</p>
 50 |     <vaadin-demo-snippet id="basic-demos-helper-text">
 51 |       <template preserve-content>
 52 |         <vaadin-checkbox-group label="Label" theme="vertical"
 53 |           helper-text="Pick an option">
 54 |           <vaadin-checkbox value="1">Option one</vaadin-checkbox>
 55 |           <vaadin-checkbox value="2">Option two</vaadin-checkbox>
 56 |           <vaadin-checkbox value="3">Option three</vaadin-checkbox>
 57 |         </vaadin-checkbox-group>
 58 | 
 59 |         <vaadin-checkbox-group label="Label" theme="vertical">
 60 |           <span slot="helper">Pick an option</span>
 61 |           <vaadin-checkbox value="1">Option one</vaadin-checkbox>
 62 |           <vaadin-checkbox value="2">Option two</vaadin-checkbox>
 63 |           <vaadin-checkbox value="3">Option three</vaadin-checkbox>
 64 |         </vaadin-checkbox-group>
 65 | 
 66 |         <style>
 67 |           vaadin-checkbox-group:first-of-type {
 68 |             margin-right: 200px;
 69 |           }
 70 |         </style>
 71 |       </template>
 72 |     </vaadin-demo-snippet>
 73 | 
 74 |     <h3>Object list</h3>
 75 |     <vaadin-demo-snippet id="object-list" when-defined="vaadin-checkbox">
 76 |       <template preserve-content>
 77 |         <vaadin-checkbox-group label="Department" theme="vertical"></vaadin-checkbox-group>
 78 |         <script>
 79 |           window.addDemoReadyListener('#object-list', function(document) {
 80 |             const departments = [
 81 |               {id: '1', name: 'Product'},
 82 |               {id: '2', name: 'Service'},
 83 |               {id: '3', name: 'HR'},
 84 |               {id: '4', name: 'Accounting'}
 85 |             ];
 86 |             const checkboxGroup = document.querySelector('vaadin-checkbox-group');
 87 |             departments.forEach(function(item) {
 88 |               const checkbox = window.document.createElement('vaadin-checkbox');
 89 |               checkbox.textContent = item.name;
 90 |               checkbox.value = item.id;
 91 |               checkboxGroup.appendChild(checkbox);
 92 |             });
 93 |           });
 94 |         </script>
 95 |       </template>
 96 |     </vaadin-demo-snippet>
 97 | 
 98 |     <h3>Value change event</h3>
 99 |     <vaadin-demo-snippet id="value-change-event" when-defined="vaadin-radio-button">
100 |       <template preserve-content>
101 |         <vaadin-checkbox-group label="Label" theme="vertical">
102 |           <vaadin-checkbox value = "1">Option one</vaadin-checkbox>
103 |           <vaadin-checkbox value = "2">Option two</vaadin-checkbox>
104 |           <vaadin-checkbox value = "3">Option three</vaadin-checkbox>
105 |         </vaadin-checkbox-group>
106 |         <div>Selected value: <span id="output"></span></div>
107 |         <script>
108 |           window.addDemoReadyListener('#value-change-event', function(document) {
109 |             const checkboxGroup = document.querySelector('vaadin-checkbox-group');
110 |             const output = document.querySelector('#output');
111 |             checkboxGroup.addEventListener('change', function(event) {
112 |               output.textContent = checkboxGroup.value;
113 |             });
114 |           });
115 |         </script>
116 |       </template>
117 |     </vaadin-demo-snippet>
118 | 
119 | 
120 |     <h3>Indeterminate checkbox</h3>
121 |     <p>An <a
122 |       href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#Indeterminate_state_checkboxes"
123 |       target="_blank" rel="noopener">indeterminate checkbox</a> 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.</p>
126 |       <vaadin-demo-snippet id="checkbox-indeterminate" when-defined="vaadin-checkbox">
127 |         <template preserve-content>
128 |           <vaadin-checkbox-group label="Label" theme="vertical">
129 |             <vaadin-checkbox class="select-all">Select All</vaadin-checkbox>
130 |             <vaadin-checkbox value="1">Option one</vaadin-checkbox>
131 |             <vaadin-checkbox value="2">Option two</vaadin-checkbox>
132 |             <script>
133 |               window.addDemoReadyListener('#checkbox-indeterminate', function(document) {
134 |                 const options = Array.from(document.querySelectorAll('vaadin-checkbox[value]'));
135 |                 const selectAll = document.querySelector('.select-all');
136 | 
137 |                 selectAll.addEventListener('change', function() {
138 |                   options.forEach(function(option) {
139 |                     option.checked = selectAll.checked;
140 |                   });
141 |                 });
142 | 
143 |                 const syncState = function() {
144 |                   const isChecked = function(cb) {
145 |                     return cb.checked;
146 |                   };
147 |                   selectAll.checked = options.every(isChecked);
148 |                   selectAll.indeterminate = options.some(isChecked) && !options.every(isChecked);
149 |                 };
150 | 
151 |                 options.forEach(function(option) {
152 |                   option.addEventListener('change', syncState);
153 |                 });
154 | 
155 |                 options[0].checked = true;
156 |                 syncState();
157 |               });
158 |             </script>
159 |           </vaadin-checkbox-group>
160 |         </template>
161 |       </vaadin-demo-snippet>
162 | 
163 |     </template>
164 |     <script>
165 |       class CheckboxBasicDemos extends DemoReadyEventEmitter(CheckboxDemo(Polymer.Element)) {
166 |         static get is() {
167 |           return 'checkbox-basic-demos';
168 |         }
169 |       }
170 |       customElements.define(CheckboxBasicDemos.is, CheckboxBasicDemos);
171 |     </script>
172 |   </dom-module>
173 | 


--------------------------------------------------------------------------------
/demo/checkbox-demo.js:
--------------------------------------------------------------------------------
 1 | window.CheckboxDemo = superClass => {
 2 |   return class extends superClass {
 3 |     static get properties() {
 4 |       return {
 5 |       };
 6 |     }
 7 |   };
 8 | };
 9 | window.addEventListener('WebComponentsReady', () => {
10 |   document.body.removeAttribute('unresolved');
11 | });
12 | 


--------------------------------------------------------------------------------
/demo/checkbox-presentation-demos.html:
--------------------------------------------------------------------------------
 1 | <dom-module id="checkbox-presentation-demos">
 2 |   <template>
 3 |     <style include="vaadin-component-demo-shared-styles">
 4 |       :host {
 5 |         display: block;
 6 |       }
 7 |     </style>
 8 | 
 9 |     <h3>Customizing checkbox label</h3>
10 |     <vaadin-demo-snippet>
11 |       <template preserve-content>
12 |         <vaadin-checkbox-group label="User" theme="vertical">
13 |           <vaadin-checkbox checked value="1">
14 |             <img style="width: 21px; border-radius: 50%; vertical-align: bottom;"
15 |             src="https://randomuser.me/api/portraits/women/43.jpg" />
16 |             Gabriella
17 |           </vaadin-checkbox>
18 |           <vaadin-checkbox value="2">
19 |             <img style="width: 21px; border-radius: 50%; vertical-align: bottom;"
20 |             src="https://randomuser.me/api/portraits/men/77.jpg" />
21 |             Rudi
22 |           </vaadin-checkbox>
23 |           <vaadin-checkbox value="3">
24 |             <img style="width: 21px; border-radius: 50%; vertical-align: bottom;"
25 |             src="https://randomuser.me/api/portraits/men/35.jpg" />
26 |             Hamsa
27 |           </vaadin-checkbox>
28 |           <vaadin-checkbox value="4">
29 |             <img style="width: 21px; border-radius: 50%; vertical-align: bottom;"
30 |             src="https://randomuser.me/api/portraits/men/76.jpg" />
31 |             Jacob
32 |           </vaadin-checkbox>
33 |         </vaadin-checkbox-group>
34 |       </template>
35 |     </vaadin-demo-snippet>
36 | 
37 |     <h3>Multi-line label</h3>
38 |     <vaadin-demo-snippet>
39 |       <template preserve-content>
40 |         <vaadin-checkbox-group theme="vertical">
41 |           <vaadin-checkbox checked value="1">
42 |             <b>Option one</b>
43 |             <div>Description</div>
44 |           </vaadin-checkbox>
45 | 
46 |           <vaadin-checkbox value="2">
47 |             <b>Option two</b>
48 |             <div>Description</div>
49 |           </vaadin-checkbox>
50 | 
51 |           <vaadin-checkbox disabled value="3">
52 |             <b>Option three</b>
53 |             <div>Description</div>
54 |           </vaadin-checkbox>
55 |         </vaadin-checkbox-group>
56 |       </template>
57 |     </vaadin-demo-snippet>
58 | 
59 |   </template>
60 |   <script>
61 |     class CheckboxPresentationDemos extends DemoReadyEventEmitter(CheckboxDemo(Polymer.Element)) {
62 |       static get is() {
63 |         return 'checkbox-presentation-demos';
64 |       }
65 |     }
66 |     customElements.define(CheckboxPresentationDemos.is, CheckboxPresentationDemos);
67 |   </script>
68 | </dom-module>
69 | 


--------------------------------------------------------------------------------
/demo/checkbox-styling-demos.html:
--------------------------------------------------------------------------------
 1 | <dom-module id="checkbox-styling-demos">
 2 |   <template>
 3 |     <style include="vaadin-component-demo-shared-styles">
 4 |       :host {
 5 |         display: block;
 6 |       }
 7 |     </style>
 8 |     <h3>Customizing font</h3>
 9 |     <vaadin-demo-snippet id="customizing-font">
10 |       <template preserve-content>
11 |         <style>
12 |           vaadin-checkbox {
13 |             font-weight: bold;
14 |             font-family: sans-serif;
15 |           }
16 |         </style>
17 |         <vaadin-checkbox-group label="Label" theme="vertical">
18 |           <vaadin-checkbox checked value="1">Option one</vaadin-checkbox>
19 |           <vaadin-checkbox value="2">Option two</vaadin-checkbox>
20 |           <vaadin-checkbox value="3">Option three</vaadin-checkbox>
21 |         </vaadin-checkbox-group>
22 |       </template>
23 |     </vaadin-demo-snippet>
24 | 
25 |     <h3>Customizing icon color</h3>
26 |     <vaadin-demo-snippet id="customizing-icon-color">
27 |       <template preserve-content>
28 |         <dom-module id="checkbox-button-icon-color" theme-for="vaadin-checkbox">
29 |           <template>
30 |             <style>
31 |               :host([theme~="custom"][checked]) [part="checkbox"] {
32 |                 background-color: green;
33 |               }
34 |             </style>
35 |           </template>
36 |         </dom-module>
37 |         <vaadin-checkbox-group label="Label" theme="vertical">
38 |           <vaadin-checkbox checked theme="custom" value="1">Option one</vaadin-checkbox>
39 |           <vaadin-checkbox theme="custom" value="2">Option two</vaadin-checkbox>
40 |           <vaadin-checkbox theme="custom" value="3">Option three</vaadin-checkbox>
41 |         </vaadin-checkbox-group>
42 |       </template>
43 |     </vaadin-demo-snippet>
44 | 
45 |   </template>
46 |   <script>
47 |     class CheckboxStylingDemos extends DemoReadyEventEmitter(CheckboxDemo(Polymer.Element)) {
48 |       static get is() {
49 |         return 'checkbox-styling-demos';
50 |       }
51 |     }
52 |     customElements.define(CheckboxStylingDemos.is, CheckboxStylingDemos);
53 |   </script>
54 | </dom-module>
55 | 


--------------------------------------------------------------------------------
/demo/checkbox-theme-variants-demos.html:
--------------------------------------------------------------------------------
 1 | <dom-module id="checkbox-theme-variants-demos">
 2 |   <template>
 3 |     <style include="vaadin-component-demo-shared-styles">
 4 |       :host {
 5 |         display: block;
 6 |       }
 7 |     </style>
 8 |     <h3>Orientation</h3>
 9 |     <vaadin-demo-snippet>
10 |       <template preserve-content>
11 |         <h4>Horizontal</h4>
12 |         <vaadin-checkbox-group>
13 |           <vaadin-checkbox checked value= "1">Option one</vaadin-checkbox>
14 |           <vaadin-checkbox value= "2">Option two</vaadin-checkbox>
15 |           <vaadin-checkbox value= "3">Option three</vaadin-checkbox>
16 |         </vaadin-checkbox-group>
17 | 
18 |         <h4>Vertical</h4>
19 |         <vaadin-checkbox-group theme="vertical">
20 |           <vaadin-checkbox checked value= "1">Option one</vaadin-checkbox>
21 |           <vaadin-checkbox value= "2">Option two</vaadin-checkbox>
22 |           <vaadin-checkbox value= "3">Option three</vaadin-checkbox>
23 |         </vaadin-checkbox-group>
24 |       </template>
25 |     </vaadin-demo-snippet>
26 | 
27 |     <h3>Helper text position</h3>
28 |     <vaadin-demo-snippet id="theme-demos-helper-text-position">
29 |       <template preserve-content>
30 |         <h4>Below</h4>
31 |         <vaadin-checkbox-group label="Label" helper-text="Helper text below">
32 |           <vaadin-checkbox value="1" checked>Option one</vaadin-checkbox>
33 |           <vaadin-checkbox value="2">Option two</vaadin-checkbox>
34 |           <vaadin-checkbox value="3">Option three</vaadin-checkbox>
35 |         </vaadin-checkbox-group>
36 | 
37 |         <h4>Above</h4>
38 |         <vaadin-checkbox-group label="Label" helper-text="Helper text above" theme="helper-above-field">
39 |           <vaadin-checkbox value="1" checked>Option one</vaadin-checkbox>
40 |           <vaadin-checkbox value="2">Option two</vaadin-checkbox>
41 |           <vaadin-checkbox value="3">Option three</vaadin-checkbox>
42 |         </vaadin-checkbox-group>
43 |       </template>
44 |     </vaadin-demo-snippet>
45 | 
46 |   </template>
47 |   <script>
48 |     class CheckboxThemeVariantsDemos extends DemoReadyEventEmitter(CheckboxDemo(Polymer.Element)) {
49 |       static get is() {
50 |         return 'checkbox-theme-variants-demos';
51 |       }
52 |     }
53 |     customElements.define(CheckboxThemeVariantsDemos.is, CheckboxThemeVariantsDemos);
54 |   </script>
55 | </dom-module>
56 | 


--------------------------------------------------------------------------------
/demo/checkbox-validation-demos.html:
--------------------------------------------------------------------------------
 1 | <dom-module id="checkbox-validation-demos">
 2 |   <template>
 3 |     <style include="vaadin-component-demo-shared-styles">
 4 |       :host {
 5 |         display: block;
 6 |       }
 7 |     </style>
 8 | 
 9 |     <h3>Required</h3>
10 |     <vaadin-demo-snippet id="checkbox-required" when-defined="vaadin-checkbox-group">
11 |       <template preserve-content>
12 |         <vaadin-checkbox-group label="Required" required error-message="Please choose one option" theme="vertical">
13 |           <vaadin-checkbox value="1">Option one</vaadin-checkbox>
14 |           <vaadin-checkbox value="2">Option two</vaadin-checkbox>
15 |           <vaadin-checkbox value="3">Option three</vaadin-checkbox>
16 |         </vaadin-checkbox-group>
17 |         <vaadin-button>Submit</vaadin-button>
18 |         <script>
19 |           window.addDemoReadyListener('#checkbox-required', function(document) {
20 |             const submit = document.querySelector('vaadin-button');
21 |             const checkboxGroup = document.querySelector('vaadin-checkbox-group');
22 |             submit.addEventListener('click', function(event) {
23 |               checkboxGroup.validate();
24 |             });
25 |           });
26 |         </script>
27 |       </template>
28 |     </vaadin-demo-snippet>
29 | 
30 |   </template>
31 |   <script>
32 |     class CheckboxValidationDemos extends DemoReadyEventEmitter(CheckboxDemo(Polymer.Element)) {
33 |       static get is() {
34 |         return 'checkbox-validation-demos';
35 |       }
36 |     }
37 |     customElements.define(CheckboxValidationDemos.is, CheckboxValidationDemos);
38 |   </script>
39 | </dom-module>
40 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
 6 |   <title>Vaadin Checkbox Examples</title>
 7 |   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
 8 | 
 9 |   <link rel="import" href="../../polymer/polymer.html">
10 |   <link rel="import" href="../../vaadin-demo-helpers/vaadin-component-demo.html">
11 |   <link rel="import" href="../../vaadin-demo-helpers/vaadin-demo-snippet.html">
12 | 
13 |   <script src="./checkbox-demo.js"></script>
14 |   <link rel="import" href="../../vaadin-button/vaadin-button.html">
15 |   <link rel="import" href="../vaadin-checkbox.html">
16 |   <link rel="import" href="../vaadin-checkbox-group.html">
17 | 
18 |   <custom-style>
19 |     <style include="vaadin-component-demo-shared-styles"></style>
20 |   </custom-style>
21 | </head>
22 | 
23 | <body>
24 |   <vaadin-component-demo config-src="demos.json"></vaadin-component-demo>
25 | 
26 |   <dom-module id="checkbox-button-icon-color" theme-for="vaadin-checkbox">
27 |     <template>
28 |       <style>
29 |         :host([theme~="custom"][checked]) [part="checkbox"] {
30 |           background-color: green;
31 |         }
32 |       </style>
33 |     </template>
34 |   </dom-module>
35 | 
36 | </body>
37 | </html>
38 | 


--------------------------------------------------------------------------------
/gen-tsd.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "excludeFiles": [
 3 |     "wct.conf.js",
 4 |     "index.html",
 5 |     "demo/**/*",
 6 |     "test/**/*",
 7 |     "theme/**/*"
 8 |   ]
 9 | }
10 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | 
 3 | <html>
 4 |   <head>
 5 |     <title>vaadin-checkbox</title>
 6 |     <meta charset="utf-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <script src="../webcomponentsjs/webcomponents-lite.js"></script>
 9 |     <link rel="import" href="../iron-component-page/iron-component-page.html">
10 |   </head>
11 |   <body>
12 |     <iron-component-page src="vaadin-checkbox.html"></iron-component-page>
13 |   </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/magi-p3-post.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   files: [
 3 |     'vaadin-checkbox.js',
 4 |     'vaadin-checkbox-group.js'
 5 |   ],
 6 |   from: [
 7 |     /import '\.\/theme\/lumo\/vaadin-(.+)\.js';/
 8 |   ],
 9 |   to: [
10 |     `import './theme/lumo/vaadin-$1.js';\nexport * from './src/vaadin-$1.js';`
11 |   ]
12 | };
13 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vaadin/vaadin-checkbox/4c0799c6bd66ace20f386774ed8098994240fadb/screenshot.png


--------------------------------------------------------------------------------
/src/vaadin-checkbox-group.html:
--------------------------------------------------------------------------------
  1 | <!--
  2 | @license
  3 | Copyright (c) 2017 Vaadin Ltd.
  4 | This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  5 | -->
  6 | 
  7 | <link rel="import" href="../../polymer/polymer-element.html">
  8 | <link rel="import" href="../../polymer/lib/utils/flattened-nodes-observer.html">
  9 | <link rel="import" href="../../vaadin-themable-mixin/vaadin-themable-mixin.html">
 10 | <link rel="import" href="../../vaadin-element-mixin/vaadin-dir-mixin.html">
 11 | <link rel="import" href="vaadin-checkbox.html">
 12 | 
 13 | <dom-module id="vaadin-checkbox-group">
 14 |   <template>
 15 |     <style>
 16 |       :host {
 17 |         display: inline-flex;
 18 | 
 19 |         /* Prevent horizontal overflow in IE 11 instead of wrapping checkboxes */
 20 |         max-width: 100%;
 21 |       }
 22 | 
 23 |       :host::before {
 24 |         content: "\2003";
 25 |         width: 0;
 26 |         display: inline-block;
 27 |       }
 28 | 
 29 |       :host([hidden]) {
 30 |         display: none !important;
 31 |       }
 32 | 
 33 |       .vaadin-group-field-container {
 34 |         display: flex;
 35 |         flex-direction: column;
 36 | 
 37 |         /* Prevent horizontal overflow in IE 11 instead of wrapping checkboxes */
 38 |         width: 100%;
 39 |       }
 40 | 
 41 |       [part="label"]:empty {
 42 |         display: none;
 43 |       }
 44 |     </style>
 45 | 
 46 |     <div class="vaadin-group-field-container">
 47 |       <label part="label">[[label]]</label>
 48 | 
 49 |       <div part="group-field">
 50 |         <slot id="slot"></slot>
 51 |       </div>
 52 | 
 53 |       <div part="helper-text"
 54 |         aria-live="assertive"
 55 |         aria-hidden$="[[_getHelperTextAriaHidden(helperText, _hasSlottedHelper)]]">
 56 |         <slot name="helper">[[helperText]]</slot>
 57 |       </div>
 58 | 
 59 |       <div part="error-message"
 60 |         aria-live="assertive"
 61 |         aria-hidden$="[[_getErrorMessageAriaHidden(invalid, errorMessage)]]"
 62 |       >[[errorMessage]]</div>
 63 | 
 64 |     </div>
 65 | 
 66 |   </template>
 67 | 
 68 |   <script>
 69 |     (function() {
 70 |       /**
 71 |        * `<vaadin-checkbox-group>` is a Polymer element for grouping vaadin-checkboxes.
 72 |        *
 73 |        * ```html
 74 |        * <vaadin-checkbox-group label="Preferred language of contact:">
 75 |        *  <vaadin-checkbox value="en">English</vaadin-checkbox>
 76 |        *  <vaadin-checkbox value="fr">Français</vaadin-checkbox>
 77 |        *  <vaadin-checkbox value="de">Deutsch</vaadin-checkbox>
 78 |        * </vaadin-checkbox-group>
 79 |        * ```
 80 |        *
 81 |        * ### Styling
 82 |        *
 83 |        * The following shadow DOM parts are available for styling:
 84 |        *
 85 |        * Part name | Description
 86 |        * ----------------|----------------
 87 |        * `label` | The label element
 88 |        * `group-field` | The element that wraps checkboxes
 89 |        * `error-message` | The error message element
 90 |        *
 91 |        * The following state attributes are available for styling:
 92 |        *
 93 |        * Attribute  | Description | Part name
 94 |        * -----------|-------------|------------
 95 |        * `disabled`   | Set when the checkbox group and its children are disabled. | :host
 96 |        * `focused` | Set when the checkbox group contains focus | :host
 97 |        * `has-label` | Set when the element has a label | :host
 98 |        * `has-value` | Set when the element has a value | :host
 99 |        * `has-helper` | Set when the element has helper text or slot | :host
100 |        * `has-error-message` | Set when the element has an error message, regardless if the field is valid or not | :host
101 |        * `required` | Set when the element is required | :host
102 |        * `invalid` | Set when the element is invalid | :host
103 |        *
104 |        * See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)
105 |        *
106 |        * @memberof Vaadin
107 |        * @mixes Vaadin.ThemableMixin
108 |        * @mixes Vaadin.DirMixin
109 |        * @element vaadin-checkbox-group
110 |        * @demo demo/index.html
111 |        */
112 |       class CheckboxGroupElement extends Vaadin.ThemableMixin(Vaadin.DirMixin(Polymer.Element)) {
113 |         static get is() {
114 |           return 'vaadin-checkbox-group';
115 |         }
116 | 
117 |         static get properties() {
118 |           return {
119 |             /**
120 |              * The current disabled state of the checkbox group. True if group and all internal checkboxes are disabled.
121 |              */
122 |             disabled: {
123 |               type: Boolean,
124 |               reflectToAttribute: true,
125 |               observer: '_disabledChanged'
126 |             },
127 | 
128 |             /**
129 |              * String used for the label element.
130 |              */
131 |             label: {
132 |               type: String,
133 |               value: '',
134 |               observer: '_labelChanged'
135 |             },
136 | 
137 |             /**
138 |              * Value of the checkbox group.
139 |              * Note: toggling the checkboxes modifies the value by creating new
140 |              * array each time, to override Polymer dirty-checking for arrays.
141 |              * You can still use Polymer array mutation methods to update the value.
142 |              * @type {!Array<!string>}
143 |              */
144 |             value: {
145 |               type: Array,
146 |               value: () => [],
147 |               notify: true
148 |             },
149 | 
150 |             /**
151 |              * Error to show when the input value is invalid.
152 |              * @attr {string} error-message
153 |              */
154 |             errorMessage: {
155 |               type: String,
156 |               value: '',
157 |               observer: '_errorMessageChanged'
158 |             },
159 | 
160 |             /**
161 |              * String used for the helper text.
162 |              * @attr {string} helper-text
163 |              * @type {string | null}
164 |              */
165 |             helperText: {
166 |               type: String,
167 |               value: '',
168 |               observer: '_helperTextChanged'
169 |             },
170 | 
171 |             /**
172 |              * Specifies that the user must fill in a value.
173 |              */
174 |             required: {
175 |               type: Boolean,
176 |               reflectToAttribute: true
177 |             },
178 | 
179 |             /**
180 |              * This property is set to true when the control value is invalid.
181 |              * @type {boolean}
182 |              */
183 |             invalid: {
184 |               type: Boolean,
185 |               reflectToAttribute: true,
186 |               notify: true,
187 |               value: false
188 |             },
189 | 
190 |             /** @private */
191 |             _hasSlottedHelper: Boolean,
192 | 
193 |           };
194 |         }
195 | 
196 |         static get observers() {
197 |           return [
198 |             '_updateValue(value, value.splices)'
199 |           ];
200 |         }
201 | 
202 |         ready() {
203 |           super.ready();
204 | 
205 |           this.addEventListener('focusin', () => this._setFocused(this._containsFocus()));
206 | 
207 |           this.addEventListener('focusout', e => {
208 |             // validate when stepping out of the checkbox group
209 |             if (!this._checkboxes.some(checkbox => e.relatedTarget === checkbox || checkbox.shadowRoot.contains(e.relatedTarget))) {
210 |               this.validate();
211 |               this._setFocused(false);
212 |             }
213 |           });
214 | 
215 |           const checkedChangedListener = (e) => {
216 |             this._changeSelectedCheckbox(e.target);
217 |           };
218 | 
219 |           this._observer = new Polymer.FlattenedNodesObserver(this, info => {
220 |             const addedCheckboxes = this._filterCheckboxes(info.addedNodes);
221 | 
222 |             addedCheckboxes.forEach(checkbox => {
223 |               checkbox.addEventListener('checked-changed', checkedChangedListener);
224 |               if (this.disabled) {
225 |                 checkbox.disabled = true;
226 |               }
227 |               if (checkbox.checked) {
228 |                 this._addCheckboxToValue(checkbox.value);
229 |               } else if (this.value.indexOf(checkbox.value) > -1) {
230 |                 checkbox.checked = true;
231 |               }
232 |             });
233 | 
234 |             this._filterCheckboxes(info.removedNodes).forEach(checkbox => {
235 |               checkbox.removeEventListener('checked-changed', checkedChangedListener);
236 |               if (checkbox.checked) {
237 |                 this._removeCheckboxFromValue(checkbox.value);
238 |               }
239 |             });
240 | 
241 |             this._setOrToggleHasHelperAttribute();
242 | 
243 |             const hasValue = checkbox => {
244 |               const {value} = checkbox;
245 |               return checkbox.hasAttribute('value') || value && value !== 'on';
246 |             };
247 |             if (!addedCheckboxes.every(hasValue)) {
248 |               console.warn('Please add value attribute to all checkboxes in checkbox group');
249 |             }
250 |           });
251 |         }
252 | 
253 |         /**
254 |          * @param {boolean} invalid
255 |          * @protected
256 |          */
257 |         _setInvalid(invalid) {
258 |           if (this._shouldSetInvalid(invalid)) {
259 |             this.invalid = invalid;
260 |           }
261 |         }
262 | 
263 |         /**
264 |          * Override this method to define whether the given `invalid` state should be set.
265 |          *
266 |          * @param {boolean} _invalid
267 |          * @return {boolean}
268 |          * @protected
269 |          */
270 |         _shouldSetInvalid(_invalid) {
271 |           return true;
272 |         }
273 | 
274 |         /**
275 |          * Validates the field and sets the `invalid` property based on the result.
276 |          *
277 |          * The method fires a `validated` event with the result of the validation.
278 |          *
279 |          * @return {boolean} True if the value is valid.
280 |          */
281 |         validate() {
282 |           const isValid = !(this.required && this.value.length === 0);
283 |           this._setInvalid(!isValid);
284 |           this.dispatchEvent(new CustomEvent('validated', {detail: {valid: isValid}}));
285 |           return isValid;
286 |         }
287 | 
288 |         /** @private */
289 |         get _checkboxes() {
290 |           return this._filterCheckboxes(this.querySelectorAll('*'));
291 |         }
292 | 
293 |         /** @private */
294 |         _filterCheckboxes(nodes) {
295 |           return Array.from(nodes)
296 |             .filter(child => child instanceof Vaadin.CheckboxElement);
297 |         }
298 | 
299 |         /** @private */
300 |         _disabledChanged(disabled) {
301 |           this.setAttribute('aria-disabled', disabled);
302 | 
303 |           this._checkboxes.forEach(checkbox => checkbox.disabled = disabled);
304 |         }
305 | 
306 |         /**
307 |          * @param {string} value
308 |          * @protected
309 |          */
310 |         _addCheckboxToValue(value) {
311 |           if (this.value.indexOf(value) === -1) {
312 |             this.value = this.value.concat(value);
313 |           }
314 |         }
315 | 
316 |         /**
317 |          * @param {string} value
318 |          * @protected
319 |          */
320 |         _removeCheckboxFromValue(value) {
321 |           this.value = this.value.filter(v => v !== value);
322 |         }
323 | 
324 |         /**
325 |          * @param {CheckboxElement} checkbox
326 |          * @protected
327 |          */
328 |         _changeSelectedCheckbox(checkbox) {
329 |           if (this._updatingValue) {
330 |             return;
331 |           }
332 | 
333 |           if (checkbox.checked) {
334 |             this._addCheckboxToValue(checkbox.value);
335 |           } else {
336 |             this._removeCheckboxFromValue(checkbox.value);
337 |           }
338 |         }
339 | 
340 |         /** @private */
341 |         _updateValue(value, splices) {
342 |           // setting initial value to empty array, skip validation
343 |           if (value.length === 0 && this._oldValue === undefined) {
344 |             return;
345 |           }
346 | 
347 |           if (value.length) {
348 |             this.setAttribute('has-value', '');
349 |           } else {
350 |             this.removeAttribute('has-value');
351 |           }
352 | 
353 |           this._oldValue = value;
354 |           // set a flag to avoid updating loop
355 |           this._updatingValue = true;
356 |           // reflect the value array to checkboxes
357 |           this._checkboxes.forEach(checkbox => {
358 |             checkbox.checked = value.indexOf(checkbox.value) > -1;
359 |           });
360 |           this._updatingValue = false;
361 | 
362 |           this.validate();
363 |         }
364 | 
365 |         /** @private */
366 |         _labelChanged(label) {
367 |           this._setOrToggleAttribute('has-label', !!label);
368 |         }
369 | 
370 |         /** @private */
371 |         _errorMessageChanged(errorMessage) {
372 |           this._setOrToggleAttribute('has-error-message', !!errorMessage);
373 |         }
374 | 
375 |         /** @private */
376 |         _helperTextChanged(helperText) {
377 |           this._setOrToggleAttribute('has-helper', !!helperText);
378 |         }
379 | 
380 |         /** @private */
381 |         _setOrToggleAttribute(name, value) {
382 |           if (!name) {
383 |             return;
384 |           }
385 | 
386 |           if (value) {
387 |             this.setAttribute(name, (typeof value === 'boolean') ? '' : value);
388 |           } else {
389 |             this.removeAttribute(name);
390 |           }
391 |         }
392 | 
393 |         /** @private */
394 |         _getErrorMessageAriaHidden(invalid, errorMessage) {
395 |           return (!errorMessage || !invalid).toString();
396 |         }
397 | 
398 |         /**
399 |          * @return {boolean}
400 |          * @protected
401 |          */
402 |         _containsFocus() {
403 |           const root = this.getRootNode();
404 |           // Safari 9 needs polyfilled `_activeElement` to return correct node
405 |           const activeElement = root._activeElement !== undefined ? root._activeElement : root.activeElement;
406 |           return this.contains(activeElement);
407 |         }
408 | 
409 |         /**
410 |          * @param {boolean} focused
411 |          * @protected
412 |          */
413 |         _setFocused(focused) {
414 |           if (focused) {
415 |             this.setAttribute('focused', '');
416 |           } else {
417 |             this.removeAttribute('focused');
418 |           }
419 |         }
420 | 
421 |         /** @private */
422 |         _setOrToggleHasHelperAttribute() {
423 |           const slottedNodes = this.shadowRoot.querySelector(`[name="helper"]`).assignedNodes();
424 |           // Only has slotted helper if not a text node
425 |           // Text nodes are added by the helperText prop and not the helper slot
426 |           // The filter is added due to shady DOM triggering this slotchange event on helperText prop change
427 |           this._hasSlottedHelper = slottedNodes.filter(node => node.nodeType !== 3).length > 0;
428 | 
429 |           this._setOrToggleAttribute('has-helper', this._hasSlottedHelper ? 'slotted' : !!this.helperText);
430 |         }
431 | 
432 |         /** @private */
433 |         _getHelperTextAriaHidden(helperText, hasSlottedHelper) {
434 |           return (!(helperText || hasSlottedHelper)).toString();
435 |         }
436 | 
437 |         /**
438 |          * Fired whenever the field is validated.
439 |          *
440 |          * @event validated
441 |          * @param {Object} detail
442 |          * @param {boolean} detail.valid the result of the validation.
443 |          */
444 |       }
445 | 
446 |       customElements.define(CheckboxGroupElement.is, CheckboxGroupElement);
447 | 
448 |       /**
449 |        * @namespace Vaadin
450 |        */
451 |       window.Vaadin = window.Vaadin || {};
452 |       Vaadin.CheckboxGroupElement = CheckboxGroupElement;
453 |     })();
454 |   </script>
455 | </dom-module>
456 | 


--------------------------------------------------------------------------------
/src/vaadin-checkbox.html:
--------------------------------------------------------------------------------
  1 | <!--
  2 | @license
  3 | Copyright (c) 2017 Vaadin Ltd.
  4 | This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  5 | -->
  6 | 
  7 | <link rel="import" href="../../polymer/polymer-element.html">
  8 | <link rel="import" href="../../polymer/lib/mixins/gesture-event-listeners.html">
  9 | <link rel="import" href="../../vaadin-themable-mixin/vaadin-themable-mixin.html">
 10 | <link rel="import" href="../../vaadin-control-state-mixin/vaadin-control-state-mixin.html">
 11 | <link rel="import" href="../../vaadin-element-mixin/vaadin-element-mixin.html">
 12 | 
 13 | <dom-module id="vaadin-checkbox">
 14 |   <template>
 15 |     <style>
 16 |       :host {
 17 |         display: inline-block;
 18 |       }
 19 | 
 20 |       :host([hidden]) {
 21 |         display: none !important;
 22 |       }
 23 | 
 24 |       label {
 25 |         display: inline-flex;
 26 |         align-items: baseline;
 27 |         outline: none;
 28 |       }
 29 | 
 30 |       [part="checkbox"] {
 31 |         position: relative;
 32 |         display: inline-block;
 33 |         flex: none;
 34 |       }
 35 | 
 36 |       input[type="checkbox"] {
 37 |         position: absolute;
 38 |         top: 0;
 39 |         left: 0;
 40 |         right: 0;
 41 |         width: 100%;
 42 |         height: 100%;
 43 |         opacity: 0;
 44 |         cursor: inherit;
 45 |         margin: 0;
 46 |       }
 47 | 
 48 |       :host([disabled]) {
 49 |         -webkit-tap-highlight-color: transparent;
 50 |       }
 51 |     </style>
 52 | 
 53 |     <label>
 54 |       <span part="checkbox">
 55 |         <input
 56 |           type="checkbox"
 57 |           checked="{{checked::change}}"
 58 |           disabled$="[[disabled]]"
 59 |           indeterminate="{{indeterminate::change}}"
 60 |           role="presentation"
 61 |           tabindex="-1">
 62 |       </span>
 63 | 
 64 |       <span part="label">
 65 |         <slot></slot>
 66 |       </span>
 67 |     </label>
 68 | 
 69 |   </template>
 70 |   <script>
 71 |     (function() {
 72 |       /**
 73 |        * `<vaadin-checkbox>` is a Web Component for customized checkboxes.
 74 |        *
 75 |        * ```html
 76 |        * <vaadin-checkbox>
 77 |        *   Make my profile visible
 78 |        * </vaadin-checkbox>
 79 |        * ```
 80 |        *
 81 |        * ### Styling
 82 |        *
 83 |        * The following shadow DOM parts are available for styling:
 84 |        *
 85 |        * Part name         | Description
 86 |        * ------------------|----------------
 87 |        * `checkbox`        | The wrapper element for the native <input type="checkbox">
 88 |        * `label`           | The wrapper element in which the component's children, namely the label, is slotted
 89 |        *
 90 |        * The following state attributes are available for styling:
 91 |        *
 92 |        * Attribute    | Description | Part name
 93 |        * -------------|-------------|--------------
 94 |        * `active`     | Set when the checkbox is pressed down, either with mouse, touch or the keyboard. | `:host`
 95 |        * `disabled`   | Set when the checkbox is disabled. | `:host`
 96 |        * `focus-ring` | Set when the checkbox is focused using the keyboard. | `:host`
 97 |        * `focused`    | Set when the checkbox is focused. | `:host`
 98 |        * `indeterminate` | Set when the checkbox is in indeterminate mode. | `:host`
 99 |        * `checked` | Set when the checkbox is checked. | `:host`
100 |        * `empty` | Set when there is no label provided. | `label`
101 |        *
102 |        * See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)
103 |        *
104 |        * @memberof Vaadin
105 |        * @mixes Vaadin.ElementMixin
106 |        * @mixes Vaadin.ControlStateMixin
107 |        * @mixes Vaadin.ThemableMixin
108 |        * @mixes Polymer.GestureEventListeners
109 |        * @demo demo/index.html
110 |        */
111 |       class CheckboxElement extends
112 |         Vaadin.ElementMixin(
113 |           Vaadin.ControlStateMixin(
114 |             Vaadin.ThemableMixin(
115 |               Polymer.GestureEventListeners(Polymer.Element)))) {
116 | 
117 |         static get is() {
118 |           return 'vaadin-checkbox';
119 |         }
120 | 
121 |         static get version() {
122 |           return '2.6.1';
123 |         }
124 | 
125 |         static get properties() {
126 |           return {
127 |             /**
128 |              * True if the checkbox is checked.
129 |              * @type {boolean}
130 |              */
131 |             checked: {
132 |               type: Boolean,
133 |               value: false,
134 |               notify: true,
135 |               observer: '_checkedChanged',
136 |               reflectToAttribute: true
137 |             },
138 | 
139 |             /**
140 |              * Indeterminate state of the checkbox when it's neither checked nor unchecked, but undetermined.
141 |              * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#Indeterminate_state_checkboxes
142 |              * @type {boolean}
143 |              */
144 |             indeterminate: {
145 |               type: Boolean,
146 |               notify: true,
147 |               observer: '_indeterminateChanged',
148 |               reflectToAttribute: true,
149 |               value: false
150 |             },
151 | 
152 |             /**
153 |              * The value given to the data submitted with the checkbox's name to the server when the control is inside a form.
154 |              */
155 |             value: {
156 |               type: String,
157 |               value: 'on'
158 |             },
159 | 
160 |             /** @private */
161 |             _nativeCheckbox: {
162 |               type: Object
163 |             }
164 |           };
165 |         }
166 | 
167 |         constructor() {
168 |           super();
169 |           /**
170 |            * @type {string}
171 |            * Name of the element.
172 |            */
173 |           this.name;
174 |         }
175 | 
176 |         get name() {
177 |           return this.checked ? this._storedName : '';
178 |         }
179 | 
180 |         set name(name) {
181 |           this._storedName = name;
182 |         }
183 | 
184 |         ready() {
185 |           super.ready();
186 | 
187 |           this.setAttribute('role', 'checkbox');
188 | 
189 |           this._nativeCheckbox = this.shadowRoot.querySelector('input[type="checkbox"]');
190 | 
191 |           this.addEventListener('click', this._handleClick.bind(this));
192 | 
193 |           this._addActiveListeners();
194 | 
195 |           const attrName = this.getAttribute('name');
196 |           if (attrName) {
197 |             this.name = attrName;
198 |           }
199 | 
200 |           this.shadowRoot.querySelector('[part~="label"]').querySelector('slot')
201 |             .addEventListener('slotchange', this._updateLabelAttribute.bind(this));
202 | 
203 |           this._updateLabelAttribute();
204 |         }
205 | 
206 |         /** @private */
207 |         _updateLabelAttribute() {
208 |           const label = this.shadowRoot.querySelector('[part~="label"]');
209 |           const assignedNodes = label.firstElementChild.assignedNodes();
210 |           if (this._isAssignedNodesEmpty(assignedNodes)) {
211 |             label.setAttribute('empty', '');
212 |           } else {
213 |             label.removeAttribute('empty');
214 |           }
215 |         }
216 | 
217 |         /** @private */
218 |         _isAssignedNodesEmpty(nodes) {
219 |           // The assigned nodes considered to be empty if there is no slotted content or only one empty text node
220 |           return nodes.length === 0 ||
221 |                 (nodes.length == 1
222 |                 && nodes[0].nodeType == Node.TEXT_NODE
223 |                 && nodes[0].textContent.trim() === '');
224 |         }
225 | 
226 |         /** @private */
227 |         _checkedChanged(checked) {
228 |           if (this.indeterminate) {
229 |             this.setAttribute('aria-checked', 'mixed');
230 |           } else {
231 |             this.setAttribute('aria-checked', Boolean(checked));
232 |           }
233 |         }
234 | 
235 |         /** @private */
236 |         _indeterminateChanged(indeterminate) {
237 |           if (indeterminate) {
238 |             this.setAttribute('aria-checked', 'mixed');
239 |           } else {
240 |             this.setAttribute('aria-checked', this.checked);
241 |           }
242 |         }
243 | 
244 |         /** @private */
245 |         _addActiveListeners() {
246 |           // DOWN
247 |           this._addEventListenerToNode(this, 'down', (e) => {
248 |             if (this.__interactionsAllowed(e)) {
249 |               this.setAttribute('active', '');
250 |             }
251 |           });
252 | 
253 |           // UP
254 |           this._addEventListenerToNode(this, 'up', () => this.removeAttribute('active'));
255 | 
256 |           // KEYDOWN
257 |           this.addEventListener('keydown', e => {
258 |             if (this.__interactionsAllowed(e) && e.keyCode === 32) {
259 |               e.preventDefault();
260 |               this.setAttribute('active', '');
261 |             }
262 |           });
263 | 
264 |           // KEYUP
265 |           this.addEventListener('keyup', e => {
266 |             if (this.__interactionsAllowed(e) && e.keyCode === 32) {
267 |               e.preventDefault();
268 |               this.click();
269 |               this.removeAttribute('active');
270 |             }
271 |           });
272 |         }
273 | 
274 |         /**
275 |          * @return {!HTMLInputElement}
276 |          * @protected
277 |          */
278 |         get focusElement() {
279 |           return this.shadowRoot.querySelector('input');
280 |         }
281 | 
282 |         /**
283 |          * True if users' interactions (mouse or keyboard)
284 |          * should toggle the checkbox
285 |          */
286 |         __interactionsAllowed(e) {
287 |           if (this.disabled) {
288 |             return false;
289 |           }
290 | 
291 |           // https://github.com/vaadin/vaadin-checkbox/issues/63
292 |           if (e.target.localName === 'a') {
293 |             return false;
294 |           }
295 | 
296 |           return true;
297 |         }
298 | 
299 |         /** @private */
300 |         _handleClick(e) {
301 |           if (this.__interactionsAllowed(e)) {
302 |             if (!this.indeterminate) {
303 |               if (e.composedPath()[0] !== this._nativeCheckbox) {
304 |                 e.preventDefault();
305 |                 this._toggleChecked();
306 |               }
307 |             } else {
308 |               /*
309 |                * Required for IE 11 and Edge.
310 |                * See issue here: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7344418/
311 |                */
312 |               this.indeterminate = false;
313 |               e.preventDefault();
314 |               this._toggleChecked();
315 |             }
316 |           }
317 |         }
318 | 
319 |         /** @protected */
320 |         _toggleChecked() {
321 |           this.checked = !this.checked;
322 |           this.dispatchEvent(new CustomEvent('change', {composed: false, bubbles: true}));
323 |         }
324 | 
325 |         /**
326 |          * Fired when the user commits a value change.
327 |          *
328 |          * @event change
329 |          */
330 |       }
331 | 
332 |       customElements.define(CheckboxElement.is, CheckboxElement);
333 | 
334 |       /**
335 |        * @namespace Vaadin
336 |        */
337 |       window.Vaadin.CheckboxElement = CheckboxElement;
338 |     })();
339 |   </script>
340 | </dom-module>
341 | 


--------------------------------------------------------------------------------
/test/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "parserOptions": {
 3 |     "ecmaVersion": 8
 4 |   },
 5 |   "globals": {
 6 |     "WCT": false,
 7 |     "describe": false,
 8 |     "beforeEach": false,
 9 |     "fixture": false,
10 |     "it": false,
11 |     "sinon": false,
12 |     "expect": false,
13 |     "gemini": false,
14 |     "MockInteractions": false,
15 |     "animationFrameFlush": false,
16 |     "nextRender": false
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/test/accessibility.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | 
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>vaadin-checkbox tests</title>
 6 |   <script src="../../web-component-tester/browser.js"></script>
 7 |   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
 8 |   <link rel="import" href="../../test-fixture/test-fixture.html">
 9 |   <link rel="import" href="../vaadin-checkbox.html">
10 | </head>
11 | 
12 | <body>
13 |   <test-fixture id="default">
14 |     <template>
15 |       <vaadin-checkbox>Vaadin <i>Checkbox</i></vaadin-checkbox>
16 |     </template>
17 |   </test-fixture>
18 | 
19 |   <script>
20 |     describe('accessibility', function() {
21 |       describe('aria-checked attribute', () => {
22 | 
23 |         let vaadinCheckbox;
24 | 
25 |         beforeEach(() => {
26 |           vaadinCheckbox = fixture('default');
27 |         });
28 | 
29 |         it('should set aria-checked to "false" when indereminate is first set to false, then checked is set to false', () => {
30 |           vaadinCheckbox.checked = false;
31 |           expect(vaadinCheckbox.getAttribute('aria-checked')).to.be.eql('false');
32 |         });
33 | 
34 |         it('should set aria-checked to "false" when checked is first set to false, then indereminate is set to false', () => {
35 |           vaadinCheckbox.checked = false;
36 |           expect(vaadinCheckbox.getAttribute('aria-checked')).to.be.eql('false');
37 |         });
38 | 
39 |         it('should set aria-checked to "true" when indereminate is first set to false, then checked is set to true', () => {
40 |           vaadinCheckbox.checked = true;
41 |           expect(vaadinCheckbox.getAttribute('aria-checked')).to.be.eql('true');
42 |         });
43 | 
44 |         it('should set aria-checked to "true" when checked is first set to true, then indereminate is set to false', () => {
45 |           vaadinCheckbox.checked = true;
46 |           expect(vaadinCheckbox.getAttribute('aria-checked')).to.be.eql('true');
47 |         });
48 | 
49 |         it('should set aria-checked to "mixed" when indereminate is first set to true, then checked is set to false', () => {
50 |           vaadinCheckbox.indeterminate = true;
51 |           vaadinCheckbox.checked = false;
52 |           expect(vaadinCheckbox.getAttribute('aria-checked')).to.be.eql('mixed');
53 |         });
54 | 
55 |         it('should set aria-checked to "mixed" when checked is first set to false, then indereminate is set to true', () => {
56 |           vaadinCheckbox.checked = false;
57 |           vaadinCheckbox.indeterminate = true;
58 |           expect(vaadinCheckbox.getAttribute('aria-checked')).to.be.eql('mixed');
59 |         });
60 | 
61 |         it('should set aria-checked to "mixed" when indereminate is first set to true, then checked is set to true', () => {
62 |           vaadinCheckbox.indeterminate = true;
63 |           vaadinCheckbox.checked = true;
64 |           expect(vaadinCheckbox.getAttribute('aria-checked')).to.be.eql('mixed');
65 |         });
66 | 
67 |         it('should set aria-checked to "mixed" when checked is first set to true, then indeterminate is set to true', () => {
68 |           vaadinCheckbox.checked = true;
69 |           vaadinCheckbox.indeterminate = true;
70 |           expect(vaadinCheckbox.getAttribute('aria-checked')).to.be.eql('mixed');
71 |         });
72 | 
73 |         it('should set aria-checked to "false" when checked is set to null', () => {
74 |           vaadinCheckbox.checked = null;
75 |           expect(vaadinCheckbox.getAttribute('aria-checked')).to.eql('false');
76 |         });
77 |       });
78 | 
79 |     });
80 |   </script>
81 | </body>
82 | 


--------------------------------------------------------------------------------
/test/helpers.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | 
 3 | <head>
 4 |   <link rel="import" href="../../polymer/polymer.html">
 5 | </head>
 6 | <body>
 7 | <script>
 8 |   window.nextRender = (element) => {
 9 |     return new Promise(resolve => {
10 |       Polymer.RenderStatus.afterNextRender(element, resolve);
11 |     });
12 |   };
13 | </script>
14 | </body>


--------------------------------------------------------------------------------
/test/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | 
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
 6 |   <title>vaadin-checkbox tests</title>
 7 |   <script src="../../web-component-tester/browser.js"></script>
 8 |   <script src="test-suites.js"></script>
 9 | </head>
10 | 
11 | <body>
12 |   <script>
13 |     WCT.loadSuites(
14 |       window.VaadinCheckboxSuites
15 |         .reduce(function(suites, suite) {
16 |           return suites.concat([suite, `${suite}?wc-shadydom=true`]);
17 |         }, [])
18 |     );
19 |   </script>
20 | </body>
21 | 


--------------------------------------------------------------------------------
/test/test-suites.js:
--------------------------------------------------------------------------------
1 | window.VaadinCheckboxSuites = [
2 |   'vaadin-checkbox_test.html',
3 |   'vaadin-checkbox-group_test.html',
4 |   'accessibility.html',
5 |   'validation.html'
6 | ];
7 | 


--------------------------------------------------------------------------------
/test/vaadin-checkbox-group_test.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | 
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <title>vaadin-checkbox-group tests</title>
  6 |   <script src="../../web-component-tester/browser.js"></script>
  7 |   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
  8 |   <link rel="import" href="../../iron-test-helpers/mock-interactions.html">
  9 |   <link rel="import" href="../../iron-form/iron-form.html">
 10 |   <link rel="import" href="../../test-fixture/test-fixture.html">
 11 |   <link rel="import" href="../vaadin-checkbox.html">
 12 |   <link rel="import" href="../vaadin-checkbox-group.html">
 13 | </head>
 14 | 
 15 | <body>
 16 | <test-fixture id="default">
 17 |   <template>
 18 |     <vaadin-checkbox-group>
 19 |       <vaadin-checkbox value="1">Checkbox <b>1</b></vaadin-checkbox>
 20 |       <vaadin-checkbox value="2">Checkbox <b>2</b></vaadin-checkbox>
 21 |       <vaadin-checkbox value="3">Checkbox <b>3</b></vaadin-checkbox>
 22 |     </vaadin-checkbox-group>
 23 |   </template>
 24 | </test-fixture>
 25 | 
 26 | <test-fixture id="default-with-slotted-helper">
 27 |   <template>
 28 |     <vaadin-checkbox-group>
 29 |       <div slot="helper">foo</div>
 30 |     </vaadin-checkbox-group>
 31 |   </template>
 32 | </test-fixture>
 33 | 
 34 | <test-fixture id="ironForm">
 35 |   <template>
 36 |     <iron-form>
 37 |       <form>
 38 |         <vaadin-checkbox-group>
 39 |           <vaadin-checkbox name="language" value="en">English</vaadin-checkbox>
 40 |           <vaadin-checkbox name="language" value="fr">Français</vaadin-checkbox>
 41 |           <vaadin-checkbox name="language" value="de">Deutsch</vaadin-checkbox>
 42 |         </vaadin-checkbox-group>
 43 |       </form>
 44 |     </iron-form>
 45 |   </template>
 46 | </test-fixture>
 47 | 
 48 | <test-fixture id="bind">
 49 |   <template>
 50 |     <dom-bind>
 51 |       <template>
 52 |         <vaadin-checkbox-group id="group" value="{{value}}">
 53 |           <vaadin-checkbox value="a">Checkbox <b>a</b></vaadin-checkbox>
 54 |           <vaadin-checkbox value="b">Checkbox <b>b</b></vaadin-checkbox>
 55 |           <vaadin-checkbox value="c">Checkbox <b>c</b></vaadin-checkbox>
 56 |         </vaadin-checkbox-group>
 57 |       </template>
 58 |     </template>
 59 |   </dom-bind>
 60 | </test-fixture>
 61 | 
 62 | <test-fixture id="wrapping">
 63 |   <template>
 64 |     <vaadin-checkbox-group>
 65 |       <vaadin-checkbox value="c_1">Checkbox 1</vaadin-checkbox>
 66 |       <vaadin-checkbox value="c_2">Checkbox 2</vaadin-checkbox>
 67 |       <vaadin-checkbox value="c_3">Checkbox 3</vaadin-checkbox>
 68 |       <vaadin-checkbox value="c_4">Checkbox 4</vaadin-checkbox>
 69 |       <vaadin-checkbox value="c_5">Checkbox 5</vaadin-checkbox>
 70 |       <vaadin-checkbox value="c_6">Checkbox 6</vaadin-checkbox>
 71 |       <vaadin-checkbox value="c_7">Checkbox 7</vaadin-checkbox>
 72 |       <vaadin-checkbox value="c_8">Checkbox 8</vaadin-checkbox>
 73 |       <vaadin-checkbox value="c_9">Checkbox 9</vaadin-checkbox>
 74 |       <vaadin-checkbox value="c_10">Checkbox 10</vaadin-checkbox>
 75 |       <vaadin-checkbox value="c_11">Checkbox 11</vaadin-checkbox>
 76 |       <vaadin-checkbox value="c_12">Checkbox 12</vaadin-checkbox>
 77 |     </vaadin-checkbox-group>
 78 |   </template>
 79 | </test-fixture>
 80 | 
 81 | <script>
 82 |   describe('vaadin-checkbox-group', () => {
 83 | 
 84 |     let vaadinCheckboxGroup, vaadinCheckboxList;
 85 | 
 86 |     beforeEach(() => {
 87 |       vaadinCheckboxGroup = fixture('default');
 88 |       vaadinCheckboxList = vaadinCheckboxGroup.querySelectorAll('vaadin-checkbox');
 89 |       vaadinCheckboxGroup._observer.flush();
 90 |     });
 91 | 
 92 |     it('does not set a role', () => {
 93 |       expect(vaadinCheckboxGroup.getAttribute('role')).to.eq(null);
 94 |     });
 95 | 
 96 |     it('changes aria-disabled on disabled change', () => {
 97 |       vaadinCheckboxGroup.disabled = true;
 98 |       expect(vaadinCheckboxGroup.getAttribute('aria-disabled')).to.eq('true');
 99 |     });
100 | 
101 |     it('can be disabled imperatively', () => {
102 |       vaadinCheckboxGroup.disabled = true;
103 |       expect(vaadinCheckboxGroup.hasAttribute('disabled')).to.be.true;
104 |       expect(vaadinCheckboxList[0].hasAttribute('disabled')).to.be.true;
105 |     });
106 | 
107 |     it('should set disabled property to dynamically added checkboxes', () => {
108 |       vaadinCheckboxGroup.disabled = true;
109 |       const checkbox = document.createElement('vaadin-checkbox');
110 |       vaadinCheckboxGroup.appendChild(checkbox);
111 |       vaadinCheckboxGroup._observer.flush();
112 |       expect(checkbox.disabled).to.be.true;
113 |     });
114 | 
115 |     it('should add dynamically added checked checkbox value to checkbox group value', () => {
116 |       const checkbox = document.createElement('vaadin-checkbox');
117 |       checkbox.value = 'new';
118 |       checkbox.checked = true;
119 |       vaadinCheckboxGroup.appendChild(checkbox);
120 |       vaadinCheckboxGroup._observer.flush();
121 |       expect(vaadinCheckboxGroup.value).to.include('new');
122 |     });
123 | 
124 |     it('should not add duplicate values when added checked checkbox already included in value', () => {
125 |       const checkbox = document.createElement('vaadin-checkbox');
126 |       checkbox.value = 'new';
127 |       checkbox.checked = true;
128 |       vaadinCheckboxGroup.value = ['new'];
129 |       vaadinCheckboxGroup.appendChild(checkbox);
130 |       vaadinCheckboxGroup._observer.flush();
131 |       expect(vaadinCheckboxGroup.value).to.eql(['new']);
132 |     });
133 | 
134 |     it('should check dynamically added checkbox if included in value', () => {
135 |       const checkbox = document.createElement('vaadin-checkbox');
136 |       checkbox.value = 'new';
137 |       vaadinCheckboxGroup.value = ['new'];
138 |       vaadinCheckboxGroup.appendChild(checkbox);
139 |       vaadinCheckboxGroup._observer.flush();
140 |       expect(vaadinCheckboxGroup.value).to.eql(['new']);
141 |       expect(checkbox.checked).to.be.true;
142 |     });
143 | 
144 |     it('should remove checked checkbox value from checkbox group value, when checkbox is dynamically removed', () => {
145 |       const checkbox = vaadinCheckboxList[0];
146 |       checkbox.checked = true;
147 |       vaadinCheckboxGroup.removeChild(checkbox);
148 |       vaadinCheckboxGroup._observer.flush();
149 |       expect(vaadinCheckboxGroup.value).to.not.include('1');
150 |     });
151 | 
152 |     it('should create new array instance for checkbox group value when checkbox dynamically added', () => {
153 |       const value = vaadinCheckboxGroup.value;
154 |       const checkbox = document.createElement('vaadin-checkbox');
155 |       checkbox.value = 'new';
156 |       checkbox.checked = true;
157 |       vaadinCheckboxGroup.appendChild(checkbox);
158 |       vaadinCheckboxGroup._observer.flush();
159 |       expect(vaadinCheckboxGroup.value).to.not.equal(value);
160 |     });
161 | 
162 |     it('should create new array instance for checkbox group value when checkbox dynamically removed', () => {
163 |       const value = vaadinCheckboxGroup.value;
164 |       const checkbox = vaadinCheckboxList[0];
165 |       checkbox.checked = true;
166 |       vaadinCheckboxGroup.removeChild(checkbox);
167 |       vaadinCheckboxGroup._observer.flush();
168 |       expect(vaadinCheckboxGroup.value).to.not.equal(value);
169 |     });
170 | 
171 |     it('should not change checkbox group value if a removed checkbox is checked', () => {
172 |       const checkbox = vaadinCheckboxList[0];
173 |       vaadinCheckboxGroup.removeChild(checkbox);
174 |       vaadinCheckboxGroup._observer.flush();
175 |       checkbox.checked = true;
176 |       expect(vaadinCheckboxGroup.value).to.not.include('1');
177 |     });
178 | 
179 |     it('should set proper value to checkbox-group when a checkbox is checked', () => {
180 |       vaadinCheckboxList[0].checked = true;
181 |       expect(vaadinCheckboxGroup.value).to.deep.equal(['1']);
182 |       vaadinCheckboxList[1].checked = true;
183 |       expect(vaadinCheckboxGroup.value).to.deep.equal(['1', '2']);
184 |     });
185 | 
186 |     it('should set proper value to checkbox-group when a checkbox is unchecked', () => {
187 |       vaadinCheckboxList[0].checked = true;
188 |       vaadinCheckboxList[1].checked = true;
189 |       expect(vaadinCheckboxGroup.value).to.deep.equal(['1', '2']);
190 |       vaadinCheckboxList[1].checked = false;
191 |       expect(vaadinCheckboxGroup.value).to.deep.equal(['1']);
192 |     });
193 | 
194 |     it('should check proper checkbox when value is set', () => {
195 |       vaadinCheckboxGroup.value = ['2'];
196 |       expect(vaadinCheckboxList[1].checked).to.be.true;
197 |       vaadinCheckboxGroup.value = ['1', '3'];
198 |       expect(vaadinCheckboxList[0].checked).to.be.true;
199 |       expect(vaadinCheckboxList[2].checked).to.be.true;
200 |     });
201 | 
202 |     it('should uncheck proper checkbox when value is removed', () => {
203 |       vaadinCheckboxGroup.value = ['1', '3'];
204 |       expect(vaadinCheckboxList[0].checked).to.be.true;
205 |       expect(vaadinCheckboxList[2].checked).to.be.true;
206 |       vaadinCheckboxGroup.value = ['1'];
207 |       expect(vaadinCheckboxList[0].checked).to.be.true;
208 |       expect(vaadinCheckboxList[2].checked).to.be.false;
209 |     });
210 | 
211 |     it('should set focused attribute on focusin event dispatched', () => {
212 |       vaadinCheckboxList[0].dispatchEvent(new CustomEvent('focusin', {composed: true, bubbles: true}));
213 |       expect(vaadinCheckboxGroup.hasAttribute('focused')).to.be.true;
214 |     });
215 | 
216 |     it('should not set focused attribute on focusin event dispatched when disabled', () => {
217 |       vaadinCheckboxGroup.disabled = true;
218 |       vaadinCheckboxList[0].dispatchEvent(new CustomEvent('focusin', {composed: true, bubbles: true}));
219 |       expect(vaadinCheckboxGroup.hasAttribute('focused')).to.be.false;
220 |     });
221 | 
222 |     it('should remove focused attribute on checkbox focusout', () => {
223 |       vaadinCheckboxList[0].dispatchEvent(new CustomEvent('focusin', {composed: true, bubbles: true}));
224 |       vaadinCheckboxList[0].dispatchEvent(new CustomEvent('focusout', {composed: true, bubbles: true}));
225 |       expect(vaadinCheckboxGroup.hasAttribute('focused')).to.be.false;
226 |     });
227 | 
228 |     it('should remove focused attribute on checkbox-group focusout', () => {
229 |       vaadinCheckboxList[0].dispatchEvent(new CustomEvent('focusin', {composed: true, bubbles: true}));
230 |       vaadinCheckboxGroup.dispatchEvent(new CustomEvent('focusout', {composed: true, bubbles: true}));
231 |       expect(vaadinCheckboxGroup.hasAttribute('focused')).to.be.false;
232 |     });
233 | 
234 |     it('should NOT steal focus from currently focused element', () => {
235 |       const focusInput = document.createElement('input');
236 |       document.body.appendChild(focusInput);
237 |       focusInput.focus();
238 |       vaadinCheckboxGroup.value = '2';
239 |       expect(document.activeElement).to.be.equal(focusInput);
240 |       document.body.removeChild(focusInput);
241 |     });
242 | 
243 |     it('should update has-label attribute when setting label', () => {
244 |       expect(vaadinCheckboxGroup.hasAttribute('has-label')).to.be.false;
245 | 
246 |       vaadinCheckboxGroup.label = 'foo';
247 | 
248 |       expect(vaadinCheckboxGroup.hasAttribute('has-label')).to.be.true;
249 |       expect(vaadinCheckboxGroup.label).to.be.equal('foo');
250 |     });
251 | 
252 |     it('should not have has-value attribute by default', () => {
253 |       expect(vaadinCheckboxGroup.hasAttribute('has-value')).to.be.false;
254 |     });
255 | 
256 |     it('should toggle has-value attribute on value change', () => {
257 |       vaadinCheckboxGroup.value = ['2'];
258 |       expect(vaadinCheckboxGroup.hasAttribute('has-value')).to.be.true;
259 | 
260 |       vaadinCheckboxGroup.value = [];
261 |       expect(vaadinCheckboxGroup.hasAttribute('has-value')).to.be.false;
262 |     });
263 | 
264 |     it('should add label to checkbox group when a label is dynamically set', () => {
265 |       vaadinCheckboxGroup.label = 'foo';
266 | 
267 |       expect(vaadinCheckboxGroup.shadowRoot.querySelector('label').innerText).to.be.equal('foo');
268 |     });
269 | 
270 |     it('should be possible to uncheck the checkbox on reattaching of the group', () => {
271 |       const container = vaadinCheckboxGroup.parentElement;
272 | 
273 |       container.removeChild(vaadinCheckboxGroup);
274 |       container.appendChild(vaadinCheckboxGroup);
275 | 
276 |       vaadinCheckboxGroup._observer.flush();
277 |       vaadinCheckboxList[0].checked = true;
278 |       vaadinCheckboxList[0].checked = false;
279 | 
280 |       expect(vaadinCheckboxList[0].checked).to.be.false;
281 |     });
282 | 
283 |     it('should not fire change event on programmatic value change', () => {
284 |       const spy = sinon.spy();
285 |       vaadinCheckboxGroup.addEventListener('change', spy);
286 | 
287 |       vaadinCheckboxGroup.value = ['2'];
288 | 
289 |       expect(spy).to.not.be.called;
290 |     });
291 | 
292 |     it('should warn when adding checkbox without value', () => {
293 |       sinon.stub(console, 'warn');
294 | 
295 |       const checkbox = document.createElement('vaadin-checkbox');
296 |       vaadinCheckboxGroup.appendChild(checkbox);
297 |       vaadinCheckboxGroup._observer.flush();
298 |       expect(console.warn.callCount).to.equal(1);
299 |       console.warn.restore();
300 |     });
301 | 
302 |     it('should not warn when adding checkbox with value attribute', () => {
303 |       sinon.stub(console, 'warn');
304 | 
305 |       const checkbox = document.createElement('vaadin-checkbox');
306 |       checkbox.setAttribute('value', 'something');
307 |       vaadinCheckboxGroup.appendChild(checkbox);
308 |       vaadinCheckboxGroup._observer.flush();
309 |       expect(console.warn.callCount).to.equal(0);
310 |       console.warn.restore();
311 |     });
312 | 
313 |     it('should not warn when adding checkbox with value property', () => {
314 |       sinon.stub(console, 'warn');
315 | 
316 |       const checkbox = document.createElement('vaadin-checkbox');
317 |       checkbox.value = 'something';
318 |       vaadinCheckboxGroup.appendChild(checkbox);
319 |       vaadinCheckboxGroup._observer.flush();
320 |       expect(console.warn.callCount).to.equal(0);
321 |       console.warn.restore();
322 |     });
323 | 
324 |     it('setting errorMessage updates has-error-message attribute', function() {
325 |       vaadinCheckboxGroup.errorMessage = 'foo';
326 |       expect(vaadinCheckboxGroup.hasAttribute('has-error-message')).to.be.true;
327 |     });
328 | 
329 |     it('setting errorMessage to empty string does not update has-error-message attribute', function() {
330 |       vaadinCheckboxGroup.errorMessage = '';
331 |       expect(vaadinCheckboxGroup.hasAttribute('has-error-message')).to.be.false;
332 |     });
333 | 
334 |     it('setting errorMessage to null does not update has-error-message attribute', function() {
335 |       vaadinCheckboxGroup.errorMessage = null;
336 |       expect(vaadinCheckboxGroup.hasAttribute('has-error-message')).to.be.false;
337 |     });
338 | 
339 |     describe('vaadin-radio-group helper text', () => {
340 |       it('setting helper updates has-helper attribute', function() {
341 |         vaadinCheckboxGroup.helperText = 'foo';
342 |         expect(vaadinCheckboxGroup.hasAttribute('has-helper')).to.be.true;
343 |       });
344 | 
345 |       it('setting helper to empty string does not update has-helper attribute', function() {
346 |         vaadinCheckboxGroup.helperText = '';
347 |         expect(vaadinCheckboxGroup.hasAttribute('has-helper')).to.be.false;
348 |       });
349 | 
350 |       it('setting helper to null does not update has-helper attribute', function() {
351 |         vaadinCheckboxGroup.helperText = null;
352 |         expect(vaadinCheckboxGroup.hasAttribute('has-helper')).to.be.false;
353 |       });
354 | 
355 |       it('field with slotted helper updates has-helper attribute', function() {
356 |         const checkboxGroupWithSlottedHelper = fixture('default-with-slotted-helper');
357 |         checkboxGroupWithSlottedHelper._observer.flush();
358 |         expect(checkboxGroupWithSlottedHelper.hasAttribute('has-helper')).to.be.true;
359 |       });
360 | 
361 |       it('setting helper with slot updates has-helper attribute', function() {
362 |         const helper = document.createElement('div');
363 |         helper.setAttribute('slot', 'helper');
364 |         helper.textContent = 'foo';
365 |         vaadinCheckboxGroup.appendChild(helper);
366 |         vaadinCheckboxGroup._observer.flush();
367 | 
368 |         expect(vaadinCheckboxGroup.hasAttribute('has-helper')).to.be.true;
369 |       });
370 | 
371 |       it('removing slotted helper removes has-helper attribute', function() {
372 |         const radioButtonGroupWithSlottedHelper = fixture('default-with-slotted-helper');
373 | 
374 |         const helper = radioButtonGroupWithSlottedHelper.querySelector('[slot="helper"]');
375 |         radioButtonGroupWithSlottedHelper.removeChild(helper);
376 |         radioButtonGroupWithSlottedHelper._observer.flush();
377 | 
378 |         expect(radioButtonGroupWithSlottedHelper.hasAttribute('has-helper')).to.be.false;
379 |       });
380 | 
381 |       it('should not get focus after helper click', () => {
382 |         const group = fixture('default-with-slotted-helper');
383 |         const spy = sinon.spy(group, 'focus');
384 |         const helper = group.querySelector('[slot="helper"]');
385 | 
386 |         helper.click();
387 | 
388 |         expect(spy.called).to.be.false;
389 |       });
390 |     });
391 |   });
392 | 
393 |   describe('vaadin-checkbox-group validation', () => {
394 | 
395 |     function blur(target, relatedTarget) {
396 |       const event = new CustomEvent('focusout', {bubbles: true, composed: true});
397 |       event.relatedTarget = relatedTarget;
398 |       target.dispatchEvent(event);
399 |     }
400 | 
401 |     let vaadinCheckboxGroup, vaadinCheckboxList, ironForm;
402 | 
403 |     beforeEach(() => {
404 |       ironForm = fixture('ironForm');
405 |       vaadinCheckboxGroup = ironForm.querySelector('vaadin-checkbox-group');
406 |       vaadinCheckboxList = vaadinCheckboxGroup.querySelectorAll('vaadin-checkbox');
407 |       vaadinCheckboxGroup._observer.flush();
408 |     });
409 | 
410 |     it('should not have invalid attribute initially', () => {
411 |       expect(vaadinCheckboxGroup.hasAttribute('invalid')).to.be.false;
412 |     });
413 | 
414 |     it('should not add invalid attribute if required attribute is not present', () => {
415 |       vaadinCheckboxList[0].checked = true;
416 |       vaadinCheckboxList[0].checked = false;
417 | 
418 |       expect(vaadinCheckboxGroup.hasAttribute('invalid')).to.be.false;
419 |     });
420 | 
421 |     it('should add invalid attribute if required attribute is present and checkbox group value is empty', () => {
422 |       vaadinCheckboxGroup.required = true;
423 |       vaadinCheckboxList[0].checked = true;
424 |       vaadinCheckboxList[0].checked = false;
425 | 
426 |       expect(vaadinCheckboxGroup.hasAttribute('invalid')).to.be.true;
427 |     });
428 | 
429 |     it('should remove invalid attribute if checkbox group value is not empty', () => {
430 |       vaadinCheckboxGroup.required = true;
431 |       vaadinCheckboxList[0].checked = true;
432 |       vaadinCheckboxList[0].checked = false;
433 | 
434 |       expect(vaadinCheckboxGroup.hasAttribute('invalid')).to.be.true;
435 | 
436 |       vaadinCheckboxList[0].checked = true;
437 | 
438 |       expect(vaadinCheckboxGroup.hasAttribute('invalid')).to.be.false;
439 | 
440 |     });
441 | 
442 |     it('should pass validation and set invalid when field is required and user blurs out of the group', () => {
443 |       vaadinCheckboxGroup.required = true;
444 |       blur(vaadinCheckboxGroup, document.body);
445 | 
446 |       expect(vaadinCheckboxGroup.invalid).to.be.true;
447 |     });
448 | 
449 |     it('should not run validation while user is tabbing between checkboxes inside of the group', () => {
450 |       vaadinCheckboxGroup.required = true;
451 |       const spy = sinon.spy(vaadinCheckboxGroup, 'validate');
452 |       blur(vaadinCheckboxGroup, vaadinCheckboxList[1]);
453 | 
454 |       expect(spy).to.be.not.called;
455 |     });
456 | 
457 |     it('should not run validation while user is tabbing between checkboxes and focus moves to native checkbox', () => {
458 |       vaadinCheckboxGroup.required = true;
459 |       const spy = sinon.spy(vaadinCheckboxGroup, 'validate');
460 |       blur(vaadinCheckboxGroup, vaadinCheckboxList[1].focusElement);
461 | 
462 |       expect(spy).to.be.not.called;
463 |     });
464 | 
465 |     it('should prevent submitting form when value of required checkbox group is empty', () => {
466 |       vaadinCheckboxGroup.required = true;
467 | 
468 |       expect(ironForm.validate()).to.be.false;
469 | 
470 |     });
471 | 
472 |     it('should not prevent submitting form when checkbox group value is not empty or does not have required attribute', () => {
473 |       expect(ironForm.validate()).to.be.true;
474 | 
475 |       vaadinCheckboxGroup.required = true;
476 |       vaadinCheckboxGroup.value = ['en'];
477 | 
478 |       expect(ironForm.validate()).to.be.true;
479 | 
480 |     });
481 | 
482 |     it('should not show the error message initially', () => {
483 |       vaadinCheckboxGroup.errorMessage = 'Error message';
484 | 
485 |       expect(vaadinCheckboxGroup.shadowRoot.querySelector('[part="error-message"]').getAttribute('aria-hidden')).to.be.equal('true');
486 |     });
487 | 
488 |     it('should show the error message if validation status is invalid', () => {
489 |       vaadinCheckboxGroup.errorMessage = 'Error message';
490 |       vaadinCheckboxGroup.invalid = true;
491 | 
492 |       expect(vaadinCheckboxGroup.shadowRoot.querySelector('[part="error-message"]').getAttribute('aria-hidden')).to.be.equal('false');
493 |     });
494 | 
495 |   });
496 | 
497 |   describe('vaadin-checkbox-group value array mutation methods', () => {
498 | 
499 |     let bind, vaadinCheckboxGroup, vaadinCheckboxList;
500 | 
501 |     beforeEach(() => {
502 |       bind = fixture('bind');
503 |       vaadinCheckboxGroup = bind.$.group;
504 |       vaadinCheckboxList = vaadinCheckboxGroup.querySelectorAll('vaadin-checkbox');
505 |       vaadinCheckboxGroup._observer.flush();
506 |     });
507 | 
508 |     it('should notify the value changes from inside', () => {
509 |       expect(bind.value).to.be.array;
510 |       expect(bind.value.length).to.equal(0);
511 | 
512 |       vaadinCheckboxList[0].checked = true;
513 | 
514 |       expect(bind.value.length).to.equal(1);
515 |       expect(bind.value[0]).to.equal('a');
516 |     });
517 | 
518 |     it('should update checkboxes when a checkbox value is updated using push', () => {
519 |       bind.push('value', 'a');
520 |       expect(vaadinCheckboxList[0].checked).to.be.true;
521 |     });
522 | 
523 |     it('should update checkboxes when a checkbox value is updated using pop', () => {
524 |       bind.value = ['a', 'b'];
525 |       bind.pop('value');
526 |       expect(vaadinCheckboxList[0].checked).to.be.true;
527 |       expect(vaadinCheckboxList[1].checked).to.be.false;
528 |     });
529 | 
530 |     it('should update checkboxes when a checkbox value is updated using push', () => {
531 |       bind.value = ['b'];
532 |       bind.unshift('value', 'a');
533 |       expect(vaadinCheckboxList[1].checked).to.be.true;
534 |       expect(vaadinCheckboxList[0].checked).to.be.true;
535 |     });
536 | 
537 |     it('should update checkboxes when a checkbox value is updated using unshift', () => {
538 |       bind.value = ['a', 'b'];
539 |       bind.shift('value');
540 |       expect(vaadinCheckboxList[0].checked).to.be.false;
541 |       expect(vaadinCheckboxList[1].checked).to.be.true;
542 |     });
543 | 
544 |     it('should update checkboxes when a checkbox value is updated using splice', () => {
545 |       bind.value = ['a', 'b'];
546 |       bind.splice('value', 1, 1, 'c');
547 |       expect(vaadinCheckboxList[0].checked).to.be.true;
548 |       expect(vaadinCheckboxList[1].checked).to.be.false;
549 |       expect(vaadinCheckboxList[2].checked).to.be.true;
550 |     });
551 |   });
552 | 
553 |   describe('vaadin-checkbox-group wrapping', () => {
554 |     let vaadinCheckboxGroup;
555 | 
556 |     beforeEach((done) => {
557 |       vaadinCheckboxGroup = fixture('wrapping');
558 |       vaadinCheckboxGroup._observer.flush();
559 |       animationFrameFlush(done);
560 |     });
561 | 
562 |     it('should not overflow horizontally', () => {
563 |       const parentWidth = vaadinCheckboxGroup.parentElement.offsetWidth;
564 | 
565 |       expect(vaadinCheckboxGroup.offsetWidth).to.be.lte(parentWidth);
566 |       expect(
567 |         vaadinCheckboxGroup
568 |           .shadowRoot
569 |           .querySelector('[part~="group-field"]')
570 |           .offsetWidth
571 |       ).to.be.lte(parentWidth);
572 |     });
573 | 
574 |     it('should wrap checkboxes', () => {
575 |       const checkboxes = Array.from(vaadinCheckboxGroup.children);
576 |       const {top: firstTop, left: firstLeft} =
577 |         checkboxes[0].getBoundingClientRect();
578 | 
579 |       const wrappedCheckboxes = Array.from(checkboxes)
580 |         .slice(1)
581 |         .filter(checkbox => checkbox.getBoundingClientRect().top > firstTop);
582 | 
583 |       expect(wrappedCheckboxes).not.be.empty;
584 |       expect(wrappedCheckboxes[0].getBoundingClientRect().left)
585 |         .to.equal(firstLeft);
586 |     });
587 |   });
588 | </script>
589 | </body>
590 | 


--------------------------------------------------------------------------------
/test/vaadin-checkbox_test.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | 
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <title>vaadin-checkbox tests</title>
  6 |   <script src="../../web-component-tester/browser.js"></script>
  7 |   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
  8 |   <link rel="import" href="../../iron-test-helpers/mock-interactions.html">
  9 |   <link rel="import" href="../../test-fixture/test-fixture.html">
 10 |   <link rel="import" href="../../polymer/lib/utils/flattened-nodes-observer.html">
 11 |   <link rel="import" href="../../iron-form/iron-form.html">
 12 |   <link rel="import" href="../vaadin-checkbox.html">
 13 | </head>
 14 | 
 15 | <body>
 16 |   <dom-module id="x-checkbox">
 17 |     <template>
 18 |       <iron-form id="form">
 19 |         <form>
 20 |           <vaadin-checkbox id="boundname" name="[[checkboxName]]"></vaadin-checkbox>
 21 |           <vaadin-checkbox id="attrname" name="attrcheckbox"></vaadin-checkbox>
 22 |         </form>
 23 |       </iron-form>
 24 |     </template>
 25 |     <script>
 26 |       window.addEventListener('WebComponentsReady', () => {
 27 |         class XCheckbox extends Polymer.Element {
 28 |           static get is() {
 29 |             return 'x-checkbox';
 30 |           }
 31 | 
 32 |           static get properties() {
 33 |             return {
 34 |               checkboxName: {
 35 |                 type: String,
 36 |                 value: 'boundcheckbox'
 37 |               }
 38 |             };
 39 |           }
 40 |         }
 41 |         customElements.define(XCheckbox.is, XCheckbox);
 42 |       });
 43 |     </script>
 44 |   </dom-module>
 45 | 
 46 |   <test-fixture id="default">
 47 |     <template>
 48 |       <vaadin-checkbox name="test-checkbox">Vaadin <i>Checkbox</i> with <a href="#">Terms &amp; Conditions</a></vaadin-checkbox>
 49 |     </template>
 50 |   </test-fixture>
 51 | 
 52 |   <test-fixture id="empty">
 53 |     <template>
 54 |       <vaadin-checkbox></vaadin-checkbox>
 55 |     </template>
 56 |   </test-fixture>
 57 | 
 58 |   <test-fixture id="iron-form-checkbox">
 59 |     <template>
 60 |       <x-checkbox></x-checkbox>
 61 |     </template>
 62 |   </test-fixture>
 63 | 
 64 |   <script>
 65 |     describe('vaadin-checkbox', () => {
 66 |       const down = node => {
 67 |         node.dispatchEvent(new CustomEvent('down'));
 68 |       };
 69 | 
 70 |       const up = node => {
 71 |         node.dispatchEvent(new CustomEvent('up'));
 72 |       };
 73 | 
 74 |       let vaadinCheckbox, nativeCheckbox, label;
 75 | 
 76 |       beforeEach(() => {
 77 |         vaadinCheckbox = fixture('default');
 78 |         nativeCheckbox = vaadinCheckbox._nativeCheckbox;
 79 |         label = vaadinCheckbox.shadowRoot.querySelector('[part="label"]');
 80 |       });
 81 | 
 82 |       it('should define checkbox label using light DOM', () => {
 83 |         const children = Polymer.FlattenedNodesObserver.getFlattenedNodes(label);
 84 |         expect(children[1].textContent).to.be.equal('Vaadin ');
 85 |         expect(children[2].outerHTML).to.be.equal('<i>Checkbox</i>');
 86 |       });
 87 | 
 88 |       it('should have input as focusElement', () => {
 89 |         expect(vaadinCheckbox.focusElement).to.be.eql(nativeCheckbox);
 90 |       });
 91 | 
 92 |       it('can be disabled imperatively', () => {
 93 |         vaadinCheckbox.disabled = true;
 94 |         expect(nativeCheckbox.hasAttribute('disabled')).to.be.eql(true);
 95 |       });
 96 | 
 97 |       it('has default value "on"', () => {
 98 |         expect(vaadinCheckbox.value).to.be.eql('on');
 99 |       });
100 | 
101 |       it('fires click event', function(done) {
102 |         vaadinCheckbox.addEventListener('click', () => {
103 |           done();
104 |         });
105 |         MockInteractions.downAndUp(vaadinCheckbox);
106 |       });
107 | 
108 |       it('should have proper name', () => {
109 |         expect(vaadinCheckbox.name).to.eq('');
110 |         vaadinCheckbox.checked = true;
111 |         expect(vaadinCheckbox.name).to.eq('test-checkbox');
112 |       });
113 | 
114 |       it('should have display: none when hidden', () => {
115 |         vaadinCheckbox.setAttribute('hidden', '');
116 |         expect(getComputedStyle(vaadinCheckbox).display).to.equal('none');
117 |       });
118 | 
119 |       it('should toggle on host click', () => {
120 |         vaadinCheckbox.click();
121 | 
122 |         expect(vaadinCheckbox.checked).to.be.true;
123 | 
124 |         vaadinCheckbox.click();
125 | 
126 |         expect(vaadinCheckbox.checked).to.be.false;
127 |       });
128 | 
129 |       it('should not toggle on link inside host click', () => {
130 |         const link = Polymer.dom(label).getEffectiveChildNodes()[4];
131 |         expect(link.outerHTML).to.be.equal('<a href="#">Terms &amp; Conditions</a>');
132 |         link.click();
133 |         expect(vaadinCheckbox.checked).to.be.false;
134 |       });
135 | 
136 |       it('should not toggle on click when disabled', () => {
137 |         vaadinCheckbox.disabled = true;
138 |         label.click();
139 |         expect(vaadinCheckbox.checked).to.be.false;
140 |       });
141 | 
142 |       it('should bind checked to the native checkbox and vice versa', () => {
143 |         vaadinCheckbox.checked = true;
144 |         expect(nativeCheckbox.checked).to.be.eql(true);
145 | 
146 |         nativeCheckbox.checked = false;
147 |         nativeCheckbox.dispatchEvent(new CustomEvent('change'));
148 |         expect(vaadinCheckbox.checked).to.be.eql(false);
149 |       });
150 | 
151 |       it('should bind indeterminate to the native checkbox and vice versa', () => {
152 |         vaadinCheckbox.indeterminate = true;
153 |         expect(nativeCheckbox.indeterminate).to.be.eql(true);
154 | 
155 |         nativeCheckbox.indeterminate = false;
156 |         nativeCheckbox.dispatchEvent(new CustomEvent('change'));
157 |         expect(vaadinCheckbox.indeterminate).to.be.eql(false);
158 |       });
159 | 
160 |       it('should set aria-checked to "true" when checked', () => {
161 |         vaadinCheckbox.checked = true;
162 |         expect(vaadinCheckbox.getAttribute('aria-checked')).to.be.eql('true');
163 |       });
164 | 
165 |       it('should set aria-checked to "false" when unchecked', () => {
166 |         vaadinCheckbox.checked = false;
167 |         expect(vaadinCheckbox.getAttribute('aria-checked')).to.be.eql('false');
168 |       });
169 | 
170 |       it('should set aria-checked to "mixed" when indeterminate', () => {
171 |         vaadinCheckbox.indeterminate = true;
172 |         expect(vaadinCheckbox.getAttribute('aria-checked')).to.be.eql('mixed');
173 |       });
174 | 
175 |       it('should set indeterminate to false when clicked the first time', () => {
176 |         vaadinCheckbox.indeterminate = true;
177 | 
178 |         vaadinCheckbox.click();
179 | 
180 |         expect(vaadinCheckbox.indeterminate).to.be.false;
181 |       });
182 | 
183 |       it('native checkbox should have the `presentation` role', () => {
184 |         expect(vaadinCheckbox.getAttribute('role')).to.be.eql('checkbox');
185 |       });
186 | 
187 |       it('host should have the `checkbox` role', () => {
188 |         expect(vaadinCheckbox.getAttribute('role')).to.be.eql('checkbox');
189 |       });
190 | 
191 |       it('should have active attribute on down', () => {
192 |         down(vaadinCheckbox);
193 | 
194 |         expect(vaadinCheckbox.hasAttribute('active')).to.be.true;
195 |       });
196 | 
197 |       it('should not have active attribute after up', () => {
198 |         down(vaadinCheckbox);
199 | 
200 |         up(vaadinCheckbox);
201 | 
202 |         expect(vaadinCheckbox.hasAttribute('active')).to.be.false;
203 |       });
204 | 
205 |       it('should have active attribute on space', () => {
206 |         MockInteractions.keyDownOn(vaadinCheckbox, 32);
207 | 
208 |         expect(vaadinCheckbox.hasAttribute('active')).to.be.true;
209 |       });
210 | 
211 |       it('should not have active attribute after space', () => {
212 |         MockInteractions.keyDownOn(vaadinCheckbox, 32);
213 | 
214 |         MockInteractions.keyUpOn(vaadinCheckbox, 32);
215 | 
216 |         expect(vaadinCheckbox.hasAttribute('active')).to.be.false;
217 |       });
218 | 
219 |       it('should be checked after space when initially checked is false and indeterminate is true', () => {
220 |         vaadinCheckbox.checked = false;
221 |         vaadinCheckbox.indeterminate = true;
222 | 
223 |         MockInteractions.keyDownOn(vaadinCheckbox, 32);
224 |         MockInteractions.keyUpOn(vaadinCheckbox, 32);
225 | 
226 |         expect(vaadinCheckbox.checked).to.be.true;
227 |         expect(vaadinCheckbox.indeterminate).to.be.false;
228 |         expect(vaadinCheckbox.getAttribute('aria-checked')).to.be.eql('true');
229 |       });
230 | 
231 |       it('should fire click event on space key press', () => {
232 |         const spy = sinon.spy();
233 |         vaadinCheckbox.addEventListener('click', spy);
234 | 
235 |         MockInteractions.keyDownOn(vaadinCheckbox, 32);
236 |         MockInteractions.keyUpOn(vaadinCheckbox, 32);
237 | 
238 |         expect(spy).to.be.calledOnce;
239 |       });
240 | 
241 |       it('should not be checked after space when initially checked is true and indeterminate is true', () => {
242 |         vaadinCheckbox.checked = true;
243 |         vaadinCheckbox.indeterminate = true;
244 | 
245 |         MockInteractions.keyDownOn(vaadinCheckbox, 32);
246 |         MockInteractions.keyUpOn(vaadinCheckbox, 32);
247 | 
248 |         expect(vaadinCheckbox.checked).to.be.false;
249 |         expect(vaadinCheckbox.indeterminate).to.be.false;
250 |         expect(vaadinCheckbox.getAttribute('aria-checked')).to.be.eql('false');
251 |       });
252 | 
253 |       it('should be checked after click when initially checked is false and indeterminate is true', () => {
254 |         vaadinCheckbox.checked = false;
255 |         vaadinCheckbox.indeterminate = true;
256 | 
257 |         vaadinCheckbox.click();
258 | 
259 |         expect(vaadinCheckbox.checked).to.be.true;
260 |         expect(vaadinCheckbox.indeterminate).to.be.false;
261 |         expect(vaadinCheckbox.getAttribute('aria-checked')).to.be.eql('true');
262 |       });
263 | 
264 |       it('should not be checked after click when initially checked is true and indeterminate is true', () => {
265 |         vaadinCheckbox.checked = true;
266 |         vaadinCheckbox.indeterminate = true;
267 | 
268 |         vaadinCheckbox.click();
269 | 
270 |         expect(vaadinCheckbox.checked).to.be.false;
271 |         expect(vaadinCheckbox.indeterminate).to.be.false;
272 |         expect(vaadinCheckbox.getAttribute('aria-checked')).to.be.eql('false');
273 |       });
274 | 
275 |       it('should set empty attribute on part label when the label was removed', () => {
276 |         while (vaadinCheckbox.firstChild) {
277 |           vaadinCheckbox.removeChild(vaadinCheckbox.firstChild);
278 |         }
279 | 
280 |         // Workaround for not using timeouts
281 |         const evt = new CustomEvent('slotchange');
282 |         vaadinCheckbox.shadowRoot.querySelector('[part="label"]').querySelector('slot').dispatchEvent(evt);
283 | 
284 |         expect(label.hasAttribute('empty')).to.be.true;
285 |       });
286 |     });
287 | 
288 |     describe('empty vaadin-checkbox label', () => {
289 |       let vaadinCheckbox, label;
290 | 
291 |       beforeEach(() => {
292 |         vaadinCheckbox = fixture('empty');
293 |         label = vaadinCheckbox.shadowRoot.querySelector('[part="label"]');
294 |       });
295 | 
296 |       it('should set empty attribute on part label when there is no label', () => {
297 |         expect(label.hasAttribute('empty')).to.be.true;
298 |       });
299 | 
300 |       it('should set empty attribute on part label when there is only one empty text node added', () => {
301 |         const textNode = document.createTextNode(' ');
302 |         vaadinCheckbox.appendChild(textNode);
303 | 
304 |         // Workaround for not using timeouts
305 |         const evt = new CustomEvent('slotchange');
306 |         vaadinCheckbox.shadowRoot.querySelector('[part="label"]').querySelector('slot').dispatchEvent(evt);
307 | 
308 |         expect(label.hasAttribute('empty')).to.be.true;
309 |       });
310 | 
311 |       it('should remove empty attribute from part label when the label is added', () => {
312 |         const paragraph = document.createElement('p');
313 |         paragraph.textContent = 'Added label';
314 | 
315 |         vaadinCheckbox.appendChild(paragraph);
316 | 
317 |         // Workaround for not using timeouts
318 |         const evt = new CustomEvent('slotchange');
319 |         vaadinCheckbox.shadowRoot.querySelector('[part="label"]').querySelector('slot').dispatchEvent(evt);
320 | 
321 |         expect(label.hasAttribute('empty')).to.be.false;
322 |       });
323 |     });
324 | 
325 |     describe('change-event', () => {
326 |       let vaadinCheckbox;
327 | 
328 |       beforeEach(() => vaadinCheckbox = fixture('default'));
329 | 
330 |       it('should not fire change-event when changing checked value programatically', () => {
331 |         vaadinCheckbox.addEventListener('change', () => {
332 |           throw new Error('Should not come here!');
333 |         });
334 |         vaadinCheckbox.checked = true;
335 |       });
336 | 
337 |       it('should fire change-event when user checks the element', done => {
338 |         vaadinCheckbox.addEventListener('change', () => done());
339 |         vaadinCheckbox.click();
340 |       });
341 | 
342 |       it('should fire change-event when user unchecks the element', done => {
343 |         vaadinCheckbox.checked = true;
344 |         vaadinCheckbox.addEventListener('change', () => done());
345 |         vaadinCheckbox.click();
346 |       });
347 | 
348 |       it('should bubble', () => {
349 |         const spy = sinon.spy();
350 |         vaadinCheckbox.addEventListener('change', spy);
351 | 
352 |         vaadinCheckbox.click();
353 | 
354 |         const event = spy.getCall(0).args[0];
355 |         expect(event).to.have.property('bubbles', true);
356 |       });
357 | 
358 |       it('should not be composed', () => {
359 |         const spy = sinon.spy();
360 |         vaadinCheckbox.addEventListener('change', spy);
361 | 
362 |         vaadinCheckbox.click();
363 | 
364 |         const event = spy.getCall(0).args[0];
365 |         expect(event).to.have.property('composed', false);
366 |       });
367 |     });
368 | 
369 |     describe('iron-form-checkbox', () => {
370 |       let boundNameCheckbox, attrNameCheckbox, form;
371 | 
372 |       beforeEach(() => {
373 |         const xCheckbox = fixture('iron-form-checkbox');
374 |         form = xCheckbox.$.form;
375 |         boundNameCheckbox = xCheckbox.$.boundname;
376 |         attrNameCheckbox = xCheckbox.$.attrname;
377 |       });
378 | 
379 |       it('should serialize', () => {
380 |         boundNameCheckbox.checked = true;
381 |         expect(boundNameCheckbox.name).to.equal('boundcheckbox');
382 |         expect(form.serializeForm().boundcheckbox).to.equal('on');
383 |       });
384 | 
385 |       it('should serialize with a custom value', () => {
386 |         boundNameCheckbox.checked = true;
387 |         boundNameCheckbox.value = 'foo';
388 |         expect(form.serializeForm().boundcheckbox).to.equal('foo');
389 |       });
390 | 
391 |       it('should not serialize when not checked', () => {
392 |         expect(boundNameCheckbox.name).to.be.empty;
393 |         expect(form.serializeForm()).to.be.empty;
394 |       });
395 | 
396 |       it('should not serialize without a name', () => {
397 |         boundNameCheckbox.checked = true;
398 |         boundNameCheckbox.name = '';
399 |         expect(form.serializeForm()).to.be.empty;
400 |       });
401 | 
402 |       it('should not serialize after unchecked', () => {
403 |         boundNameCheckbox.checked = true;
404 |         boundNameCheckbox.checked = false;
405 |         expect(form.serializeForm()).to.be.empty;
406 |       });
407 | 
408 |       it('should define the name from an attribute', () => {
409 |         attrNameCheckbox.checked = true;
410 |         expect(form.serializeForm().attrcheckbox).to.equal('on');
411 |       });
412 |     });
413 |   </script>
414 | </body>
415 | 


--------------------------------------------------------------------------------
/test/validation.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | 
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>vaadin-checkbox validation tests</title>
 6 |   <script src="../../web-component-tester/browser.js"></script>
 7 |   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
 8 |   <link rel="import" href="../../test-fixture/test-fixture.html">
 9 |   <link rel="import" href="../vaadin-checkbox.html">
10 |   <link rel="import" href="../vaadin-checkbox-group.html">
11 |   <link rel="import" href="helpers.html">
12 | </head>
13 | 
14 | <body>
15 |   <test-fixture id="checkbox-group">
16 |     <template>
17 |   	  <vaadin-checkbox-group>
18 |         <vaadin-checkbox value="1">Checkbox <b>1</b></vaadin-checkbox>
19 |         <vaadin-checkbox value="2">Checkbox <b>2</b></vaadin-checkbox>
20 |         <vaadin-checkbox value="3">Checkbox <b>3</b></vaadin-checkbox>
21 |       </vaadin-checkbox-group>
22 |     </template>
23 |   </test-fixture>
24 |   <script>
25 |   describe('basic', () => {
26 |     let group;
27 | 
28 |     beforeEach(() => {
29 |       group = fixture('checkbox-group');
30 |     });
31 | 
32 |     it('should fire a validated event on validation success', () => {
33 |       const validatedSpy = sinon.spy();
34 |       group.addEventListener('validated', validatedSpy);
35 |       group.validate();
36 | 
37 |       expect(validatedSpy.calledOnce).to.be.true;
38 |       const event = validatedSpy.firstCall.args[0];
39 |       expect(event.detail.valid).to.be.true;
40 |     });
41 | 
42 |     it('should fire a validated event on validation failure', () => {
43 |       const validatedSpy = sinon.spy();
44 |       group.addEventListener('validated', validatedSpy);
45 |       group.required = true;
46 |       group.validate();
47 |   
48 |       expect(validatedSpy.calledOnce).to.be.true;
49 |       const event = validatedSpy.firstCall.args[0];
50 |       expect(event.detail.valid).to.be.false;
51 |     });
52 |   });
53 |   describe('invalid cannot be set to false', () => {
54 |     let group;
55 |   
56 |     beforeEach(async() => {
57 |       group = fixture('checkbox-group');
58 |       group._shouldSetInvalid = (invalid) => invalid;
59 |       await nextRender();
60 |     });
61 |   
62 |     it('should set invalid only when it is true', async() => {
63 |       group.required = true;
64 |       group.validate();
65 |       expect(group.invalid).to.be.true;
66 |       group.value = '2';
67 |       group.validate();
68 |       expect(group.invalid).to.be.true;
69 |     });
70 |   });
71 |   </script>
72 | </body>


--------------------------------------------------------------------------------
/test/visual/default-rtl.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <head lang="en">
 4 |   <meta charset="UTF-8">
 5 | 
 6 |   <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
 7 |   <script src="../../../iron-test-helpers/mock-interactions.js"></script>
 8 |   <script>
 9 |     const theme = window.location.search.replace(/.*theme=(\w+).*/, '$1') || 'lumo';
10 |     document.write(`<link rel="import" href="../../theme/${theme}/vaadin-checkbox.html">`);
11 |     document.write(`<link rel="import" href="../../theme/${theme}/vaadin-checkbox-group.html">`);
12 |     document.documentElement.setAttribute('dir', 'rtl');
13 |   </script>
14 | </head>
15 | 
16 | <body>
17 | 
18 |   <div id="default-tests" style="display: inline-block; padding: 10px;">
19 |     Are you drunk?
20 | 
21 |     <vaadin-checkbox>
22 |       Yes
23 |     </vaadin-checkbox>
24 | 
25 |     <vaadin-checkbox disabled>
26 |       No
27 |     </vaadin-checkbox>
28 | 
29 |     <vaadin-checkbox indeterminate>
30 |       Maybe
31 |     </vaadin-checkbox>
32 | 
33 |     <vaadin-checkbox></vaadin-checkbox>
34 |     <vaadin-checkbox></vaadin-checkbox>
35 |     Empty labels
36 |   </div>
37 | 
38 |   <div id="validation-tests">
39 |     <vaadin-checkbox-group required error-message="Please choose a number" label="Choose a number" id="validation-checkbox-group">
40 |       <vaadin-checkbox value="1">1</vaadin-checkbox>
41 |       <vaadin-checkbox value="2">2</vaadin-checkbox>
42 |     </vaadin-checkbox-group>
43 |   </div>
44 | 
45 |   <div id="wrapping-group-tests" style="width: 300px;">
46 |     <vaadin-checkbox-group label="Choose a number">
47 |       <vaadin-checkbox value="1">Checkbox 1</vaadin-checkbox>
48 |       <vaadin-checkbox value="2">Checkbox 2</vaadin-checkbox>
49 |       <vaadin-checkbox value="3">Checkbox 3</vaadin-checkbox>
50 |       <vaadin-checkbox value="4">Checkbox 4</vaadin-checkbox>
51 |       <vaadin-checkbox value="5">Checkbox 5</vaadin-checkbox>
52 |       <vaadin-checkbox value="6">Checkbox 6</vaadin-checkbox>
53 |       <vaadin-checkbox value="7">Checkbox 7</vaadin-checkbox>
54 |       <vaadin-checkbox value="8">Checkbox 8</vaadin-checkbox>
55 |       <vaadin-checkbox value="9">Checkbox 9</vaadin-checkbox>
56 |       <vaadin-checkbox value="10">Checkbox 10</vaadin-checkbox>
57 |     </vaadin-checkbox-group>
58 |   </div>
59 | 
60 |   <script>
61 |     window.addEventListener('WebComponentsReady', () => {
62 |       const checkboxGroup = document.getElementById('validation-checkbox-group');
63 |       checkboxGroup.validate();
64 | 
65 |       MockInteractions.keyDownOn(document.body, 9);
66 |     });
67 |   </script>
68 | 
69 | </body>
70 | 


--------------------------------------------------------------------------------
/test/visual/default.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | 
  3 | <head lang="en">
  4 |   <meta charset="UTF-8">
  5 | 
  6 |   <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
  7 |   <script src="../../../iron-test-helpers/mock-interactions.js"></script>
  8 |   <script>
  9 |     const theme = window.location.search.replace(/.*theme=(\w+).*/, '$1') || 'lumo';
 10 |     document.write(`<link rel="import" href="../../theme/${theme}/vaadin-checkbox.html">`);
 11 |     document.write(`<link rel="import" href="../../theme/${theme}/vaadin-checkbox-group.html">`);
 12 |   </script>
 13 | </head>
 14 | 
 15 | <body>
 16 | 
 17 |   <div id="default-tests" style="display: inline-block; padding: 10px;">
 18 |     Are you drunk?
 19 | 
 20 |     <vaadin-checkbox>
 21 |       Yes
 22 |     </vaadin-checkbox>
 23 | 
 24 |     <vaadin-checkbox disabled>
 25 |       No
 26 |     </vaadin-checkbox>
 27 | 
 28 |     <vaadin-checkbox indeterminate>
 29 |       Maybe
 30 |     </vaadin-checkbox>
 31 | 
 32 |     Empty labels
 33 |     <vaadin-checkbox></vaadin-checkbox>
 34 |     <vaadin-checkbox></vaadin-checkbox>
 35 |   </div>
 36 | 
 37 |   <div id="group-tests">
 38 |     <vaadin-checkbox-group label="Choose a number">
 39 |       <vaadin-checkbox value="1">1</vaadin-checkbox>
 40 |       <vaadin-checkbox value="2">2</vaadin-checkbox>
 41 |     </vaadin-checkbox-group>
 42 |   </div>
 43 | 
 44 |   <div id="helper-text-tests">
 45 |     <vaadin-checkbox-group helper-text="Helper text" label="Choose a number">
 46 |       <vaadin-checkbox value="1">1</vaadin-checkbox>
 47 |       <vaadin-checkbox value="2">2</vaadin-checkbox>
 48 |     </vaadin-checkbox-group>
 49 |   </div>
 50 | 
 51 |   <div id="helper-text-above-field-tests">
 52 |     <vaadin-checkbox-group helper-text="Helper text" label="Choose a number" theme="helper-above-field">
 53 |       <vaadin-checkbox value="1">1</vaadin-checkbox>
 54 |       <vaadin-checkbox value="2">2</vaadin-checkbox>
 55 |     </vaadin-checkbox-group>
 56 |   </div>
 57 | 
 58 |   <div id="theme-vertical-group-tests">
 59 |     <vaadin-checkbox-group label="Choose a number" theme="vertical">
 60 |       <vaadin-checkbox value="1">1</vaadin-checkbox>
 61 |       <vaadin-checkbox value="2">2</vaadin-checkbox>
 62 |     </vaadin-checkbox-group>
 63 |   </div>
 64 | 
 65 |   <div id="disabled-group-tests">
 66 |     <vaadin-checkbox-group label="Choose a number" disabled>
 67 |       <vaadin-checkbox value="1">1</vaadin-checkbox>
 68 |       <vaadin-checkbox value="2">2</vaadin-checkbox>
 69 |     </vaadin-checkbox-group>
 70 |   </div>
 71 | 
 72 |   <div id="validation-tests">
 73 |     <vaadin-checkbox-group required error-message="Please choose a number" label="Choose a number" id="validation-checkbox-group">
 74 |       <vaadin-checkbox value="1">1</vaadin-checkbox>
 75 |       <vaadin-checkbox value="2">2</vaadin-checkbox>
 76 |     </vaadin-checkbox-group>
 77 |   </div>
 78 | 
 79 |   <div id="validation-with-helper-tests">
 80 |     <vaadin-checkbox-group helper-text="Helper text" required
 81 |     error-message="Please choose a number" label="Choose a number"
 82 |     id="validation-checkbox-with-helper-group" invalid>
 83 |       <vaadin-checkbox value="1">1</vaadin-checkbox>
 84 |       <vaadin-checkbox value="2">2</vaadin-checkbox>
 85 |     </vaadin-checkbox-group>
 86 |   </div>
 87 | 
 88 |   <div id="focus-tests">
 89 |     <vaadin-checkbox-group label="Focused">
 90 |       <vaadin-checkbox id="focus-checkbox" value="1">1</vaadin-checkbox>
 91 |       <vaadin-checkbox value="2">2</vaadin-checkbox>
 92 |     </vaadin-checkbox-group>
 93 |   </div>
 94 | 
 95 |   <div id="wrapping-group-tests" style="width: 300px;">
 96 |     <vaadin-checkbox-group label="Choose a number">
 97 |       <vaadin-checkbox value="1">Checkbox 1</vaadin-checkbox>
 98 |       <vaadin-checkbox value="2">Checkbox 2</vaadin-checkbox>
 99 |       <vaadin-checkbox value="3">Checkbox 3</vaadin-checkbox>
100 |       <vaadin-checkbox value="4">Checkbox 4</vaadin-checkbox>
101 |       <vaadin-checkbox value="5">Checkbox 5</vaadin-checkbox>
102 |       <vaadin-checkbox value="6">Checkbox 6</vaadin-checkbox>
103 |       <vaadin-checkbox value="7">Checkbox 7</vaadin-checkbox>
104 |       <vaadin-checkbox value="8">Checkbox 8</vaadin-checkbox>
105 |       <vaadin-checkbox value="9">Checkbox 9</vaadin-checkbox>
106 |       <vaadin-checkbox value="10">Checkbox 10</vaadin-checkbox>
107 |     </vaadin-checkbox-group>
108 |   </div>
109 | 
110 |   <script>
111 |     window.addEventListener('WebComponentsReady', () => {
112 |       const checkboxGroup = document.getElementById('validation-checkbox-group');
113 |       checkboxGroup.validate();
114 | 
115 |       MockInteractions.keyDownOn(document.body, 9);
116 |       document.getElementById('focus-checkbox').dispatchEvent(new CustomEvent('focusin', {composed: true, bubbles: true}));
117 |     });
118 |   </script>
119 | 
120 | </body>
121 | 


--------------------------------------------------------------------------------
/test/visual/screens/vaadin-checkbox/default-rtl-tests-lumo/checked/chrome.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vaadin/vaadin-checkbox/4c0799c6bd66ace20f386774ed8098994240fadb/test/visual/screens/vaadin-checkbox/default-rtl-tests-lumo/checked/chrome.png


--------------------------------------------------------------------------------
/test/visual/screens/vaadin-checkbox/default-rtl-tests-lumo/checked/firefox.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vaadin/vaadin-checkbox/4c0799c6bd66ace20f386774ed8098994240fadb/test/visual/screens/vaadin-checkbox/default-rtl-tests-lumo/checked/firefox.png


--------------------------------------------------------------------------------
/test/visual/screens/vaadin-checkbox/default-rtl-tests-lumo/default/chrome.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vaadin/vaadin-checkbox/4c0799c6bd66ace20f386774ed8098994240fadb/test/visual/screens/vaadin-checkbox/default-rtl-tests-lumo/default/chrome.png


--------------------------------------------------------------------------------
/test/visual/screens/vaadin-checkbox/default-rtl-tests-lumo/default/firefox.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vaadin/vaadin-checkbox/4c0799c6bd66ace20f386774ed8098994240fadb/test/visual/screens/vaadin-checkbox/default-rtl-tests-lumo/default/firefox.png


--------------------------------------------------------------------------------
/test/visual/screens/vaadin-checkbox/default-rtl-tests-material/checked/chrome.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vaadin/vaadin-checkbox/4c0799c6bd66ace20f386774ed8098994240fadb/test/visual/screens/vaadin-checkbox/default-rtl-tests-material/checked/chrome.png


--------------------------------------------------------------------------------
/test/visual/screens/vaadin-checkbox/default-rtl-tests-material/checked/firefox.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vaadin/vaadin-checkbox/4c0799c6bd66ace20f386774ed8098994240fadb/test/visual/screens/vaadin-checkbox/default-rtl-tests-material/checked/firefox.png


--------------------------------------------------------------------------------
/test/visual/screens/vaadin-checkbox/default-rtl-tests-material/default/chrome.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vaadin/vaadin-checkbox/4c0799c6bd66ace20f386774ed8098994240fadb/test/visual/screens/vaadin-checkbox/default-rtl-tests-material/default/chrome.png


--------------------------------------------------------------------------------
/test/visual/screens/vaadin-checkbox/default-rtl-tests-material/default/firefox.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vaadin/vaadin-checkbox/4c0799c6bd66ace20f386774ed8098994240fadb/test/visual/screens/vaadin-checkbox/default-rtl-tests-material/default/firefox.png


--------------------------------------------------------------------------------
/test/visual/screens/vaadin-checkbox/default-tests-lumo/checked/chrome.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vaadin/vaadin-checkbox/4c0799c6bd66ace20f386774ed8098994240fadb/test/visual/screens/vaadin-checkbox/default-tests-lumo/checked/chrome.png


--------------------------------------------------------------------------------
/test/visual/screens/vaadin-checkbox/default-tests-lumo/checked/firefox.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vaadin/vaadin-checkbox/4c0799c6bd66ace20f386774ed8098994240fadb/test/visual/screens/vaadin-checkbox/default-tests-lumo/checked/firefox.png


--------------------------------------------------------------------------------
/test/visual/screens/vaadin-checkbox/default-tests-lumo/default/chrome.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vaadin/vaadin-checkbox/4c0799c6bd66ace20f386774ed8098994240fadb/test/visual/screens/vaadin-checkbox/default-tests-lumo/default/chrome.png


--------------------------------------------------------------------------------
/test/visual/screens/vaadin-checkbox/default-tests-lumo/default/firefox.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vaadin/vaadin-checkbox/4c0799c6bd66ace20f386774ed8098994240fadb/test/visual/screens/vaadin-checkbox/default-tests-lumo/default/firefox.png


--------------------------------------------------------------------------------
/test/visual/screens/vaadin-checkbox/default-tests-lumo/focus-ring/chrome.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vaadin/vaadin-checkbox/4c0799c6bd66ace20f386774ed8098994240fadb/test/visual/screens/vaadin-checkbox/default-tests-lumo/focus-ring/chrome.png


--------------------------------------------------------------------------------
/test/visual/screens/vaadin-checkbox/default-tests-lumo/focus-ring/firefox.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vaadin/vaadin-checkbox/4c0799c6bd66ace20f386774ed8098994240fadb/test/visual/screens/vaadin-checkbox/default-tests-lumo/focus-ring/firefox.png


--------------------------------------------------------------------------------
/test/visual/screens/vaadin-checkbox/default-tests-material/checked/chrome.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vaadin/vaadin-checkbox/4c0799c6bd66ace20f386774ed8098994240fadb/test/visual/screens/vaadin-checkbox/default-tests-material/checked/chrome.png


--------------------------------------------------------------------------------
/test/visual/screens/vaadin-checkbox/default-tests-material/checked/firefox.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vaadin/vaadin-checkbox/4c0799c6bd66ace20f386774ed8098994240fadb/test/visual/screens/vaadin-checkbox/default-tests-material/checked/firefox.png


--------------------------------------------------------------------------------
/test/visual/screens/vaadin-checkbox/default-tests-material/default/chrome.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vaadin/vaadin-checkbox/4c0799c6bd66ace20f386774ed8098994240fadb/test/visual/screens/vaadin-checkbox/default-tests-material/default/chrome.png


--------------------------------------------------------------------------------
/test/visual/screens/vaadin-checkbox/default-tests-material/default/firefox.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vaadin/vaadin-checkbox/4c0799c6bd66ace20f386774ed8098994240fadb/test/visual/screens/vaadin-checkbox/default-tests-material/default/firefox.png


--------------------------------------------------------------------------------
/test/visual/screens/vaadin-checkbox/default-tests-material/focus-ring/chrome.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vaadin/vaadin-checkbox/4c0799c6bd66ace20f386774ed8098994240fadb/test/visual/screens/vaadin-checkbox/default-tests-material/focus-ring/chrome.png


--------------------------------------------------------------------------------
/test/visual/screens/vaadin-checkbox/default-tests-material/focus-ring/firefox.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vaadin/vaadin-checkbox/4c0799c6bd66ace20f386774ed8098994240fadb/test/visual/screens/vaadin-checkbox/default-tests-material/focus-ring/firefox.png


--------------------------------------------------------------------------------
/test/visual/screens/vaadin-checkbox/disabled-group-tests-lumo/default/chrome.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vaadin/vaadin-checkbox/4c0799c6bd66ace20f386774ed8098994240fadb/test/visual/screens/vaadin-checkbox/disabled-group-tests-lumo/default/chrome.png


--------------------------------------------------------------------------------
/test/visual/screens/vaadin-checkbox/disabled-group-tests-lumo/default/firefox.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vaadin/vaadin-checkbox/4c0799c6bd66ace20f386774ed8098994240fadb/test/visual/screens/vaadin-checkbox/disabled-group-tests-lumo/default/firefox.png


--------------------------------------------------------------------------------
/test/visual/screens/vaadin-checkbox/disabled-group-tests-material/default/chrome.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vaadin/vaadin-checkbox/4c0799c6bd66ace20f386774ed8098994240fadb/test/visual/screens/vaadin-checkbox/disabled-group-tests-material/default/chrome.png


--------------------------------------------------------------------------------
/test/visual/screens/vaadin-checkbox/disabled-group-tests-material/default/firefox.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vaadin/vaadin-checkbox/4c0799c6bd66ace20f386774ed8098994240fadb/test/visual/screens/vaadin-checkbox/disabled-group-tests-material/default/firefox.png


--------------------------------------------------------------------------------
/test/visual/screens/vaadin-checkbox/focus-tests-lumo/focus/chrome.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vaadin/vaadin-checkbox/4c0799c6bd66ace20f386774ed8098994240fadb/test/visual/screens/vaadin-checkbox/focus-tests-lumo/focus/chrome.png


--------------------------------------------------------------------------------
/test/visual/screens/vaadin-checkbox/focus-tests-lumo/focus/firefox.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vaadin/vaadin-checkbox/4c0799c6bd66ace20f386774ed8098994240fadb/test/visual/screens/vaadin-checkbox/focus-tests-lumo/focus/firefox.png


--------------------------------------------------------------------------------
/test/visual/screens/vaadin-checkbox/focus-tests-material/focus/chrome.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vaadin/vaadin-checkbox/4c0799c6bd66ace20f386774ed8098994240fadb/test/visual/screens/vaadin-checkbox/focus-tests-material/focus/chrome.png


--------------------------------------------------------------------------------
/test/visual/screens/vaadin-checkbox/focus-tests-material/focus/firefox.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vaadin/vaadin-checkbox/4c0799c6bd66ace20f386774ed8098994240fadb/test/visual/screens/vaadin-checkbox/focus-tests-material/focus/firefox.png


--------------------------------------------------------------------------------
/test/visual/screens/vaadin-checkbox/group-tests-lumo/default/chrome.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vaadin/vaadin-checkbox/4c0799c6bd66ace20f386774ed8098994240fadb/test/visual/screens/vaadin-checkbox/group-tests-lumo/default/chrome.png


--------------------------------------------------------------------------------
/test/visual/screens/vaadin-checkbox/group-tests-lumo/default/firefox.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vaadin/vaadin-checkbox/4c0799c6bd66ace20f386774ed8098994240fadb/test/visual/screens/vaadin-checkbox/group-tests-lumo/default/firefox.png


--------------------------------------------------------------------------------
/test/visual/screens/vaadin-checkbox/group-tests-material/default/chrome.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vaadin/vaadin-checkbox/4c0799c6bd66ace20f386774ed8098994240fadb/test/visual/screens/vaadin-checkbox/group-tests-material/default/chrome.png


--------------------------------------------------------------------------------
/test/visual/screens/vaadin-checkbox/group-tests-material/default/firefox.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vaadin/vaadin-checkbox/4c0799c6bd66ace20f386774ed8098994240fadb/test/visual/screens/vaadin-checkbox/group-tests-material/default/firefox.png


--------------------------------------------------------------------------------
/test/visual/screens/vaadin-checkbox/helper-text-above-field-tests-lumo/default/chrome.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vaadin/vaadin-checkbox/4c0799c6bd66ace20f386774ed8098994240fadb/test/visual/screens/vaadin-checkbox/helper-text-above-field-tests-lumo/default/chrome.png


--------------------------------------------------------------------------------
/test/visual/screens/vaadin-checkbox/helper-text-above-field-tests-lumo/default/firefox.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vaadin/vaadin-checkbox/4c0799c6bd66ace20f386774ed8098994240fadb/test/visual/screens/vaadin-checkbox/helper-text-above-field-tests-lumo/default/firefox.png


--------------------------------------------------------------------------------
/test/visual/screens/vaadin-checkbox/helper-text-tests-lumo/default/chrome.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vaadin/vaadin-checkbox/4c0799c6bd66ace20f386774ed8098994240fadb/test/visual/screens/vaadin-checkbox/helper-text-tests-lumo/default/chrome.png


--------------------------------------------------------------------------------
/test/visual/screens/vaadin-checkbox/helper-text-tests-lumo/default/firefox.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vaadin/vaadin-checkbox/4c0799c6bd66ace20f386774ed8098994240fadb/test/visual/screens/vaadin-checkbox/helper-text-tests-lumo/default/firefox.png


--------------------------------------------------------------------------------
/test/visual/screens/vaadin-checkbox/helper-text-tests-material/default/chrome.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vaadin/vaadin-checkbox/4c0799c6bd66ace20f386774ed8098994240fadb/test/visual/screens/vaadin-checkbox/helper-text-tests-material/default/chrome.png


--------------------------------------------------------------------------------
/test/visual/screens/vaadin-checkbox/helper-text-tests-material/default/firefox.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vaadin/vaadin-checkbox/4c0799c6bd66ace20f386774ed8098994240fadb/test/visual/screens/vaadin-checkbox/helper-text-tests-material/default/firefox.png


--------------------------------------------------------------------------------
/test/visual/screens/vaadin-checkbox/theme-vertical-group-tests-lumo/default/chrome.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vaadin/vaadin-checkbox/4c0799c6bd66ace20f386774ed8098994240fadb/test/visual/screens/vaadin-checkbox/theme-vertical-group-tests-lumo/default/chrome.png


--------------------------------------------------------------------------------
/test/visual/screens/vaadin-checkbox/theme-vertical-group-tests-lumo/default/firefox.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vaadin/vaadin-checkbox/4c0799c6bd66ace20f386774ed8098994240fadb/test/visual/screens/vaadin-checkbox/theme-vertical-group-tests-lumo/default/firefox.png


--------------------------------------------------------------------------------
/test/visual/screens/vaadin-checkbox/theme-vertical-group-tests-material/default/chrome.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vaadin/vaadin-checkbox/4c0799c6bd66ace20f386774ed8098994240fadb/test/visual/screens/vaadin-checkbox/theme-vertical-group-tests-material/default/chrome.png


--------------------------------------------------------------------------------
/test/visual/screens/vaadin-checkbox/theme-vertical-group-tests-material/default/firefox.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vaadin/vaadin-checkbox/4c0799c6bd66ace20f386774ed8098994240fadb/test/visual/screens/vaadin-checkbox/theme-vertical-group-tests-material/default/firefox.png


--------------------------------------------------------------------------------
/test/visual/screens/vaadin-checkbox/validation-rtl-tests-lumo/error/chrome.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vaadin/vaadin-checkbox/4c0799c6bd66ace20f386774ed8098994240fadb/test/visual/screens/vaadin-checkbox/validation-rtl-tests-lumo/error/chrome.png


--------------------------------------------------------------------------------
/test/visual/screens/vaadin-checkbox/validation-rtl-tests-lumo/error/firefox.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vaadin/vaadin-checkbox/4c0799c6bd66ace20f386774ed8098994240fadb/test/visual/screens/vaadin-checkbox/validation-rtl-tests-lumo/error/firefox.png


--------------------------------------------------------------------------------
/test/visual/screens/vaadin-checkbox/validation-rtl-tests-material/error/chrome.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vaadin/vaadin-checkbox/4c0799c6bd66ace20f386774ed8098994240fadb/test/visual/screens/vaadin-checkbox/validation-rtl-tests-material/error/chrome.png


--------------------------------------------------------------------------------
/test/visual/screens/vaadin-checkbox/validation-rtl-tests-material/error/firefox.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vaadin/vaadin-checkbox/4c0799c6bd66ace20f386774ed8098994240fadb/test/visual/screens/vaadin-checkbox/validation-rtl-tests-material/error/firefox.png


--------------------------------------------------------------------------------
/test/visual/screens/vaadin-checkbox/validation-tests-lumo/error/chrome.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vaadin/vaadin-checkbox/4c0799c6bd66ace20f386774ed8098994240fadb/test/visual/screens/vaadin-checkbox/validation-tests-lumo/error/chrome.png


--------------------------------------------------------------------------------
/test/visual/screens/vaadin-checkbox/validation-tests-lumo/error/firefox.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vaadin/vaadin-checkbox/4c0799c6bd66ace20f386774ed8098994240fadb/test/visual/screens/vaadin-checkbox/validation-tests-lumo/error/firefox.png


--------------------------------------------------------------------------------
/test/visual/screens/vaadin-checkbox/validation-tests-material/error/chrome.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vaadin/vaadin-checkbox/4c0799c6bd66ace20f386774ed8098994240fadb/test/visual/screens/vaadin-checkbox/validation-tests-material/error/chrome.png


--------------------------------------------------------------------------------
/test/visual/screens/vaadin-checkbox/validation-tests-material/error/firefox.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vaadin/vaadin-checkbox/4c0799c6bd66ace20f386774ed8098994240fadb/test/visual/screens/vaadin-checkbox/validation-tests-material/error/firefox.png


--------------------------------------------------------------------------------
/test/visual/screens/vaadin-checkbox/validation-with-helper-tests-material/default/chrome.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vaadin/vaadin-checkbox/4c0799c6bd66ace20f386774ed8098994240fadb/test/visual/screens/vaadin-checkbox/validation-with-helper-tests-material/default/chrome.png


--------------------------------------------------------------------------------
/test/visual/screens/vaadin-checkbox/validation-with-helper-tests-material/default/firefox.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vaadin/vaadin-checkbox/4c0799c6bd66ace20f386774ed8098994240fadb/test/visual/screens/vaadin-checkbox/validation-with-helper-tests-material/default/firefox.png


--------------------------------------------------------------------------------
/test/visual/screens/vaadin-checkbox/wrapping-group-tests-lumo/default/chrome.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vaadin/vaadin-checkbox/4c0799c6bd66ace20f386774ed8098994240fadb/test/visual/screens/vaadin-checkbox/wrapping-group-tests-lumo/default/chrome.png


--------------------------------------------------------------------------------
/test/visual/screens/vaadin-checkbox/wrapping-group-tests-lumo/default/firefox.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vaadin/vaadin-checkbox/4c0799c6bd66ace20f386774ed8098994240fadb/test/visual/screens/vaadin-checkbox/wrapping-group-tests-lumo/default/firefox.png


--------------------------------------------------------------------------------
/test/visual/screens/vaadin-checkbox/wrapping-group-tests-material/default/chrome.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vaadin/vaadin-checkbox/4c0799c6bd66ace20f386774ed8098994240fadb/test/visual/screens/vaadin-checkbox/wrapping-group-tests-material/default/chrome.png


--------------------------------------------------------------------------------
/test/visual/screens/vaadin-checkbox/wrapping-group-tests-material/default/firefox.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vaadin/vaadin-checkbox/4c0799c6bd66ace20f386774ed8098994240fadb/test/visual/screens/vaadin-checkbox/wrapping-group-tests-material/default/firefox.png


--------------------------------------------------------------------------------
/test/visual/screens/vaadin-checkbox/wrapping-rtl-tests-lumo/default/chrome.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vaadin/vaadin-checkbox/4c0799c6bd66ace20f386774ed8098994240fadb/test/visual/screens/vaadin-checkbox/wrapping-rtl-tests-lumo/default/chrome.png


--------------------------------------------------------------------------------
/test/visual/screens/vaadin-checkbox/wrapping-rtl-tests-lumo/default/firefox.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vaadin/vaadin-checkbox/4c0799c6bd66ace20f386774ed8098994240fadb/test/visual/screens/vaadin-checkbox/wrapping-rtl-tests-lumo/default/firefox.png


--------------------------------------------------------------------------------
/test/visual/screens/vaadin-checkbox/wrapping-rtl-tests-material/default/chrome.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vaadin/vaadin-checkbox/4c0799c6bd66ace20f386774ed8098994240fadb/test/visual/screens/vaadin-checkbox/wrapping-rtl-tests-material/default/chrome.png


--------------------------------------------------------------------------------
/test/visual/screens/vaadin-checkbox/wrapping-rtl-tests-material/default/firefox.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vaadin/vaadin-checkbox/4c0799c6bd66ace20f386774ed8098994240fadb/test/visual/screens/vaadin-checkbox/wrapping-rtl-tests-material/default/firefox.png


--------------------------------------------------------------------------------
/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/lumo/vaadin-checkbox-group-styles.html:
--------------------------------------------------------------------------------
  1 | <link rel="import" href="../../../vaadin-lumo-styles/color.html">
  2 | <link rel="import" href="../../../vaadin-lumo-styles/mixins/required-field.html">
  3 | 
  4 | <dom-module id="lumo-checkbox-group" theme-for="vaadin-checkbox-group">
  5 |   <template>
  6 |     <style include="lumo-required-field">
  7 |       :host {
  8 |         color: var(--lumo-body-text-color);
  9 |         font-size: var(--lumo-font-size-m);
 10 |         font-family: var(--lumo-font-family);
 11 |         -webkit-font-smoothing: antialiased;
 12 |         -moz-osx-font-smoothing: grayscale;
 13 |         -webkit-tap-highlight-color: transparent;
 14 |         padding: var(--lumo-space-xs) 0;
 15 |       }
 16 | 
 17 |       :host::before {
 18 |         height: var(--lumo-size-m);
 19 |         box-sizing: border-box;
 20 |         display: inline-flex;
 21 |         align-items: center;
 22 |       }
 23 | 
 24 |       :host([theme~="vertical"]) [part="group-field"] {
 25 |         display: flex;
 26 |         flex-direction: column;
 27 |       }
 28 | 
 29 |       [part="label"] {
 30 |         padding-bottom: 0.7em;
 31 |       }
 32 | 
 33 |       :host([disabled]) [part="label"] {
 34 |         color: var(--lumo-disabled-text-color);
 35 |         -webkit-text-fill-color: var(--lumo-disabled-text-color);
 36 |       }
 37 | 
 38 |       :host([focused]:not([disabled])) [part="label"] {
 39 |         color: var(--lumo-primary-text-color);
 40 |       }
 41 | 
 42 |       :host(:hover:not([disabled]):not([focused])) [part="label"],
 43 |       :host(:hover:not([disabled]):not([focused])) [part="helper-text"],
 44 |       :host(:hover:not([disabled]):not([focused])) [part="helper-text"] ::slotted(*) {
 45 |         color: var(--lumo-body-text-color);
 46 |       }
 47 | 
 48 |       :host([has-helper]) [part="helper-text"]::before {
 49 |         content: "";
 50 |         display: block;
 51 |         height: 0.4em;
 52 |       }
 53 | 
 54 |       [part="helper-text"],
 55 |       [part="helper-text"] ::slotted(*) {
 56 |         display: block;
 57 |         color: var(--lumo-secondary-text-color);
 58 |         font-size: var(--lumo-font-size-xs);
 59 |         line-height: var(--lumo-line-height-xs);
 60 |         margin-left: calc(var(--lumo-border-radius-m) / 4);
 61 |         transition: color 0.2s;
 62 |       }
 63 | 
 64 |       /* helper-text position */
 65 | 
 66 |       :host([has-helper][theme~="helper-above-field"]) [part="helper-text"]::before {
 67 |         display: none;
 68 |       }
 69 | 
 70 |       :host([has-helper][theme~="helper-above-field"]) [part="helper-text"]::after {
 71 |         content: "";
 72 |         display: block;
 73 |         height: 0.4em;
 74 |       }
 75 | 
 76 |       :host([has-helper][theme~="helper-above-field"]) [part="label"] {
 77 |         order: 0;
 78 |         padding-bottom: 0.4em;
 79 |       }
 80 | 
 81 |       :host([has-helper][theme~="helper-above-field"]) [part="helper-text"] {
 82 |         order: 1;
 83 |       }
 84 | 
 85 |       :host([has-helper][theme~="helper-above-field"]) [part="group-field"] {
 86 |         order: 2;
 87 |       }
 88 | 
 89 |       :host([has-helper][theme~="helper-above-field"]) [part="error-message"] {
 90 |         order: 3;
 91 |       }
 92 | 
 93 |       /* Touch device adjustment */
 94 |       @media (pointer: coarse) {
 95 |         :host(:hover:not([disabled]):not([focused])) [part="label"] {
 96 |           color: var(--lumo-secondary-text-color);
 97 |         }
 98 |       }
 99 |     </style>
100 |   </template>
101 | </dom-module>
102 | 


--------------------------------------------------------------------------------
/theme/lumo/vaadin-checkbox-group.html:
--------------------------------------------------------------------------------
1 | <link rel="import" href="vaadin-checkbox-styles.html">
2 | <link rel="import" href="vaadin-checkbox-group-styles.html">
3 | <link rel="import" href="../../src/vaadin-checkbox-group.html">
4 | 


--------------------------------------------------------------------------------
/theme/lumo/vaadin-checkbox-styles.html:
--------------------------------------------------------------------------------
  1 | <link rel="import" href="../../../vaadin-lumo-styles/color.html">
  2 | <link rel="import" href="../../../vaadin-lumo-styles/style.html">
  3 | 
  4 | <dom-module id="lumo-checkbox" theme-for="vaadin-checkbox">
  5 |   <template>
  6 |     <style include="lumo-checkbox-style lumo-checkbox-effects">
  7 |       /* IE11 only */
  8 |       ::-ms-backdrop,
  9 |       [part="checkbox"] {
 10 |         line-height: 1;
 11 |       }
 12 |     </style>
 13 |   </template>
 14 | </dom-module>
 15 | 
 16 | 
 17 | <dom-module id="lumo-checkbox-style">
 18 |   <template>
 19 |     <style>
 20 |       :host {
 21 |         -webkit-tap-highlight-color: transparent;
 22 |         -webkit-user-select: none;
 23 |         -moz-user-select: none;
 24 |         -ms-user-select: none;
 25 |         user-select: none;
 26 |         cursor: default;
 27 |         outline: none;
 28 |       }
 29 | 
 30 |       [part="label"]:not([empty]) {
 31 |         margin: 0.1875em 0.875em 0.1875em 0.375em;
 32 |       }
 33 | 
 34 |       [part="checkbox"] {
 35 |         width: calc(1em + 2px);
 36 |         height: calc(1em + 2px);
 37 |         margin: 0.1875em;
 38 |         position: relative;
 39 |         border-radius: var(--lumo-border-radius-s);
 40 |         background-color: var(--lumo-contrast-20pct);
 41 |         transition: transform 0.2s cubic-bezier(.12, .32, .54, 2), background-color 0.15s;
 42 |         pointer-events: none;
 43 |         line-height: 1.2;
 44 |       }
 45 | 
 46 |       :host([indeterminate]) [part="checkbox"],
 47 |       :host([checked]) [part="checkbox"] {
 48 |         background-color: var(--lumo-primary-color);
 49 |       }
 50 | 
 51 |       /* Needed to align the checkbox nicely on the baseline */
 52 |       [part="checkbox"]::before {
 53 |         content: "\2003";
 54 |       }
 55 | 
 56 |       /* Checkmark */
 57 |       [part="checkbox"]::after {
 58 |         content: "";
 59 |         display: inline-block;
 60 |         width: 0;
 61 |         height: 0;
 62 |         border: 0 solid var(--lumo-primary-contrast-color);
 63 |         border-width: 0.1875em 0 0 0.1875em;
 64 |         box-sizing: border-box;
 65 |         transform-origin: 0 0;
 66 |         position: absolute;
 67 |         top: 0.8125em;
 68 |         left: 0.5em;
 69 |         transform: scale(0.55) rotate(-135deg);
 70 |         opacity: 0;
 71 |       }
 72 | 
 73 |       :host([checked]) [part="checkbox"]::after {
 74 |         opacity: 1;
 75 |         width: 0.625em;
 76 |         height: 1.0625em;
 77 |       }
 78 | 
 79 |       /* Indeterminate checkmark */
 80 | 
 81 |       :host([indeterminate]) [part="checkbox"]::after {
 82 |         transform: none;
 83 |         opacity: 1;
 84 |         top: 45%;
 85 |         height: 10%;
 86 |         left: 22%;
 87 |         right: 22%;
 88 |         width: auto;
 89 |         border: 0;
 90 |         background-color: var(--lumo-primary-contrast-color);
 91 |         transition: opacity 0.25s;
 92 |       }
 93 | 
 94 |       /* Focus ring */
 95 | 
 96 |       :host([focus-ring]) [part="checkbox"] {
 97 |         box-shadow: 0 0 0 3px var(--lumo-primary-color-50pct);
 98 |       }
 99 | 
100 |       /* Disabled */
101 | 
102 |       :host([disabled]) {
103 |         pointer-events: none;
104 |         color: var(--lumo-disabled-text-color);
105 |       }
106 | 
107 |       :host([disabled]) [part="label"] ::slotted(*) {
108 |         color: inherit;
109 |       }
110 | 
111 |       :host([disabled]) [part="checkbox"] {
112 |         background-color: var(--lumo-contrast-10pct);
113 |       }
114 | 
115 |       :host([disabled]) [part="checkbox"]::after {
116 |         border-color: var(--lumo-contrast-30pct);
117 |       }
118 | 
119 |       :host([indeterminate][disabled]) [part="checkbox"]::after {
120 |         background-color: var(--lumo-contrast-30pct);
121 |       }
122 | 
123 |       /* RTL specific styles */
124 | 
125 |       :host([dir="rtl"]) [part="label"]:not([empty]) {
126 |         margin: 0.1875em 0.375em 0.1875em 0.875em;
127 |       }
128 |     </style>
129 |   </template>
130 | </dom-module>
131 | 
132 | <dom-module id="lumo-checkbox-effects">
133 |   <template>
134 |     <style>
135 |       /* Transition the checkmark if activated with the mouse (disabled for grid select-all this way) */
136 |       :host(:hover) [part="checkbox"]::after {
137 |         transition: width 0.1s, height 0.25s;
138 |       }
139 | 
140 |       /* Used for activation "halo" */
141 |       [part="checkbox"]::before {
142 |         color: transparent;
143 |         display: inline-block;
144 |         width: 100%;
145 |         height: 100%;
146 |         border-radius: inherit;
147 |         background-color: inherit;
148 |         transform: scale(1.4);
149 |         opacity: 0;
150 |         transition: transform 0.1s, opacity 0.8s;
151 |       }
152 | 
153 |       /* Hover */
154 | 
155 |       :host(:not([checked]):not([indeterminate]):not([disabled]):hover) [part="checkbox"] {
156 |         background-color: var(--lumo-contrast-30pct);
157 |       }
158 | 
159 |       /* Disable hover for touch devices */
160 |       @media (pointer: coarse) {
161 |         :host(:not([checked]):not([indeterminate]):not([disabled]):hover) [part="checkbox"] {
162 |           background-color: var(--lumo-contrast-20pct);
163 |         }
164 |       }
165 | 
166 |       /* Active */
167 | 
168 |       :host([active]) [part="checkbox"] {
169 |         transform: scale(0.9);
170 |         transition-duration: 0.05s;
171 |       }
172 | 
173 |       :host([active][checked]) [part="checkbox"] {
174 |         transform: scale(1.1);
175 |       }
176 | 
177 |       :host([active]:not([checked])) [part="checkbox"]::before {
178 |         transition-duration: 0.01s, 0.01s;
179 |         transform: scale(0);
180 |         opacity: 0.4;
181 |       }
182 |     </style>
183 |   </template>
184 | </dom-module>
185 | 


--------------------------------------------------------------------------------
/theme/lumo/vaadin-checkbox.html:
--------------------------------------------------------------------------------
1 | <link rel="import" href="vaadin-checkbox-styles.html">
2 | <link rel="import" href="../../src/vaadin-checkbox.html">
3 | 


--------------------------------------------------------------------------------
/theme/material/vaadin-checkbox-group-styles.html:
--------------------------------------------------------------------------------
 1 | <link rel="import" href="../../../vaadin-material-styles/color.html">
 2 | <link rel="import" href="../../../vaadin-material-styles/mixins/required-field.html">
 3 | 
 4 | <dom-module id="material-checkbox-group" theme-for="vaadin-checkbox-group">
 5 |   <template>
 6 |     <style include="material-required-field">
 7 |       :host {
 8 |         display: inline-flex;
 9 |         position: relative;
10 |         padding-top: 8px;
11 |         margin-bottom: 8px;
12 |         outline: none;
13 |         color: var(--material-body-text-color);
14 |         font-size: var(--material-body-font-size);
15 |         line-height: 24px;
16 |         font-family: var(--material-font-family);
17 |         -webkit-font-smoothing: antialiased;
18 |         -moz-osx-font-smoothing: grayscale;
19 |       }
20 | 
21 |       :host::before {
22 |         line-height: 32px;
23 |       }
24 | 
25 |       :host([has-label]) {
26 |         padding-top: 24px;
27 |       }
28 | 
29 |       [part="label"]:empty {
30 |         display: none;
31 |       }
32 | 
33 |       [part="label"]:empty::before {
34 |         content: " ";
35 |         position: absolute;
36 |       }
37 | 
38 |       :host([theme~="vertical"]) [part="group-field"] {
39 |         display: flex;
40 |         flex-direction: column;
41 |       }
42 | 
43 |       :host([disabled]) [part="label"] {
44 |         color: var(--material-disabled-text-color);
45 |         -webkit-text-fill-color: var(--material-disabled-text-color);
46 |       }
47 | 
48 |       :host([focused]:not([invalid])) [part="label"] {
49 |         color: var(--material-primary-text-color);
50 |       }
51 | 
52 |       /* According to material theme guidelines, helper text should be hidden when error message is set and input is invalid */
53 |       :host([has-helper][invalid][has-error-message]) [part="helper-text"] {
54 |         display: none;
55 |       }
56 | 
57 |       :host([has-helper]) [part="helper-text"]::before {
58 |         content: "";
59 |         display: block;
60 |         height: 6px;
61 |       }
62 | 
63 |       [part="helper-text"],
64 |       [part="helper-text"] ::slotted(*) {
65 |         font-size: .75rem;
66 |         line-height: 1;
67 |         color: var(--material-secondary-text-color);
68 |       }
69 |     </style>
70 |   </template>
71 | </dom-module>
72 | 


--------------------------------------------------------------------------------
/theme/material/vaadin-checkbox-group.html:
--------------------------------------------------------------------------------
1 | <link rel="import" href="vaadin-checkbox-group-styles.html">
2 | <link rel="import" href="../../src/vaadin-checkbox-group.html">
3 | 


--------------------------------------------------------------------------------
/theme/material/vaadin-checkbox-styles.html:
--------------------------------------------------------------------------------
  1 | <link rel="import" href="../../../vaadin-material-styles/color.html">
  2 | 
  3 | <dom-module id="material-checkbox" theme-for="vaadin-checkbox">
  4 |   <template>
  5 |     <style>
  6 |       :host {
  7 |         display: inline-block;
  8 |         -webkit-user-select: none;
  9 |         -moz-user-select: none;
 10 |         -ms-user-select: none;
 11 |         user-select: none;
 12 |         outline: none;
 13 |         -webkit-tap-highlight-color: transparent;
 14 |       }
 15 | 
 16 |       [part="label"]:not([empty]) {
 17 |         margin: 3px 12px 3px 6px;
 18 |       }
 19 | 
 20 |       [part="native-checkbox"] {
 21 |         opacity: 0;
 22 |         position: absolute;
 23 |       }
 24 | 
 25 |       [part="checkbox"] {
 26 |         display: inline-block;
 27 |         width: 16px;
 28 |         height: 16px;
 29 |         flex: none;
 30 |         margin: 4px;
 31 |         position: relative;
 32 |         border-radius: 2px;
 33 |         box-shadow: inset 0 0 0 2px var(--material-secondary-text-color);
 34 |         pointer-events: none;
 35 |         line-height: 1.275;
 36 |         background-color: transparent;
 37 |       }
 38 | 
 39 |       /* IE11 only */
 40 |       ::-ms-backdrop,
 41 |       [part="checkbox"] {
 42 |         line-height: 1;
 43 |       }
 44 | 
 45 |       /* Used for the ripple */
 46 |       [part="checkbox"]::before {
 47 |         /* Needed to align the checkbox nicely on the baseline */
 48 |         content: "\2003";
 49 |         display: inline-block;
 50 |         width: 100%;
 51 |         height: 100%;
 52 |         border-radius: 50%;
 53 |         background-color: var(--material-disabled-text-color);
 54 |         transform: scale(0);
 55 |         opacity: 0;
 56 |         transition: transform 0s 0.8s, opacity 0.8s;
 57 |         will-change: transform, opacity;
 58 |       }
 59 | 
 60 |       /* Used for the checkmark */
 61 |       [part="checkbox"]::after {
 62 |         content: "";
 63 |         display: inline-block;
 64 |         width: 10px;
 65 |         height: 19px;
 66 |         border: 0 solid var(--material-background-color);
 67 |         border-width: 3px 0 0 3px;
 68 |         box-sizing: border-box;
 69 |         transform-origin: 0 0;
 70 |         position: absolute;
 71 |         top: 12px;
 72 |         left: 6px;
 73 |         transform: scale(0) rotate(-135deg);
 74 |         transition: transform 0.2s;
 75 |       }
 76 | 
 77 |       :host([indeterminate]) [part="checkbox"],
 78 |       :host([checked]) [part="checkbox"] {
 79 |         background-color: var(--material-primary-color);
 80 |         box-shadow: none;
 81 |       }
 82 | 
 83 |       :host([checked]) [part="checkbox"]::after {
 84 |         transform: scale(0.55) rotate(-135deg);
 85 |       }
 86 | 
 87 |       :host(:not([checked]):not([indeterminate]):not([disabled]):hover) [part="checkbox"] {
 88 |         background-color: transparent;
 89 |       }
 90 | 
 91 |       :host([focus-ring]) [part="checkbox"]::before,
 92 |       :host([active]) [part="checkbox"]::before {
 93 |         transition-duration: 0.08s, 0.01s;
 94 |         transition-delay: 0s, 0s;
 95 |         transform: scale(2.5);
 96 |         opacity: 0.15;
 97 |       }
 98 | 
 99 |       :host([checked]) [part="checkbox"]::before {
100 |         background-color: var(--material-primary-color);
101 |       }
102 | 
103 |       :host([indeterminate]) [part="checkbox"]::after {
104 |         transform: none;
105 |         opacity: 1;
106 |         top: 45%;
107 |         height: 10%;
108 |         left: 22%;
109 |         right: 22%;
110 |         width: auto;
111 |         border: 0;
112 |         background-color: var(--material-background-color);
113 |         transition: opacity 0.4s;
114 |       }
115 | 
116 |       :host([disabled]) {
117 |         pointer-events: none;
118 |         color: var(--material-disabled-text-color);
119 |       }
120 | 
121 |       :host([disabled]) ::slotted(*) {
122 |         color: inherit;
123 |       }
124 | 
125 |       :host([disabled]:not([checked]):not([indeterminate])) [part="checkbox"] {
126 |         box-shadow: inset 0 0 0 2px var(--material-disabled-color);
127 |       }
128 | 
129 |       :host([disabled][checked]) [part="checkbox"],
130 |       :host([disabled][indeterminate]) [part="checkbox"] {
131 |         background-color: var(--material-disabled-color);
132 |       }
133 | 
134 |       /* Workaround for vaadin-checkbox issue: https://github.com/vaadin/vaadin-checkbox/issues/16 */
135 |       [part="native-checkbox"]:checked ~ [part="checkbox"] {
136 |         opacity: 1;
137 |       }
138 | 
139 |       /* RTL specific styles */
140 | 
141 |       :host([dir="rtl"]) [part="label"]:not([empty]) {
142 |         margin: 3px 6px 3px 12px;
143 |       }
144 |     </style>
145 |   </template>
146 | </dom-module>
147 | 


--------------------------------------------------------------------------------
/theme/material/vaadin-checkbox.html:
--------------------------------------------------------------------------------
1 | <link rel="import" href="vaadin-checkbox-styles.html">
2 | <link rel="import" href="../../src/vaadin-checkbox.html">
3 | 


--------------------------------------------------------------------------------
/vaadin-checkbox-group.html:
--------------------------------------------------------------------------------
1 | <link rel="import" href="theme/lumo/vaadin-checkbox-group.html">
2 | 


--------------------------------------------------------------------------------
/vaadin-checkbox.html:
--------------------------------------------------------------------------------
1 | <link rel="import" href="theme/lumo/vaadin-checkbox.html">


--------------------------------------------------------------------------------
/vaadin-directory-description.md:
--------------------------------------------------------------------------------
 1 | 
 2 | # &lt;vaadin-checkbox&gt;
 3 | 
 4 | [![Available in Vaadin_Directory](https://img.shields.io/vaadin-directory/v/vaadinvaadin-checkbox.svg)](https://vaadin.com/directory/component/vaadinvaadin-checkbox)
 5 | 
 6 | [&lt;vaadin-checkbox&gt;](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 | [<img src="https://raw.githubusercontent.com/vaadin/vaadin-checkbox/master/screenshot.png" width="400" alt="Screenshot of vaadin-checkbox, using the default Lumo theme">](https://vaadin.com/components/vaadin-checkbox)
10 | 
11 | ## Example Usage
12 | ```html
13 | <vaadin-checkbox checked>Checked</vaadin-checkbox>
14 | <vaadin-checkbox>Unchecked</vaadin-checkbox>
15 | <vaadin-checkbox indeterminate>Indeterminate</vaadin-checkbox>
16 | ```
17 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------