Big News: Socket Selected for OpenAI's Cybersecurity Grant Program.Details →
Socket
Book a DemoSign in
Socket
Book a DemoSign in

@polymer/iron-checked-element-behavior

Package Overview
Dependencies
Maintainers
9
Versions
32
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@polymer/iron-checked-element-behavior - npm Package Compare versions

Comparing version
3.0.0-pre.21
 to
3.0.0-pre.22
+67
iron-checked-element-behavior.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):
* iron-checked-element-behavior.js
*/
import {IronFormElementBehavior} from '@polymer/iron-form-element-behavior/iron-form-element-behavior.js';
import {IronValidatableBehavior} from '@polymer/iron-validatable-behavior/iron-validatable-behavior.js';
/**
* Use `IronCheckedElementBehavior` to implement a custom element that has a
* `checked` property, which can be used for validation if the element is also
* `required`. Element instances implementing this behavior will also be
* registered for use in an `iron-form` element.
*/
interface IronCheckedElementBehavior extends IronFormElementBehavior, IronValidatableBehavior {
/**
* Overriden from IronFormElementBehavior
*/
value: string|null|undefined;
/**
* Gets or sets the state, `true` is checked and `false` is unchecked.
*/
checked: boolean|null|undefined;
/**
* If true, the button toggles the active state with each tap or press
* of the spacebar.
*/
toggles: boolean|null|undefined;
/**
* Returns false if the element is required and not checked, and true
* otherwise.
*
* @param _value Ignored.
* @returns true if `required` is false or if `checked` is true.
*/
_getValidity(_value?: any): boolean;
created(): void;
/**
* Update the aria-required label when `required` is changed.
*/
_requiredChanged(): void;
/**
* Fire `iron-changed` when the checked state changes.
*/
_checkedChanged(): void;
/**
* Reset value to 'on' if it is set to `undefined`.
*/
_valueChanged(): void;
}
declare const IronCheckedElementBehavior: object;
export {IronCheckedElementBehavior};
+6
-3
demo/index.html

@@ -19,5 +19,8 @@ <!doctype html>

<script src="../../../@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
<script type="module" src="../../paper-styles/demo-pages.js"></script>
<script type="module" src="./simple-checkbox.js"></script>
<!-- Keep the version here synced with the version in `package.json`. -->
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@^2.0.0/webcomponents-loader.js"></script>
<script type="module">
import '@polymer/paper-styles/demo-pages.js';
import './simple-checkbox.js';
</script>
</head>

@@ -24,0 +27,0 @@ <body unresolved>

