1 files changed, 106 insertions, 0 deletions
diff --git a/tensorflow/tensorboard/components/hydrogen-set/demo/index.html b/tensorflow/tensorboard/components/hydrogen-set/demo/index.html
new file mode 100644
index 0000000000..6a1735a699
--- /dev/null
+++ b/tensorflow/tensorboard/components/hydrogen-set/demo/index.html
@@ -0,0 +1,106 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2016 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>hydrogen-set demo</title>
+    <script src="../../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
+    <link rel="import" href="../hydrogen-set.html">
+    <link rel="import" href="../../../bower_components/paper-checkbox/paper-checkbox.html">
+  </head>
+
+  <style>
+    body {
+      margin: 0;
+      font-family: "RobotoDraft","Roboto",sans-serif;
+      font-size: 14;
+    }
+  </style>
+
+  <body unresolved>
+    <dom-module id="x-a">
+      <template>
+        <template is="dom-repeat" items="[[items]]">
+          <span>[[item]]</span>
+          <paper-checkbox
+            name="[[item]]"
+            on-iron-change="_onChange"
+            checked="[[_isSelected(item, selected.*)]]"
+            ></paper-checkbox>
+        </template>
+      </template>
+    </dom-module>
+    <script>
+    Polymer({
+      is: 'x-a',
+      properties: {
+        selected: {
+          type: Array
+        },
+        items: {
+          type: Array,
+          value: function() {
+            return ["a","b","c","d","e"];
+          }
+        }
+      },
+      _onChange: function(e) {
+        var name = e.srcElement.name;
+        if (name) {
+          if (e.srcElement.checked) {
+            this.fire('select', name);
+          } else {
+            this.fire('unselect', name);
+          }
+        }
+      },
+      _isSelected: function(item, selected) {
+        return selected.base.indexOf(item) >= 0;
+      }
+    });
+    </script>
+    <template is="dom-bind">
+      <hydrogen-set
+        id="set"
+        event-add="{{add}}"
+        event-delete="{{del}}"
+        out-value="{{selected}}"
+      ></hydrogen-set>
+      <div>
+        Mutate the two sets below.
+      </div>
+      <br/>
+      <div>First Set</div>
+      <x-a
+        id="a"
+        on-select="add"
+        on-unselect="del"
+        selected="[[selected]]"
+      ></x-a>
+      <br/>
+      <br/>
+      <div>Second Set</div>
+      <x-a
+        id="b"
+        on-select="add"
+        on-unselect="del"
+        selected="[[selected]]"
+      ></x-a>
+      <br/>
+      <br/>
+      <div>List Selected:</div>
+      <template is="dom-repeat" items="[[selected]]">
+        <div>[[item]]</div>
+      </template>
+    </template>
+  </body>
+</html>