@polymer/paper-checkbox - npm Package Compare versions

+82

paper-checkbox.d.ts

		/**
		* DO NOT EDIT
		*
		* This file was automatically generated by
		* https://github.com/Polymer/tools/tree/master/packages/gen-typescript-declarations
		*
		* To modify these typings, edit the source file(s):
		* paper-checkbox.js
		*/

		import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js';

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

		import {afterNextRender} from '@polymer/polymer/lib/utils/render-status.js';

		import {LegacyElementMixin} from '@polymer/polymer/lib/legacy/legacy-element-mixin.js';

		/**
		* Material design:
		* [Checkbox](https://www.google.com/design/spec/components/selection-controls.html#selection-controls-checkbox)
		*
		* `paper-checkbox` is a button that can be either checked or unchecked. User can
		* tap the checkbox to check or uncheck it. Usually you use checkboxes to allow
		* user to select multiple options from a set. If you have a single ON/OFF option,
		* avoid using a single checkbox and use `paper-toggle-button` instead.
		*
		* Example:
		*
		* <paper-checkbox>label</paper-checkbox>
		*
		* <paper-checkbox checked> label</paper-checkbox>
		*
		* ### Styling
		*
		* The following custom properties and mixins are available for styling:
		*
		* Custom property \| Description \| Default
		* ----------------\|-------------\|----------
		* `--paper-checkbox-unchecked-background-color` \| Checkbox background color when the input is not checked \| `transparent`
		* `--paper-checkbox-unchecked-color` \| Checkbox border color when the input is not checked \| `--primary-text-color`
		* `--paper-checkbox-unchecked-ink-color` \| Selected/focus ripple color when the input is not checked \| `--primary-text-color`
		* `--paper-checkbox-checked-color` \| Checkbox color when the input is checked \| `--primary-color`
		* `--paper-checkbox-checked-ink-color` \| Selected/focus ripple color when the input is checked \| `--primary-color`
		* `--paper-checkbox-checkmark-color` \| Checkmark color \| `white`
		* `--paper-checkbox-label-color` \| Label color \| `--primary-text-color`
		* `--paper-checkbox-label-checked-color` \| Label color when the input is checked \| `--paper-checkbox-label-color`
		* `--paper-checkbox-label-spacing` \| Spacing between the label and the checkbox \| `8px`
		* `--paper-checkbox-label` \| Mixin applied to the label \| `{}`
		* `--paper-checkbox-label-checked` \| Mixin applied to the label when the input is checked \| `{}`
		* `--paper-checkbox-error-color` \| Checkbox color when invalid \| `--error-color`
		* `--paper-checkbox-size` \| Size of the checkbox \| `18px`
		* `--paper-checkbox-ink-size` \| Size of the ripple \| `48px`
		* `--paper-checkbox-margin` \| Margin around the checkbox container \| `initial`
		* `--paper-checkbox-vertical-align` \| Vertical alignment of the checkbox container \| `middle`
		*
		* This element applies the mixin `--paper-font-common-base` but does not import
		* `paper-styles/typography.html`. In order to apply the `Roboto` font to this
		* element, make sure you've imported `paper-styles/typography.html`.
		*/
		interface PaperCheckboxElement extends PaperCheckedElementBehavior, LegacyElementMixin, HTMLElement {

		/**
		* Fired when the checked state changes.
		*/
		ariaActiveAttribute: string\|null\|undefined;
		attached(): void;
		_computeCheckboxClass(checked: any, invalid: any): any;
		_computeCheckmarkClass(checked: any): any;

		/**
		* create ripple inside the checkboxContainer
		*/
		_createRipple(): any;
		}

		declare global {

		interface HTMLElementTagNameMap {
		"paper-checkbox": PaperCheckboxElement;
		}
		}

+31

-43

demo/index.html

		@@ -19,42 +19,33 @@ <!doctype html>

		<script src="../../../@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
		<script type="module" src="../../iron-demo-helpers/demo-snippet.js"></script>
		<script type="module" src="../../iron-demo-helpers/demo-pages-shared-styles.js"></script>
		<script type="module" src="../paper-checkbox.js"></script>
		<script src="https://unpkg.com/@webcomponents/webcomponentsjs@^2.0.0/webcomponents-loader.js"></script>
		<script type="module">
		import '@polymer/iron-demo-helpers/demo-snippet.js';
		import '@polymer/iron-demo-helpers/demo-pages-shared-styles.js';
		import '../paper-checkbox.js';
		</script>
		</head>
		<body unresolved>
		<!-- FIXME(polymer-modulizer):
		These imperative modules that innerHTML your HTML are
		a hacky way to be sure that any mixins in included style
		modules are ready before any elements that reference them are
		instantiated, otherwise the CSS @apply mixin polyfill won't be
		able to expand the underlying CSS custom properties.
		See: https://github.com/Polymer/polymer-modulizer/issues/154
		-->
		<script type="module">
		const $_documentContainer = document.createElement('template');
		import {html} from '@polymer/polymer/lib/utils/html-tag.js';
		const template = html`
		<custom-style>
		<style is="custom-style" include="demo-pages-shared-styles">
		paper-checkbox {
		display: block;
		margin-right: 24px;
		}

		$_documentContainer.innerHTML = `<custom-style>
		<style is="custom-style" include="demo-pages-shared-styles">
		paper-checkbox {
		display: block;
		margin-right: 24px;
		}
		demo-snippet {
		margin-bottom: 40px;
		}
		.vertical-section-container {
		max-width: 550px;
		}
		</style>
		</custom-style>
		`;
		document.body.appendChild(template.content);
		</script>

		demo-snippet {
		margin-bottom: 40px;
		}
		.vertical-section-container {
		max-width: 550px;
		}
		</style>
		</custom-style>`;

		document.body.appendChild($_documentContainer.content);
		</script>

		<script type="module">
		const $_documentContainer = document.createElement('template');

		$_documentContainer.innerHTML = `<div class="vertical-section-container centered">
		<div class="vertical-section-container centered">
		<h3>Checkboxes can be checked or unchecked, or disabled entirely</h3>
		@@ -64,4 +55,4 @@ <demo-snippet class="centered-demo">
		<paper-checkbox>Checkbox</paper-checkbox>
		<paper-checkbox checked="">Checkbox</paper-checkbox>
		<paper-checkbox disabled="">Disabled</paper-checkbox>
		<paper-checkbox checked>Checkbox</paper-checkbox>
		<paper-checkbox disabled>Disabled</paper-checkbox>
		</template>
		@@ -73,3 +64,3 @@ </demo-snippet>
		<template>
		<paper-checkbox noink="">Checkbox</paper-checkbox>
		<paper-checkbox noink>Checkbox</paper-checkbox>
		</template>
		@@ -134,3 +125,3 @@ </demo-snippet>
		</paper-checkbox>
		<paper-checkbox checked="" class="green">
		<paper-checkbox checked class="green">
		<span class="title">Checkbox</span>
		@@ -146,7 +137,4 @@ <span class="subtitle">
		</demo-snippet>
		</div>`;

		document.body.appendChild($_documentContainer.content);
		</script>
		</div>
		</body>
		</html>

