• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1<!--
2@license
3Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
4This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
5The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
7Code distributed by Google as part of the polymer project is also
8subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
9-->
10
11<link rel="import" href="../polymer/polymer.html">
12<link rel="import" href="../iron-validatable-behavior/iron-validatable-behavior.html">
13<link rel="import" href="../iron-form-element-behavior/iron-form-element-behavior.html">
14
15<script>
16
17  /**
18   * Use `Polymer.IronCheckedElementBehavior` to implement a custom element
19   * that has a `checked` property, which can be used for validation if the
20   * element is also `required`. Element instances implementing this behavior
21   * will also be registered for use in an `iron-form` element.
22   *
23   * @demo demo/index.html
24   * @polymerBehavior Polymer.IronCheckedElementBehavior
25   */
26  Polymer.IronCheckedElementBehaviorImpl = {
27
28    properties: {
29      /**
30       * Fired when the checked state changes.
31       *
32       * @event iron-change
33       */
34
35      /**
36       * Gets or sets the state, `true` is checked and `false` is unchecked.
37       */
38      checked: {
39        type: Boolean,
40        value: false,
41        reflectToAttribute: true,
42        notify: true,
43        observer: '_checkedChanged'
44      },
45
46      /**
47       * If true, the button toggles the active state with each tap or press
48       * of the spacebar.
49       */
50      toggles: {
51        type: Boolean,
52        value: true,
53        reflectToAttribute: true
54      },
55
56      /* Overriden from Polymer.IronFormElementBehavior */
57      value: {
58        type: String,
59        value: 'on',
60        observer: '_valueChanged'
61      }
62    },
63
64    observers: [
65      '_requiredChanged(required)'
66    ],
67
68    created: function() {
69      // Used by `iron-form` to handle the case that an element with this behavior
70      // doesn't have a role of 'checkbox' or 'radio', but should still only be
71      // included when the form is serialized if `this.checked === true`.
72      this._hasIronCheckedElementBehavior = true;
73    },
74
75    /**
76     * Returns false if the element is required and not checked, and true otherwise.
77     * @param {*=} _value Ignored.
78     * @return {boolean} true if `required` is false or if `checked` is true.
79     */
80    _getValidity: function(_value) {
81      return this.disabled || !this.required || this.checked;
82    },
83
84    /**
85     * Update the aria-required label when `required` is changed.
86     */
87    _requiredChanged: function() {
88      if (this.required) {
89        this.setAttribute('aria-required', 'true');
90      } else {
91        this.removeAttribute('aria-required');
92      }
93    },
94
95    /**
96     * Fire `iron-changed` when the checked state changes.
97     */
98    _checkedChanged: function() {
99      this.active = this.checked;
100      this.fire('iron-change');
101    },
102
103    /**
104     * Reset value to 'on' if it is set to `undefined`.
105     */
106    _valueChanged: function() {
107      if (this.value === undefined || this.value === null) {
108        this.value = 'on';
109      }
110    }
111  };
112
113  /** @polymerBehavior Polymer.IronCheckedElementBehavior */
114  Polymer.IronCheckedElementBehavior = [
115    Polymer.IronFormElementBehavior,
116    Polymer.IronValidatableBehavior,
117    Polymer.IronCheckedElementBehaviorImpl
118  ];
119
120</script>
121