1 files changed, 119 insertions, 0 deletions
diff --git a/catapult/third_party/polymer/components/iron-location/demo/iron-query-params.html b/catapult/third_party/polymer/components/iron-location/demo/iron-query-params.html
new file mode 100644
index 00000000..a7d753a7
--- /dev/null
+++ b/catapult/third_party/polymer/components/iron-location/demo/iron-query-params.html
@@ -0,0 +1,119 @@
+<!doctype html>
+<!--
+@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
+-->
+<html>
+<head>
+
+  <title>iron-query-params</title>
+
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../iron-query-params.html">
+  <link rel="import" href="../../paper-styles/classes/typography.html">
+  <link rel="import" href="../../iron-flex-layout/classes/iron-flex-layout.html">
+  <link rel="import" href="../../paper-input/paper-input.html">
+  <link rel="stylesheet" href="../../paper-styles/demo.css">
+</head>
+<body>
+
+  <dom-module id='iron-query-params-demo'>
+    <template>
+      <style>
+        div.inputs {
+          margin-bottom: 15px;
+        }
+        label {
+          display: inline-block;
+          width: 100px;
+        }
+        span.seconds {
+        }
+        [layout] {
+          @apply(--layout);
+        }
+        [layout][horizontal] {
+          @apply(--layout-horizontal);
+        }
+        [layout][horizontal] > div {
+          padding: 20px;
+          max-width: 500px;
+        }
+        [layout][vertical] {
+          @apply(--layout-vertical);
+        }
+        [layout][flex] {
+          @apply(--layout-flex);
+        }
+        h3 {
+          padding: 0;
+          margin: 0;
+        }
+      </style>
+      <iron-query-params
+          params-string='{{paramString}}' params-object='{{params}}'>
+      </iron-query-params>
+
+      <div layout horizontal>
+        <div layout vertical flex class='inputs'>
+          <paper-input label='params as string'
+                       value='{{paramString}}' always-float-label>
+          </paper-input>
+          <paper-input label='params as object' value='{{paramsString}}'
+                       invalid='{{paramsInvalid}}'
+                       error-message='Should be legal JSON'
+                       always-float-label>
+          </paper-input>
+        </div>
+      </div>
+    </template>
+    <script>
+      window.addEventListener('WebComponentsReady', function() {
+        Polymer({
+          is: 'iron-query-params-demo',
+          properties: {
+            paramsString: {
+              observer: 'paramsStringChanged'
+            },
+            params: {
+              observer: 'paramsChanged'
+            },
+            paramsInvalid: {
+              value: false,
+            },
+          },
+          paramsStringChanged: function() {
+            if (this.ignore) {
+              return;
+            }
+            this.ignore = true;
+            try {
+              this.params = JSON.parse(this.paramsString);
+              this.paramsInvalid = false;
+            } catch(_) {
+              this.paramsInvalid = true;
+            }
+            this.ignore = false;
+          },
+          paramsChanged: function() {
+            if (this.ignore) {
+              return;
+            }
+            this.ignore = true;
+            this.paramsString = JSON.stringify(this.params);
+            this.paramsInvalid = false;
+            this.ignore = false;
+          }
+        });
+      });
+    </script>
+  </dom-module>
+
+  <iron-query-params-demo></iron-query-params-demo>
+</body>
+</html>