hardion · hardion · Feb 25, 2018
diff --git a/README.md b/README.md
@@ -0,0 +1,21 @@
+# \<tangojs-edit\>
+
+TangoJS Editable field
+
+## Install the Polymer-CLI
+
+First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) installed. 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.
diff --git a/bower.json b/bower.json
@@ -0,0 +1,16 @@
+{
+  "name": "tangojs-input",
+  "description": "TangoJS Editable field",
+  "main": "tangojs-input.html",
+  "dependencies": {
+    "polymer": "Polymer/polymer#^2.0.0"
+  },
+  "devDependencies": {
+    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^2.0.0",
+    "web-component-tester": "Polymer/web-component-tester#^6.0.0",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0"
+  },
+  "resolutions": {
+    "polymer": "^2.0.0"
+  }
+}
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,66 @@
+<!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>tangojs-input demo</title>
+
+    <script src="../../webcomponentsjs/webcomponents-loader.js"></script>
+
+    <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
+    <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
+    <link rel="import" href="../tangojs-input.html">
+<!-- TANGOJS SCRIPT-->
+<script src="../node_modules/tangojs-core/lib/tangojs-core.js"></script>
+<script src="../node_modules/tangojs-connector-local/lib/tangojs-connector-local.js"></script>
+<script src="../node_modules/tangojs-connector-mtango/lib/tangojs-connector-mtango.js"></script>
+
+<!--
+    Configure your connector here.
+-->
+<script type="text/javascript">
+(function (window) {
+    'use strict'
+
+       // Setup tangojs-connector-local.
+       //const model = window.tangojsLocalDemoModel.createModel()
+       //const conn = new window.tangojs.connector.local.LocalConnector(model)
+
+       // example configuration for mTango rc3 backend
+       const conn = new window.tangojs.connector.mtango.MTangoConnector(
+	            'http://w-v-kitslab-cc-0:8000/tango/rest/rc3',
+		         'w-v-kitslab-csdb-0', // hostname
+			      '10000', // port
+			           'admin', // username
+				        'admin') // password
+       console.log('Tango connection');
+            // Bind desired connector to TangoJS API.
+            window.tangojs.core.setConnector(conn)
+	       })(window)
+</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 String tangojs-input demo</h3>
+      <demo-snippet>
+        <template>
+          <tangojs-input model='sys/tg_test/1/string_scalar'></tangojs-input>
+        </template>
+      </demo-snippet>
+    </div>
+    <div class="vertical-section-container centered">
+      <h3>Basic Boolean tangojs-input demo</h3>
+      <demo-snippet>
+        <template>
+          <tangojs-input model='sys/tg_test/1/boolean_scalar'></tangojs-input>
+        </template>
+      </demo-snippet>
+    </div>
+  </body>
+</html>
diff --git a/index.html b/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="refresh" content="0;url=demo/" />
+    <title>tangojs-input</title>
+  </head>
+  <body>
+    <!--
+        ELEMENT API DOCUMENTATION SUPPORT COMING SOON
+        Visit demo/index.html to see live examples of your element running.
+        This page will automatically redirect you there when run in the browser
+        with `polymer serve`.
+      -->
+  </body>
+</html>
diff --git a/polymer.json b/polymer.json
@@ -0,0 +1,7 @@
+{
+  "lint": {
+    "rules": [
+      "polymer-2"
+    ]
+  }
+}
diff --git a/tangojs-input.html b/tangojs-input.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<link rel="import" href="../polymer/polymer-element.html">
+<link rel="import" href="../iron-input/iron-input.html">
+<link rel="import" href="../tangojs-label/tangojs-label.html">
+<script src="node_modules/tangojs-web-components/dist/tangojs-web-components.js"></script>
+
+<dom-module id="tangojs-input">
+  <template>
+    <style>
+      :host {
+        display: block;
+      }
+    </style>
+    <tangojs-label model='{{model}}'></tangojs-label>
+    <iron-input bind-value="{{setPoint}}">
+      <input type="[[inputType]]" on-keydown="write">
+    </iron-input>
+  </template>
+
+  <script>
+    /**
+     * `tangojs-input`
+     * TangoJS Editable field
+     * 
+     * @customElement
+     * @polymer
+     * @demo demo/index.html
+     */
+    class TangojsInput extends tangojs.web.util.mixins.withTangoAttribute(Polymer.Element) {
+
+      static get is() { return 'tangojs-input'; }
+
+    }
+
+    window.customElements.define(TangojsInput.is, TangojsInput);
+  </script>
+</dom-module>
diff --git a/test/index.html b/test/index.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+
+    <script src="../../webcomponentsjs/webcomponents-loader.js"></script>
+    <script src="../../web-component-tester/browser.js"></script>
+  </head>
+  <body>
+    <script>
+      // Load and run all tests (.html, .js):
+      WCT.loadSuites([
+        'tangojs-edit_test.html'
+      ]);
+    </script>
+
+</body></html>
diff --git a/test/tangojs-edit_test.html b/test/tangojs-edit_test.html
@@ -0,0 +1,52 @@
+<!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>tangojs-edit test</title>
+
+    <script src="../../webcomponentsjs/webcomponents-loader.js"></script>
+    <script src="../../web-component-tester/browser.js"></script>
+
+    <link rel="import" href="../tangojs-edit.html">
+  </head>
+  <body>
+
+    <test-fixture id="BasicTestFixture">
+      <template>
+        <tangojs-edit></tangojs-edit>
+      </template>
+    </test-fixture>
+
+    <test-fixture id="ChangedPropertyTestFixture">
+      <template>
+        <tangojs-edit prop1="new-prop1"></tangojs-edit>
+      </template>
+    </test-fixture>
+
+    <script>
+      suite('tangojs-edit', () => {
+
+        test('instantiating the element with default properties works', () => {
+          const element = fixture('BasicTestFixture');
+          assert.equal(element.prop1, 'tangojs-edit');
+          const elementShadowRoot = element.shadowRoot;
+          const elementHeader = elementShadowRoot.querySelector('h2');
+          assert.equal(elementHeader.innerHTML, 'Hello tangojs-edit!');
+        });
+
+        test('setting a property on the element works', () => {
+          // Create a test fixture
+          const element = fixture('ChangedPropertyTestFixture');
+          assert.equal(element.prop1, 'new-prop1');
+          const elementShadowRoot = element.shadowRoot;
+          const elementHeader = elementShadowRoot.querySelector('h2');
+          assert.equal(elementHeader.innerHTML, 'Hello new-prop1!');
+        });
+
+      });
+    </script>
+
+  </body>
+</html>