> grunt +webpackage-createElementary

Done, without errors.

Process finished with exit code 0

"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-Component-Model:
     * > Access slot values:
     * slot 'a': this.getA(); | this.setA(value)
     */
    CubxPolymer({
        is: 'fixer-io-wrapper',

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

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

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

            this.sendQuery();
        },
        /**
         * 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]);
                        });
                        // Update the Cubbles component model slots using the setters
                        self.setCurrenciesLabels(xLabels);
                        self.setRates([rates]);
                    }
                };
                xhttp.open("GET", queryUrl, true);
                xhttp.send();
            }
        }
    });
}());

It is useful to know that the component's slots values can be accessed using the method set<SlotName>(value) and edited using the get<SlotName>() method. Let's say manage the rates slot:

1. To get its value we should use the getRates()
2. To set a new value for the slot we use the setRates(newValue)

Both are use within the code above.