Merge branch 'master' of http://service.routetopa.eu:7480/WebCompDev/COMPONENTS

Andrea Petta
2 parents 1676e292 e53330c0
Showing 24 changed files with 883 additions and 589 deletions
bower_components/paper-spinner/.bower.json
bower_components/paper-spinner/.github/ISSUE_TEMPLATE.md
bower_components/paper-spinner/.gitignore
bower_components/paper-spinner/.travis.yml
bower_components/paper-spinner/CONTRIBUTING.md
bower_components/paper-spinner/README.md
bower_components/paper-spinner/bower.json
bower_components/paper-spinner/demo/index.html
bower_components/paper-spinner/index.html
bower_components/paper-spinner/paper-spinner-behavior.html
bower_components/paper-spinner/paper-spinner-lite.html
bower_components/paper-spinner/paper-spinner-styles.html
bower_components/paper-spinner/paper-spinner.css
bower_components/paper-spinner/paper-spinner.html
bower_components/paper-spinner/test/index.html
bower_components/paper-spinner/test/paper-spinner.html
controllets/providers-utility-controllet/generic.js
controllets/providers-utility-controllet/providers-utility-controllet.html
datalets/base-datalet/base-datalet.html
datalets/base-datalet/static/images/more_horiz_grey600_36x36.png
 {
   "name": "paper-spinner",
-  "version": "1.0.2",
+  "version": "1.2.0",
   "description": "A material design spinner",
   "authors": [
     "The Polymer Authors"
@@ -22,21 +22,27 @@
   "dependencies": {
     "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
     "paper-styles": "PolymerElements/paper-styles#^1.0.0",
-    "polymer": "Polymer/polymer#^1.0.0"
+    "polymer": "Polymer/polymer#^1.1.0"
   },
   "devDependencies": {
-    "web-component-tester": "*",
     "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
+    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
     "test-fixture": "PolymerElements/test-fixture#^1.0.0",
+    "web-component-tester": "^4.0.0",
     "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
   },
-  "_release": "1.0.2",
+  "main": [
+    "paper-spinner.html",
+    "paper-spinner-lite.html"
+  ],
+  "_release": "1.2.0",
   "_resolution": {
     "type": "version",
-    "tag": "v1.0.2",
-    "commit": "18bda194750ace719102d54c17ae1c6ce4a6793e"
+    "tag": "v1.2.0",
+    "commit": "66dc50a940aa9a3a067137defe1712aa85de6f35"
   },
-  "_source": "git://github.com/PolymerElements/paper-spinner.git",
-  "_target": "^1.0.0",
-  "_originalSource": "PolymerElements/paper-spinner"
+  "_source": "https://github.com/PolymerElements/paper-spinner.git",
+  "_target": "~1.2.0",
+  "_originalSource": "paper-spinner",
+  "_direct": true
 }
 \ No newline at end of file
+<!-- Instructions: https://github.com/PolymerElements/paper-spinner/CONTRIBUTING.md#filing-issues -->
+### Description
+<!-- Example: The `paper-foo` element causes the page to turn pink when clicked. -->
+
+### Expected outcome
+
+<!-- Example: The page stays the same color. -->
+
+### Actual outcome
+
+<!-- Example: The page turns pink. -->
+
+### Live Demo
+<!-- Example: https://jsbin.com/cagaye/edit?html,output -->
+
+### Steps to reproduce
+
+<!-- Example
+1. Put a `paper-foo` element in the page.
+2. Open the page in a web browser.
+3. Click the `paper-foo` element.
+-->
+
+### Browsers Affected
+<!-- Check all that apply -->
+- [ ] Chrome
+- [ ] Firefox
+- [ ] Safari 9
+- [ ] Safari 8
+- [ ] Safari 7
+- [ ] Edge
+- [ ] IE 11
+- [ ] IE 10
+language: node_js
+sudo: required
+before_script:
+  - npm install -g bower polylint web-component-tester
+  - bower install
+  - polylint
+env:
+  global:
+    - secure: dpHtK5BMl68o/D6cQO9VsQWBPVuTrFPC56NT6kBLbiQtmxG2E2FD8dN4cHuEWafZopwYSsLLmEIIK77FMaonTSmzos5EixIQyqGxWTyNTpthg0Jenzc+6vZEs3h+3LDodFjdZSu8FgKyxU8SFLLGjAsSy8aegUNBszy7/SY8FAM=
+    - secure: EASvFsWb/njjh3DOLD5Oz3nw4QPl4aIhDAIhU2qelb2UCp8Q/KGniU7VjNoQ7OSN05jh2ooz8Pu3cAhLmrWumJn2atXEXvRPKtT/+1Ciy3xFcvgmqM0RHB+7qSSOUwgvPW9bwdzVxxMjAW7Oqb7w3nVn9/mEv2sMPNSv7iEbiUI=
+node_js: stable
+addons:
+  firefox: latest
+  apt:
+    sources:
+      - google-chrome
+    packages:
+      - google-chrome-stable
+  sauce_connect: true
+script:
+  - xvfb-run wct
+  - "if [ \"${TRAVIS_PULL_REQUEST}\" = \"false\" ]; then wct -s 'default'; fi"
+dist: trusty
+<!--
+This file is autogenerated based on
+https://github.com/PolymerElements/ContributionGuide/blob/master/CONTRIBUTING.md
+
+If you edit that file, it will get updated everywhere else.
+If you edit this file, your changes will get overridden :)
+
+You can however override the jsbin link with one that's customized to this
+specific element:
+
+jsbin=https://jsbin.com/cagaye/edit?html,output
+-->
+
+# Polymer Elements
+## Guide for Contributors
+
+Polymer Elements are built in the open, and the Polymer authors eagerly encourage any and all forms of community contribution. When contributing, please follow these guidelines:
+
+### Filing Issues
+
+**If you are filing an issue to request a feature**, please provide a clear description of the feature. It can be helpful to describe answers to the following questions:
+
+ 1. **Who will use the feature?** _“As someone filling out a form…”_
+ 2. **When will they use the feature?** _“When I enter an invalid value…”_
+ 3. **What is the user’s goal?** _“I want to be visually notified that the value needs to be corrected…”_
+
+**If you are filing an issue to report a bug**, please provide:
+
+ 1. **A clear description of the bug and related expectations.** Consider using the following example template for reporting a bug:
+
+ ```markdown
+ The `paper-foo` element causes the page to turn pink when clicked.
+
+ ## Expected outcome
+
+ The page stays the same color.
+
+ ## Actual outcome
+
+ The page turns pink.
+
+ ## Steps to reproduce
+
+ 1. Put a `paper-foo` element in the page.
+ 2. Open the page in a web browser.
+ 3. Click the `paper-foo` element.
+ ```
+
+ 2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [https://jsbin.com/cagaye/edit?html,output](https://jsbin.com/cagaye/edit?html,output).
+
+ 3. **A list of browsers where the problem occurs.** This can be skipped if the problem is the same across all browsers.
+
+### Submitting Pull Requests
+
+**Before creating a pull request**, please ensure that an issue exists for the corresponding change in the pull request that you intend to make. **If an issue does not exist, please create one per the guidelines above**. The goal is to discuss the design and necessity of the proposed change with Polymer authors and community before diving into a pull request.
+
+When submitting pull requests, please provide:
+
+ 1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues in the pull request description using the following syntax:
+
+ ```markdown
+ (For a single issue)
+ Fixes #20
+
+ (For multiple issues)
+ Fixes #32, fixes #40
+ ```
+
+ 2. **A succinct description of the design** used to fix any related issues. For example:
+
+ ```markdown
+ This fixes #20 by removing styles that leaked which would cause the page to turn pink whenever `paper-foo` is clicked.
+ ```
+
+ 3. **At least one test for each bug fixed or feature added** as part of the pull request. Pull requests that fix bugs or add features without accompanying tests will not be considered.
+
+If a proposed change contains multiple commits, please [squash commits](https://www.google.com/url?q=http://blog.steveklabnik.com/posts/2012-11-08-how-to-squash-commits-in-a-github-pull-request) to as few as is necessary to succinctly express the change. A Polymer author can help you squash commits, so don’t be afraid to ask us if you need help with that!
-paper-spinner
-=============
-Element providing material design circular spinner.
+<!---
-##### Example
+This README is automatically generated from the comments in these files:
+paper-spinner-behavior.html  paper-spinner-lite.html  paper-spinner.html
+
+Edit those files, and our readme bot will duplicate them over here!
+Edit this file, and the bot will squash your changes :)
+
+The bot does some handling of markdown. Please file a bug if it does the wrong
+thing! https://github.com/PolymerLabs/tedium/issues
+
+-->
+
+[![Build status](https://travis-ci.org/PolymerElements/paper-spinner.svg?branch=master)](https://travis-ci.org/PolymerElements/paper-spinner)
+
+_[Demo and API docs](https://elements.polymer-project.org/elements/paper-spinner)_
+
+
+##&lt;paper-spinner&gt;
+
+Material design: [Progress & activity](https://www.google.com/design/spec/components/progress-activity.html)
+
+Element providing a multiple color material design circular spinner.
 ```html
 <paper-spinner active></paper-spinner>
 ```
 The default spinner cycles between four layers of colors; by default they are
-blue, red, yellow and green. It can be customized so that it uses one color only
-by setting all the layer colors to the same value.
+blue, red, yellow and green. It can be customized to cycle between four different
+colors. Use <paper-spinner-lite> for single color spinners.
+
+### Accessibility
+
+Alt attribute should be set to provide adequate context for accessibility. If not provided,
+it defaults to 'loading'.
+Empty alt can be provided to mark the element as decorative if alternative content is provided
+in another form (e.g. a text block following the spinner).
+
+```html
+<paper-spinner alt="Loading contacts list" active></paper-spinner>
+```
+
+### Styling
+
+The following custom properties and mixins are available for styling:
+
+| Custom property | Description | Default |
+| --- | --- | --- |
+| `--paper-spinner-layer-1-color` | Color of the first spinner rotation | `--google-blue-500` |
+| `--paper-spinner-layer-2-color` | Color of the second spinner rotation | `--google-red-500` |
+| `--paper-spinner-layer-3-color` | Color of the third spinner rotation | `--google-yellow-500` |
+| `--paper-spinner-layer-4-color` | Color of the fourth spinner rotation | `--google-green-500` |
+| `--paper-spinner-stroke-width` | The width of the spinner stroke | 3px |
+
-##### Example
+
+##&lt;paper-spinner-lite&gt;
+
+Material design: [Progress & activity](https://www.google.com/design/spec/components/progress-activity.html)
+
+Element providing a single color material design circular spinner.
 ```html
-<style is="custom-style">
-  paper-spinner .rainbow {
-    --paper-spinner-layer-1-color: yellow;
-    --paper-spinner-layer-2-color: red;
-    --paper-spinner-layer-3-color: blue;
-    --paper-spinner-layer-4-color: green;
-  }
-
-  paper-spinner .red {
-    --paper-spinner-layer-1-color: red;
-    --paper-spinner-layer-2-color: red;
-    --paper-spinner-layer-3-color: red;
-    --paper-spinner-layer-4-color: red;
-  }
-</style>
+<paper-spinner-lite active></paper-spinner-lite>
 ```
+The default spinner is blue. It can be customized to be a different color.
+
+### Accessibility
+
 Alt attribute should be set to provide adequate context for accessibility. If not provided,
 it defaults to 'loading'.
 Empty alt can be provided to mark the element as decorative if alternative content is provided
 in another form (e.g. a text block following the spinner).
-##### Example
-
 ```html
-<paper-spinner alt="Loading contacts list" active></paper-spinner>
+<paper-spinner-lite alt="Loading contacts list" active></paper-spinner-lite>
 ```
+
+### Styling
+
+The following custom properties and mixins are available for styling:
+
+| Custom property | Description | Default |
+| --- | --- | --- |
+| `--paper-spinner-color` | Color of the spinner | `--google-blue-500` |
+| `--paper-spinner-stroke-width` | The width of the spinner stroke | 3px |
+
+
+
+<!-- No docs for Polymer.PaperSpinnerBehavior found. -->
 {
   "name": "paper-spinner",
-  "version": "1.0.2",
+  "version": "1.2.0",
   "description": "A material design spinner",
   "authors": [
     "The Polymer Authors"
@@ -22,12 +22,17 @@
   "dependencies": {
     "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
     "paper-styles": "PolymerElements/paper-styles#^1.0.0",
-    "polymer": "Polymer/polymer#^1.0.0"
+    "polymer": "Polymer/polymer#^1.1.0"
   },
   "devDependencies": {
-    "web-component-tester": "*",
     "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
+    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
     "test-fixture": "PolymerElements/test-fixture#^1.0.0",
+    "web-component-tester": "^4.0.0",
     "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
-  }
+  },
+  "main": [
+    "paper-spinner.html",
+    "paper-spinner-lite.html"
+  ]
 }
@@ -9,89 +9,89 @@ Code distributed by Google as part of the polymer project is also
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 -->
 <html lang="en">
-
   <head>
-    <meta charset="UTF-8">
     <title>paper-spinner demo</title>
-    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
-    <link rel="import" href="../../paper-styles/demo-pages.html">
-    <link rel="import" href="../paper-spinner.html">
-
-    <style is="custom-style">
-      .horizontal-section {
-        width: 100px;
-      }
-      paper-spinner, button {
-        display: block;
-        margin-bottom: 24px;
-        margin-left: auto;
-        margin-right: auto;
-      }
+    <meta charset="UTF-8">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
-      paper-spinner.blue {
-        --paper-spinner-layer-1-color: var(--paper-light-blue-500);
-        --paper-spinner-layer-2-color: var(--paper-light-blue-500);
-        --paper-spinner-layer-3-color: var(--paper-light-blue-500);
-        --paper-spinner-layer-4-color: var(--paper-light-blue-500);
-      }
+    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
-      paper-spinner.red {
-        --paper-spinner-layer-1-color: var(--paper-red-500);
-        --paper-spinner-layer-2-color: var(--paper-red-500);
-        --paper-spinner-layer-3-color: var(--paper-red-500);
-        --paper-spinner-layer-4-color: var(--paper-red-500);
-      }
+    <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="../../paper-styles/color.html">
+    <link rel="import" href="../paper-spinner-lite.html">
+    <link rel="import" href="../paper-spinner.html">
-      paper-spinner.orange {
-        --paper-spinner-layer-1-color: var(--paper-orange-500);
-        --paper-spinner-layer-2-color: var(--paper-orange-500);
-        --paper-spinner-layer-3-color: var(--paper-orange-500);
-        --paper-spinner-layer-4-color: var(--paper-orange-500);
+    <style is="custom-style" include="demo-pages-shared-styles">
+      .vertical-section-container {
+        max-width: 550px;
       }
-      paper-spinner.green {
-        --paper-spinner-layer-1-color: var(--paper-green-500);
-        --paper-spinner-layer-2-color: var(--paper-green-500);
-        --paper-spinner-layer-3-color: var(--paper-green-500);
-        --paper-spinner-layer-4-color: var(--paper-green-500);
+      paper-spinner, paper-spinner-lite {
+        margin-right: 24px;
       }
     </style>
   </head>
-
   <body unresolved>
-    <div class="horizontal-section-container">
-      <div>
-        <h4>Default</h4>
-        <div class="horizontal-section">
-          <paper-spinner></paper-spinner>
-          <paper-spinner active></paper-spinner>
+    <div class="vertical-section-container centered">
+      <h3>Spinners can be deactivated or activated</h3>
+      <demo-snippet class="centered-demo">
+        <template>
           <paper-spinner></paper-spinner>
           <paper-spinner active></paper-spinner>
-          <button onclick="toggle(event)">Toggle</button>
-        </div>
-      </div>
-      <div>
-        <h4>Color</h4>
-        <div class="horizontal-section">
-          <paper-spinner class="blue" active></paper-spinner>
-          <paper-spinner class="red" active></paper-spinner>
-          <paper-spinner class="orange" active></paper-spinner>
-          <paper-spinner class="green" active></paper-spinner>
+          <paper-spinner-lite></paper-spinner-lite>
+          <paper-spinner-lite active></paper-spinner-lite>
+
           <button onclick="toggle(event)">Toggle</button>
-        </div>
-      </div>
+        </template>
+      </demo-snippet>
+
+      <h3>Spinners can be styled using custom properties</h3>
+      <demo-snippet class="centered-demo">
+        <template>
+          <style is="custom-style">
+            paper-spinner.multi {
+              --paper-spinner-layer-1-color: var(--paper-purple-500);
+              --paper-spinner-layer-2-color: var(--paper-cyan-500);
+              --paper-spinner-layer-3-color: var(--paper-blue-grey-500);
+              --paper-spinner-layer-4-color: var(--paper-amber-500);
+            }
+            paper-spinner-lite.orange {
+              --paper-spinner-color: var(--google-yellow-500);
+            }
+            paper-spinner-lite.green {
+              --paper-spinner-color: var(--google-green-500);
+            }
+            paper-spinner-lite.thin {
+              --paper-spinner-stroke-width: 1px;
+            }
+            paper-spinner-lite.thick {
+              --paper-spinner-stroke-width: 6px;
+            }
+          </style>
+
+          <paper-spinner class="multi" active></paper-spinner>
+
+          <paper-spinner-lite class="orange" active></paper-spinner-lite>
+          <paper-spinner-lite class="green" active></paper-spinner-lite>
+
+          <paper-spinner-lite class="thin" active></paper-spinner-lite>
+          <paper-spinner-lite class="thick" active></paper-spinner-lite>
+        </template>
+      </demo-snippet>
     </div>
     <script>
       function toggle(event) {
-        var spinners = event.target.parentElement.querySelectorAll('paper-spinner');
+        var spinners = event.target.parentElement.querySelectorAll('paper-spinner, paper-spinner-lite');
         Array.prototype.forEach.call(spinners, function(spinner) {
           spinner.active = !spinner.active;
         });
       };
     </script>
   </body>
-
 </html>
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<link rel="import" href="../polymer/polymer.html">
+
+<script>
+
+  /** @polymerBehavior */
+  Polymer.PaperSpinnerBehavior = {
+
+    listeners: {
+      'animationend': '__reset',
+      'webkitAnimationEnd': '__reset'
+    },
+
+    properties: {
+      /**
+       * Displays the spinner.
+       */
+      active: {
+        type: Boolean,
+        value: false,
+        reflectToAttribute: true,
+        observer: '__activeChanged'
+      },
+
+      /**
+       * Alternative text content for accessibility support.
+       * If alt is present, it will add an aria-label whose content matches alt when active.
+       * If alt is not present, it will default to 'loading' as the alt value.
+       */
+      alt: {
+        type: String,
+        value: 'loading',
+        observer: '__altChanged'
+      },
+
+      __coolingDown: {
+        type: Boolean,
+        value: false
+      }
+    },
+
+    __computeContainerClasses: function(active, coolingDown) {
+      return [
+        active || coolingDown ? 'active' : '',
+        coolingDown ? 'cooldown' : ''
+      ].join(' ');
+    },
+
+    __activeChanged: function(active, old) {
+      this.__setAriaHidden(!active);
+      this.__coolingDown = !active && old;
+    },
+
+    __altChanged: function(alt) {
+      // user-provided `aria-label` takes precedence over prototype default
+      if (alt === this.getPropertyInfo('alt').value) {
+        this.alt = this.getAttribute('aria-label') || alt;
+      } else {
+        this.__setAriaHidden(alt==='');
+        this.setAttribute('aria-label', alt);
+      }
+    },
+
+    __setAriaHidden: function(hidden) {
+      var attr = 'aria-hidden';
+      if (hidden) {
+        this.setAttribute(attr, 'true');
+      } else {
+        this.removeAttribute(attr);
+      }
+    },
+
+    __reset: function() {
+      this.active = false;
+      this.__coolingDown = false;
+    }
+  };
+</script>
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
+<link rel="import" href="../paper-styles/color.html">
+<link rel="import" href="paper-spinner-behavior.html">
+<link rel="import" href="paper-spinner-styles.html">
+
+<!--
+Material design: [Progress & activity](https://www.google.com/design/spec/components/progress-activity.html)
+
+Element providing a single color material design circular spinner.
+
+    <paper-spinner-lite active></paper-spinner-lite>
+
+The default spinner is blue. It can be customized to be a different color.
+
+### Accessibility
+
+Alt attribute should be set to provide adequate context for accessibility. If not provided,
+it defaults to 'loading'.
+Empty alt can be provided to mark the element as decorative if alternative content is provided
+in another form (e.g. a text block following the spinner).
+
+    <paper-spinner-lite alt="Loading contacts list" active></paper-spinner-lite>
+
+### Styling
+
+The following custom properties and mixins are available for styling:
+
+Custom property | Description | Default
+----------------|-------------|----------
+`--paper-spinner-color` | Color of the spinner | `--google-blue-500`
+`--paper-spinner-stroke-width` | The width of the spinner stroke | 3px
+
+@group Paper Elements
+@element paper-spinner-lite
+@hero hero.svg
+@demo demo/index.html
+-->
+
+<dom-module id="paper-spinner-lite">
+  <template strip-whitespace>
+    <style include="paper-spinner-styles"></style>
+
+    <div id="spinnerContainer" class-name="[[__computeContainerClasses(active, __coolingDown)]]">
+      <div class="spinner-layer">
+        <div class="circle-clipper left"></div>
+        <div class="circle-clipper right"></div>
+      </div>
+    </div>
+  </template>
+
+  <script>
+    Polymer({
+      is: 'paper-spinner-lite',
+
+      behaviors: [
+        Polymer.PaperSpinnerBehavior
+      ]
+    });
+  </script>
+</dom-module>
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<dom-module id="paper-spinner-styles">
+  <template>
+    <style>
+      /*
+      /**************************/
+      /* STYLES FOR THE SPINNER */
+      /**************************/
+
+      /*
+       * Constants:
+       *      ARCSIZE     = 270 degrees (amount of circle the arc takes up)
+       *      ARCTIME     = 1333ms (time it takes to expand and contract arc)
+       *      ARCSTARTROT = 216 degrees (how much the start location of the arc
+       *                                should rotate each time, 216 gives us a
+       *                                5 pointed star shape (it's 360/5 * 3).
+       *                                For a 7 pointed star, we might do
+       *                                360/7 * 3 = 154.286)
+       *      SHRINK_TIME = 400ms
+       */
+
+      :host {
+        display: inline-block;
+        position: relative;
+        width: 28px;
+        height: 28px;
+
+        /* 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */
+        --paper-spinner-container-rotation-duration: 1568ms;
+
+        /* ARCTIME */
+        --paper-spinner-expand-contract-duration: 1333ms;
+
+        /* 4 * ARCTIME */
+        --paper-spinner-full-cycle-duration: 5332ms;
+
+        /* SHRINK_TIME */
+        --paper-spinner-cooldown-duration: 400ms;
+      }
+
+      #spinnerContainer {
+        width: 100%;
+        height: 100%;
+
+        /* The spinner does not have any contents that would have to be
+         * flipped if the direction changes. Always use ltr so that the
+         * style works out correctly in both cases. */
+        direction: ltr;
+      }
+
+      #spinnerContainer.active {
+        -webkit-animation: container-rotate var(--paper-spinner-container-rotation-duration) linear infinite;
+        animation: container-rotate var(--paper-spinner-container-rotation-duration) linear infinite;
+      }
+
+      @-webkit-keyframes container-rotate {
+        to { -webkit-transform: rotate(360deg) }
+      }
+
+      @keyframes container-rotate {
+        to { transform: rotate(360deg) }
+      }
+
+      .spinner-layer {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        opacity: 0;
+        white-space: nowrap;
+        border-color: var(--paper-spinner-color, --google-blue-500);
+      }
+
+      .layer-1 {
+        border-color: var(--paper-spinner-layer-1-color, --google-blue-500);
+      }
+
+      .layer-2 {
+        border-color: var(--paper-spinner-layer-2-color, --google-red-500);
+      }
+
+      .layer-3 {
+        border-color: var(--paper-spinner-layer-3-color, --google-yellow-500);
+      }
+
+      .layer-4 {
+        border-color: var(--paper-spinner-layer-4-color, --google-green-500);
+      }
+
+      /**
+       * IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee):
+       *
+       * iOS Safari (tested on iOS 8.1) does not handle animation-delay very well - it doesn't
+       * guarantee that the animation will start _exactly_ after that value. So we avoid using
+       * animation-delay and instead set custom keyframes for each color (as layer-2undant as it
+       * seems).
+       */
+      .active .spinner-layer {
+        -webkit-animation-name: fill-unfill-rotate;
+        -webkit-animation-duration: var(--paper-spinner-full-cycle-duration);
+        -webkit-animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
+        -webkit-animation-iteration-count: infinite;
+        animation-name: fill-unfill-rotate;
+        animation-duration: var(--paper-spinner-full-cycle-duration);
+        animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
+        animation-iteration-count: infinite;
+        opacity: 1;
+      }
+
+      .active .spinner-layer.layer-1 {
+        -webkit-animation-name: fill-unfill-rotate, layer-1-fade-in-out;
+        animation-name: fill-unfill-rotate, layer-1-fade-in-out;
+      }
+
+      .active .spinner-layer.layer-2 {
+        -webkit-animation-name: fill-unfill-rotate, layer-2-fade-in-out;
+        animation-name: fill-unfill-rotate, layer-2-fade-in-out;
+      }
+
+      .active .spinner-layer.layer-3 {
+        -webkit-animation-name: fill-unfill-rotate, layer-3-fade-in-out;
+        animation-name: fill-unfill-rotate, layer-3-fade-in-out;
+      }
+
+      .active .spinner-layer.layer-4 {
+        -webkit-animation-name: fill-unfill-rotate, layer-4-fade-in-out;
+        animation-name: fill-unfill-rotate, layer-4-fade-in-out;
+      }
+
+      @-webkit-keyframes fill-unfill-rotate {
+        12.5% { -webkit-transform: rotate(135deg) } /* 0.5 * ARCSIZE */
+        25%   { -webkit-transform: rotate(270deg) } /* 1   * ARCSIZE */
+        37.5% { -webkit-transform: rotate(405deg) } /* 1.5 * ARCSIZE */
+        50%   { -webkit-transform: rotate(540deg) } /* 2   * ARCSIZE */
+        62.5% { -webkit-transform: rotate(675deg) } /* 2.5 * ARCSIZE */
+        75%   { -webkit-transform: rotate(810deg) } /* 3   * ARCSIZE */
+        87.5% { -webkit-transform: rotate(945deg) } /* 3.5 * ARCSIZE */
+        to    { -webkit-transform: rotate(1080deg) } /* 4   * ARCSIZE */
+      }
+
+      @keyframes fill-unfill-rotate {
+        12.5% { transform: rotate(135deg) } /* 0.5 * ARCSIZE */
+        25%   { transform: rotate(270deg) } /* 1   * ARCSIZE */
+        37.5% { transform: rotate(405deg) } /* 1.5 * ARCSIZE */
+        50%   { transform: rotate(540deg) } /* 2   * ARCSIZE */
+        62.5% { transform: rotate(675deg) } /* 2.5 * ARCSIZE */
+        75%   { transform: rotate(810deg) } /* 3   * ARCSIZE */
+        87.5% { transform: rotate(945deg) } /* 3.5 * ARCSIZE */
+        to    { transform: rotate(1080deg) } /* 4   * ARCSIZE */
+      }
+
+      @-webkit-keyframes layer-1-fade-in-out {
+        0% { opacity: 1 }
+        25% { opacity: 1 }
+        26% { opacity: 0 }
+        89% { opacity: 0 }
+        90% { opacity: 1 }
+        to { opacity: 1 }
+      }
+
+      @keyframes layer-1-fade-in-out {
+        0% { opacity: 1 }
+        25% { opacity: 1 }
+        26% { opacity: 0 }
+        89% { opacity: 0 }
+        90% { opacity: 1 }
+        to { opacity: 1 }
+      }
+
+      @-webkit-keyframes layer-2-fade-in-out {
+        0% { opacity: 0 }
+        15% { opacity: 0 }
+        25% { opacity: 1 }
+        50% { opacity: 1 }
+        51% { opacity: 0 }
+        to { opacity: 0 }
+      }
+
+      @keyframes layer-2-fade-in-out {
+        0% { opacity: 0 }
+        15% { opacity: 0 }
+        25% { opacity: 1 }
+        50% { opacity: 1 }
+        51% { opacity: 0 }
+        to { opacity: 0 }
+      }
+
+      @-webkit-keyframes layer-3-fade-in-out {
+        0% { opacity: 0 }
+        40% { opacity: 0 }
+        50% { opacity: 1 }
+        75% { opacity: 1 }
+        76% { opacity: 0 }
+        to { opacity: 0 }
+      }
+
+      @keyframes layer-3-fade-in-out {
+        0% { opacity: 0 }
+        40% { opacity: 0 }
+        50% { opacity: 1 }
+        75% { opacity: 1 }
+        76% { opacity: 0 }
+        to { opacity: 0 }
+      }
+
+      @-webkit-keyframes layer-4-fade-in-out {
+        0% { opacity: 0 }
+        65% { opacity: 0 }
+        75% { opacity: 1 }
+        90% { opacity: 1 }
+        to { opacity: 0 }
+      }
+
+      @keyframes layer-4-fade-in-out {
+        0% { opacity: 0 }
+        65% { opacity: 0 }
+        75% { opacity: 1 }
+        90% { opacity: 1 }
+        to { opacity: 0 }
+      }
+
+      .circle-clipper {
+        display: inline-block;
+        position: relative;
+        width: 50%;
+        height: 100%;
+        overflow: hidden;
+        border-color: inherit;
+      }
+
+      /**
+       * Patch the gap that appear between the two adjacent div.circle-clipper while the
+       * spinner is rotating (appears on Chrome 50, Safari 9.1.1, and Edge).
+       */
+      .spinner-layer::after {
+        left: 45%;
+        width: 10%;
+        border-top-style: solid;
+      }
+
+      .spinner-layer::after,
+      .circle-clipper::after {
+        content: '';
+        box-sizing: border-box;
+        position: absolute;
+        top: 0;
+        border-width: var(--paper-spinner-stroke-width, 3px);
+        border-color: inherit;
+        border-radius: 50%;
+      }
+
+      .circle-clipper::after {
+        bottom: 0;
+        width: 200%;
+        border-style: solid;
+        border-bottom-color: transparent !important;
+      }
+
+      .circle-clipper.left::after {
+        left: 0;
+        border-right-color: transparent !important;
+        -webkit-transform: rotate(129deg);
+        transform: rotate(129deg);
+      }
+
+      .circle-clipper.right::after {
+        left: -100%;
+        border-left-color: transparent !important;
+        -webkit-transform: rotate(-129deg);
+        transform: rotate(-129deg);
+      }
+
+      .active .gap-patch::after,
+      .active .circle-clipper::after {
+        -webkit-animation-duration: var(--paper-spinner-expand-contract-duration);
+        -webkit-animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
+        -webkit-animation-iteration-count: infinite;
+        animation-duration: var(--paper-spinner-expand-contract-duration);
+        animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
+        animation-iteration-count: infinite;
+      }
+
+      .active .circle-clipper.left::after {
+        -webkit-animation-name: left-spin;
+        animation-name: left-spin;
+      }
+
+      .active .circle-clipper.right::after {
+        -webkit-animation-name: right-spin;
+        animation-name: right-spin;
+      }
+
+      @-webkit-keyframes left-spin {
+        0% { -webkit-transform: rotate(130deg) }
+        50% { -webkit-transform: rotate(-5deg) }
+        to { -webkit-transform: rotate(130deg) }
+      }
+
+      @keyframes left-spin {
+        0% { transform: rotate(130deg) }
+        50% { transform: rotate(-5deg) }
+        to { transform: rotate(130deg) }
+      }
+
+      @-webkit-keyframes right-spin {
+        0% { -webkit-transform: rotate(-130deg) }
+        50% { -webkit-transform: rotate(5deg) }
+        to { -webkit-transform: rotate(-130deg) }
+      }
+
+      @keyframes right-spin {
+        0% { transform: rotate(-130deg) }
+        50% { transform: rotate(5deg) }
+        to { transform: rotate(-130deg) }
+      }
+
+      #spinnerContainer.cooldown {
+        -webkit-animation: container-rotate var(--paper-spinner-container-rotation-duration) linear infinite, fade-out var(--paper-spinner-cooldown-duration) cubic-bezier(0.4, 0.0, 0.2, 1);
+        animation: container-rotate var(--paper-spinner-container-rotation-duration) linear infinite, fade-out var(--paper-spinner-cooldown-duration) cubic-bezier(0.4, 0.0, 0.2, 1);
+      }
+
+      @-webkit-keyframes fade-out {
+        0% { opacity: 1 }
+        to { opacity: 0 }
+      }
+
+      @keyframes fade-out {
+        0% { opacity: 1 }
+        to { opacity: 0 }
+      }
+    </style>
+  </template>
+</dom-module>
-/**
-@license
-Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-
-*/
-/**************************/
-/* STYLES FOR THE SPINNER */
-/**************************/
-
-/*
- * Constants:
- *      STROKEWIDTH = 3px
- *      ARCSIZE     = 270 degrees (amount of circle the arc takes up)
- *      ARCTIME     = 1333ms (time it takes to expand and contract arc)
- *      ARCSTARTROT = 216 degrees (how much the start location of the arc
- *                                should rotate each time, 216 gives us a
- *                                5 pointed star shape (it's 360/5 * 3).
- *                                For a 7 pointed star, we might do
- *                                360/7 * 3 = 154.286)
- *      CONTAINERWIDTH = 28px
- *      SHRINK_TIME = 400ms
- */
-
-:host {
-  display: inline-block;
-  position: relative;
-  width: 28px; /* CONTAINERWIDTH */
-  height: 28px; /* CONTAINERWIDTH */
-}
-
-#spinnerContainer {
-  width: 100%;
-  height: 100%;
-
-  /* The spinner does not have any contents that would have to be
-   * flipped if the direction changes. Always use ltr so that the
-   * style works out correctly in both cases. */
-  direction: ltr;
-}
-
-#spinnerContainer.active {
-  /* duration: 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */
-  -webkit-animation: container-rotate 1568ms linear infinite;
-  animation: container-rotate 1568ms linear infinite;
-}
-
-@-webkit-keyframes container-rotate {
-  to { -webkit-transform: rotate(360deg) }
-}
-
-@keyframes container-rotate {
-  to { transform: rotate(360deg) }
-}
-
-.spinner-layer {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  opacity: 0;
-}
-
-.layer-1 {
-  border-color: var(--paper-spinner-layer-1-color, --google-blue-500);
-}
-
-.layer-2 {
-  border-color: var(--paper-spinner-layer-2-color, --google-red-500);
-}
-
-.layer-3 {
-  border-color: var(--paper-spinner-layer-3-color, --google-yellow-500);
-}
-
-.layer-4 {
-  border-color: var(--paper-spinner-layer-4-color, --google-blue-500);
-}
-
-/**
- * IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee):
- *
- * iOS Safari (tested on iOS 8.1) does not handle animation-delay very well - it doesn't
- * guarantee that the animation will start _exactly_ after that value. So we avoid using
- * animation-delay and instead set custom keyframes for each color (as layer-2undant as it
- * seems).
- *
- * We write out each animation in full (instead of separating animation-name,
- * animation-duration, etc.) because under the polyfill, Safari does not recognize those
- * specific properties properly, treats them as -webkit-animation, and overrides the
- * other animation rules. See https://github.com/Polymer/platform/issues/53.
- */
-.active .spinner-layer.layer-1 {
-  /* durations: 4 * ARCTIME */
-  -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, layer-1-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
-  animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, layer-1-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
-}
-
-.active .spinner-layer.layer-2 {
-  /* durations: 4 * ARCTIME */
-  -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, layer-2-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
-  animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, layer-2-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
-}
-
-.active .spinner-layer.layer-3 {
-  /* durations: 4 * ARCTIME */
-  -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, layer-3-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
-  animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, layer-3-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
-}
-
-.active .spinner-layer.layer-4 {
-  /* durations: 4 * ARCTIME */
-  -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, layer-4-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
-  animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, layer-4-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
-}
-
-@-webkit-keyframes fill-unfill-rotate {
-  12.5% { -webkit-transform: rotate(135deg);  } /* 0.5 * ARCSIZE */
-  25%   { -webkit-transform: rotate(270deg);  } /* 1   * ARCSIZE */
-  37.5% { -webkit-transform: rotate(405deg);  } /* 1.5 * ARCSIZE */
-  50%   { -webkit-transform: rotate(540deg);  } /* 2   * ARCSIZE */
-  62.5% { -webkit-transform: rotate(675deg);  } /* 2.5 * ARCSIZE */
-  75%   { -webkit-transform: rotate(810deg);  } /* 3   * ARCSIZE */
-  87.5% { -webkit-transform: rotate(945deg);  } /* 3.5 * ARCSIZE */
-  to    { -webkit-transform: rotate(1080deg); } /* 4   * ARCSIZE */
-}
-
-@keyframes fill-unfill-rotate {
-  12.5% { transform: rotate(135deg);  } /* 0.5 * ARCSIZE */
-  25%   { transform: rotate(270deg);  } /* 1   * ARCSIZE */
-  37.5% { transform: rotate(405deg);  } /* 1.5 * ARCSIZE */
-  50%   { transform: rotate(540deg);  } /* 2   * ARCSIZE */
-  62.5% { transform: rotate(675deg);  } /* 2.5 * ARCSIZE */
-  75%   { transform: rotate(810deg);  } /* 3   * ARCSIZE */
-  87.5% { transform: rotate(945deg);  } /* 3.5 * ARCSIZE */
-  to    { transform: rotate(1080deg); } /* 4   * ARCSIZE */
-}
-
-/**
- * HACK: Even though the intention is to have the current .spinner-layer at
- * `opacity: 1`, we set it to `opacity: 0.99` instead since this forces Chrome
- * to do proper subpixel rendering for the elements being animated. This is
- * especially visible in Chrome 39 on Ubuntu 14.04. See:
- *
- * - https://github.com/Polymer/paper-spinner/issues/9
- * - https://code.google.com/p/chromium/issues/detail?id=436255
- */
-@-webkit-keyframes layer-1-fade-in-out {
-  from { opacity: 0.99; }
-  25% { opacity: 0.99; }
-  26% { opacity: 0; }
-  89% { opacity: 0; }
-  90% { opacity: 0.99; }
-  100% { opacity: 0.99; }
-}
-
-@keyframes layer-1-fade-in-out {
-  from { opacity: 0.99; }
-  25% { opacity: 0.99; }
-  26% { opacity: 0; }
-  89% { opacity: 0; }
-  90% { opacity: 0.99; }
-  100% { opacity: 0.99; }
-}
-
-@-webkit-keyframes layer-2-fade-in-out {
-  from { opacity: 0; }
-  15% { opacity: 0; }
-  25% { opacity: 0.99; }
-  50% { opacity: 0.99; }
-  51% { opacity: 0; }
-}
-
-@keyframes layer-2-fade-in-out {
-  from { opacity: 0; }
-  15% { opacity: 0; }
-  25% { opacity: 0.99; }
-  50% { opacity: 0.99; }
-  51% { opacity: 0; }
-}
-
-@-webkit-keyframes layer-3-fade-in-out {
-  from { opacity: 0; }
-  40% { opacity: 0; }
-  50% { opacity: 0.99; }
-  75% { opacity: 0.99; }
-  76% { opacity: 0; }
-}
-
-@keyframes layer-3-fade-in-out {
-  from { opacity: 0; }
-  40% { opacity: 0; }
-  50% { opacity: 0.99; }
-  75% { opacity: 0.99; }
-  76% { opacity: 0; }
-}
-
-@-webkit-keyframes layer-4-fade-in-out {
-  from { opacity: 0; }
-  65% { opacity: 0; }
-  75% { opacity: 0.99; }
-  90% { opacity: 0.99; }
-  100% { opacity: 0; }
-}
-
-@keyframes layer-4-fade-in-out {
-  from { opacity: 0; }
-  65% { opacity: 0; }
-  75% { opacity: 0.99; }
-  90% { opacity: 0.99; }
-  100% { opacity: 0; }
-}
-
-/**
- * Patch the gap that appear between the two adjacent div.circle-clipper while the
- * spinner is rotating (appears on Chrome 38, Safari 7.1, and IE 11).
- *
- * Update: the gap no longer appears on Chrome when .spinner-layer's opacity is 0.99,
- * but still does on Safari and IE.
- */
-.gap-patch {
-  position: absolute;
-  box-sizing: border-box;
-  top: 0;
-  left: 45%;
-  width: 10%;
-  height: 100%;
-  overflow: hidden;
-  border-color: inherit;
-}
-
-.gap-patch .circle {
-  width: 1000%;
-  left: -450%;
-}
-
-.circle-clipper {
-  display: inline-block;
-  position: relative;
-  width: 50%;
-  height: 100%;
-  overflow: hidden;
-  border-color: inherit;
-}
-
-.circle-clipper .circle {
-  width: 200%;
-}
-
-.circle {
-  box-sizing: border-box;
-  height: 100%;
-  border-width: 3px; /* STROKEWIDTH */
-  border-style: solid;
-  border-color: inherit;
-  border-bottom-color: transparent !important;
-  border-radius: 50%;
-  -webkit-animation: none;
-  animation: none;
-
-  @apply(--layout-fit);
-}
-
-.circle-clipper.left .circle {
-  border-right-color: transparent !important;
-  -webkit-transform: rotate(129deg);
-  transform: rotate(129deg);
-}
-
-.circle-clipper.right .circle {
-  left: -100%;
-  border-left-color: transparent !important;
-  -webkit-transform: rotate(-129deg);
-  transform: rotate(-129deg);
-}
-
-.active .circle-clipper.left .circle {
-  /* duration: ARCTIME */
-  -webkit-animation: left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
-  animation: left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
-}
-
-.active .circle-clipper.right .circle {
-  /* duration: ARCTIME */
-  -webkit-animation: right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
-  animation: right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
-}
-
-@-webkit-keyframes left-spin {
-  from { -webkit-transform: rotate(130deg); }
-  50% { -webkit-transform: rotate(-5deg); }
-  to { -webkit-transform: rotate(130deg); }
-}
-
-@keyframes left-spin {
-  from { transform: rotate(130deg); }
-  50% { transform: rotate(-5deg); }
-  to { transform: rotate(130deg); }
-}
-
-@-webkit-keyframes right-spin {
-  from { -webkit-transform: rotate(-130deg); }
-  50% { -webkit-transform: rotate(5deg); }
-  to { -webkit-transform: rotate(-130deg); }
-}
-
-@keyframes right-spin {
-  from { transform: rotate(-130deg); }
-  50% { transform: rotate(5deg); }
-  to { transform: rotate(-130deg); }
-}
-
-#spinnerContainer.cooldown {
-  /* duration: SHRINK_TIME */
-  -webkit-animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
-  animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
-}
-
-@-webkit-keyframes fade-out {
-  from { opacity: 0.99; }
-  to { opacity: 0; }
-}
-
-@keyframes fade-out {
-  from { opacity: 0.99; }
-  to { opacity: 0; }
-}
@@ -9,17 +9,21 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 -->
 <link rel="import" href="../polymer/polymer.html">
-<link rel="import" href="../paper-styles/color.html">
 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
+<link rel="import" href="../paper-styles/color.html">
+<link rel="import" href="paper-spinner-behavior.html">
+<link rel="import" href="paper-spinner-styles.html">
 <!--
-Element providing material design circular spinner.
+Material design: [Progress & activity](https://www.google.com/design/spec/components/progress-activity.html)
+
+Element providing a multiple color material design circular spinner.
     <paper-spinner active></paper-spinner>
 The default spinner cycles between four layers of colors; by default they are
-blue, red, yellow and green. It can be customized so that it uses one color only
-by setting all the layer colors to the same value.
+blue, red, yellow and green. It can be customized to cycle between four different
+colors. Use <paper-spinner-lite> for single color spinners.
 ### Accessibility
@@ -40,6 +44,7 @@ Custom property | Description | Default
 `--paper-spinner-layer-2-color` | Color of the second spinner rotation | `--google-red-500`
 `--paper-spinner-layer-3-color` | Color of the third spinner rotation | `--google-yellow-500`
 `--paper-spinner-layer-4-color` | Color of the fourth spinner rotation | `--google-green-500`
+`--paper-spinner-stroke-width` | The width of the spinner stroke | 3px
 @group Paper Elements
 @element paper-spinner
@@ -48,153 +53,39 @@ Custom property | Description | Default
 -->
 <dom-module id="paper-spinner">
+  <template strip-whitespace>
+    <style include="paper-spinner-styles"></style>
-  <link rel="import" type="css" href="paper-spinner.css">
-
-  <template>
-
-    <div id="spinnerContainer" class-name="[[_spinnerContainerClassName]]">
+    <div id="spinnerContainer" class-name="[[__computeContainerClasses(active, __coolingDown)]]">
       <div class="spinner-layer layer-1">
-        <div class="circle-clipper left">
-          <div class="circle"></div>
-        </div><div class="gap-patch">
-          <div class="circle"></div>
-        </div><div class="circle-clipper right">
-          <div class="circle"></div>
-        </div>
+        <div class="circle-clipper left"></div>
+        <div class="circle-clipper right"></div>
       </div>
       <div class="spinner-layer layer-2">
-        <div class="circle-clipper left">
-          <div class="circle"></div>
-        </div><div class="gap-patch">
-          <div class="circle"></div>
-        </div><div class="circle-clipper right">
-          <div class="circle"></div>
-        </div>
+        <div class="circle-clipper left"></div>
+        <div class="circle-clipper right"></div>
       </div>
       <div class="spinner-layer layer-3">
-        <div class="circle-clipper left">
-          <div class="circle"></div>
-        </div><div class="gap-patch">
-          <div class="circle"></div>
-        </div><div class="circle-clipper right">
-          <div class="circle"></div>
-        </div>
+        <div class="circle-clipper left"></div>
+        <div class="circle-clipper right"></div>
       </div>
       <div class="spinner-layer layer-4">
-        <div class="circle-clipper left">
-          <div class="circle"></div>
-        </div><div class="gap-patch">
-          <div class="circle"></div>
-        </div><div class="circle-clipper right">
-          <div class="circle"></div>
-        </div>
+        <div class="circle-clipper left"></div>
+        <div class="circle-clipper right"></div>
       </div>
     </div>
-
   </template>
   <script>
-
     Polymer({
-
       is: 'paper-spinner',
-      listeners: {
-        'animationend': 'reset',
-        'webkitAnimationEnd': 'reset'
-      },
-
-      properties: {
-
-        /**
-         * Displays the spinner.
-         *
-         * @attribute active
-         * @type boolean
-         * @default false
-         */
-        active: {
-          type: Boolean,
-          value: false,
-          reflectToAttribute: true,
-          observer: '_activeChanged'
-        },
-
-        /**
-         * Alternative text content for accessibility support.
-         * If alt is present, it will add an aria-label whose content matches alt when active.
-         * If alt is not present, it will default to 'loading' as the alt value.
-         *
-         * @attribute alt
-         * @type string
-         * @default 'loading'
-         */
-        alt: {
-          type: String,
-          value: 'loading',
-          observer: '_altChanged'
-        },
-
-        /**
-         * True when the spinner is going from active to inactive. This is represented by a fade
-         * to 0% opacity to the user.
-         */
-        _coolingDown: {
-          type: Boolean,
-          value: false
-        },
-
-        _spinnerContainerClassName: {
-          type: String,
-          computed: '_computeSpinnerContainerClassName(active, _coolingDown)'
-        }
-
-      },
-
-      _computeSpinnerContainerClassName: function(active, coolingDown) {
-        return [
-          active || coolingDown ? 'active' : '',
-          coolingDown ? 'cooldown' : ''
-        ].join(' ');
-      },
-
-      _activeChanged: function(active, old) {
-        this._setAriaHidden(!active);
-        if (!active && old) {
-          this._coolingDown = true;
-        }
-      },
-
-      _altChanged: function(alt) {
-        // user-provided `aria-label` takes precedence over prototype default
-        if (alt === this.getPropertyInfo('alt').value) {
-          this.alt = this.getAttribute('aria-label') || alt;
-        } else {
-          this._setAriaHidden(alt==='');
-          this.setAttribute('aria-label', alt);
-        }
-      },
-
-      _setAriaHidden: function(hidden) {
-        var attr = 'aria-hidden';
-        if (hidden) {
-          this.setAttribute(attr, 'true');
-        } else {
-          this.removeAttribute(attr);
-        }
-      },
-
-      reset: function() {
-        this.active = false;
-        this._coolingDown = false;
-      }
-
+      behaviors: [
+        Polymer.PaperSpinnerBehavior
+      ]
     });
-
   </script>
-
 </dom-module>
-<!doctype html>
-<!--
+<!DOCTYPE html><!--
 @license
 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
@@ -7,9 +6,7 @@ The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 Code distributed by Google as part of the polymer project is also
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
--->
-<html>
-  <head>
+--><html><head>
     <title>paper-spinner tests</title>
@@ -23,12 +20,12 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   <body>
     <script>
-
       WCT.loadSuites([
-        'paper-spinner.html'
+        'paper-spinner.html',
+        'paper-spinner.html?dom=shadow'
       ]);
-
     </script>
-  </body>
-</html>
+  
+
+</body></html>
@@ -31,6 +31,12 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
       </template>
     </test-fixture>
+    <test-fixture id="ActivePaperSpinner">
+      <template>
+        <paper-spinner active></paper-spinner>
+      </template>
+    </test-fixture>
+
     <script>
       'use strict';
@@ -38,9 +44,11 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
         suite('an accessible paper spinner', function() {
           var spinner;
+          var activeSpinner;
           setup(function() {
             spinner = fixture('PaperSpinner');
+            activeSpinner = fixture('ActivePaperSpinner');
           });
           test('adds an ARIA label when `alt` is supplied', function() {
@@ -54,6 +62,21 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
             spinner.active = false;
             expect(spinner.getAttribute('aria-hidden')).to.be.eql('true');
           });
+
+          test('toggle during cooldown', function(done) {
+            activeSpinner.active = false;
+
+            // Set active to true before cooldown animation completes.
+            setTimeout(function() {
+              activeSpinner.active = true;
+
+              // Wait for cooldown animation to complete.
+              setTimeout(function() {
+                expect(activeSpinner.active).to.equal(true);
+                done();
+              }, 500);
+            }, 100);
+          });
         });
       });
 function generic_Provider () {}
 generic_Provider.prototype.selectData = function(data) {
-    return data;
+
+    if(data instanceof Array)
+        return data;
+    if(_isGEOJSON(data))
+        return [{"GEOJSON" : data}];
+    if(data instanceof Object)
+        return [{"JSON" : data}];
 };
 generic_Provider.prototype.addLimit = function(url) {
     return url;
+};
+
+function _isGEOJSON (data) {
+    var dt = new DataTypeConverter();
+    return (dt.inferDataSubTypeOfValue(data) && dt.inferDataSubTypeOfValue(data).name == DataTypeConverter.SUBTYPES.GEOJSON.name);
 };
 \ No newline at end of file
 <link rel="import" href="../../bower_components/polymer/polymer.html" />
+<script type="text/javascript" src="../../bower_components/jsdatachecker/jsdatachecker.min.js"></script>
+
 <script src="ckan.js"></script>
 <script src="openDataSoft.js"></script>
 <script src="generic.js"></script>
@@ -31,6 +31,9 @@
 <link rel="import" href="../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../bower_components/paper-spinner/paper-spinner.html">
+<link rel="import" href="../../bower_components/paper-spinner/paper-spinner-lite.html">
+
 <!--
 The `base-datalet` is the base component that includes datalet footer (with information about dataset domain and ROUTE-TO-PA project).
 Base datalet includes polymer.html and the BaseDataletBehaviors javascript file that define the datalet workcycle and the datalet base properties : dataUrl, fields and data.
@@ -54,7 +57,20 @@ Example :
 <dom-module id="base-datalet">
     <template>
-        <style>
+
+        <style is="custom-style">
+            paper-spinner {
+                height: 64px;
+                width: 64px;
+
+                --paper-spinner-stroke-width: 8px;
+
+                --paper-spinner-layer-1-color: #2196F3;
+                --paper-spinner-layer-2-color: #F44336;;
+                --paper-spinner-layer-3-color: #FFEB3B;;
+                --paper-spinner-layer-4-color: #4CAF50;;
+            }
+
             a {
                 color: #00BCD4;
                 text-decoration: none;
@@ -83,10 +99,9 @@ Example :
                 height: 32px;
                 width: 32px;
             }
-            #base_datalet_spin {
-                height: 64px;
+            #base_datalet_spinner {
                 width: 100%;
-                margin-top: 64px;
+                padding: 168px calc(50% - 32px);
             }
             #base_datalet_source_link{
@@ -101,7 +116,8 @@ Example :
                 font-style: italic;
                 color: #727272;
             }
