Sandbox: add polymer-grid-layout to the palette

Sandbox/lib/components.html

@@ -62,6 +62,7 @@
 <link rel="import" href="tk-preview.html">
 <link rel="import" href="tk-app.html">
 <!-- -->
+<link rel="import" href="../../../polymer-elements/polymer-grid-layout/polymer-grid-layout.html">
 <link rel="import" href="../../../polymer-ui-elements/polymer-ui-icon/polymer-ui-icon.html">
 <link rel="import" href="../../../polymer-ui-elements/polymer-ui-icon-button/polymer-ui-icon-button.html">
 <link rel="import" href="../../../polymer-ui-elements/polymer-ui-toolbar/polymer-ui-toolbar.html">

Sandbox/lib/tk-editors.html

@@ -46,9 +46,9 @@
         font: inherit;
         box-sizing: border-box;
         -moz-box-sizing: border-box;
-        -webkit-user-select: all;
+        /* -webkit-user-select: all;
         -moz-user-select: all;
-        user-select: all;
+        user-select: all; */
       }
       input:focus {
         outline: 1px solid #448afd;
@@ -200,9 +200,9 @@
         padding: 6px;
         margin: 0;
         width: 95%; 
-        -webkit-user-select: all; 
+        /* -webkit-user-select: all; 
         -moz-user-select: all;
-        user-select: all;
+        user-select: all; */
         overflow: auto; 
         vertical-align: middle;
       }
@@ -222,6 +222,22 @@
   </script>
 </polymer-element>
 
+<polymer-element name="tk-json-editor" extends="tk-text-editor">
+  <template>
+    <shadow></shadow>
+  </template>
+  <script>
+    Polymer('tk-json-editor', {
+      workingValueChanged: function() {
+        this.$.input.textContent = JSON.stringify(this.workingValue);
+      },
+      format: function(value) {
+        return JSON.parse(this.workingValue);
+      }
+    });
+  </script>
+</polymer-element>
+
 <polymer-element name="tk-range-editor" extends="tk-abstract-editor" attributes="min max step defaultValue">
   <template>
     <style>

Sandbox/lib/tk-property-inspector.html

@@ -71,6 +71,7 @@
         'select': 'tk-select-editor',
         'color': 'tk-color-editor',
         'text': 'tk-text-editor',
+        'json': 'tk-json-editor',
         'id-select': 'tk-id-select-editor',
         'target-select': 'tk-target-select-editor',
         'speech': 'tk-speech-editor',

Sandbox/metadata.html

@@ -1,3 +1,10 @@
+<tk-meta id="polymer-grid-layout" label="Grid Layout">
+  <template>
+    <polymer-grid-layout></polymer-grid-layout>
+  </template>
+  <property name="layout" kind="json"></property>
+</tk-meta>
+
 <tk-meta id="g-icon-button" label="Icon Button">
   <template>
     <g-icon-button src="images/mail.png"></g-icon-button>