1 files changed, 65 insertions, 0 deletions
diff --git a/catapult/third_party/polymer/components/iron-checked-element-behavior/demo/simple-checkbox.html b/catapult/third_party/polymer/components/iron-checked-element-behavior/demo/simple-checkbox.html
new file mode 100644
index 00000000..24c5c125
--- /dev/null
+++ b/catapult/third_party/polymer/components/iron-checked-element-behavior/demo/simple-checkbox.html
@@ -0,0 +1,65 @@
+<!--
+@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="../../paper-button/paper-button.html">
+<link rel="import" href="../iron-checked-element-behavior.html">
+
+<dom-module id="simple-checkbox">
+  <template>
+    <style>
+      :host {
+        display: block;
+      }
+
+      :host([invalid]) span {
+        color: red;
+      }
+
+      #labelText {
+        display: inline-block;
+        width: 100px;
+      }
+    </style>
+
+    <input type="checkbox" id="checkbox" on-tap="_onCheckTap">
+    <span id="labelText">{{label}}</span>
+    <paper-button raised on-click="_onClick">validate</paper-button>
+
+  </template>
+  <script>
+    Polymer({
+
+      is: 'simple-checkbox',
+
+      behaviors: [
+        Polymer.IronCheckedElementBehavior
+      ],
+
+      properties: {
+        label: {
+          type: String,
+          value: 'not validated'
+        }
+      },
+
+      _onCheckTap: function() {
+        this.checked = this.$.checkbox.checked;
+      },
+
+      _onClick: function() {
+        this.validate();
+        this.label = this.invalid ? 'is invalid' : 'is valid';
+      }
+    });
+
+  </script>
+
+  </dom-module>