+13

-21

package.json

		@@ -18,24 +18,16 @@ {
		"devDependencies": {
		"@polymer/gen-typescript-declarations": "^1.2.0",
		"bower": "^1.8.0",
		"webmat": "^0.2.0",
		"@webcomponents/webcomponentsjs": "^2.0.0",
		"wct-browser-legacy": "^1.0.1",
		"@polymer/iron-component-page": "^3.0.0-pre.21",
		"@polymer/iron-demo-helpers": "^3.0.0-pre.21",
		"@polymer/iron-flex-layout": "^3.0.0-pre.21",
		"@polymer/iron-test-helpers": "^3.0.0-pre.21"
		"@polymer/iron-demo-helpers": "^3.0.0-pre.20",
		"@polymer/iron-flex-layout": "^3.0.0-pre.20",
		"@polymer/iron-test-helpers": "^3.0.0-pre.20",
		"@polymer/gen-typescript-declarations": "^1.5.0"
		},
		"scripts": {
		"update-types": "bower install && gen-typescript-declarations --deleteExisting --outDir .",
		"format": "webmat && npm run update-types"
		"format": "webmat",
		"generate-types": "gen-typescript-declarations --deleteExisting --outDir .",
		"prepack": "npm run generate-types"
		},
		"version": "3.0.0-pre.21",
		"resolutions": {
		"inherits": "2.0.3",
		"samsam": "1.1.3",
		"supports-color": "3.1.2",
		"type-detect": "1.0.0",
		"@webcomponents/webcomponentsjs": "2.0.0-beta.2"
		},
		"version": "3.0.0-pre.22",
		"main": "paper-checkbox.js",
		@@ -45,8 +37,8 @@ "author": "The Polymer Authors",
		"@polymer/polymer": "^3.0.0",
		"@polymer/iron-checked-element-behavior": "^3.0.0-pre.21",
		"@polymer/paper-behaviors": "^3.0.0-pre.21",
		"@polymer/paper-ripple": "^3.0.0-pre.21",
		"@polymer/paper-styles": "^3.0.0-pre.21",
		"@polymer/iron-a11y-keys-behavior": "^3.0.0-pre.21"
		"@polymer/iron-checked-element-behavior": "^3.0.0-pre.20",
		"@polymer/paper-behaviors": "^3.0.0-pre.20",
		"@polymer/paper-ripple": "^3.0.0-pre.20",
		"@polymer/paper-styles": "^3.0.0-pre.20",
		"@polymer/iron-a11y-keys-behavior": "^3.0.0-pre.20"
		}
		}

+194

-203