-/*EXPORT*/
+
+            /*EXPORT*/
             .export
             {
                 position: absolute;
@@ -127,31 +143,24 @@ Example :
                 display: none;
             }
-            .highcharts-contextmenu-container
-            {
-                /*background: rgb(255, 255, 255);*/
-                /*background-color: #E0E0E0;*/
-            }
-
             .highcharts-contextmenu-container div
             {
                 cursor: pointer;
                 padding: 0px 4px;
-                /*color: rgb(48, 48, 48);*/
                 font-size: 11px;
                 line-height: 15px;
-                /*background: none;*/
             }
             .highcharts-contextmenu-container div:hover
             {
                 background: #00BCD4;
             }
-/*EXPORT*/
+            /*EXPORT*/
+
         </style>
-        <div id="base_datalet_imgWaitDatalet">
-            <img id="base_datalet_spin" src="static/images/spin.svg">
+        <div id="base_datalet_spinner">
+            <paper-spinner id="datalet_spinner" active></paper-spinner>
         </div>
         <div id="base_datalet_container">
@@ -255,7 +264,8 @@ Example :
 //            },
             removeLoader: function() {
-                this.$.base_datalet_imgWaitDatalet.style.display = "none";
+                this.$.base_datalet_spinner.style.display = "none";
+                this.$.datalet_spinner.active = false;
             },
             hideFooter: function() {
-<?xml version="1.0" encoding="utf-8"?><svg width='198px' height='198px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-spin"><rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect><g transform="translate(50 50)"><g transform="rotate(0) translate(34 0)"><circle cx="0" cy="0" r="8" fill="#1976d2"><animate attributeName="opacity" from="1" to="0.1" begin="0s" dur="1s" repeatCount="indefinite"></animate><animateTransform attributeName="transform" type="scale" from="1.5" to="1" begin="0s" dur="1s" repeatCount="indefinite"></animateTransform></circle></g><g transform="rotate(45) translate(34 0)"><circle cx="0" cy="0" r="8" fill="#1976d2"><animate attributeName="opacity" from="1" to="0.1" begin="0.12s" dur="1s" repeatCount="indefinite"></animate><animateTransform attributeName="transform" type="scale" from="1.5" to="1" begin="0.12s" dur="1s" repeatCount="indefinite"></animateTransform></circle></g><g transform="rotate(90) translate(34 0)"><circle cx="0" cy="0" r="8" fill="#1976d2"><animate attributeName="opacity" from="1" to="0.1" begin="0.25s" dur="1s" repeatCount="indefinite"></animate><animateTransform attributeName="transform" type="scale" from="1.5" to="1" begin="0.25s" dur="1s" repeatCount="indefinite"></animateTransform></circle></g><g transform="rotate(135) translate(34 0)"><circle cx="0" cy="0" r="8" fill="#1976d2"><animate attributeName="opacity" from="1" to="0.1" begin="0.37s" dur="1s" repeatCount="indefinite"></animate><animateTransform attributeName="transform" type="scale" from="1.5" to="1" begin="0.37s" dur="1s" repeatCount="indefinite"></animateTransform></circle></g><g transform="rotate(180) translate(34 0)"><circle cx="0" cy="0" r="8" fill="#1976d2"><animate attributeName="opacity" from="1" to="0.1" begin="0.5s" dur="1s" repeatCount="indefinite"></animate><animateTransform attributeName="transform" type="scale" from="1.5" to="1" begin="0.5s" dur="1s" repeatCount="indefinite"></animateTransform></circle></g><g transform="rotate(225) translate(34 0)"><circle cx="0" cy="0" r="8" fill="#1976d2"><animate attributeName="opacity" from="1" to="0.1" begin="0.62s" dur="1s" repeatCount="indefinite"></animate><animateTransform attributeName="transform" type="scale" from="1.5" to="1" begin="0.62s" dur="1s" repeatCount="indefinite"></animateTransform></circle></g><g transform="rotate(270) translate(34 0)"><circle cx="0" cy="0" r="8" fill="#1976d2"><animate attributeName="opacity" from="1" to="0.1" begin="0.75s" dur="1s" repeatCount="indefinite"></animate><animateTransform attributeName="transform" type="scale" from="1.5" to="1" begin="0.75s" dur="1s" repeatCount="indefinite"></animateTransform></circle></g><g transform="rotate(315) translate(34 0)"><circle cx="0" cy="0" r="8" fill="#1976d2"><animate attributeName="opacity" from="1" to="0.1" begin="0.87s" dur="1s" repeatCount="indefinite"></animate><animateTransform attributeName="transform" type="scale" from="1.5" to="1" begin="0.87s" dur="1s" repeatCount="indefinite"></animateTransform></circle></g></g></svg>
 \ No newline at end of file
@@ -60,7 +60,7 @@ Example:
             :host ::content #treemap_placeholder {
                 width: 100%;
                 height: 70%;
-                /*min-height: 500px;*/
+                min-height: 400px;
                 background: #bbb;
                 /*position: relative;*/
             }