First commit with working tangy-form demo

.gitignore

@@ -0,0 +1 @@
+/node_modules/

README.md

@@ -0,0 +1,21 @@
+# \<tangy-form\>
+
+A form element for lazy loaded multipage forms
+
+## Install the Polymer-CLI
+
+First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) and npm (packaged with [Node.js](https://nodejs.org)) installed. Run `npm install` to install your element's dependencies, then run `polymer serve` to serve your element locally.
+
+## Viewing Your Element
+
+```
+$ polymer serve
+```
+
+## Running Tests
+
+```
+$ polymer test
+```
+
+Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.

_element.js

@@ -0,0 +1,32 @@
+import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';
+
+/**
+ * `tangy-form`
+ * A form element for lazy loaded multipage forms
+ *
+ * @customElement
+ * @polymer
+ * @demo demo/index.html
+ */
+class TangyForm extends PolymerElement {
+  static get template() {
+    return html`
+      <style>
+        :host {
+          display: block;
+        }
+      </style>
+      <h2>Hello [[prop1]]!</h2>
+    `;
+  }
+  static get properties() {
+    return {
+      prop1: {
+        type: String,
+        value: 'tangy-form',
+      },
+    };
+  }
+}
+
+window.customElements.define('tangy-form', TangyForm);

cat.js

@@ -0,0 +1,101 @@
+
+window.t = (fragment) => {
+  if (window.translation && window.translation[fragment]) {
+    return window.translation[fragment]
+  } else {
+    return fragment
+  }
+}
+
+window.fillUp = async (numberOfDocs, templateDoc, destroy = true) => {
+  let initialEstimate = await navigator.storage.estimate()
+  let dbName = `test-${new Date().getTime()}`
+  let db = new PouchDB(dbName)
+  delete templateDoc._rev
+  let i = 0
+  while (numberOfDocs > i) {
+    let doc = Object.assign({}, templateDoc, { _id: `${i}` })
+    await db.put(doc)
+    i++
+  }
+  let concludingEstimate = await navigator.storage.estimate()
+  console.log(`
+    Initial Estimate: ${JSON.stringify(initialEstimate)}
+    Concluding estimate: ${JSON.stringify(concludingEstimate)}
+    Usage Difference: ${concludingEstimate.usage - initialEstimate.usage} bytes
+    Average Doc Size: ${(concludingEstimate.usage - initialEstimate.usage) / numberOfDocs} bytes
+  `)
+  if (destroy) await db.destroy()
+}
+
+window.sleep = (ms) => new Promise((res, rej) => {
+  setTimeout(res, ms)
+})
+
+// For parsing window.location.hash parameters.
+window.getHashParams = () => {
+  var params = {}
+  var qstr = window.location.hash;
+  var a = (qstr[0] === '#' ? qstr.substr(1) : qstr).split('&');
+  for (var i = 0; i < a.length; i++) {
+    var b = a[i].split('=');
+    params[decodeURIComponent(b[0])] = decodeURIComponent(b[1] || '');
+  }
+  return params;
+}
+
+window.setHashParam = (name, value) => {
+  let params = getHashParams()
+  params[name] = value
+  let hash = '#'
+  for (let key in params) {
+    hash += `${key}=${params[key]}&`
+  }
+  window.location.hash = hash
+}
+
+// Perhaps props should always be based on the attributes... Stop dealing with this transformation of naming and deal with the fact a prop not existing means it is set to false.
+
+HTMLElement.prototype.getAttributes = function () {
+  let attributes = [].slice.call(this.attributes)
+  let serial = {}
+  attributes.forEach((attr) => serial[attr.name] = attr.value)
+  return serial
+}
+
+HTMLElement.prototype.setAttributes = function (attributes = {}) {
+  for (let attributeName in attributes) this.setAttribute(attributeName, attributes[attributeName])
+}
+
+// @TODO See one liner that TimvdLippe suggested https://github.com/Polymer/polymer/issues/4918#issuecomment-355835087
+HTMLElement.prototype.getProps = function () {
+  let propertyInfo = this.constructor.properties
+  // If no property info, then go off what attributes we do have.
+  if (!propertyInfo) {
+    return Object.assign({}, this.getAttributes(), { tagName: this.tagName, constructorName: this.constructor.name })
+  }
+  let props = {}
+  for (let propName in propertyInfo) {
+    if (propertyInfo[propName].type === Boolean) {
+      if (!this.hasOwnProperty(propName) || this[propName] === false) props[propName] = false
+      if (this[propName] === '' || this[propName] === true) props[propName] = true
+    } else {
+      props[propName] = this[propName]
+    }
+  }
+  return Object.assign({}, props, { tagName: this.tagName })
+}
+
+HTMLElement.prototype.setProps = function (props = {}) {
+  let propsObject = Object.assign({}, props)
+  delete propsObject.tagName
+  delete propsObject.constructorName
+  Object.assign(this, propsObject)
+}
+
+window.serializeElement = (element) => {
+  let attributes = [].slice.call(element.attributes)
+  let serial = {}
+  attributes.forEach((attr) => serial[attr.name] = attr.value)
+  return serial
+}

current-tangy-form-response-model.js

@@ -0,0 +1,9 @@
+class CurrentTangyFormResponseModel {
+  constructor(props) {
+    this._id = ''
+    this.collection = 'CurentTangyFormResponse'
+    this.formId = ''
+    this.responseId = ''
+    Object.assign(this, props)
+  }
+}

demo/checkboxes.html

@@ -0,0 +1,86 @@
+<form on-change="
+  // Disable/enable checkbox_3 given checkbox_4's value.
+  if (getValue('checkbox_4')) inputEnable('checkbox_3')
+  if (!getValue('checkbox_4')) inputDisable('checkbox_3')
+
+  // Hide/show checkbox_5 given checkbox_6's value.
+  if (getValue('checkbox_6')) inputShow('checkbox_5')
+  if (!getValue('checkbox_6')) inputHide('checkbox_5')
+
+  // Disable/enable checkbox_group_4.
+  if (getValue('checkbox_group_4_enable')) inputEnable('checkbox_group_4')
+  if (!getValue('checkbox_group_4_enable')) inputDisable('checkbox_group_4')
+
+  // Disable/enable checkbox_group_5.
+  if (getValue('checkbox_group_5_show')) inputShow('checkbox_group_5')
+  if (!getValue('checkbox_group_5_show')) inputHide('checkbox_group_5')
+">
+
+  <h3>Checkboxes</h3> 
+
+  <p>
+    <tangy-checkbox name="checkbox_1">This checkbox is not required.</tangy-checkbox>
+    <tangy-checkbox name="checkbox_2" required>This checkbox is required.</tangy-checkbox>
+    <tangy-checkbox name="checkbox_3" disabled required>This checkbox is disabled, but if enabled, it is then also required.</tangy-checkbox>
+    <tangy-checkbox name="checkbox_4">Check this checkbox to enable the disabled checkbox.</tangy-checkbox>
+    <tangy-checkbox name="checkbox_5" hidden required>This checkbox is hidden, but if show, it is also required.</tangy-checkbox>
+    <tangy-checkbox name="checkbox_6">Check this checkbox to show the hidden checkbox.</tangy-checkbox>
+  </p>
+
+
+  <h3>Checkbox Groups</h3> 
+
+  <tangy-checkboxes 
+    name="checkbox_group_1" 
+    label="This is a checkbox group.">
+    <option value="checkbox_group_1__checkbox_1">Option 1</option>
+    <option value="checkbox_group_1__checkbox_2">Option 2</option>
+    <option value="checkbox_group_1__checkbox_3">Option 3</option>
+    <option value="checkbox_group_1__checkbox_4">Option 4</option>
+  </tangy-checkboxes>
+
+  <tangy-checkboxes 
+    name="checkbox_group_2" 
+    required
+    label="This is a checkbox group that requires that it be saved with at least 1 checked checkbox.">
+    <option value="checkbox_group_2__checkbox_1">Option 1</option>
+    <option value="checkbox_group_2__checkbox_2">Option 2</option>
+    <option value="checkbox_group_2__checkbox_3">Option 3</option>
+    <option value="checkbox_group_2__checkbox_4">Option 4</option>
+  </tangy-checkboxes>
+
+  <tangy-checkboxes 
+    name="checkbox_group_3" 
+    at-least=2 
+    label="This is a checkbox group that is not required, but if you do make a selection it is not valid until you check at least 2 checkboxes.">
+    <option value="checkbox_group_3__checkbox_1">Option 1</option>
+    <option value="checkbox_group_3__checkbox_2">Option 2</option>
+    <option value="checkbox_group_3__checkbox_3">Option 3</option>
+    <option value="checkbox_group_3__checkbox_4">Option 4</option>
+  </tangy-checkboxes>
+
+  <tangy-checkboxes 
+    name="checkbox_group_4" 
+    label="This is a disabled checkbox group."
+    required
+    disabled>
+    <option value="checkbox_group_4__checkbox_1" disabled>Option 1</option>
+    <option value="checkbox_group_4__checkbox_2" disabled>Option 2</option>
+    <option value="checkbox_group_4__checkbox_3" disabled>Option 3</option>
+    <option value="checkbox_group_4__checkbox_4" disabled>Option 4</option>
+  </tangy-checkboxes>
+  <tangy-checkbox name="checkbox_group_4_enable">Check this checkbox to enable another checkbox group. If the checkbox group is enabled it will be required to submit the form.</tangy-checkbox>
+
+  <tangy-checkboxes 
+    name="checkbox_group_5" 
+    label="This is a hidden checkbox group."
+    required
+    hidden>
+    <option value="checkbox_group_5__checkbox_1">Option 1</option>
+    <option value="checkbox_group_5__checkbox_2">Option 2</option>
+    <option value="checkbox_group_5__checkbox_3">Option 3</option>
+    <option value="checkbox_group_5__checkbox_4">Option 4</option>
+  </tangy-checkboxes>
+  <tangy-checkbox name="checkbox_group_5_show">Check this checkbox to show another checkbox group. If the checkbox group is shown it will be required to submit the form.</tangy-checkbox>
+
+</form>

demo/complete.html

@@ -0,0 +1,7 @@
+<form>
+    <p>
+    Tap the "Complete" button to mark this reponse as complete. This is important so your form response is uploaded.
+    </p>
+    <tangy-checkbox required name="test">Some required field you must check before marking complete.</tangy-checkbox>
+    <tangy-complete-button name="complete">Complete</tangy-complete-button>
+</form>

demo/date-time.html

@@ -0,0 +1,51 @@
+<form on-change="" on-open="
+
+inputs.date_1.value = new Date().toISOString().split('T')[0] 
+inputs.time_1.value = new Date().toTimeString().substring(0,5) 
+
+inputs.hidden_timestamp.value = new Date().getTime()
+
+inputs.mark_time_checkbox.addEventListener('change', function() { 
+   inputs.mark_time_date.value = new Date().toISOString().split('T')[0]
+   inputs.mark_time_time.value = new Date().toTimeString().substring(0,5)  
+})
+
+">
+
+  <h2>Date and time on open.</h2>
+  <tangy-input 
+    name="date_1" 
+    label="Date"
+    type="date">
+  </tangy-input>
+
+  <tangy-input 
+    name="time_1" 
+    label="Time"
+    type="time">
+  </tangy-input>
+
+  You can't see it but right here is a hidden timestamp here.
+  <tangy-input 
+    name="hidden_timestamp"
+    type="text"
+    hidden>
+  </tangy-input>
+
+
+  <h2>Date and time when marked.</h2>
+  <tangy-checkbox name="mark_time_checkbox">Tap to mark the time.</tangy-checkbox>
+  <tangy-input 
+    name="mark_time_date" 
+    label="Date"
+    type="date">
+  </tangy-input>
+
+  <tangy-input 
+    name="mark_time_time" 
+    label="Time"
+    type="time">
+  </tangy-input>
+
+
+</form>

demo/gps.html

@@ -0,0 +1,3 @@
+<form>
+  <tangy-gps name="gps-coords"></tangy-gps>
+</form>

demo/index.html

@@ -0,0 +1,46 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
+
+    <title>tangy-form demo</title>
+
+    <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
+    <script src="../node_modules/redux/dist/redux.min.js"></script>
+
+    <script type="module">
+      import '@polymer/iron-demo-helpers/demo-pages-shared-styles';
+      import '@polymer/iron-demo-helpers/demo-snippet';
+    </script>
+
+    <script type="module" src="../tangy-form.js"></script>
+
+    <custom-style>
+      <style is="custom-style" include="demo-pages-shared-styles">
+      </style>
+    </custom-style>
+  </head>
+  <body>
+    <div class="vertical-section-container centered">
+      <h3>Basic tangy-form demo</h3>
+      <demo-snippet>
+        <template>
+          <tangy-form has-summary linear-mode hide-closed-items id="field-demo" on-change="">
+            <tangy-form-item src="./text-inputs.html" id="text_inputs" title="Text Inputs" hide-back-button></tangy-form-item>
+            <tangy-form-item src="./checkboxes.html" id="checkboxes" title="Checkboxes"></tangy-form-item>
+            <tangy-form-item src="./radio-buttons.html" id="radio_buttons" title="Radiobuttons"></tangy-form-item>
+            <tangy-form-item src="./select-lists.html" id="select_lists" title="Select Lists"></tangy-form-item>
+            <tangy-form-item src="./location.html" id="location" title="Location"></tangy-form-item>
+            <tangy-form-item src="./gps.html" id="gps" title="GPS"></tangy-form-item>
+            <tangy-form-item src="./date-time.html" id="date_time" title="Date and Time"></tangy-form-item>
+            <tangy-form-item src="./timed-grid.html" id="timed_grids" title="Timed Grid"></tangy-form-item>
+            <tangy-form-item src="./timed-grid-feedback.html" id="timed_grids_feedback" title="Timed Grid Feedback"></tangy-form-item>
+            <tangy-form-item src="./complete.html" id="complete" title="Complete" hide-next-button></tangy-form-item>
+            <tangy-form-item src="./summary.html" summary id="summary" title="Summary"></tangy-form-item>
+          </tangy-form>
+        </template>
+      </demo-snippet>
+    </div>
+  </body>
+</html>