> grunt +webpackage-createElementary

"elementaryComponents": [
  {
    "artifactId": "fixer-io-wrapper",
    "description": "Elementary component for the fixer-io webservice",
    "runnables": [
      {
		...
]

        "slots": [
          {
            "slotId": "base",
            "type": "string",
            "direction": [
              "input"
            ],
            "value": "EUR"
          },
          {
            "slotId": "date",
            "type": "string",
            "direction": [
              "input"
            ],
            "value": "latest"
          },
          {
            "slotId": "currencies",
            "type": "string",
            "direction": [
              "input"
            ],
            "value": "USD,GBP,JPY"
          },
          {
            "slotId": "rates",
            "type": "array",
            "direction": [
              "output"
            ]
          },
		  {
  			"slotId": "currenciesLabels",
			"type": "array",
		   	"direction": [
    			"output"
		  	]
		  }
        ]

<link rel="import" href="fixer-io-wrapper-style.html">
<dom-module id="fixer-io-wrapper">
    <template>
        <style include="fixer-io-wrapper-style"></style>
    <div>
      <form action="" on-submit="submit">
        <label>Base:</label>
        <input type="text" id="base">
        <label>Date:</label>
        <input type="text" id="date">
        <label>Currencies:</label>
        <input type="text" id="currencies">
        <input type="submit" value="submit">
      </form>
    </div>
    <div id="result">
      <table>
    	<tbody>
    		<tr>
        		<td>
            		Currency <br>
            		<template is="dom-repeat" items="{{model.currenciesLabels}}">
                		{{item}} <br>
            		</template>
        		</td>
        		<td>
            		<template is="dom-repeat" items="{{model.rates.0}}">
                		{{item}} <br>
            		</template>
        		</td>
    		</tr>
    	</tbody>
	  </table>
    </div>
    </template>
    <script src="fixer-io-wrapper.js"></script>
</dom-module>

(function() {
    'use strict';
    /**
     * Get help:
     * > Lifecycle callbacks:
     * https://www.polymer-project.org/1.0/docs/devguide/registering-elements.html#lifecycle-callbacks
 *    *
Access  the Cubbles   * Access the Cubbles-Component-Model:
     * > Access slot values:
     * slot 'a': this.getA(); | this.setA(value)
     */
    CubxPolymer({
        is: 'fixer-io-wrapper',

       		modelBaseChanged: function(newValue) { /**
         * Observe the 'base' slot //to update the view of 			this.$.base.setAttribute('value', newValue);this component and then
         * send  this.sendQuery();
   the request to the fixer-io api
    },     * @param {string} newValue modelDateChanged: function(newValue) {
  - new value of the slot
         *//
   update the view
			   modelBaseChanged: function(newValue) {
            // update the view
            this.$.datebase.setAttribute('value', newValue);

            this.sendQuery();
        },
        modelCurrenciesChanged: function(newValue) {/**
         * Observe the   //'date' slot to update the view of 			this.$.currencies.setAttribute('value', newValue);
  component and then
          this.sendQuery();
     * send the request to the fixer-io api
  },       *  submit: function(event) {
       @param {string} newValue - new value of the slot ('yyyy-mm-dd' format)
    event.preventDefault();     */
       this.model.base = this.$.base.value;
 modelDateChanged: function(newValue) {
           this.model.date = this.$.date.value;
  // update the view
          this.model.currencies = this.$.currenciesdate.setAttribute('value', newValue);

            this.sendQuery();
        },
        sendQuery: function() {/**
         * Observe the slot  // Makes sure all slots are defined
			if(this.getBase() && this.getCurrencies()) {
         'currencies' to update the view of this component
         * and then send the request to the fixer-io api.
      var baseUrl = '//api.fixer.io/';
           * @param {string} newValue - new value of the slot (coma separated
     var queryUrl = baseUrl + this.getDate(* currencies)
+  '?base=' +      */
              this.getBase() + '&symbols=' + this.getCurrencies();modelCurrenciesChanged: function(newValue) {
            // update the view
   console.log(queryUrl); 				 				var self = this;    this.$.currencies.setAttribute('value', newValue);

           var xhttp = new XMLHttpRequest this.sendQuery();
 				xhttp.onreadystatechange = function() {    },
				if (this.readyState == 4 && this.status == 200) {/**
        				var data = JSON.parse(xhttp.responseText);
				        console.log(data);
					 * Submit the form, update the Component-Model and then send the request
         * to the fixer-io api.
         * @param event
         */
        submit: function(event) {
            event.preventDefault();
            // Update the Cubbles component model slots the setters
            this.setBase(this.$.base.value);
            this.setDate(this.$.date.value);
            this.setCurrencies(this.$.currencies.value);

            this.sendQuery();
        },
        /**
         * Send the request a to the fixer-io api.
         */
        sendQuery: function() {
            // Makes sure all slots are defined
            if(this.getBase() && this.getCurrencies()) {
                var baseUrl = '//api.fixer.io/';
                var queryUrl = baseUrl + this.getDate() + '?base=' +
                    this.getBase() + '&symbols=' + this.getCurrencies();

                var self = this;

                var xhttp = new XMLHttpRequest();
                xhttp.onreadystatechange = function() {
                    if (this.readyState == 4 && this.status == 200) {
                        var data = JSON.parse(xhttp.responseText);
                        console.log(data);
                        var props = Object.getOwnPropertyNames(data.rates);
                        console.log(props);
                        var rates = ['Rate'];
                        var xLabels = [];
                        props.forEach(function(p) {
                            xLabels.push(p);
                            rates.push(data.rates[p]);
                        });
              var props = Object.getOwnPropertyNames(data.rates);     				  //  console.log(props);
				        var rates = ['Rate'];
				Update the Cubbles component model slots using the setters
            var xLabels = []; 			        propsself.forEachsetCurrenciesLabels(function(p) {xLabels);
                        			xLabels.push(p);
			self.setRates([rates]);
                   rates.push(data.rates[p]);
			 }
       }); 		        self.setCurrenciesLabels(xLabels);};
         		self.setRates([rates]);     			} 			}; 			xhttp.open("GET", queryUrl, true);
			
                xhttp.send();
            }
        }
    });
}());