make Clay work with phone apps

src/templates/components/color.tpl

@@ -0,0 +1,17 @@
+<div class="component-color">
+  <label class="component">
+    <input
+      data-manipulator-target
+      type="hidden"
+    />
+    <span class="label">{{{label}}}</span>
+    <span class="value"></span>
+  </label>
+  <div class="picker-wrap">
+    <div class="picker">
+      <div class="color-box-wrap">
+        <div class="color-box-container"></div>
+      </div>
+    </div>
+  </div>
+</div>

src/templates/components/footer.tpl

@@ -0,0 +1,5 @@
+<div
+  data-manipulator-target
+  class="item-container-footer"
+  {{each attributes}} {{this.key}}="{{this.value}}" {{/each}}
+></div>

src/templates/components/heading.tpl

@@ -0,0 +1,3 @@
+<div class="component component-heading">
+  <h{{size}} data-manipulator-target {{each key: attributes}}{{key}}="{{this}}"{{/each}}></h{{size}}>
+</div>

src/templates/components/input.tpl

@@ -0,0 +1,9 @@
+<label class="component component-input">
+  <span class="label">{{{label}}}</span>
+  <span class="input">
+    <input
+      data-manipulator-target
+      {{each key: attributes}}{{key}}="{{this}}"{{/each}}
+    />
+  </span>
+</label>

src/templates/components/select.tpl

@@ -0,0 +1,9 @@
+<label class="component component-select">
+  <span class="label">{{{label}}}</span>
+  <span class="value"></span>
+  <select data-manipulator-target>
+    {{each options}}
+      <option value="{{this.value}}" class="item-select-option">{{this.label}}</option>
+    {{/each}}
+  </select>
+</label>

src/templates/components/submit.tpl

@@ -0,0 +1,9 @@
+<div class="component component-button">
+  <button
+    data-manipulator-target
+    type="submit"
+    {{each key: attributes}}{{key}}="{{this}}"{{/each}}
+  >
+    {{{label}}}
+  </button>
+</div>

src/templates/components/text.tpl

@@ -0,0 +1,3 @@
+<div class="component component-text">
+  <p data-manipulator-target {{each key: attributes}}{{key}}="{{this}}"{{/each}}></p>
+</div>

src/templates/components/toggle.tpl

@@ -0,0 +1,14 @@
+<label class="component component-toggle">
+  <span class="label">{{{label}}}</span>
+  <span class="input">
+    <input
+      data-manipulator-target
+      type="checkbox"
+      {{each key: attributes}}{{key}}="{{this}}"{{/each}}
+    />
+    <span class="graphic">
+      <span class="slide"></span>
+      <span class="marker"></span>
+    </span>
+  </span>
+</label>