paper-checkbox.js

		@@ -10,244 +10,235 @@ /**
		*/
		/**
		Material design: [Checkbox](https://www.google.com/design/spec/components/selection-controls.html#selection-controls-checkbox)
		import '@polymer/polymer/polymer-legacy.js';
		import '@polymer/paper-styles/default-theme.js';

		`paper-checkbox` is a button that can be either checked or unchecked. User
		can tap the checkbox to check or uncheck it. Usually you use checkboxes
		to allow user to select multiple options from a set. If you have a single
		ON/OFF option, avoid using a single checkbox and use `paper-toggle-button`
		instead.
		import {PaperCheckedElementBehavior} from '@polymer/paper-behaviors/paper-checked-element-behavior.js';
		import {PaperInkyFocusBehaviorImpl} from '@polymer/paper-behaviors/paper-inky-focus-behavior.js';
		import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js';
		import {html} from '@polymer/polymer/lib/utils/html-tag.js';
		import {afterNextRender} from '@polymer/polymer/lib/utils/render-status.js';

		Example:
		const template = html`<style>
		:host {
		display: inline-block;
		white-space: nowrap;
		cursor: pointer;
		--calculated-paper-checkbox-size: var(--paper-checkbox-size, 18px);
		/* -1px is a sentinel for the default and is replaced in \`attached\`. */
		--calculated-paper-checkbox-ink-size: var(--paper-checkbox-ink-size, -1px);
		@apply --paper-font-common-base;
		line-height: 0;
		-webkit-tap-highlight-color: transparent;
		}

		<paper-checkbox>label</paper-checkbox>
		:host([hidden]) {
		display: none !important;
		}

		<paper-checkbox checked> label</paper-checkbox>
		:host(:focus) {
		outline: none;
		}

		### Styling
		.hidden {
		display: none;
		}

		The following custom properties and mixins are available for styling:
		#checkboxContainer {
		display: inline-block;
		position: relative;
		width: var(--calculated-paper-checkbox-size);
		height: var(--calculated-paper-checkbox-size);
		min-width: var(--calculated-paper-checkbox-size);
		margin: var(--paper-checkbox-margin, initial);
		vertical-align: var(--paper-checkbox-vertical-align, middle);
		background-color: var(--paper-checkbox-unchecked-background-color, transparent);
		}

		Custom property \| Description \| Default
		----------------\|-------------\|----------
		`--paper-checkbox-unchecked-background-color` \| Checkbox background color when the input is not checked \| `transparent`
		`--paper-checkbox-unchecked-color` \| Checkbox border color when the input is not checked \| `--primary-text-color`
		`--paper-checkbox-unchecked-ink-color` \| Selected/focus ripple color when the input is not checked \| `--primary-text-color`
		`--paper-checkbox-checked-color` \| Checkbox color when the input is checked \| `--primary-color`
		`--paper-checkbox-checked-ink-color` \| Selected/focus ripple color when the input is checked \| `--primary-color`
		`--paper-checkbox-checkmark-color` \| Checkmark color \| `white`
		`--paper-checkbox-label-color` \| Label color \| `--primary-text-color`
		`--paper-checkbox-label-checked-color` \| Label color when the input is checked \| `--paper-checkbox-label-color`
		`--paper-checkbox-label-spacing` \| Spacing between the label and the checkbox \| `8px`
		`--paper-checkbox-label` \| Mixin applied to the label \| `{}`
		`--paper-checkbox-label-checked` \| Mixin applied to the label when the input is checked \| `{}`
		`--paper-checkbox-error-color` \| Checkbox color when invalid \| `--error-color`
		`--paper-checkbox-size` \| Size of the checkbox \| `18px`
		`--paper-checkbox-ink-size` \| Size of the ripple \| `48px`
		`--paper-checkbox-margin` \| Margin around the checkbox container \| `initial`
		`--paper-checkbox-vertical-align` \| Vertical alignment of the checkbox container \| `middle`
		#ink {
		position: absolute;

		This element applies the mixin `--paper-font-common-base` but does not import `paper-styles/typography.html`.
		In order to apply the `Roboto` font to this element, make sure you've imported `paper-styles/typography.html`.
		/* Center the ripple in the checkbox by negative offsetting it by
		* (inkWidth - rippleWidth) / 2 */
		top: calc(0px - (var(--calculated-paper-checkbox-ink-size) - var(--calculated-paper-checkbox-size)) / 2);
		left: calc(0px - (var(--calculated-paper-checkbox-ink-size) - var(--calculated-paper-checkbox-size)) / 2);
		width: var(--calculated-paper-checkbox-ink-size);
		height: var(--calculated-paper-checkbox-ink-size);
		color: var(--paper-checkbox-unchecked-ink-color, var(--primary-text-color));
		opacity: 0.6;
		pointer-events: none;
		}

		@demo demo/index.html
		*/
		/*
		FIXME(polymer-modulizer): the above comments were extracted
		from HTML and may be out of place here. Review them and
		then delete this comment!
		*/
		import '@polymer/polymer/polymer-legacy.js';
		#ink:dir(rtl) {
		right: calc(0px - (var(--calculated-paper-checkbox-ink-size) - var(--calculated-paper-checkbox-size)) / 2);
		left: auto;
		}

		import '@polymer/paper-styles/default-theme.js';
		import { PaperCheckedElementBehavior } from '@polymer/paper-behaviors/paper-checked-element-behavior.js';
		import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
		import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
		import { PaperInkyFocusBehaviorImpl } from '@polymer/paper-behaviors/paper-inky-focus-behavior.js';
		const $_documentContainer = document.createElement('template');
		$_documentContainer.setAttribute('style', 'display: none;');
		#ink[checked] {
		color: var(--paper-checkbox-checked-ink-color, var(--primary-color));
		}

		$_documentContainer.innerHTML = `<dom-module id="paper-checkbox">
		<template strip-whitespace="">
		<style>
		:host {
		display: inline-block;
		white-space: nowrap;
		cursor: pointer;
		--calculated-paper-checkbox-size: var(--paper-checkbox-size, 18px);
		/* -1px is a sentinel for the default and is replaced in \`attached\`. */
		--calculated-paper-checkbox-ink-size: var(--paper-checkbox-ink-size, -1px);
		@apply --paper-font-common-base;
		line-height: 0;
		-webkit-tap-highlight-color: transparent;
		}
		#checkbox {
		position: relative;
		box-sizing: border-box;
		height: 100%;
		border: solid 2px;
		border-color: var(--paper-checkbox-unchecked-color, var(--primary-text-color));
		border-radius: 2px;
		pointer-events: none;
		-webkit-transition: background-color 140ms, border-color 140ms;
		transition: background-color 140ms, border-color 140ms;
		}

		:host([hidden]) {
		display: none !important;
		}
		/* checkbox checked animations */
		#checkbox.checked #checkmark {
		-webkit-animation: checkmark-expand 140ms ease-out forwards;
		animation: checkmark-expand 140ms ease-out forwards;
		}

		:host(:focus) {
		outline: none;
		}
		@-webkit-keyframes checkmark-expand {
		0% {
		-webkit-transform: scale(0, 0) rotate(45deg);
		}
		100% {
		-webkit-transform: scale(1, 1) rotate(45deg);
		}
		}

		.hidden {
		display: none;
		}
		@keyframes checkmark-expand {
		0% {
		transform: scale(0, 0) rotate(45deg);
		}
		100% {
		transform: scale(1, 1) rotate(45deg);
		}
		}

		#checkboxContainer {
		display: inline-block;
		position: relative;
		width: var(--calculated-paper-checkbox-size);
		height: var(--calculated-paper-checkbox-size);
		min-width: var(--calculated-paper-checkbox-size);
		margin: var(--paper-checkbox-margin, initial);
		vertical-align: var(--paper-checkbox-vertical-align, middle);
		background-color: var(--paper-checkbox-unchecked-background-color, transparent);
		}
		#checkbox.checked {
		background-color: var(--paper-checkbox-checked-color, var(--primary-color));
		border-color: var(--paper-checkbox-checked-color, var(--primary-color));
		}

		#ink {
		position: absolute;
		#checkmark {
		position: absolute;
		width: 36%;
		height: 70%;
		border-style: solid;
		border-top: none;
		border-left: none;
		border-right-width: calc(2/15 * var(--calculated-paper-checkbox-size));
		border-bottom-width: calc(2/15 * var(--calculated-paper-checkbox-size));
		border-color: var(--paper-checkbox-checkmark-color, white);
		-webkit-transform-origin: 97% 86%;
		transform-origin: 97% 86%;
		box-sizing: content-box; /* protect against page-level box-sizing */
		}

		/* Center the ripple in the checkbox by negative offsetting it by
		* (inkWidth - rippleWidth) / 2 */
		top: calc(0px - (var(--calculated-paper-checkbox-ink-size) - var(--calculated-paper-checkbox-size)) / 2);
		left: calc(0px - (var(--calculated-paper-checkbox-ink-size) - var(--calculated-paper-checkbox-size)) / 2);
		width: var(--calculated-paper-checkbox-ink-size);
		height: var(--calculated-paper-checkbox-ink-size);
		color: var(--paper-checkbox-unchecked-ink-color, var(--primary-text-color));
		opacity: 0.6;
		pointer-events: none;
		}
		#checkmark:dir(rtl) {
		-webkit-transform-origin: 50% 14%;
		transform-origin: 50% 14%;
		}

		#ink:dir(rtl) {
		right: calc(0px - (var(--calculated-paper-checkbox-ink-size) - var(--calculated-paper-checkbox-size)) / 2);
		left: auto;
		}
		/* label */
		#checkboxLabel {
		position: relative;
		display: inline-block;
		vertical-align: middle;
		padding-left: var(--paper-checkbox-label-spacing, 8px);
		white-space: normal;
		line-height: normal;
		color: var(--paper-checkbox-label-color, var(--primary-text-color));
		@apply --paper-checkbox-label;
		}

		#ink[checked] {
		color: var(--paper-checkbox-checked-ink-color, var(--primary-color));
		}
		:host([checked]) #checkboxLabel {
		color: var(--paper-checkbox-label-checked-color, var(--paper-checkbox-label-color, var(--primary-text-color)));
		@apply --paper-checkbox-label-checked;
		}

		#checkbox {
		position: relative;
		box-sizing: border-box;
		height: 100%;
		border: solid 2px;
		border-color: var(--paper-checkbox-unchecked-color, var(--primary-text-color));
		border-radius: 2px;
		pointer-events: none;
		-webkit-transition: background-color 140ms, border-color 140ms;
		transition: background-color 140ms, border-color 140ms;
		}
		#checkboxLabel:dir(rtl) {
		padding-right: var(--paper-checkbox-label-spacing, 8px);
		padding-left: 0;
		}

		/* checkbox checked animations */
		#checkbox.checked #checkmark {
		-webkit-animation: checkmark-expand 140ms ease-out forwards;
		animation: checkmark-expand 140ms ease-out forwards;
		}
		#checkboxLabel[hidden] {
		display: none;
		}

		@-webkit-keyframes checkmark-expand {
		0% {
		-webkit-transform: scale(0, 0) rotate(45deg);
		}
		100% {
		-webkit-transform: scale(1, 1) rotate(45deg);
		}
		}
		/* disabled state */

		@keyframes checkmark-expand {
		0% {
		transform: scale(0, 0) rotate(45deg);
		}
		100% {
		transform: scale(1, 1) rotate(45deg);
		}
		}
		:host([disabled]) #checkbox {
		opacity: 0.5;
		border-color: var(--paper-checkbox-unchecked-color, var(--primary-text-color));
		}

		#checkbox.checked {
		background-color: var(--paper-checkbox-checked-color, var(--primary-color));
		border-color: var(--paper-checkbox-checked-color, var(--primary-color));
		}
		:host([disabled][checked]) #checkbox {
		background-color: var(--paper-checkbox-unchecked-color, var(--primary-text-color));
		opacity: 0.5;
		}

		#checkmark {
		position: absolute;
		width: 36%;
		height: 70%;
		border-style: solid;
		border-top: none;
		border-left: none;
		border-right-width: calc(2/15 * var(--calculated-paper-checkbox-size));
		border-bottom-width: calc(2/15 * var(--calculated-paper-checkbox-size));
		border-color: var(--paper-checkbox-checkmark-color, white);
		-webkit-transform-origin: 97% 86%;
		transform-origin: 97% 86%;
		box-sizing: content-box; /* protect against page-level box-sizing */
		}
		:host([disabled]) #checkboxLabel {
		opacity: 0.65;
		}

		#checkmark:dir(rtl) {
		-webkit-transform-origin: 50% 14%;
		transform-origin: 50% 14%;
		}
		/* invalid state */
		#checkbox.invalid:not(.checked) {
		border-color: var(--paper-checkbox-error-color, var(--error-color));
		}
		</style>

		/* label */
		#checkboxLabel {
		position: relative;
		display: inline-block;
		vertical-align: middle;
		padding-left: var(--paper-checkbox-label-spacing, 8px);
		white-space: normal;
		line-height: normal;
		color: var(--paper-checkbox-label-color, var(--primary-text-color));
		@apply --paper-checkbox-label;
		}
		<div id="checkboxContainer">
		<div id="checkbox" class\$="[[_computeCheckboxClass(checked, invalid)]]">
		<div id="checkmark" class\$="[[_computeCheckmarkClass(checked)]]"></div>
		</div>
		</div>

		:host([checked]) #checkboxLabel {
		color: var(--paper-checkbox-label-checked-color, var(--paper-checkbox-label-color, var(--primary-text-color)));
		@apply --paper-checkbox-label-checked;
		}
		<div id="checkboxLabel"><slot></slot></div>`;
		template.setAttribute('strip-whitespace', '');

		#checkboxLabel:dir(rtl) {
		padding-right: var(--paper-checkbox-label-spacing, 8px);
		padding-left: 0;
		}
		/**
		Material design:
		[Checkbox](https://www.google.com/design/spec/components/selection-controls.html#selection-controls-checkbox)

		#checkboxLabel[hidden] {
		display: none;
		}
		`paper-checkbox` is a button that can be either checked or unchecked. User can
		tap the checkbox to check or uncheck it. Usually you use checkboxes to allow
		user to select multiple options from a set. If you have a single ON/OFF option,
		avoid using a single checkbox and use `paper-toggle-button` instead.

		/* disabled state */
		Example:

		:host([disabled]) #checkbox {
		opacity: 0.5;
		border-color: var(--paper-checkbox-unchecked-color, var(--primary-text-color));
		}
		<paper-checkbox>label</paper-checkbox>

		:host([disabled][checked]) #checkbox {
		background-color: var(--paper-checkbox-unchecked-color, var(--primary-text-color));
		opacity: 0.5;
		}
		<paper-checkbox checked> label</paper-checkbox>

		:host([disabled]) #checkboxLabel {
		opacity: 0.65;
		}
		### Styling

		/* invalid state */
		#checkbox.invalid:not(.checked) {
		border-color: var(--paper-checkbox-error-color, var(--error-color));
		}
		</style>
		The following custom properties and mixins are available for styling:

		<div id="checkboxContainer">
		<div id="checkbox" class\$="[[_computeCheckboxClass(checked, invalid)]]">
		<div id="checkmark" class\$="[[_computeCheckmarkClass(checked)]]"></div>
		</div>
		</div>
		Custom property \| Description \| Default
		----------------\|-------------\|----------
		`--paper-checkbox-unchecked-background-color` \| Checkbox background color when the input is not checked \| `transparent`
		`--paper-checkbox-unchecked-color` \| Checkbox border color when the input is not checked \| `--primary-text-color`
		`--paper-checkbox-unchecked-ink-color` \| Selected/focus ripple color when the input is not checked \| `--primary-text-color`
		`--paper-checkbox-checked-color` \| Checkbox color when the input is checked \| `--primary-color`
		`--paper-checkbox-checked-ink-color` \| Selected/focus ripple color when the input is checked \| `--primary-color`
		`--paper-checkbox-checkmark-color` \| Checkmark color \| `white`
		`--paper-checkbox-label-color` \| Label color \| `--primary-text-color`
		`--paper-checkbox-label-checked-color` \| Label color when the input is checked \| `--paper-checkbox-label-color`
		`--paper-checkbox-label-spacing` \| Spacing between the label and the checkbox \| `8px`
		`--paper-checkbox-label` \| Mixin applied to the label \| `{}`
		`--paper-checkbox-label-checked` \| Mixin applied to the label when the input is checked \| `{}`
		`--paper-checkbox-error-color` \| Checkbox color when invalid \| `--error-color`
		`--paper-checkbox-size` \| Size of the checkbox \| `18px`
		`--paper-checkbox-ink-size` \| Size of the ripple \| `48px`
		`--paper-checkbox-margin` \| Margin around the checkbox container \| `initial`
		`--paper-checkbox-vertical-align` \| Vertical alignment of the checkbox container \| `middle`

		<div id="checkboxLabel"><slot></slot></div>
		</template>
		This element applies the mixin `--paper-font-common-base` but does not import
		`paper-styles/typography.html`. In order to apply the `Roboto` font to this
		element, make sure you've imported `paper-styles/typography.html`.


		</dom-module>`;
		@demo demo/index.html
		*/
		Polymer({
		_template: template,

		document.head.appendChild($_documentContainer.content);
		Polymer({
		is: 'paper-checkbox',
		@@ -254,0 +245,0 @@

+77

-54

README.md

		@@ -0,63 +1,86 @@
		[![Published on NPM](https://img.shields.io/npm/v/@polymer/paper-checkbox.svg)](https://www.npmjs.com/package/@polymer/paper-checkbox)
		[![Build status](https://travis-ci.org/PolymerElements/paper-checkbox.svg?branch=master)](https://travis-ci.org/PolymerElements/paper-checkbox)
		[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://webcomponents.org/element/@polymer/paper-checkbox)

		## <paper-checkbox>

		`paper-checkbox` is a [material design checkbox](https://www.google.com/design/spec/components/selection-controls.html#selection-controls-checkbox).
		User can tap the checkbox to check or uncheck it. Usually you use checkboxes
		to allow user to select multiple options from a set. If you have a single
		ON/OFF option, avoid using a single checkbox and use `paper-toggle-button`
		instead.
		`paper-checkbox` is a button that can be either checked or unchecked. User can
		tap the checkbox to check or uncheck it. Usually you use checkboxes to allow
		user to select multiple options from a set. If you have a single ON/OFF option,
		avoid using a single checkbox and use `paper-toggle-button` instead.

		Example:
		<!---
		See: [Documentation](https://www.webcomponents.org/element/@polymer/paper-checkbox),
		[Demo](https://www.webcomponents.org/element/@polymer/paper-checkbox/demo/demo/index.html).

		## Usage

		### Installation

		```
		<custom-element-demo>
		<template>
		<script src="../webcomponentsjs/webcomponents-lite.js"></script>
		<link rel="import" href="paper-checkbox.html">
		<style is="custom-style">
		paper-checkbox {
		font-family: 'Roboto', sans-serif;
		margin: 24px;
		}

		paper-checkbox:first-child {
		--primary-color: #ff5722;
		}

		paper-checkbox.styled {
		align-self: center;
		border: 1px solid var(--paper-green-200);
		padding: 8px 16px;
		--paper-checkbox-checked-color: var(--paper-green-500);
		--paper-checkbox-checked-ink-color: var(--paper-green-500);
		--paper-checkbox-unchecked-color: var(--paper-green-900);
		--paper-checkbox-unchecked-ink-color: var(--paper-green-900);
		--paper-checkbox-label-color: var(--paper-green-500);
		--paper-checkbox-label-spacing: 0;
		--paper-checkbox-margin: 8px 16px 8px 0;
		--paper-checkbox-vertical-align: top;
		}
		npm install --save @polymer/paper-checkbox
		```

		paper-checkbox .subtitle {
		display: block;
		font-size: 0.8em;
		margin-top: 2px;
		max-width: 150px;
		}
		</style>
		<next-code-block></next-code-block>
		</template>
		</custom-element-demo>
		```
		-->
		### In an HTML file

		```html
		<paper-checkbox checked>Checked</paper-checkbox>
		<paper-checkbox class="styled">
		Checkbox
		<span class="subtitle">
		With a longer label
		</span>
		</paper-checkbox>
		<paper-checkbox disabled>Disabled</paper-checkbox>
		<html>
		<head>
		<script type="module">
		import '@polymer/paper-checkbox/paper-checkbox.js';
		</script>
		</head>
		<body>
		<paper-checkbox>Unchecked</paper-checkbox>
		<paper-checkbox checked>Checked</paper-checkbox>
		<paper-checkbox disabled>Disabled</paper-checkbox>
		</body>
		</html>
		```

		### In a Polymer 3 element

		```js
		import {PolymerElement} from '@polymer/polymer/polymer-element.js';
		import {html} from '@polymer/polymer/lib/utils/html-tag.js';

		import '@polymer/paper-checkbox/paper-checkbox.js';

		class ExampleElement extends PolymerElement {
		static get template() {
		return html`
		<paper-checkbox>Unchecked</paper-checkbox>
		<paper-checkbox checked>Checked</paper-checkbox>
		<paper-checkbox disabled>Disabled</paper-checkbox>
		`;
		}
		}

		customElements.define('example-element', ExampleElement);
		```

		## Contributing

		If you want to send a PR to this element, here are the instructions for running
		the tests and demo locally:

		### Installation

		```sh
		git clone https://github.com/PolymerElements/paper-checkbox
		cd paper-checkbox
		npm install
		npm install -g polymer-cli
		```

		### Running the demo locally

		```sh
		polymer serve --npm
		open http://127.0.0.1:<port>/demo/
		```

		### Running the tests

		```sh
		polymer test --npm
		```

