Breaking: Upgradig component to LitElement and new test framework

.gitignore

@@ -55,7 +55,4 @@ $RECYCLE.BIN/
 .nfs*
 
 node_modules
-bower_components
-build
-dist
 coverage

.npmignore

@@ -1,11 +1,8 @@
 coverage/
 test/
 gen-tsd.json
-wct.conf.json
 CONTRIBUTING.md
-analysis.json
 demo/
-bower.json
 .travis.yml
 index.html
 polymer.json

.travis.yml

@@ -1,21 +1,15 @@
 language: node_js
-node_js: 8
+node_js: stable
 sudo: required
-before_script: npm install -g polymer-cli @advanced-rest-client/wct-istanbub
 addons:
-  firefox: latest
   apt:
     sources:
       - google-chrome
     packages:
       - google-chrome-stable
-  sauce_connect: true
 script:
-  - xvfb-run polymer test --module-resolution=node --npm --plugin local
-  - >-
-    if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then polymer test
-    --module-resolution=node --npm --plugin sauce --job-name
-    "api-form-mixin:${TRAVIS_BRANCH}" --build-number=${TRAVIS_BUILD_NUMBER}; fi
+  - npm test
+  - if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then npm run test:sl; fi
 env:
   global:
     - secure: >-

README.md

@@ -4,13 +4,87 @@
 
 ## <api-form-mixin>
 
-A behavior to be implemented to elements that processes AMF data via form data model and displays forms from the model.
+A mixin to be used with elements that processes AMF data via form data model and displays forms from the model.
 
 It contains common methods used in forms.
 
-Use `api-form-styles` from this package to include common styles.
+### API components
 
+This components is a part of [API components ecosystem](https://elements.advancedrestclient.com/)
 
-### API components
+## Usage
+
+### Installation
+```
+npm install --save @api-components/api-form-mixin
+```
+
+### In a LitElement
+
+```js
+import { LitElement, html, css } from 'lit-element';
+import { ApiFormMixin } from '@api-components/api-form-mixin/api-form-mixin.js';
+import styles from '@api-components/api-form-mixin/api-form-styles.js';
+import '@polymer/iron-form/iron-form.js';
+
+class SampleElement extends PolymerElement {
+  static get styles() {
+    return [
+      styles,
+      css`:host {
+        display: block;
+      }`
+    ];
+  }
+
+  render() {
+    const { model: items, allowHideOptional, optionalOpened, allowDisableParams } = this;
+    return html`
+    <h1>Form</h1>
+    <iron-form>
+      <form enctype="application/json">
+      ${items ? items.map((item, index) => html`<div class="form-item">
+        <div class="${this.computeFormRowClass(item, allowHideOptional, optionalOpened, allowDisableParams)}">
+          <input
+            data-index="${index}"
+            type="text"
+            name="${item.name}"
+            ?required="${item.required}"
+            .value="${item.value}"
+            @change="${this._modelValueChanged}">
+        </div>
+      </div>`) : undefined}
+      </form>
+    </iron-form>`;
+  }
+
+  _modelValueChanged(e) {
+    const index = Number(e.target.dataset.index);
+    if (index !== index) {
+      return;
+    }
+    this.model[index].value = e.target.value;
+    this._requestRender();
+  }
+}
+customElements.define('sample-element', SampleElement);
+```
+
+### Installation
+
+```sh
+git clone https://github.com/advanced-rest-client/api-form-mixin
+cd api-form-mixin
+npm install
+```
+
+### Running the demo locally
+
+```sh
+npm start
+```
 
-This components is a part of API components ecosystem: https://elements.advancedrestclient.com/
+### Running the tests
+```sh
+npm test
+```