| OLD | NEW |
| (Empty) | |
| 1 /** |
| 2 * Use `Polymer.IronCheckedElementBehavior` to implement a custom element |
| 3 * that has a `checked` property, which can be used for validation if the |
| 4 * element is also `required`. Element instances implementing this behavior |
| 5 * will also be registered for use in an `iron-form` element. |
| 6 * |
| 7 * @demo demo/index.html |
| 8 * @polymerBehavior Polymer.IronCheckedElementBehavior |
| 9 */ |
| 10 Polymer.IronCheckedElementBehavior = { |
| 11 |
| 12 properties: { |
| 13 /** |
| 14 * Fired when the checked state changes. |
| 15 * |
| 16 * @event iron-change |
| 17 */ |
| 18 |
| 19 /** |
| 20 * Gets or sets the state, `true` is checked and `false` is unchecked. |
| 21 */ |
| 22 checked: { |
| 23 type: Boolean, |
| 24 value: false, |
| 25 reflectToAttribute: true, |
| 26 notify: true, |
| 27 observer: '_checkedChanged' |
| 28 }, |
| 29 |
| 30 /** |
| 31 * If true, the button toggles the active state with each tap or press |
| 32 * of the spacebar. |
| 33 */ |
| 34 toggles: { |
| 35 type: Boolean, |
| 36 value: true, |
| 37 reflectToAttribute: true |
| 38 }, |
| 39 |
| 40 /* Overriden from Polymer.IronFormElementBehavior */ |
| 41 value: { |
| 42 type: String, |
| 43 value: '' |
| 44 } |
| 45 }, |
| 46 |
| 47 observers: [ |
| 48 '_requiredChanged(required)' |
| 49 ], |
| 50 |
| 51 /** |
| 52 * Returns false if the element is required and not checked, and true otherw
ise. |
| 53 * @return {boolean} true if `required` is false, or if `required` and `chec
ked` are both true. |
| 54 */ |
| 55 _getValidity: function(_value) { |
| 56 return this.disabled || !this.required || (this.required && this.checked); |
| 57 }, |
| 58 |
| 59 /** |
| 60 * Update the aria-required label when `required` is changed. |
| 61 */ |
| 62 _requiredChanged: function() { |
| 63 if (this.required) { |
| 64 this.setAttribute('aria-required', 'true'); |
| 65 } else { |
| 66 this.removeAttribute('aria-required'); |
| 67 } |
| 68 }, |
| 69 |
| 70 /** |
| 71 * Update the element's value when checked. |
| 72 */ |
| 73 _checkedChanged: function() { |
| 74 this.active = this.checked; |
| 75 // Unless the user has specified a value, a checked element has the |
| 76 // default value "on" when checked. |
| 77 if (this.value === '') |
| 78 this.value = this.checked ? 'on' : ''; |
| 79 this.fire('iron-change'); |
| 80 } |
| 81 }; |
| 82 |
| 83 /** @polymerBehavior Polymer.IronCheckedElementBehavior */ |
| 84 Polymer.IronCheckedElementBehavior = [ |
| 85 Polymer.IronFormElementBehavior, |
| 86 Polymer.IronValidatableBehavior, |
| 87 Polymer.IronCheckedElementBehavior |
| 88 ]; |
| OLD | NEW |