2015-08-24 20:13:04 -07:00
|
|
|
<!--
|
|
|
|
@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
|
|
|
|
-->
|
|
|
|
|
|
|
|
<link rel="import" href="../polymer/polymer.html">
|
|
|
|
<link rel="import" href="../iron-validatable-behavior/iron-validatable-behavior.html">
|
|
|
|
<link rel="import" href="../iron-form-element-behavior/iron-form-element-behavior.html">
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 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.
|
|
|
|
*
|
|
|
|
* @demo demo/index.html
|
|
|
|
* @polymerBehavior Polymer.IronCheckedElementBehavior
|
|
|
|
*/
|
|
|
|
Polymer.IronCheckedElementBehaviorImpl = {
|
|
|
|
|
|
|
|
properties: {
|
|
|
|
/**
|
|
|
|
* Fired when the checked state changes.
|
|
|
|
*
|
|
|
|
* @event iron-change
|
|
|
|
*/
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Gets or sets the state, `true` is checked and `false` is unchecked.
|
|
|
|
*/
|
|
|
|
checked: {
|
|
|
|
type: Boolean,
|
|
|
|
value: false,
|
|
|
|
reflectToAttribute: true,
|
|
|
|
notify: true,
|
|
|
|
observer: '_checkedChanged'
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* If true, the button toggles the active state with each tap or press
|
|
|
|
* of the spacebar.
|
|
|
|
*/
|
|
|
|
toggles: {
|
|
|
|
type: Boolean,
|
|
|
|
value: true,
|
|
|
|
reflectToAttribute: true
|
|
|
|
},
|
|
|
|
|
|
|
|
/* Overriden from Polymer.IronFormElementBehavior */
|
|
|
|
value: {
|
|
|
|
type: String,
|
|
|
|
value: ''
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
observers: [
|
|
|
|
'_requiredChanged(required)'
|
|
|
|
],
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Returns false if the element is required and not checked, and true otherwise.
|
2015-08-31 12:00:39 -07:00
|
|
|
* @return {boolean} true if `required` is false, or if `required` and `checked` are both true.
|
2015-08-24 20:13:04 -07:00
|
|
|
*/
|
2015-08-31 12:00:39 -07:00
|
|
|
_getValidity: function(_value) {
|
2015-08-24 20:13:04 -07:00
|
|
|
return this.disabled || !this.required || (this.required && this.checked);
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Update the aria-required label when `required` is changed.
|
|
|
|
*/
|
|
|
|
_requiredChanged: function() {
|
|
|
|
if (this.required) {
|
|
|
|
this.setAttribute('aria-required', 'true');
|
|
|
|
} else {
|
|
|
|
this.removeAttribute('aria-required');
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Update the element's value when checked.
|
|
|
|
*/
|
|
|
|
_checkedChanged: function() {
|
|
|
|
this.active = this.checked;
|
|
|
|
// Unless the user has specified a value, a checked element has the
|
|
|
|
// default value "on" when checked.
|
|
|
|
if (this.value === '')
|
|
|
|
this.value = this.checked ? 'on' : '';
|
|
|
|
this.fire('iron-change');
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
/** @polymerBehavior Polymer.IronCheckedElementBehavior */
|
|
|
|
Polymer.IronCheckedElementBehavior = [
|
|
|
|
Polymer.IronFormElementBehavior,
|
|
|
|
Polymer.IronValidatableBehavior,
|
|
|
|
Polymer.IronCheckedElementBehaviorImpl
|
|
|
|
];
|
|
|
|
|
|
|
|
</script>
|