.github/CODEOWNERS

Sorry, the diff of this file is not supported yet

-33

.github/ISSUE_TEMPLATE.md

		<!-- Instructions: https://github.com/PolymerElements/paper-checkbox/CONTRIBUTING.md#filing-issues -->
		### Description
		<!-- Example: The `paper-foo` element causes the page to turn pink when clicked. -->

		### Expected outcome

		<!-- Example: The page stays the same color. -->

		### Actual outcome

		<!-- Example: The page turns pink. -->

		### Live Demo
		<!-- Example: https://jsbin.com/cagaye/edit?html,output -->

		### Steps to reproduce

		<!-- Example
		1. Put a `paper-foo` element in the page.
		2. Open the page in a web browser.
		3. Click the `paper-foo` element.
		-->

		### Browsers Affected
		<!-- Check all that apply -->
		- [ ] Chrome
		- [ ] Firefox
		- [ ] Safari 9
		- [ ] Safari 8
		- [ ] Safari 7
		- [ ] Edge
		- [ ] IE 11
		- [ ] IE 10

-20

.travis.yml

		language: node_js
		sudo: required
		before_script: npm install -g polymer-cli
		env:
		global:
		- secure: yp6I0VbSey7lRWOKQQkBU7CBvQd0hN0TZiZnbo8fzWWfOjANeDICCa/xyY2+ZM0TU5mxvehTg38mjkpRPkMm4UrsE5og49GBFqaDLk9U+Bp7fP37tDtWfT3l4VgpzSwKAdIEh8EcmUPblZxQxJlH6+HHImnPCWSKy9YvVEGirzY=
		- secure: XjG814z1IZBtPOsZBknOcJaqSJHjF7jWzAw1Cl9sKcmHPKSJW2a0gILdpXx2Au0KGzLzn7Z6/p6u2+rv4tbYWBq21EWgbHmn3iAF4pAZt6DgGqJpfCsNdyuKUYN8ZfLFbK3GC/js6IJDGV+zq5HxtZmwZh+eQ85bbx2xNyRKZis=
		node_js: stable
		addons:
		firefox: latest
		apt:
		sources:
		- google-chrome
		packages:
		- google-chrome-stable
		script:
		- xvfb-run polymer test --module-resolution=node --npm
		- 'if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then polymer test --module-resolution=node --npm -s ''default''; fi'
		dist: trusty