+13
-10
demo/simple-checkbox.js
/**
@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
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
*/
import '@polymer/polymer/polymer-legacy.js';
import '@polymer/paper-button/paper-button.js';
import '@polymer/paper-button/paper-button.js';
import { IronCheckedElementBehavior } from '../iron-checked-element-behavior.js';
import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js';
import {html} from '@polymer/polymer/lib/utils/html-tag.js';
import {IronCheckedElementBehavior} from '../iron-checked-element-behavior.js';
Polymer({

@@ -35,3 +38,3 @@ _template: html`

<span id="labelText">{{label}}</span>
<paper-button raised="" on-click="_onClick">validate</paper-button>
<paper-button raised on-click="_onClick">validate</paper-button>
`,

@@ -38,0 +41,0 @@ 

+15
-14
iron-checked-element-behavior.js
/**
@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
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
*/
import '@polymer/polymer/polymer-legacy.js';
import { IronValidatableBehavior } from '@polymer/iron-validatable-behavior/iron-validatable-behavior.js';
import { IronFormElementBehavior } from '@polymer/iron-form-element-behavior/iron-form-element-behavior.js';
import {IronFormElementBehavior} from '@polymer/iron-form-element-behavior/iron-form-element-behavior.js';
import {IronValidatableBehavior} from '@polymer/iron-validatable-behavior/iron-validatable-behavior.js';
/**
* Use `Polymer.IronCheckedElementBehavior` to implement a custom element
* that has a `checked` property, which can be used for validation if the
* element is also `required`. Element instances implementing this behavior
* will also be registered for use in an `iron-form` element.
* Use `IronCheckedElementBehavior` to implement a custom element that has a
* `checked` property, which can be used for validation if the element is also
* `required`. Element instances implementing this behavior will also be
* registered for use in an `iron-form` element.
*
* @demo demo/index.html
* @polymerBehavior Polymer.IronCheckedElementBehavior
* @polymerBehavior IronCheckedElementBehavior
*/

@@ -50,3 +51,3 @@ export const IronCheckedElementBehaviorImpl = {

/* Overriden from Polymer.IronFormElementBehavior */
/* Overriden from IronFormElementBehavior */
value: {type: String, value: 'on', observer: '_valueChanged'}

@@ -103,3 +104,3 @@ },

/** @polymerBehavior Polymer.IronCheckedElementBehavior */
/** @polymerBehavior */
export const IronCheckedElementBehavior = [

@@ -106,0 +107,0 @@ IronFormElementBehavior,

+12
-38
package.json

@@ -17,50 +17,24 @@ {

"devDependencies": {
"@polymer/gen-typescript-declarations": "^1.2.2",
"bower": "^1.8.0",
"webmat": "^0.2.0",
"@polymer/paper-styles": "^3.0.0-pre.21",
"@polymer/paper-button": "^3.0.0-pre.21",
"@polymer/iron-component-page": "^3.0.0-pre.21",
"@polymer/paper-button": "^3.0.0-pre.20",
"@polymer/paper-styles": "^3.0.0-pre.20",
"@webcomponents/webcomponentsjs": "^2.0.0",
"wct-browser-legacy": "^1.0.1",
"@webcomponents/webcomponentsjs": "^2.0.0"
"webmat": "^0.2.2",
"@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": "iron-checked-element-behavior.js",
"contributors": [
"T",
"h",
"e",
" ",
"P",
"o",
"l",
"y",
"m",
"e",
"r",
" ",
"A",
"u",
"t",
"h",
"o",
"r",
"s"
"The Polymer Authors"
],
"dependencies": {
"@polymer/polymer": "^3.0.0",
"@polymer/iron-validatable-behavior": "^3.0.0-pre.21",
"@polymer/iron-form-element-behavior": "^3.0.0-pre.21"
"@polymer/iron-validatable-behavior": "^3.0.0-pre.20",
"@polymer/iron-form-element-behavior": "^3.0.0-pre.20"
}
}
+80
-6
README.md

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

[![Published on NPM](https://img.shields.io/npm/v/@polymer/iron-checked-element-behavior.svg)](https://www.npmjs.com/package/@polymer/iron-checked-element-behavior)
[![Build status](https://travis-ci.org/PolymerElements/iron-checked-element-behavior.svg?branch=master)](https://travis-ci.org/PolymerElements/iron-checked-element-behavior)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://webcomponents.org/element/@polymer/iron-checked-element-behavior)
_[Demo and API docs](https://elements.polymer-project.org/elements/iron-checked-element-behavior)_
## IronCheckedElementBehavior
Use `IronCheckedElementBehavior` to implement a custom element that has a
`checked` property, which can be used for validation if the element is also
`required`. Element instances implementing this behavior will also be
registered for use in an `iron-form` element.
##Polymer.IronCheckedElementBehavior
See: [Documentation](https://www.webcomponents.org/element/@polymer/iron-checked-element-behavior),
[Demo](https://www.webcomponents.org/element/@polymer/iron-checked-element-behavior/demo/demo/index.html).
Use `Polymer.IronCheckedElementBehavior` to implement a custom element
that has a `checked` property, which can be used for validation if the
element is also `required`. Element instances implementing this behavior
will also be registered for use in an `iron-form` element.
## Usage
### Installation
```
npm install --save @polymer/iron-checked-element-behavior
```
### In a Polymer 3 element
```js
import {PolymerElement} from '@polymer/polymer/polymer-element.js';
import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';
import {html} from '@polymer/polymer/lib/utils/html-tag.js';
import {IronCheckedElementBehavior} from '../iron-checked-element-behavior.js';
class SimpleCheckbox extends mixinBehaviors(IronCheckedElementBehavior, PolymerElement) {
static get template() {
return html`
<style>
:host([invalid]) {
color: red;
}
</style>
<button on-click="_checkValidity">validate</button>
<input type="checkbox" id="checkbox" checked="{{checked::input}}">
<span id="labelText">{{label}}</span>
`;
}
static get properties() {
return {label: {type: String, value: 'not validated'}};
}
_checkValidity() {
this.validate();
this.label = this.invalid ? 'is invalid' : 'is valid';
}
}
customElements.define('simple-checkbox', SimpleCheckbox);
```
## 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/iron-checked-element-behavior
cd iron-checked-element-behavior
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/iron-checked-element-behavior/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
-19
.travis.yml
language: node_js
sudo: 'false'
before_script: npm install -g polymer-cli
env:
global:
- secure: F7KAxgzWNI0O6FiSz7frG/b7Yof5iufl0+U7slKPm1F5fWL3BUPpiSxHjV5MOx5KjaBaGtyvsULPTidjUpJQn+jh6D6nImbilCTsYC/bYcqwbj/y+Yc+NKem7rT5qNC6OtNgza/c4Ah7wgc8CM3pnBOh++j0sjqqPRnkc9T4h9/IU/mu6yhlZW335LBywemljDutQBwBhmcx3j301Nioq3vCg/1jXisZ92nfchn9yxs9wGlXUTtu5w1osTN8GjeqSKBOjGz4QAB/GmD6iebnPFqeqFS483romhc6Qh89De0qTxZcuJNlxWYhXGSpx8I+2c51BfPu0hN/UhCgXvVKlJAfMA5nLaEN6Gr6CTomgifwxqBoMDp1HyHSRl+QPbRr/SmJKsGkztlBo8WnjOStSmNUNtUoRaDA5Nsavu4on2z68cUmaaEDqRAvKWmpzJjYUXkr4MshNkP3KOP9nL3hCmz3bPPf9pseTnZ1z6cOm6JeDgTYsmstZq5UEIywo44Yw3Mrv/ULsUQYwkENx0UMAcOs5Ie0GENGF4hPlRwPchhErnzsHswp3w7N21ptCiULpvqk+EDsGr8DuDfIX1kCt0G7kzhbAyStiMtGUMq853zRgP19xoTMXTMEetL3vDjeU2Wc3/iOx6jWS9s/2tFYc7/v2S3yUSwrHaPf8AThGGw=
- secure: S+HLFkppDy78FsQeFha+LYcX44MXxdGg9N4nNRBieRU0GkdYh2gpp2d7A1I2+UZ+N/FbZyNLuX/hWzbK+ObB7jhP3TciT6GSTKsXHc4ySvveueitY2ZL9ZiCetlGAgxzYqfDrrnIQi6TXjdSQA6qjYZb7wufM9nNLLxgZIv9PRbT/u5DMOZTj+0l5tXp3xKzjhV5OefXH+75Z1HWLaR4Z/y/Y05k9kj8TjgiP+Gv3J6XNq31DESIjD3Z1rTiD6+RpaKo4BCCl6+A5IGXpgGHfPbp5Ez6UuFS4WRp6IzLNNMKF/XzUPnIiyB39iq5ZLSXjvdB29QtC4igveLQSvqXwNCFYFkg6Ak9wXk3OQOkYqvWJ5mtbtR5z2gG5aml/rfYALu8qIuzs84yQ/EkcwDUzn0yfc6v16fz4BpbIze2sQ55KKwtBQAphRAihFHh1Kvc8sz16V7fztTis38x8mnUrYRRENTyWHcYVcevmzJXqmwWUQD96QCQKjNE16G88q8YULPoGXJ2DbEYj4iT7XUG+qxcS28hGNkTMn5wIP1c8nJFAlPIQy2o0KVsnLXpGe1ynt0UtLKjnPWljzb9UrwPxtem5r1MmgPGXQSxgYucGRQINny++HqtsbW8yA20zJYOG1ZNrt3uEQltBQYGHnwtRS3fi9XkgYnV1vCFBm2IFig=
node_js: '9'
addons:
firefox: latest
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
cache:
directories:
- node_modules
-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>iron-checked-element-behavior</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>
-153
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>iron-checked-element-behavior 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="../../test-fixture/test-fixture-mocha.js"></script>
<script type="module" src="../../test-fixture/test-fixture.js"></script>
<script type="module" src="../../iron-meta/iron-meta.js"></script>
<script type="module" src="./simple-checkbox.js"></script>
</head>
<body>
<test-fixture id="basic">
<template>
<simple-checkbox></simple-checkbox>
</template>
</test-fixture>
<test-fixture id="checked">
<template>
<simple-checkbox checked></simple-checkbox>
</template>
</test-fixture>
<test-fixture id="with-value">
<template>
<simple-checkbox value="batman"></simple-checkbox>
</template>
</test-fixture>
<script type="module">
import '@polymer/test-fixture/test-fixture.js';
import '@polymer/iron-meta/iron-meta.js';
import './simple-checkbox.js';
suite('basic', function() {
test('can be checked', function() {
var c = fixture('basic');
assert.isFalse(c.checked);
c.checked = true;
assert.isTrue(c.checked);
});
test('can be unchecked', function() {
var c = fixture('checked');
assert.isTrue(c.checked);
c.checked = false;
assert.isFalse(c.checked);
});
test('invalid if required and not checked', function() {
var c = fixture('basic');
c.required = true;
assert.isFalse(c.checked);
assert.isFalse(c.validate());
assert.isTrue(c.invalid);
});
test('valid if required and checked', function() {
var c = fixture('basic');
c.required = true;
c.checked = true;
assert.isTrue(c.checked);
assert.isTrue(c.validate());
assert.isFalse(c.invalid);
});
test('valid if not required and not checked', function() {
var c = fixture('basic');
assert.isFalse(c.checked);
assert.isTrue(c.validate());
assert.isFalse(c.invalid);
});
test('has a default value of "on", always', function() {
var c = fixture('basic');
assert.isTrue(c.value === 'on');
c.checked = true;
assert.isTrue(c.value === 'on');
});
test('does not stomp over user defined value when checked', function() {
var c = fixture('with-value');
assert.isTrue(c.value === 'batman');
c.checked = true;
assert.isTrue(c.value === 'batman');
});
test('value returns "on" when no explicit value is specified', function() {
var c = fixture('basic');
assert.equal(c.value, 'on', 'returns "on"');
});
test('value returns the value when an explicit value is set', function() {
var c = fixture('basic');
c.value = 'abc';
assert.equal(c.value, 'abc', 'returns "abc"');
c.value = '123';
assert.equal(c.value, '123', 'returns "123"');
});
test('value returns "on" when value is set to undefined', function() {
var c = fixture('basic');
c.value = 'abc';
assert.equal(c.value, 'abc', 'returns "abc"');
c.value = undefined;
assert.equal(c.value, 'on', 'returns "on"');
});
});
suite('a11y', function() {
test('setting `required` sets `aria-required=true`', function() {
var c = fixture('basic');
c.required = true;
assert.equal(c.getAttribute('aria-required'), 'true');
c.required = false;
assert.isFalse(c.hasAttribute('aria-required'));
});
test('setting `invalid` sets `aria-invalid=true`', function() {
var c = fixture('basic');
c.invalid = true;
assert.equal(c.getAttribute('aria-invalid'), 'true');
c.invalid = false;
assert.isFalse(c.hasAttribute('aria-invalid'));
});
});
</script>
</body>
</html>
-29
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>
<title>iron-checked-element-behavior tests</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<script src="../../../wct-browser-legacy/browser.js"></script>
</head>
<body>
<script>
WCT.loadSuites(
['basic.html?wc-shadydom=true&wc-ce=true', 'basic.html?dom=shadow']);
</script>
</body></html>
-20
test/simple-checkbox.js
/**
@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
*/
import '@polymer/polymer/polymer-legacy.js';
import { IronCheckedElementBehavior } from '../iron-checked-element-behavior.js';
import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
Polymer({
is: 'simple-checkbox',
behaviors: [IronCheckedElementBehavior]
});
-16
wct.conf.json
{
"plugins": {
"local": {
"browserOptions": {
"chrome": [
"no-sandbox",
"headless",
"disable-gpu"
],
"firefox": [
"-headless"
]
}
}
}
}