├── .eslintrc.json
├── .github
├── CODEOWNERS
└── ISSUE_TEMPLATE.md
├── .gitignore
├── .npmignore
├── .travis.yml
├── CONTRIBUTING.md
├── README.md
├── bower.json
├── demo
└── index.html
├── formatconfig.json
├── manifest.json
├── package-lock.json
├── package.json
├── paper-checkbox.js
└── test
├── .eslintrc.json
├── basic.html
└── index.html
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "eslint:recommended",
3 | "rules": {
4 | "no-console": 0
5 | },
6 | "env": {
7 | "browser": true
8 | },
9 | "plugins": [
10 | "html"
11 | ],
12 | "globals": {
13 | "CustomElements": false,
14 | "HTMLImports": false,
15 | "Polymer": false,
16 | "WeakMap": false
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/.github/CODEOWNERS:
--------------------------------------------------------------------------------
1 | * @bicknellr
2 | /.travis.yml @azakus
3 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE.md:
--------------------------------------------------------------------------------
1 |
2 | ### Description
3 |
4 |
5 | ### Expected outcome
6 |
7 |
8 |
9 | ### Actual outcome
10 |
11 |
12 |
13 | ### Live Demo
14 |
15 |
16 | ### Steps to reproduce
17 |
18 |
23 |
24 | ### Browsers Affected
25 |
26 | - [ ] Chrome
27 | - [ ] Firefox
28 | - [ ] Safari 9
29 | - [ ] Safari 8
30 | - [ ] Safari 7
31 | - [ ] Edge
32 | - [ ] IE 11
33 | - [ ] IE 10
34 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | bower_components*
2 | bower-*.json
3 | node_modules
4 | *.d.ts
5 | *.tgz
6 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | *.tgz
2 | .github
3 | .travis.yml
4 | formatconfig.json
5 | gen-tsd.json
6 | test/
7 | wct.conf.json
8 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | sudo: required
3 | before_script:
4 | - npm install -g polymer-cli
5 | - git checkout package-lock.json
6 | - >-
7 | npm run format && git diff --exit-code || (echo -e '\n\033[31mERROR:\033[0m
8 | Project is not formatted. Please run "npm run format".' && false)
9 | env:
10 | global:
11 | - secure: >-
12 | yp6I0VbSey7lRWOKQQkBU7CBvQd0hN0TZiZnbo8fzWWfOjANeDICCa/xyY2+ZM0TU5mxvehTg38mjkpRPkMm4UrsE5og49GBFqaDLk9U+Bp7fP37tDtWfT3l4VgpzSwKAdIEh8EcmUPblZxQxJlH6+HHImnPCWSKy9YvVEGirzY=
13 | - secure: >-
14 | XjG814z1IZBtPOsZBknOcJaqSJHjF7jWzAw1Cl9sKcmHPKSJW2a0gILdpXx2Au0KGzLzn7Z6/p6u2+rv4tbYWBq21EWgbHmn3iAF4pAZt6DgGqJpfCsNdyuKUYN8ZfLFbK3GC/js6IJDGV+zq5HxtZmwZh+eQ85bbx2xNyRKZis=
15 | node_js: node
16 | addons:
17 | firefox: latest
18 | apt:
19 | sources:
20 | - google-chrome
21 | packages:
22 | - google-chrome-stable
23 | script:
24 | - xvfb-run polymer test --module-resolution=node --npm
25 | - >-
26 | if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then polymer test
27 | --module-resolution=node --npm -s 'default'; fi
28 | dist: trusty
29 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 |
13 |
14 | # Polymer Elements
15 | ## Guide for Contributors
16 |
17 | Polymer Elements are built in the open, and the Polymer authors eagerly encourage any and all forms of community contribution. When contributing, please follow these guidelines:
18 |
19 | ### Filing Issues
20 |
21 | **If you are filing an issue to request a feature**, please provide a clear description of the feature. It can be helpful to describe answers to the following questions:
22 |
23 | 1. **Who will use the feature?** _“As someone filling out a form…”_
24 | 2. **When will they use the feature?** _“When I enter an invalid value…”_
25 | 3. **What is the user’s goal?** _“I want to be visually notified that the value needs to be corrected…”_
26 |
27 | **If you are filing an issue to report a bug**, please provide:
28 |
29 | 1. **A clear description of the bug and related expectations.** Consider using the following example template for reporting a bug:
30 |
31 | ```markdown
32 | The `paper-foo` element causes the page to turn pink when clicked.
33 |
34 | ## Expected outcome
35 |
36 | The page stays the same color.
37 |
38 | ## Actual outcome
39 |
40 | The page turns pink.
41 |
42 | ## Steps to reproduce
43 |
44 | 1. Put a `paper-foo` element in the page.
45 | 2. Open the page in a web browser.
46 | 3. Click the `paper-foo` element.
47 | ```
48 |
49 | 2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [https://jsbin.com/cagaye/edit?html,output](https://jsbin.com/cagaye/edit?html,output).
50 |
51 | 3. **A list of browsers where the problem occurs.** This can be skipped if the problem is the same across all browsers.
52 |
53 | ### Submitting Pull Requests
54 |
55 | **Before creating a pull request**, please ensure that an issue exists for the corresponding change in the pull request that you intend to make. **If an issue does not exist, please create one per the guidelines above**. The goal is to discuss the design and necessity of the proposed change with Polymer authors and community before diving into a pull request.
56 |
57 | When submitting pull requests, please provide:
58 |
59 | 1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues in the pull request description using the following syntax:
60 |
61 | ```markdown
62 | (For a single issue)
63 | Fixes #20
64 |
65 | (For multiple issues)
66 | Fixes #32, fixes #40
67 | ```
68 |
69 | 2. **A succinct description of the design** used to fix any related issues. For example:
70 |
71 | ```markdown
72 | This fixes #20 by removing styles that leaked which would cause the page to turn pink whenever `paper-foo` is clicked.
73 | ```
74 |
75 | 3. **At least one test for each bug fixed or feature added** as part of the pull request. Pull requests that fix bugs or add features without accompanying tests will not be considered.
76 |
77 | If a proposed change contains multiple commits, please [squash commits](https://www.google.com/url?q=http://blog.steveklabnik.com/posts/2012-11-08-how-to-squash-commits-in-a-github-pull-request) to as few as is necessary to succinctly express the change. A Polymer author can help you squash commits, so don’t be afraid to ask us if you need help with that!
78 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | [](https://www.npmjs.com/package/@polymer/paper-checkbox)
2 | [](https://travis-ci.org/PolymerElements/paper-checkbox)
3 | [](https://webcomponents.org/element/@polymer/paper-checkbox)
4 |
5 | ## <paper-checkbox>
6 |
7 | `paper-checkbox` is a button that can be either checked or unchecked. User can
8 | tap the checkbox to check or uncheck it. Usually you use checkboxes to allow
9 | user to select multiple options from a set. If you have a single ON/OFF option,
10 | avoid using a single checkbox and use `paper-toggle-button` instead.
11 |
12 | See: [Documentation](https://www.webcomponents.org/element/@polymer/paper-checkbox),
13 | [Demo](https://www.webcomponents.org/element/@polymer/paper-checkbox/demo/demo/index.html).
14 |
15 | ## Usage
16 |
17 | ### Installation
18 |
19 | ```
20 | npm install --save @polymer/paper-checkbox
21 | ```
22 |
23 | ### In an HTML file
24 |
25 | ```html
26 |
27 |
28 |
31 |
32 |
33 | Unchecked
34 | Checked
35 | Disabled
36 |
37 |
38 | ```
39 |
40 | ### In a Polymer 3 element
41 |
42 | ```js
43 | import {PolymerElement} from '@polymer/polymer/polymer-element.js';
44 | import {html} from '@polymer/polymer/lib/utils/html-tag.js';
45 |
46 | import '@polymer/paper-checkbox/paper-checkbox.js';
47 |
48 | class ExampleElement extends PolymerElement {
49 | static get template() {
50 | return html`
51 | Unchecked
52 | Checked
53 | Disabled
54 | `;
55 | }
56 | }
57 |
58 | customElements.define('example-element', ExampleElement);
59 | ```
60 |
61 | ## Contributing
62 |
63 | If you want to send a PR to this element, here are the instructions for running
64 | the tests and demo locally:
65 |
66 | ### Installation
67 |
68 | ```sh
69 | git clone https://github.com/PolymerElements/paper-checkbox
70 | cd paper-checkbox
71 | npm install
72 | npm install -g polymer-cli
73 | ```
74 |
75 | ### Running the demo locally
76 |
77 | ```sh
78 | polymer serve --npm
79 | open http://127.0.0.1:/demo/
80 | ```
81 |
82 | ### Running the tests
83 |
84 | ```sh
85 | polymer test --npm
86 | ```
87 |
--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "paper-checkbox",
3 | "license": "http://polymer.github.io/LICENSE.txt"
4 | }
5 |
--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
1 |
2 |
11 |
12 |
13 | paper-checkbox demo
14 |
15 |
16 |
17 |
18 |
19 |
20 |
25 |
26 |
27 |
48 |
49 |
50 |
Checkboxes can be checked or unchecked, or disabled entirely
51 |
52 |
53 | Checkbox
54 | Checkbox
55 | Disabled
56 |
57 |
58 |
59 |
Checkboxes can hide the ripple effect using the noink attribute
60 |
61 |
62 | Checkbox
63 |
64 |
65 |
66 |
Checkboxes can be styled using custom properties
67 |
68 |
69 |
70 |
116 |
117 |
118 |
119 | Checkbox
120 | With a subtitle
121 |
122 |
123 | Checkbox
124 |
125 | With a longer subtitle that wraps to another line
126 |
127 |
128 |
129 | Checkbox
130 |
131 |
132 |
133 |
`;
200 | template.setAttribute('strip-whitespace', '');
201 |
202 | /**
203 | Material design:
204 | [Checkbox](https://www.google.com/design/spec/components/selection-controls.html#selection-controls-checkbox)
205 |
206 | `paper-checkbox` is a button that can be either checked or unchecked. User can
207 | tap the checkbox to check or uncheck it. Usually you use checkboxes to allow
208 | user to select multiple options from a set. If you have a single ON/OFF option,
209 | avoid using a single checkbox and use `paper-toggle-button` instead.
210 |
211 | Example:
212 |
213 | label
214 |
215 | label
216 |
217 | ### Styling
218 |
219 | The following custom properties and mixins are available for styling:
220 |
221 | Custom property | Description | Default
222 | ----------------|-------------|----------
223 | `--paper-checkbox-unchecked-background-color` | Checkbox background color when the input is not checked | `transparent`
224 | `--paper-checkbox-unchecked-color` | Checkbox border color when the input is not checked | `--primary-text-color`
225 | `--paper-checkbox-unchecked-ink-color` | Selected/focus ripple color when the input is not checked | `--primary-text-color`
226 | `--paper-checkbox-checked-color` | Checkbox color when the input is checked | `--primary-color`
227 | `--paper-checkbox-checked-ink-color` | Selected/focus ripple color when the input is checked | `--primary-color`
228 | `--paper-checkbox-checkmark-color` | Checkmark color | `white`
229 | `--paper-checkbox-label-color` | Label color | `--primary-text-color`
230 | `--paper-checkbox-label-checked-color` | Label color when the input is checked | `--paper-checkbox-label-color`
231 | `--paper-checkbox-label-spacing` | Spacing between the label and the checkbox | `8px`
232 | `--paper-checkbox-label` | Mixin applied to the label | `{}`
233 | `--paper-checkbox-label-checked` | Mixin applied to the label when the input is checked | `{}`
234 | `--paper-checkbox-error-color` | Checkbox color when invalid | `--error-color`
235 | `--paper-checkbox-size` | Size of the checkbox | `18px`
236 | `--paper-checkbox-ink-size` | Size of the ripple | `48px`
237 | `--paper-checkbox-margin` | Margin around the checkbox container | `initial`
238 | `--paper-checkbox-vertical-align` | Vertical alignment of the checkbox container | `middle`
239 |
240 | This element applies the mixin `--paper-font-common-base` but does not import
241 | `paper-styles/typography.html`. In order to apply the `Roboto` font to this
242 | element, make sure you've imported `paper-styles/typography.html`.
243 |
244 | @demo demo/index.html
245 | */
246 | Polymer({
247 | _template: template,
248 |
249 | is: 'paper-checkbox',
250 |
251 | behaviors: [PaperCheckedElementBehavior],
252 |
253 | /** @private */
254 | hostAttributes: {role: 'checkbox', 'aria-checked': false, tabindex: 0},
255 |
256 | properties: {
257 | /**
258 | * Fired when the checked state changes due to user interaction.
259 | *
260 | * @event change
261 | */
262 |
263 | /**
264 | * Fired when the checked state changes.
265 | *
266 | * @event iron-change
267 | */
268 | ariaActiveAttribute: {type: String, value: 'aria-checked'}
269 | },
270 |
271 | /** @override */
272 | attached: function() {
273 | // Wait until styles have resolved to check for the default sentinel.
274 | // See polymer#4009 for more details.
275 | afterNextRender(this, function() {
276 | var inkSize =
277 | this.getComputedStyleValue('--calculated-paper-checkbox-ink-size')
278 | .trim();
279 | // If unset, compute and set the default `--paper-checkbox-ink-size`.
280 | if (inkSize === '-1px') {
281 | var checkboxSizeText =
282 | this.getComputedStyleValue('--calculated-paper-checkbox-size')
283 | .trim();
284 |
285 | var units = 'px';
286 | var unitsMatches = checkboxSizeText.match(/[A-Za-z]+$/);
287 | if (unitsMatches !== null) {
288 | units = unitsMatches[0];
289 | }
290 |
291 | var checkboxSize = parseFloat(checkboxSizeText);
292 | var defaultInkSize = (8 / 3) * checkboxSize;
293 |
294 | if (units === 'px') {
295 | defaultInkSize = Math.floor(defaultInkSize);
296 |
297 | // The checkbox and ripple need to have the same parity so that their
298 | // centers align.
299 | if (defaultInkSize % 2 !== checkboxSize % 2) {
300 | defaultInkSize++;
301 | }
302 | }
303 |
304 | this.updateStyles({
305 | '--paper-checkbox-ink-size': defaultInkSize + units,
306 | });
307 | }
308 | });
309 | },
310 |
311 | _computeCheckboxClass: function(checked, invalid) {
312 | var className = '';
313 | if (checked) {
314 | className += 'checked ';
315 | }
316 | if (invalid) {
317 | className += 'invalid';
318 | }
319 | return className;
320 | },
321 |
322 | _computeCheckmarkClass: function(checked) {
323 | return checked ? '' : 'hidden';
324 | },
325 |
326 | // create ripple inside the checkboxContainer
327 | _createRipple: function() {
328 | this._rippleContainer = this.$.checkboxContainer;
329 | return PaperInkyFocusBehaviorImpl._createRipple.call(this);
330 | }
331 |
332 | });
333 |
--------------------------------------------------------------------------------
/test/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "env": {
3 | "mocha": true
4 | },
5 | "globals": {
6 | "assert": true,
7 | "sinon": true,
8 | "WCT": true,
9 | "fixture": true,
10 | "Polymer": true,
11 | "MockInteractions": true,
12 | "a11ySuite": true
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/test/basic.html:
--------------------------------------------------------------------------------
1 |
2 |
11 |
12 |
13 |
14 | paper-checkbox basic tests
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 | Batman
87 |
88 |
89 |
90 |
91 |
92 | Robin
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 | Checkbox
132 | Checkbox
133 |
134 |
135 |
136 |
137 |
138 | Checkbox
139 |
140 |
141 |
142 |
384 |
385 |
386 |
--------------------------------------------------------------------------------
/test/index.html:
--------------------------------------------------------------------------------
1 |
10 |
11 |
12 | paper-checkbox tests
13 |
14 |
15 |
16 |
24 |
25 |
26 |
27 |
--------------------------------------------------------------------------------