-30

index.html

		<!doctype html>
		<!--
		@license
		Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
		This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
		The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
		The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
		Code distributed by Google as part of the polymer project is also
		subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
		-->
		<html>
		<head>

		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">

		<title>paper-checkbox</title>

		<script src="../../@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>

		<script type="module" src="../polymer/polymer-legacy.js"></script>
		<script type="module" src="../iron-component-page/iron-component-page.js"></script>

		</head>
		<body>

		<iron-component-page></iron-component-page>

		</body>
		</html>

-14

test/.eslintrc.json

		{
		"env": {
		"mocha": true
		},
		"globals": {
		"assert": true,
		"sinon": true,
		"WCT": true,
		"fixture": true,
		"Polymer": true,
		"MockInteractions": true,
		"a11ySuite": true
		}
		}

-387

test/basic.html

		<!doctype html>
		<!--
		@license
		Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
		This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
		The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
		The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
		Code distributed by Google as part of the polymer project is also
		subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
		-->
		<html>
		<head>
		<meta charset="UTF-8">
		<title>paper-checkbox basic tests</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

		<script src="../../../@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
		<script src="../../../wct-browser-legacy/browser.js"></script>
		<script src="../../iron-test-helpers/mock-interactions.js" type="module"></script>

		<script type="module" src="../paper-checkbox.js"></script>
		</head>
		<body>
		<custom-style>
		<style is="custom-style">
		paper-checkbox.no-label-spacing {
		--paper-checkbox-label-spacing: 0;
		}

		paper-checkbox.tiny {
		--paper-checkbox-size: 5px;
		}

		paper-checkbox.medium {
		--paper-checkbox-size: 37px;
		}

		paper-checkbox.giant {
		--paper-checkbox-size: 50px;
		}

		paper-checkbox.enormous {
		--paper-checkbox-size: 71px;
		}

		paper-checkbox.tiny-other-units {
		--paper-checkbox-size: 0.5rem;
		}

		paper-checkbox.medium-other-units {
		--paper-checkbox-size: 1.25em;
		}

		paper-checkbox.giant-other-units {
		--paper-checkbox-size: 2.5in;
		}

		paper-checkbox.enormous-other-units {
		--paper-checkbox-size: 25vmin;
		}

		paper-checkbox.custom-ink-size {
		--paper-checkbox-size: 25px;
		--paper-checkbox-ink-size: 30px;
		}

		paper-checkbox.zero-size {
		--paper-checkbox-size: 0;
		}

		paper-checkbox.large-line-height {
		line-height: 3;
		}

		paper-checkbox.small-line-height {
		line-height: 0.25;
		}
		</style>
		</custom-style>

		<test-fixture id="NoLabel">
		<template>
		<paper-checkbox id="check1"></paper-checkbox>
		</template>
		</test-fixture>

		<test-fixture id="WithLabel">
		<template>
		<paper-checkbox id="check2">Batman</paper-checkbox>
		</template>
		</test-fixture>

		<test-fixture id="AriaLabel">
		<template>
		<paper-checkbox id="check3" aria-label="Batman">Robin</paper-checkbox>
		</template>
		</test-fixture>

		<test-fixture id="WithDifferentSizes">
		<template>
		<paper-checkbox class="no-label-spacing"></paper-checkbox>
		<paper-checkbox class="no-label-spacing giant"></paper-checkbox>
		<paper-checkbox class="no-label-spacing tiny"></paper-checkbox>
		</template>
		</test-fixture>

		<test-fixture id="WithDifferentSizes2">
		<template>
		<paper-checkbox class="tiny"></paper-checkbox>
		<paper-checkbox></paper-checkbox>
		<paper-checkbox class="medium"></paper-checkbox>
		<paper-checkbox class="giant"></paper-checkbox>
		<paper-checkbox class="enormous"></paper-checkbox>
		</template>
		</test-fixture>

		<test-fixture id="WithNonPxSizes">
		<template>
		<paper-checkbox class="tiny-other-units"></paper-checkbox>
		<paper-checkbox class="medium-other-units"></paper-checkbox>
		<paper-checkbox class="giant-other-units"></paper-checkbox>
		<paper-checkbox class="enormous-other-units"></paper-checkbox>
		</template>
		</test-fixture>

		<test-fixture id="CustomInkSize">
		<template>
		<paper-checkbox class="custom-ink-size"></paper-checkbox>
		</template>
		</test-fixture>

		<test-fixture id="WithLineHeight">
		<template>
		<paper-checkbox class="large-line-height">Checkbox</paper-checkbox>
		<paper-checkbox class="small-line-height">Checkbox</paper-checkbox>
		</template>
		</test-fixture>

		<test-fixture id="WithZeroSize">
		<template>
		<paper-checkbox class="zero-size">Checkbox</paper-checkbox>
		</template>
		</test-fixture>

		<script type="module">
		import '../paper-checkbox.js';
		import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
		import { a11ySuite } from 'wct-browser-legacy/a11ySuite.js';
		function afterNextRenderAll(elements, callback) {
		var renderedCount = 0;

		function elementRendered() {
		renderedCount++;
		if (renderedCount === elements.length) {
		callback();
		}
		}

		elements.forEach(function(element) {
		afterNextRender(element, elementRendered);
		});
		}

		suite('defaults', function() {
		var c1;

		setup(function() {
		c1 = fixture('NoLabel');
		});

		test('check checkbox via click', function(done) {
		c1.addEventListener('click', function() {
		assert.isTrue(c1.getAttribute('aria-checked') == 'true');
		assert.isTrue(c1.checked);
		done();
		});
		MockInteractions.tap(c1);
		});

		test('toggle checkbox via click', function(done) {
		c1.checked = true;
		c1.addEventListener('click', function() {
		assert.isFalse(c1.getAttribute('aria-checked') != 'false');
		assert.isFalse(c1.checked);
		done();
		});
		MockInteractions.tap(c1);
		});

		test('disabled checkbox cannot be clicked', function(done) {
		c1.disabled = true;
		c1.checked = true;
		MockInteractions.tap(c1);
		setTimeout(function() {
		assert.isTrue(c1.getAttribute('aria-checked') == 'true');
		assert.isTrue(c1.checked);
		done();
		}, 1);
		});

		test('checkbox can be validated', function() {
		c1.required = true;
		assert.isFalse(c1.validate());

		c1.checked = true;
		assert.isTrue(c1.validate());
		});

		test('disabled checkbox is always valid', function() {
		c1.disabled = true;
		c1.required = true;
		assert.isTrue(c1.validate());

		c1.checked = true;
		assert.isTrue(c1.validate());
		});

		test('checkbox can check sizes', function(done) {
		var checkboxes = fixture('WithDifferentSizes');
		// Wait for all checkboxes to set their default ink sizes, if any.
		// See polymer#4009 for more details.
		afterNextRenderAll(checkboxes, function() {
		var normal = checkboxes[0].getBoundingClientRect();
		var giant = checkboxes[1].getBoundingClientRect();
		var tiny = checkboxes[2].getBoundingClientRect();

		assert.isTrue(5 === tiny.height);
		assert.isTrue(tiny.height < normal.height);
		assert.isTrue(normal.height < giant.height);
		assert.isTrue(giant.height <= 50);

		assert.isTrue(5 === tiny.width);
		assert.isTrue(tiny.width < normal.width);
		assert.isTrue(normal.width < giant.width);
		assert.isTrue(giant.width === 50);
		done();
		});
		});

		suite('checkbox line-height', function() {
		var large;
		var small;

		setup(function() {
		var checkboxes = fixture('WithLineHeight');
		large = checkboxes[0];
		small = checkboxes[1];
		});

		test('checkboxes with >1 line-height have an equal height', function() {
		var largeRect = large.getBoundingClientRect();
		var largeStyle = getComputedStyle(large);

		assert.isTrue(largeRect.height === 3 * parseFloat(largeStyle.fontSize));
		});

		test('checkbox with <1 line-height are at least 1em tall', function() {
		var smallRect = small.getBoundingClientRect();
		var smallStyle = getComputedStyle(small);

		assert.isTrue(smallRect.height >= 1 * parseFloat(smallStyle.fontSize));
		});
		});

		suite('ink size', function() {
		function cssLengthToPx(cssLengthText) {
		var div = document.createElement('div');
		div.style.width = cssLengthText;
		document.body.appendChild(div);
		var lengthPx = div.getBoundingClientRect().width;
		document.body.removeChild(div);
		return lengthPx;
		}

		var checkboxes;

		setup(function(done) {
		checkboxes = fixture('WithDifferentSizes2');
		// Wait for all checkboxes to set their default ink sizes, if any.
		// See polymer#4009 for more details.
		afterNextRenderAll(checkboxes, done);
		});

		test('`--paper-checkbox-ink-size` sets the ink size', function() {
		var checkbox = fixture('CustomInkSize');
		assert.equal(
		checkbox.getComputedStyleValue('--calculated-paper-checkbox-size')
		.trim(),
		'25px');
		assert.equal(
		checkbox.getComputedStyleValue('--calculated-paper-checkbox-ink-size')
		.trim(),
		'30px');
		});

		test('ink sizes are near (8/3 * checkbox size) by default', function() {
		checkboxes.forEach(function(checkbox) {
		var size = cssLengthToPx(
		checkbox.getComputedStyleValue('--calculated-paper-checkbox-size'));
		var inkSize = cssLengthToPx(checkbox.getComputedStyleValue(
		'--calculated-paper-checkbox-ink-size'));
		assert.approximately(inkSize / size, 8 / 3, 0.1);
		});
		});

		test(
		'ink sizes are near (8/3 * checkbox size) when using non-px sizes',
		function(done) {
		var checkboxes = fixture('WithNonPxSizes');
		afterNextRenderAll(checkboxes, function() {
		checkboxes.forEach(function(checkbox) {
		var size = cssLengthToPx(checkbox.getComputedStyleValue(
		'--calculated-paper-checkbox-size'));
		var inkSize = cssLengthToPx(checkbox.getComputedStyleValue(
		'--calculated-paper-checkbox-ink-size'));
		assert.approximately(inkSize / size, 8 / 3, 0.1);
		});
		done();
		});
		});

		test('ink sizes are integers', function() {
		checkboxes.forEach(function(checkbox) {
		var inkSize = cssLengthToPx(checkbox.getComputedStyleValue(
		'--calculated-paper-checkbox-ink-size'));
		assert.equal(inkSize, Math.floor(inkSize));
		});
		});

		test(
		'ink size parity matches checkbox size parity (centers are aligned)',
		function() {
		checkboxes.forEach(function(checkbox) {
		var size = cssLengthToPx(checkbox.getComputedStyleValue(
		'--calculated-paper-checkbox-size'));
		var inkSize = cssLengthToPx(checkbox.getComputedStyleValue(
		'--calculated-paper-checkbox-ink-size'));
		assert.equal(size % 2, inkSize % 2);
		});
		});

		test(
		'checkboxes with size `0` do not throw when computing the ink size',
		function(done) {
		var checkbox = fixture('WithZeroSize');
		afterNextRenderAll([checkbox], function() {
		// Errors caught during afterNextRender callbacks, one of which is
		// used to compute the ink size from the checkbox size, are thrown
		// to a new task.
		setTimeout(function() {
		done();
		}, 1);
		});
		});
		});
		});

		suite('a11y', function() {
		var c1;
		var c2;

		setup(function() {
		c1 = fixture('NoLabel');
		c2 = fixture('WithLabel');
		});

		test('has aria role "checkbox"', function() {
		assert.isTrue(c1.getAttribute('role') == 'checkbox');
		assert.isTrue(c2.getAttribute('role') == 'checkbox');
		});

		test('checkbox with no label has no aria label', function() {
		assert.isTrue(!c1.getAttribute('aria-label'));
		});

		test('checkbox respects the user set aria-label', function() {
		var c = fixture('AriaLabel');
		assert.isTrue(c.getAttribute('aria-label') == 'Batman');
		});

		a11ySuite('NoLabel');
		a11ySuite('WithLabel');
		a11ySuite('AriaLabel');
		});
		</script>
		</body>
		</html>

-28

test/index.html

		<!DOCTYPE html><!--
		@license
		Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
		This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
		The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
		The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
		Code distributed by Google as part of the polymer project is also
		subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
		--><html><head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
		<title>paper-checkbox tests</title>
		<script src="../../../wct-browser-legacy/browser.js"></script>
		</head>
		<body>
		<script>
		WCT.loadSuites([
		'basic.html?dom=shadow',
		// To enable `useNativeCSSProperties`, the native Shadow DOM and lazy
		// registration flags must also be enabled.
		// https://github.com/Polymer/polymer/blob/ff6e884ef4f309d41491333860a8bc9c2f178696/src/lib/settings.html#L55
		'basic.html?dom=shadow&lazyRegister=true&useNativeCSSProperties=true',
		'basic.html?wc-shadydom=true&wc-ce=true'
		]);
		</script>


		</body></html>

@polymer/paper-checkbox - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Worsened metrics

Dependency changes