From c7f0c0a4c4ff7460404785c8e4b47c3dfbcc72ba Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Mon, 29 Oct 2018 12:28:33 +0200
Subject: [PATCH] Removed old polymer components

---
 app/public/custom_components/app-theme.html   |  73 --
 .../dicecloud-icons/dicecloud-icons.html      |  18 -
 .../dicecloud-selectable.html                 | 355 --------
 .../dicecloud-selector.html                   |  24 -
 .../dicecloud-wrapper/dicecloud-wrapper.html  |  18 -
 .../paper-checkbox/paper-checkbox.html        | 311 -------
 .../paper-diff-slider/paper-diff-slider.html  | 788 ------------------
 .../fade-in-slide-from-left-animation.html    |  45 -
 .../fade-in-slide-from-right-animation.html   |  45 -
 .../fade-out-slide-left-animation.html        |  45 -
 .../fade-out-slide-right-animation.html       |  45 -
 .../paper-stepper/bower.json                  |  48 --
 .../custom_components/paper-stepper/hero.svg  |  27 -
 .../paper-stepper/paper-step.html             | 424 ----------
 .../paper-stepper/paper-stepper.html          | 735 ----------------
 .../paper-stepper/step-horizontal-label.html  | 124 ---
 .../paper-stepper/step-label-behavior.html    |  58 --
 .../step-label-shared-styles.html             |  74 --
 .../paper-stepper/step-vertical.html          | 177 ----
 19 files changed, 3434 deletions(-)
 delete mode 100644 app/public/custom_components/app-theme.html
 delete mode 100644 app/public/custom_components/dicecloud-icons/dicecloud-icons.html
 delete mode 100644 app/public/custom_components/dicecloud-selector/dicecloud-selectable.html
 delete mode 100644 app/public/custom_components/dicecloud-selector/dicecloud-selector.html
 delete mode 100644 app/public/custom_components/dicecloud-wrapper/dicecloud-wrapper.html
 delete mode 100644 app/public/custom_components/paper-checkbox/paper-checkbox.html
 delete mode 100644 app/public/custom_components/paper-diff-slider/paper-diff-slider.html
 delete mode 100644 app/public/custom_components/paper-stepper/animations/fade-in-slide-from-left-animation.html
 delete mode 100644 app/public/custom_components/paper-stepper/animations/fade-in-slide-from-right-animation.html
 delete mode 100644 app/public/custom_components/paper-stepper/animations/fade-out-slide-left-animation.html
 delete mode 100644 app/public/custom_components/paper-stepper/animations/fade-out-slide-right-animation.html
 delete mode 100644 app/public/custom_components/paper-stepper/bower.json
 delete mode 100644 app/public/custom_components/paper-stepper/hero.svg
 delete mode 100644 app/public/custom_components/paper-stepper/paper-step.html
 delete mode 100644 app/public/custom_components/paper-stepper/paper-stepper.html
 delete mode 100644 app/public/custom_components/paper-stepper/step-horizontal-label.html
 delete mode 100644 app/public/custom_components/paper-stepper/step-label-behavior.html
 delete mode 100644 app/public/custom_components/paper-stepper/step-label-shared-styles.html
 delete mode 100644 app/public/custom_components/paper-stepper/step-vertical.html

diff --git a/app/public/custom_components/app-theme.html b/app/public/custom_components/app-theme.html
deleted file mode 100644
index e84c18cb..00000000
--- a/app/public/custom_components/app-theme.html
+++ /dev/null
@@ -1,73 +0,0 @@
-<link rel="import" href="../components/polymer/polymer.html">
-<link rel="import" href="../components/iron-flex-layout/iron-flex-layout-classes.html">
-<link rel="import" href="../components/paper-styles/classes/typography.html">
-<link rel="import" href="../components/paper-styles/classes/global.html">
-
-<style is="custom-style" include="iron-flex iron-flex-alignment iron-positioning">
-	:root {
-		--primary-color: #d13b2e;
-		--light-primary-color: #ff5a4b;
-		--dark-primary-color: #ad2a1f;
-
-		--accent-color: #d13b2e;
-		--light-accent-color: #ff5a4b;
-		--dark-accent-color: #ad2a1f;
-	}
-	paper-item.short {
-		--paper-item-min-height: 32px;
-	}
-	paper-button[raised] {
-		background-color: var(--accent-color);
-		color: #dedede;
-		color: rgba(255,255,255,0.87);
-	}
-	paper-tabs {
-		--paper-tabs-selection-bar-color: var(--accent-color);
-	}
-	paper-tab {
-		--paper-tab-ink: var(--light-accent-color);
-	}
-	a {
-		color: inherit;
-		text-decoration: none;
-		text-transform: inherit;
-		font-size: inherit;
-		font-weight: inherit;
-		letter-spacing: inherit;
-		line-height: inherit;
-	}
-	#accountSummary{
-		--app-header-background-front-layer: {
-			background-image: url(/png/paper-dice-crown.png);
-		};
-	}
-	.card .top paper-checkbox {
-		--paper-checkbox-unchecked-color: #757575;
-		--paper-checkbox-unchecked-color: rgba(255,255,255,0.54);
-		--paper-checkbox-unchecked-ink-color: #fff;
-		--paper-checkbox-checked-color: #606060;
-		--paper-checkbox-checked-color: rgba(255,255,255,0.30);
-		--paper-checkbox-checked-ink-color: #fff;
-	}
-	paper-input > iron-icon {
-		--iron-icon-width: 23px;
-		--iron-icon-height: 23px;
-	}
-	paper-swatch-picker {
-		--paper-swatch-picker-color-size: 24px;
-		--paper-swatch-picker-icon: {
-			color: #dedede !important;
-			color: rgba(255,255,255,0.87) !important;
-		}
-	}
-	.healthCard #temporaryHitPointSlider {
-		--paper-diff-slider-active-color: #009688; /* teal */
-		--paper-diff-slider-knob-color: #009688;
-		--paper-diff-slider-pin-color: #009688;
-	}
-	.healthCard .extraHitPointSlider {
-		--paper-diff-slider-active-color: #00BCD4; /* cyan */
-		--paper-diff-slider-knob-color: #00BCD4;
-		--paper-diff-slider-pin-color: #00BCD4;
-	}
-</style>
diff --git a/app/public/custom_components/dicecloud-icons/dicecloud-icons.html b/app/public/custom_components/dicecloud-icons/dicecloud-icons.html
deleted file mode 100644
index 3fadbb59..00000000
--- a/app/public/custom_components/dicecloud-icons/dicecloud-icons.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<link rel="import" href="../../components/iron-icon/iron-icon.html">
-<link rel="import" href="../../components/iron-iconset-svg/iron-iconset-svg.html">
-<iron-iconset-svg name="dicecloud" size="24">
-<svg><defs>
-	<g id="code-braces">
-		<path d="M8,3A2,2 0 0,0 6,5V9A2,2 0 0,1 4,11H3V13H4A2,2 0 0,1 6,15V19A2,2 0 0,0 8,21H10V19H8V14A2,2 0 0,0 6,12A2,2 0 0,0 8,10V5H10V3M16,3A2,2 0 0,1 18,5V9A2,2 0 0,0 20,11H21V13H20A2,2 0 0,0 18,15V19A2,2 0 0,1 16,21H14V19H16V14A2,2 0 0,1 18,12A2,2 0 0,1 16,10V5H14V3H16Z" />
-	</g>
-	<g id="github">
-	    <path d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z" />
-	</g>
-	<g id="patreon">
-		<path d="M 0,11.704583 C 0,6.129988 4.5275823,0.90539433 10.497051,0.15752807 c 4.277795,-0.49807892 7.513064,1.14423533 9.752176,3.28462863 2.088042,1.9893242 3.332492,4.529078 3.631638,7.5160563 0.248292,2.991465 -0.397865,5.579082 -2.138897,8.017126 C 20.000935,21.368511 16.566733,24.001 12.288938,24.001 H 6.4675474 V 12.512279 c 0.050855,-2.5382585 0.8974395,-4.7295066 3.9786486,-5.7735279 2.687831,-0.7972254 5.822887,0.6955156 6.768189,3.5329199 0.987184,3.036337 -0.448719,5.076516 -2.138897,6.320966 -1.705135,1.244449 -4.337624,1.244449 -6.072674,0.04936 v 3.933777 c 1.136757,0.553421 2.587617,0.702994 3.63463,0.643165 3.769246,-0.538464 6.715839,-2.677362 7.957297,-5.923101 1.28633,-3.425228 0.38889,-7.4188334 -2.288471,-9.9017494 C 15.075488,2.746641 11.530602,2.1034761 7.761356,3.9432271 5.1139094,5.2893863 3.2741585,8.0265768 2.8254387,11.018042 V 23.999504 H 0.04487198 L 0,11.704583 z" style="fill-rule:nonzero"/>
-	</g>
-	<g id="markdown">
-	    <path d="M2,16V8H4L7,11L10,8H12V16H10V10.83L7,13.83L4,10.83V16H2M16,8H19V12H21.5L17.5,16.5L13.5,12H16V8Z" />
-	</g>
-</defs></svg>
-</iron-iconset-svg>
diff --git a/app/public/custom_components/dicecloud-selector/dicecloud-selectable.html b/app/public/custom_components/dicecloud-selector/dicecloud-selectable.html
deleted file mode 100644
index c88c3a30..00000000
--- a/app/public/custom_components/dicecloud-selector/dicecloud-selectable.html
+++ /dev/null
@@ -1,355 +0,0 @@
-<link rel="import" href="../../components/polymer/polymer.html">
-<link rel="import" href="../../components/iron-selector/iron-selection.html">
-
-<script>
-// jscs:disable
-  /**
-   * A stripped down version of iron-selectable
-   * No multi-select
-   * Assumes attrForSelected = "name"
-   * Behaves a little better with Blaze
-   */
-  /** @polymerBehavior */
-  Polymer.DicecloudSelectableBehavior = {
-
-      /**
-       * Fired when dicecloud-selector is activated (selected or deselected).
-       * It is fired before the selected items are changed.
-       * Cancel the event to abort selection.
-       *
-       * @event iron-activate
-       */
-
-      /**
-       * Fired when an item is selected
-       *
-       * @event iron-select
-       */
-
-      /**
-       * Fired when an item is deselected
-       *
-       * @event iron-deselect
-       */
-
-      /**
-       * Fired when the list of selectable items changes (e.g., items are
-       * added or removed). The detail of the event is a mutation record that
-       * describes what changed.
-       *
-       * @event iron-items-changed
-       */
-
-    properties: {
-
-      /**
-       * Gets or sets the selected element. The default is to use the index of the item.
-       * @type {string|number}
-       */
-      selected: {
-        type: String,
-        notify: true
-      },
-
-      /**
-       * Returns the currently selected item.
-       *
-       * @type {?Object}
-       */
-      selectedItem: {
-        type: Object,
-        readOnly: true,
-        notify: true
-      },
-
-      /**
-       * The event that fires from items when they are selected. Selectable
-       * will listen for this event from items and update the selection state.
-       * Set to empty string to listen to no events.
-       */
-      activateEvent: {
-        type: String,
-        value: 'tap',
-        observer: '_activateEventChanged'
-      },
-
-      /**
-       * This is a CSS selector string.  If this is set, only items that match the CSS selector
-       * are selectable.
-       */
-      selectable: String,
-
-      /**
-       * The class to set on elements when selected.
-       */
-      selectedClass: {
-        type: String,
-        value: 'iron-selected'
-      },
-
-      /**
-       * The attribute to set on elements when selected.
-       */
-      selectedAttribute: {
-        type: String,
-        value: null
-      },
-
-      /**
-       * Default fallback if the selection based on selected with `name`
-       * is not found.
-       */
-      fallbackSelection: {
-        type: String,
-        value: null
-      },
-
-      /**
-       * The list of items from which a selection can be made.
-       */
-      items: {
-        type: Array,
-        readOnly: true,
-        notify: true,
-        value: function() {
-          return [];
-        }
-      },
-
-      /**
-       * The set of excluded elements where the key is the `localName`
-       * of the element that will be ignored from the item list.
-       *
-       * @default {template: 1}
-       */
-      _excludedLocalNames: {
-        type: Object,
-        value: function() {
-          return {
-            'template': 1
-          };
-        }
-      }
-    },
-
-    observers: [
-      '_updateSelected(selected)',
-      '_checkFallback(fallbackSelection)'
-    ],
-
-    created: function() {
-      this._bindFilterItem = this._filterItem.bind(this);
-      this._selection = new Polymer.IronSelection(this._applySelection.bind(this));
-    },
-
-    attached: function() {
-      this._observer = this._observeItems(this);
-      this._updateItems();
-      if (!this._shouldUpdateSelection) {
-        this._updateSelected();
-      }
-      this._addListener(this.activateEvent);
-    },
-
-    detached: function() {
-      if (this._observer) {
-        Polymer.dom(this).unobserveNodes(this._observer);
-      }
-      this._removeListener(this.activateEvent);
-    },
-
-    /**
-     * Returns the index of the given item.
-     *
-     * @method indexOf
-     * @param {Object} item
-     * @returns Returns the index of the item
-     */
-    indexOf: function(item) {
-      return this.items.indexOf(item);
-    },
-
-    /**
-     * Selects the given value.
-     *
-     * @method select
-     * @param {string|number} value the value to select.
-     */
-    select: function(value) {
-      this.selected = value;
-    },
-
-    /**
-     * Selects the previous item.
-     *
-     * @method selectPrevious
-     */
-    selectPrevious: function() {
-      var length = this.items.length;
-      var index = (Number(this._valueToIndex(this.selected)) - 1 + length) % length;
-      this.selected = this._indexToValue(index);
-    },
-
-    /**
-     * Selects the next item.
-     *
-     * @method selectNext
-     */
-    selectNext: function() {
-      var index = (Number(this._valueToIndex(this.selected)) + 1) % this.items.length;
-      this.selected = this._indexToValue(index);
-    },
-
-    /**
-     * Selects the item at the given index.
-     *
-     * @method selectIndex
-     */
-    selectIndex: function(index) {
-      this.select(this._indexToValue(index));
-    },
-
-    /**
-     * Force a synchronous update of the `items` property.
-     *
-     * NOTE: Consider listening for the `iron-items-changed` event to respond to
-     * updates to the set of selectable items after updates to the DOM list and
-     * selection state have been made.
-     *
-     * WARNING: If you are using this method, you should probably consider an
-     * alternate approach. Synchronously querying for items is potentially
-     * slow for many use cases. The `items` property will update asynchronously
-     * on its own to reflect selectable items in the DOM.
-     */
-    forceSynchronousItemUpdate: function() {
-      this._updateItems();
-    },
-
-    get _shouldUpdateSelection() {
-      return this.selected != null;
-    },
-
-    _checkFallback: function() {
-      if (this._shouldUpdateSelection) {
-        this._updateSelected();
-      }
-    },
-
-    _addListener: function(eventName) {
-      this.listen(this, eventName, '_activateHandler');
-    },
-
-    _removeListener: function(eventName) {
-      this.unlisten(this, eventName, '_activateHandler');
-    },
-
-    _activateEventChanged: function(eventName, old) {
-      this._removeListener(old);
-      this._addListener(eventName);
-    },
-
-    _updateItems: function() {
-      var nodes = this.selectable
-        ? Polymer.dom(this).querySelectorAll(this.selectable)
-        : Polymer.dom(this).queryDistributedElements('*');
-      nodes = Array.prototype.filter.call(nodes, this._bindFilterItem);
-      this._setItems(nodes);
-    },
-
-    _updateSelected: function() {
-      this._selectSelected(this.selected);
-    },
-
-    _selectSelected: function(selected) {
-      this._selection.select(this._valueToItem(this.selected));
-      // Check for items, since this array is populated only when attached
-      // Since Number(0) is falsy, explicitly check for undefined
-      if (this.fallbackSelection && this.items.length && (this._selection.get() === undefined)) {
-        this.selected = this.fallbackSelection;
-      }
-    },
-
-    _filterItem: function(node) {
-      return !this._excludedLocalNames[node.localName];
-    },
-
-    _valueToItem: function(value) {
-      return (value == null) ? null : this.items[this._valueToIndex(value)];
-    },
-
-    _valueToIndex: function(value) {
-      for (var i = 0, item; item = this.items[i]; i++) {
-        if (this._valueForItem(item) == value) {
-          return i;
-        }
-      }
-    },
-
-    _indexToValue: function(index) {
-      var item = this.items[index];
-      if (item) {
-        return this._valueForItem(item);
-      }
-    },
-
-    _valueForItem: function(item) {
-      return item.getAttribute("name") || item["name"];
-    },
-
-    _applySelection: function(item, isSelected) {
-      if (this.selectedClass) {
-        this.toggleClass(this.selectedClass, isSelected, item);
-      }
-      if (this.selectedAttribute) {
-        this.toggleAttribute(this.selectedAttribute, isSelected, item);
-      }
-      this._selectionChange();
-      this.fire('iron-' + (isSelected ? 'select' : 'deselect'), {item: item});
-    },
-
-    _selectionChange: function() {
-      this._setSelectedItem(this._selection.get());
-    },
-
-    // observe items change under the given node.
-    _observeItems: function(node) {
-      return Polymer.dom(node).observeNodes(function(mutation) {
-        this._updateItems();
-
-        if (this._shouldUpdateSelection) {
-          this._updateSelected();
-        }
-
-        // Let other interested parties know about the change so that
-        // we don't have to recreate mutation observers everywhere.
-        this.fire('iron-items-changed', mutation, {
-          bubbles: false,
-          cancelable: false
-        });
-      });
-    },
-
-    _activateHandler: function(e) {
-      var t = e.target;
-      var items = this.items;
-      while (t && t != this) {
-        var i = items.indexOf(t);
-        if (i >= 0) {
-          var value = this._indexToValue(i);
-          this._itemActivate(value, t);
-          return;
-        }
-        t = t.parentNode;
-      }
-    },
-
-    _itemActivate: function(value, item) {
-      if (!this.fire('iron-activate',
-          {selected: value, item: item}, {cancelable: true}).defaultPrevented) {
-        this.select(value);
-      }
-    }
-
-  };
-
-</script>
diff --git a/app/public/custom_components/dicecloud-selector/dicecloud-selector.html b/app/public/custom_components/dicecloud-selector/dicecloud-selector.html
deleted file mode 100644
index d2cde4c1..00000000
--- a/app/public/custom_components/dicecloud-selector/dicecloud-selector.html
+++ /dev/null
@@ -1,24 +0,0 @@
-<link rel="import" href="../../components/polymer/polymer.html">
-<link rel="import" href="dicecloud-selectable.html">
-
-<script>
-// jscs:disable
-  /**
-  `dicecloud-selector` implements DicecloudSelectableBehavior
-  behaves like a simple iron-selector
-  - No multi-select
-  - Assumes attrForSelected = "name"
-  - Behaves a little better with Blaze
-  */
-
-  Polymer({
-
-    is: 'dicecloud-selector',
-
-    behaviors: [
-      Polymer.DicecloudSelectableBehavior
-    ]
-
-  });
-
-</script>
diff --git a/app/public/custom_components/dicecloud-wrapper/dicecloud-wrapper.html b/app/public/custom_components/dicecloud-wrapper/dicecloud-wrapper.html
deleted file mode 100644
index e014539c..00000000
--- a/app/public/custom_components/dicecloud-wrapper/dicecloud-wrapper.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<!--
-	Wrap some content in a polymer element, but do nothing else
-	This is a dirty hack to prevent unwarpped elements from having their events
-	broken by Blaze.
- -->
-
-<link rel="import" href="../../components/polymer/polymer.html">
-
-<dom-module id="dicecloud-wrapper">
-	<template>
-		<content></content>
-	</template>
-	<script>
-		Polymer({
-			is: "dicecloud-wrapper"
-		});
-	</script>
-</dom-module>
diff --git a/app/public/custom_components/paper-checkbox/paper-checkbox.html b/app/public/custom_components/paper-checkbox/paper-checkbox.html
deleted file mode 100644
index 223c86b1..00000000
--- a/app/public/custom_components/paper-checkbox/paper-checkbox.html
+++ /dev/null
@@ -1,311 +0,0 @@
-<!--
-@license
-Copyright (c) 2016 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="../../components/polymer/polymer.html">
-<link rel="import" href="../../components/paper-styles/default-theme.html">
-<link rel="import" href="../../components/paper-behaviors/paper-checked-element-behavior.html">
-
-<!--
-Material design: [Checkbox](https://www.google.com/design/spec/components/selection-controls.html#selection-controls-checkbox)
-
-`paper-checkbox` is a button that can be either checked or unchecked.  User
-can tap the checkbox to check or uncheck it.  Usually you use checkboxes
-to allow user to select multiple options from a set.  If you have a single
-ON/OFF option, avoid using a single checkbox and use `paper-toggle-button`
-instead.
-
-Example:
-
-    <paper-checkbox>label</paper-checkbox>
-
-    <paper-checkbox checked> label</paper-checkbox>
-
-### Styling
-
-The following custom properties and mixins are available for styling:
-
-Custom property | Description | Default
-----------------|-------------|----------
-`--paper-checkbox-unchecked-background-color` | Checkbox background color when the input is not checked | `transparent`
-`--paper-checkbox-unchecked-color` | Checkbox border color when the input is not checked | `--primary-text-color`
-`--paper-checkbox-unchecked-ink-color` | Selected/focus ripple color when the input is not checked | `--primary-text-color`
-`--paper-checkbox-checked-color` | Checkbox color when the input is checked | `--primary-color`
-`--paper-checkbox-checked-ink-color` | Selected/focus ripple color when the input is checked | `--primary-color`
-`--paper-checkbox-checkmark-color` | Checkmark color | `white`
-`--paper-checkbox-label-color` | Label color | `--primary-text-color`
-`--paper-checkbox-label-checked-color` | Label color when the input is checked | `--paper-checkbox-label-color`
-`--paper-checkbox-label-spacing` | Spacing between the label and the checkbox | `8px`
-`--paper-checkbox-label` | Mixin applied to the label | `{}`
-`--paper-checkbox-label-checked` | Mixin applied to the label when the input is checked | `{}`
-`--paper-checkbox-error-color` | Checkbox color when invalid | `--error-color`
-`--paper-checkbox-size` | Size of the checkbox | `18px`
-`--paper-checkbox-ink-size` | Size of the ripple | `48px`
-`--paper-checkbox-margin` | Margin around the checkbox container | `initial`
-`--paper-checkbox-vertical-align` | Vertical alignment of the checkbox container | `middle`
-
-This element applies the mixin `--paper-font-common-base` but does not import `paper-styles/typography.html`.
-In order to apply the `Roboto` font to this element, make sure you've imported `paper-styles/typography.html`.
-
-@demo demo/index.html
--->
-
-<dom-module id="paper-checkbox">
-  <template strip-whitespace>
-    <style>
-      :host {
-        display: inline-block;
-        white-space: nowrap;
-        cursor: pointer;
-        --calculated-paper-checkbox-size: var(--paper-checkbox-size, 18px);
-        /* -1px is a sentinel for the default and is replaced in `attached`. */
-        --calculated-paper-checkbox-ink-size: var(--paper-checkbox-ink-size, -1px);
-        @apply(--paper-font-common-base);
-        line-height: 0;
-        -webkit-tap-highlight-color: transparent;
-      }
-
-      :host([hidden]) {
-        display: none !important;
-      }
-
-      :host(:focus) {
-        outline: none;
-      }
-
-      .hidden {
-        display: none;
-      }
-
-      #checkboxContainer {
-        display: inline-block;
-        position: relative;
-        width: var(--calculated-paper-checkbox-size);
-        height: var(--calculated-paper-checkbox-size);
-        min-width: var(--calculated-paper-checkbox-size);
-        margin: var(--paper-checkbox-margin, initial);
-        vertical-align: var(--paper-checkbox-vertical-align, middle);
-        background-color: var(--paper-checkbox-unchecked-background-color, transparent);
-      }
-
-      #ink {
-        position: absolute;
-
-        /* Center the ripple in the checkbox by negative offsetting it by
-         * (inkWidth - rippleWidth) / 2 */
-        top: calc(0px - (var(--calculated-paper-checkbox-ink-size) - var(--calculated-paper-checkbox-size)) / 2);
-        left: calc(0px - (var(--calculated-paper-checkbox-ink-size) - var(--calculated-paper-checkbox-size)) / 2);
-        width: var(--calculated-paper-checkbox-ink-size);
-        height: var(--calculated-paper-checkbox-ink-size);
-        color: var(--paper-checkbox-unchecked-ink-color, var(--primary-text-color));
-        opacity: 0.6;
-        pointer-events: none;
-      }
-
-      :host-context([dir="rtl"]) #ink {
-        right: calc(0px - (var(--calculated-paper-checkbox-ink-size) - var(--calculated-paper-checkbox-size)) / 2);
-        left: auto;
-      }
-
-      #ink[checked] {
-        color: var(--paper-checkbox-checked-ink-color, var(--primary-color));
-      }
-
-      #checkbox {
-        position: relative;
-        box-sizing: border-box;
-        height: 100%;
-        border: solid 2px;
-        border-color: var(--paper-checkbox-unchecked-color, var(--primary-text-color));
-        border-radius: 2px;
-        pointer-events: none;
-        -webkit-transition: background-color 140ms, border-color 140ms;
-        transition: background-color 140ms, border-color 140ms;
-      }
-
-      /* checkbox checked animations */
-      #checkbox.checked #checkmark {
-        -webkit-animation: checkmark-expand 140ms ease-out forwards;
-        animation: checkmark-expand 140ms ease-out forwards;
-      }
-
-      @-webkit-keyframes checkmark-expand {
-        0% {
-          -webkit-transform: scale(0, 0) rotate(45deg) translateZ(0);
-        }
-        100% {
-          -webkit-transform: scale(1, 1) rotate(45deg) translateZ(0);
-        }
-      }
-
-      @keyframes checkmark-expand {
-        0% {
-          transform: scale(0, 0) rotate(45deg) translateZ(0);
-        }
-        100% {
-          transform: scale(1, 1) rotate(45deg) translateZ(0);
-        }
-      }
-
-      #checkbox.checked {
-        background-color: var(--paper-checkbox-checked-color, var(--primary-color));
-        border-color: var(--paper-checkbox-checked-color, var(--primary-color));
-      }
-
-      #checkmark {
-        position: absolute;
-        width: 36%;
-        height: 70%;
-        border-style: solid;
-        border-top: none;
-        border-left: none;
-        border-right-width: calc(2/15 * var(--calculated-paper-checkbox-size));
-        border-bottom-width: calc(2/15 * var(--calculated-paper-checkbox-size));
-        border-color: var(--paper-checkbox-checkmark-color, white);
-        -webkit-transform-origin: 97% 86%;
-        transform-origin: 97% 86%;
-        box-sizing: content-box; /* protect against page-level box-sizing */
-      }
-
-      :host-context([dir="rtl"]) #checkmark {
-        -webkit-transform-origin: 50% 14%;
-        transform-origin: 50% 14%;
-      }
-
-      /* label */
-      #checkboxLabel {
-        position: relative;
-        display: inline-block;
-        vertical-align: middle;
-        padding-left: var(--paper-checkbox-label-spacing, 8px);
-        white-space: normal;
-        line-height: normal;
-        color: var(--paper-checkbox-label-color, var(--primary-text-color));
-        @apply(--paper-checkbox-label);
-      }
-
-      :host([checked]) #checkboxLabel {
-        color: var(--paper-checkbox-label-checked-color, var(--paper-checkbox-label-color, var(--primary-text-color)));
-        @apply(--paper-checkbox-label-checked);
-      }
-
-      :host-context([dir="rtl"]) #checkboxLabel {
-        padding-right: var(--paper-checkbox-label-spacing, 8px);
-        padding-left: 0;
-      }
-
-      #checkboxLabel[hidden] {
-        display: none;
-      }
-
-      /* disabled state */
-
-      :host([disabled]) #checkbox {
-        opacity: 0.5;
-        border-color: var(--paper-checkbox-unchecked-color, var(--primary-text-color));
-      }
-
-      :host([disabled][checked]) #checkbox {
-        background-color: var(--paper-checkbox-unchecked-color, var(--primary-text-color));
-        opacity: 0.5;
-      }
-
-      :host([disabled]) #checkboxLabel  {
-        opacity: 0.65;
-      }
-
-      /* invalid state */
-      #checkbox.invalid:not(.checked) {
-        border-color: var(--paper-checkbox-error-color, var(--error-color));
-      }
-    </style>
-
-    <div id="checkboxContainer">
-      <div id="checkbox" class$="[[_computeCheckboxClass(checked, invalid)]]">
-        <div id="checkmark" class$="[[_computeCheckmarkClass(checked)]]"></div>
-      </div>
-    </div>
-
-    <div id="checkboxLabel"><content></content></div>
-  </template>
-
-  <script>
-    Polymer({
-      is: 'paper-checkbox',
-
-      behaviors: [
-        Polymer.PaperCheckedElementBehavior
-      ],
-
-      hostAttributes: {
-        role: 'checkbox',
-        'aria-checked': false,
-        tabindex: 0
-      },
-
-      properties: {
-        /**
-         * Fired when the checked state changes due to user interaction.
-         *
-         * @event change
-         */
-
-        /**
-         * Fired when the checked state changes.
-         *
-         * @event iron-change
-         */
-        ariaActiveAttribute: {
-          type: String,
-          value: 'aria-checked'
-        }
-      },
-
-      attached: function() {
-        var inkSize = this.getComputedStyleValue('--calculated-paper-checkbox-ink-size').trim();
-        // If unset, compute and set the default `--paper-checkbox-ink-size`.
-        if (inkSize === '-1px') {
-          var checkboxSize = parseFloat(this.getComputedStyleValue('--calculated-paper-checkbox-size').trim());
-          var defaultInkSize = Math.floor((8 / 3) * checkboxSize);
-
-          // The checkbox and ripple need to have the same parity so that their
-          // centers align.
-          if (defaultInkSize % 2 !== checkboxSize % 2) {
-            defaultInkSize++;
-          }
-
-          this.customStyle['--paper-checkbox-ink-size'] = defaultInkSize + 'px';
-          this.updateStyles();
-        }
-      },
-
-      _computeCheckboxClass: function(checked, invalid) {
-        var className = '';
-        if (checked) {
-          className += 'checked ';
-        }
-        if (invalid) {
-          className += 'invalid';
-        }
-        return className;
-      },
-
-      _computeCheckmarkClass: function(checked) {
-        return checked ? '' : 'hidden';
-      },
-
-      // create ripple inside the checkboxContainer
-      _createRipple: function() {
-        this._rippleContainer = this.$.checkboxContainer;
-        return Polymer.PaperInkyFocusBehaviorImpl._createRipple.call(this);
-      }
-
-    });
-  </script>
-</dom-module>
diff --git a/app/public/custom_components/paper-diff-slider/paper-diff-slider.html b/app/public/custom_components/paper-diff-slider/paper-diff-slider.html
deleted file mode 100644
index 6474e63c..00000000
--- a/app/public/custom_components/paper-diff-slider/paper-diff-slider.html
+++ /dev/null
@@ -1,788 +0,0 @@
-<link rel="import" href="../../components/polymer/polymer.html">
-<link rel="import" href="../../components/iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
-<link rel="import" href="../../components/iron-flex-layout/iron-flex-layout.html">
-<link rel="import" href="../../components/iron-form-element-behavior/iron-form-element-behavior.html">
-<link rel="import" href="../../components/iron-range-behavior/iron-range-behavior.html">
-<link rel="import" href="../../components/paper-behaviors/paper-inky-focus-behavior.html">
-<link rel="import" href="../../components/paper-input/paper-input.html">
-<link rel="import" href="../../components/paper-progress/paper-progress.html">
-<link rel="import" href="../../components/paper-styles/color.html">
-
-<!--
-Material design: [Sliders](https://www.paper.com/design/spec/components/sliders.html)
-
-`paper-diff-slider` allows user to select a value from a range of values by
-moving the slider thumb.  The interactive nature of the slider makes it a
-great choice for settings that reflect intensity levels, such as volume,
-brightness, or color saturation.
-
-Example:
-
-    <paper-diff-slider></paper-diff-slider>
-
-Use `min` and `max` to specify the slider range.  Default is 0 to 100.
-
-Example:
-
-    <paper-diff-slider min="10" max="200" value="110"></paper-diff-slider>
-
-### Styling
-
-The following custom properties and mixins are available for styling:
-
-Custom property | Description | Default
-----------------|-------------|----------
-`--paper-diff-slider-container-color` | The background color of the bar | `--paper-grey-400`
-`--paper-diff-slider-bar-color` | The background color of the slider | `transparent`
-`--paper-diff-slider-active-color` | The progress bar color | `--paper-green-500`
-`--paper-diff-slider-secondary-color` | The secondary progress bar color | `--paper-green-300`
-`--paper-diff-slider-knob-color` | The knob color | `--paper-green-500`
-`--paper-diff-slider-disabled-knob-color` | The disabled knob color | `--paper-grey-400`
-`--paper-diff-slider-pin-color` | The pin color | `--paper-green-500`
-`--paper-diff-slider-font-color` | The pin's text color | `#fff`
-`--paper-diff-slider-markers-color` | The snaps markers color | `#000`
-`--paper-diff-slider-disabled-active-color` | The disabled progress bar color | `--paper-grey-400`
-`--paper-diff-slider-disabled-secondary-color` | The disabled secondary progress bar color | `--paper-grey-400`
-`--paper-diff-slider-knob-start-color` | The fill color of the knob at the far left | `transparent`
-`--paper-diff-slider-knob-start-border-color` | The border color of the knob at the far left | `--paper-grey-400`
-`--paper-diff-slider-pin-start-color` | The color of the pin at the far left | `--paper-grey-400`
-`--paper-diff-slider-height` | Height of the progress bar | `2px`
-`--paper-diff-slider-input` | Mixin applied to the input in editable mode | `{}`
-
-@group Paper Elements
-@element paper-diff-slider
-@demo demo/index.html
-@hero hero.svg
--->
-
-<dom-module id="paper-diff-slider">
-  <template strip-whitespace>
-    <style>
-      :host {
-        @apply(--layout);
-        @apply(--layout-justified);
-        @apply(--layout-center);
-        width: 200px;
-        cursor: default;
-        -webkit-user-select: none;
-        -moz-user-select: none;
-        -ms-user-select: none;
-        user-select: none;
-        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-        --paper-progress-active-color: var(--paper-diff-slider-active-color, --paper-green-500);
-        --paper-progress-secondary-color: var(--paper-diff-slider-secondary-color, --paper-red-400);
-        --paper-progress-disabled-active-color: var(--paper-diff-slider-disabled-active-color, --paper-grey-400);
-        --paper-progress-disabled-secondary-color: var(--paper-diff-slider-disabled-secondary-color, --paper-grey-400);
-        --calculated-paper-diff-slider-height: var(--paper-diff-slider-height, 2px);
-      }
-
-      /* focus shows the ripple */
-      :host(:focus) {
-        outline: none;
-      }
-
-      #sliderContainer {
-        position: relative;
-        width: 100%;
-        height: calc(30px + var(--calculated-paper-diff-slider-height));
-        margin-left: calc(15px + var(--calculated-paper-diff-slider-height)/2);
-        margin-right: calc(15px + var(--calculated-paper-diff-slider-height)/2);
-      }
-
-      #sliderContainer:focus {
-        outline: 0;
-      }
-
-      #sliderContainer.editable {
-        margin-top: 12px;
-        margin-bottom: 12px;
-      }
-
-      .bar-container {
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        overflow: hidden;
-      }
-
-      .ring > .bar-container {
-        left: calc(5px + var(--calculated-paper-diff-slider-height)/2);
-        transition: left 0.18s ease;
-      }
-
-      .ring.expand.dragging > .bar-container {
-        transition: none;
-      }
-
-      .ring.expand:not(.pin) > .bar-container {
-        left: calc(8px + var(--calculated-paper-diff-slider-height)/2);
-      }
-
-      #sliderBar {
-        padding: 15px 0;
-        width: 100%;
-        background-color: var(--paper-diff-slider-bar-color, transparent);
-        --paper-progress-container-color: var(--paper-diff-slider-container-color, --paper-grey-400);
-        --paper-progress-height: var(--calculated-paper-diff-slider-height);
-      }
-
-      .slider-markers {
-        position: absolute;
-        top: calc(14px + var(--paper-diff-slider-height,2px)/2);
-        height: var(--calculated-paper-diff-slider-height);
-        left: 0;
-        right: -1px;
-        box-sizing: border-box;
-        pointer-events: none;
-        @apply(--layout-horizontal);
-      }
-
-      .slider-marker {
-        @apply(--layout-flex);
-      }
-      .slider-markers::after,
-      .slider-marker::after {
-        content: "";
-        display: block;
-        margin-left: -1px;
-        width: 2px;
-        height: var(--calculated-paper-diff-slider-height);
-        border-radius: 50%;
-        background-color: var(--paper-diff-slider-markers-color, #000);
-      }
-
-      .slider-knob {
-        position: absolute;
-        left: 0;
-        top: 0;
-        margin-left: calc(-15px - var(--calculated-paper-diff-slider-height)/2);
-        width: calc(30px + var(--calculated-paper-diff-slider-height));
-        height: calc(30px + var(--calculated-paper-diff-slider-height));
-      }
-
-      .transiting > .slider-knob {
-        transition: left 0.08s ease;
-      }
-
-      .slider-knob:focus {
-        outline: none;
-      }
-
-      .slider-knob.dragging {
-        transition: none;
-      }
-
-      .snaps > .slider-knob.dragging {
-        transition: -webkit-transform 0.08s ease;
-        transition: transform 0.08s ease;
-      }
-
-      .slider-knob-inner {
-        margin: 10px;
-        width: calc(100% - 20px);
-        height: calc(100% - 20px);
-        background-color: var(--paper-diff-slider-knob-color, --paper-green-500);
-        border: 2px solid var(--paper-diff-slider-knob-color, --paper-green-500);
-        border-radius: 50%;
-
-        -moz-box-sizing: border-box;
-        box-sizing: border-box;
-
-        transition-property: -webkit-transform, background-color, border;
-        transition-property: transform, background-color, border;
-        transition-duration: 0.18s;
-        transition-timing-function: ease;
-      }
-
-      .expand:not(.pin) > .slider-knob > .slider-knob-inner {
-        -webkit-transform: scale(1.5);
-        transform: scale(1.5);
-      }
-
-      .ring > .slider-knob > .slider-knob-inner {
-        background-color: var(--paper-diff-slider-knob-start-color, transparent);
-        border: 2px solid var(--paper-diff-slider-knob-start-border-color, --paper-grey-400);
-      }
-
-      .slider-knob-inner::before {
-        background-color: var(--paper-diff-slider-pin-color, --paper-green-500);
-      }
-
-      .pin > .slider-knob > .slider-knob-inner::before {
-        content: "";
-        position: absolute;
-        top: 0;
-        left: 50%;
-        margin-left: -13px;
-        width: 26px;
-        height: 26px;
-        border-radius: 50% 50% 50% 0;
-
-        -webkit-transform: rotate(-45deg) scale(0) translate(0);
-        transform: rotate(-45deg) scale(0) translate(0);
-      }
-
-      .slider-knob-inner::before,
-      .slider-knob-inner::after {
-        transition: -webkit-transform .18s ease, background-color .18s ease;
-        transition: transform .18s ease, background-color .18s ease;
-      }
-
-      .pin.ring > .slider-knob > .slider-knob-inner::before {
-        background-color: var(--paper-diff-slider-pin-start-color, --paper-red-400);
-      }
-
-      .pin.expand > .slider-knob > .slider-knob-inner::before {
-        -webkit-transform: rotate(-45deg) scale(1) translate(17px, -17px);
-        transform: rotate(-45deg) scale(1) translate(17px, -17px);
-      }
-
-      .pin > .slider-knob > .slider-knob-inner::after {
-        content: attr(value);
-        position: absolute;
-        top: 0;
-        left: 50%;
-        margin-left: -16px;
-        width: 32px;
-        height: 26px;
-        text-align: center;
-        color: var(--paper-diff-slider-font-color, #fff);
-        font-size: 10px;
-
-        -webkit-transform: scale(0) translate(0);
-        transform: scale(0) translate(0);
-      }
-
-      .pin.expand > .slider-knob > .slider-knob-inner::after {
-        -webkit-transform: scale(1) translate(0, -17px);
-        transform: scale(1) translate(0, -17px);
-      }
-
-      /* paper-input */
-      .slider-input {
-        width: 50px;
-        overflow: hidden;
-        --paper-input-container-input: {
-          text-align: center;
-        };
-        @apply(--paper-diff-slider-input);
-      }
-
-      /* disabled state */
-      #sliderContainer.disabled {
-        pointer-events: none;
-      }
-
-      .disabled > .slider-knob > .slider-knob-inner {
-        background-color: var(--paper-diff-slider-disabled-knob-color, --paper-grey-400);
-        border: 2px solid var(--paper-diff-slider-disabled-knob-color, --paper-grey-400);
-        -webkit-transform: scale3d(0.75, 0.75, 1);
-        transform: scale3d(0.75, 0.75, 1);
-      }
-
-      .disabled.ring > .slider-knob > .slider-knob-inner {
-        background-color: var(--paper-diff-slider-knob-start-color, transparent);
-        border: 2px solid var(--paper-diff-slider-knob-start-border-color, --paper-grey-400);
-      }
-
-      paper-ripple {
-        color: var(--paper-diff-slider-knob-color, --paper-green-500);
-      }
-    </style>
-
-    <div id="sliderContainer"
-      class$="[[_getClassNames(disabled, pin, snaps, immediateValue, min, expand, dragging, transiting, editable)]]">
-      <div class="bar-container">
-        <paper-progress
-          disabled$="[[disabled]]"
-          id="sliderBar"
-          aria-hidden="true"
-          min="[[min]]"
-          max="[[max]]"
-          step="[[step]]"
-          value="[[immediateValue]]"
-          secondary-progress="[[secondaryProgress]]"
-          on-down="_bardown"
-          on-up="_resetKnob"
-          on-track="_onTrack">
-        </paper-progress>
-      </div>
-
-      <template is="dom-if" if="[[snaps]]">
-        <div class="slider-markers">
-          <template is="dom-repeat" items="[[markers]]">
-            <div class="slider-marker"></div>
-          </template>
-        </div>
-      </template>
-
-      <div id="sliderKnob"
-        class="slider-knob"
-        on-down="_knobdown"
-        on-up="_resetKnob"
-        on-track="_onTrack"
-        on-transitionend="_knobTransitionEnd">
-          <div class="slider-knob-inner" value$="[[immediateDiff]]"></div>
-      </div>
-    </div>
-
-    <template is="dom-if" if="[[editable]]">
-      <paper-input
-        id="input"
-        type="number"
-        step="[[step]]"
-        min="[[min]]"
-        max="[[max]]"
-        class="slider-input"
-        disabled$="[[disabled]]"
-        value="[[immediateValue]]"
-        on-change="_changeValue"
-        on-keydown="_inputKeyDown"
-        no-label-float>
-      </paper-input>
-    </template>
-  </template>
-
-  <script>
-// jscs:disable
-    Polymer({
-      is: 'paper-diff-slider',
-
-      behaviors: [
-        Polymer.IronA11yKeysBehavior,
-        Polymer.IronFormElementBehavior,
-        Polymer.PaperInkyFocusBehavior,
-        Polymer.IronRangeBehavior
-      ],
-
-      properties: {
-        /**
-         * If true, the slider thumb snaps to tick marks evenly spaced based
-         * on the `step` property value.
-         */
-        snaps: {
-          type: Boolean,
-          value: false,
-          notify: true
-        },
-
-        /**
-         * If true, a pin with numeric value label is shown when the slider thumb
-         * is pressed. Use for settings for which users need to know the exact
-         * value of the setting.
-         */
-        pin: {
-          type: Boolean,
-          value: false,
-          notify: true
-        },
-
-        /**
-         * The number that represents the current secondary progress.
-         */
-        secondaryProgress: {
-          type: Number,
-          value: 0,
-          notify: true
-        },
-
-        /**
-         * If true, an input is shown and user can use it to set the slider value.
-         */
-        editable: {
-          type: Boolean,
-          value: false
-        },
-
-        /**
-         * The immediate value of the slider.  This value is updated while the user
-         * is dragging the slider.
-         */
-        immediateValue: {
-          type: Number,
-          value: 0,
-          readOnly: true,
-          notify: true
-        },
-
-        /**
-         * The immediate difference of the slider.
-         * This value is updated while the user is dragging the slider.
-         */
-        immediateDiff: {
-          type: String,
-          value: '+0',
-          readOnly: true,
-          notify: true
-        },
-
-        /**
-         * The value the last time this slider moved
-         */
-        oldValue: {
-          type: Number,
-          value: 0,
-          readOnly: true,
-        },
-
-        /**
-         * The maximum number of markers
-         */
-        maxMarkers: {
-          type: Number,
-          value: 0,
-          notify: true
-        },
-
-        /**
-         * If true, the knob is expanded
-         */
-        expand: {
-          type: Boolean,
-          value: false,
-          readOnly: true
-        },
-
-        /**
-         * True when the user is dragging the slider.
-         */
-        dragging: {
-          type: Boolean,
-          value: false,
-          readOnly: true
-        },
-
-        transiting: {
-          type: Boolean,
-          value: false,
-          readOnly: true
-        },
-
-        markers: {
-          type: Array,
-          readOnly: true,
-          value: function() {
-              return [];
-          }
-        },
-      },
-
-      observers: [
-        '_updateKnob(value, min, max, snaps, step)',
-        '_valueChanged(value)',
-        '_secondaryProgressChanged(secondaryValue)',
-        '_immediateValueChanged(immediateValue)',
-        '_immediateDiffChanged(immediateDiff)',
-        '_updateMarkers(maxMarkers, min, max, snaps)'
-      ],
-
-      hostAttributes: {
-        role: 'slider',
-        tabindex: 0
-      },
-
-      keyBindings: {
-        'left down pagedown home': '_decrementKey',
-        'right up pageup end': '_incrementKey'
-      },
-
-      /**
-       * Increases value by `step` but not above `max`.
-       * @method increment
-       */
-      increment: function() {
-        this.value = this._clampValue(this.value + this.step);
-      },
-
-      /**
-       * Decreases value by `step` but not below `min`.
-       * @method decrement
-       */
-      decrement: function() {
-        this.value = this._clampValue(this.value - this.step);
-      },
-
-      resetOldValue: function(){
-          this.secondaryProgress = this.value;
-          this._setOldValue(this.value);
-      },
-
-      _updateKnob: function(value, min, max, snaps, step) {
-        this.setAttribute('aria-valuemin', min);
-        this.setAttribute('aria-valuemax', max);
-        this.setAttribute('aria-valuenow', value);
-
-        this._positionKnob(this._calcRatio(value));
-      },
-
-      _valueChanged: function() {
-        if (this.oldValue !== this.value){
-            this.secondaryProgress = this.oldValue;
-            this._setOldValue(this.value);
-        }
-        this.fire('value-change');
-      },
-
-      _immediateValueChanged: function() {
-        if (this.dragging) {
-          this.fire('immediate-value-change');
-        } else {
-          this.value = this.immediateValue;
-        }
-      },
-
-      _immediateDiffChanged: function(){
-          this.fire('immediate-diff-change');
-      },
-
-      _secondaryProgressChanged: function() {
-        this.secondaryProgress = this._clampValue(this.secondaryProgress);
-      },
-
-      _expandKnob: function() {
-        this._setImmediateDiff('+0');
-        this._setExpand(true);
-      },
-
-      _resetKnob: function() {
-        this.cancelDebouncer('expandKnob');
-        this._setExpand(false);
-      },
-
-      _positionKnob: function(ratio) {
-        this._setImmediateValue(this._calcStep(this._calcKnobPosition(ratio)));
-
-        this._setRatio(this._calcRatio(this.immediateValue));
-
-        this.$.sliderKnob.style.left = (this.ratio * 100) + '%';
-        if (this.dragging) {
-          this._knobstartx = this.ratio * this._w;
-          this.translate3d(0, 0, 0, this.$.sliderKnob);
-        }
-      },
-
-      _calcKnobPosition: function(ratio) {
-        return (this.max - this.min) * ratio + this.min;
-      },
-
-      _onTrack: function(event) {
-        event.stopPropagation();
-        switch (event.detail.state) {
-          case 'start':
-            this._trackStart(event);
-            break;
-          case 'track':
-            this._trackX(event);
-            break;
-          case 'end':
-            this._trackEnd();
-            break;
-        }
-      },
-
-      _trackStart: function(event) {
-        this._w = this.$.sliderBar.offsetWidth;
-        this._x = this.ratio * this._w;
-        this._startx = this._x;
-        this._knobstartx = this._startx;
-        this._minx = - this._startx;
-        this._maxx = this._w - this._startx;
-        this.$.sliderKnob.classList.add('dragging');
-        this._setDragging(true);
-      },
-
-      _trackX: function(event) {
-        if (!this.dragging) {
-          this._trackStart(event);
-        }
-
-        var dx = Math.min(this._maxx, Math.max(this._minx, event.detail.dx));
-        this._x = this._startx + dx;
-
-        var immediateValue = this._calcStep(this._calcKnobPosition(this._x / this._w));
-        this._setImmediateValue(immediateValue);
-
-        var diff = this.immediateValue - this.value;
-        this._setImmediateDiff(diff >= 0 ? '+'+diff : ''+diff);
-
-        // update knob's position
-        var translateX = ((this._calcRatio(this.immediateValue) * this._w) - this._knobstartx);
-        this.translate3d(translateX + 'px', 0, 0, this.$.sliderKnob);
-      },
-
-      _trackEnd: function() {
-        var s = this.$.sliderKnob.style;
-
-        this.$.sliderKnob.classList.remove('dragging');
-        this._setDragging(false);
-        this._resetKnob();
-        this.value = this.immediateValue;
-
-        s.transform = s.webkitTransform = '';
-
-        this.fire('change');
-      },
-
-      _knobdown: function(event) {
-        this._expandKnob();
-
-        // cancel selection
-        event.preventDefault();
-
-        // set the focus manually because we will called prevent default
-        this.focus();
-      },
-
-      _bardown: function(event) {
-        //this._w = this.$.sliderBar.offsetWidth;
-        //var rect = this.$.sliderBar.getBoundingClientRect();
-        //var ratio = (event.detail.x - rect.left) / this._w;
-        //var prevRatio = this.ratio;
-
-        //this._setTransiting(true);
-
-        //this._positionKnob(ratio);
-
-        this.debounce('expandKnob', this._expandKnob, 60);
-
-        // if the ratio doesn't change, sliderKnob's animation won't start
-        // and `_knobTransitionEnd` won't be called
-        // Therefore, we need to manually update the `transiting` state
-
-        //if (prevRatio === this.ratio) {
-        //  this._setTransiting(false);
-        //}
-
-        //this.async(function() {
-        //  this.fire('change');
-        //});
-
-        // cancel selection
-        event.preventDefault();
-
-        // set the focus manually because we called prevent default
-        this.focus();
-      },
-
-      _knobTransitionEnd: function(event) {
-        if (event.target === this.$.sliderKnob) {
-          this._setTransiting(false);
-        }
-      },
-
-      _updateMarkers: function(maxMarkers, min, max, snaps) {
-        if (!snaps) {
-          this._setMarkers([]);
-        }
-        var steps = Math.round((max - min) / this.step);
-        if (steps > maxMarkers) {
-          steps = maxMarkers;
-        }
-        this._setMarkers(new Array(steps));
-      },
-
-      _mergeClasses: function(classes) {
-        return Object.keys(classes).filter(
-          function(className) {
-            return classes[className];
-          }).join(' ');
-      },
-
-      _getClassNames: function() {
-        return this._mergeClasses({
-          disabled: this.disabled,
-          pin: this.pin,
-          snaps: this.snaps,
-          ring: this.immediateValue <= this.min,
-          expand: this.expand,
-          dragging: this.dragging,
-          transiting: this.transiting,
-          editable: this.editable
-        });
-      },
-
-      _incrementKey: function(event) {
-        if (!this.disabled) {
-          if (event.detail.key === 'end') {
-            this.value = this.max;
-          } else {
-            this.increment();
-          }
-          this.fire('change');
-        }
-      },
-
-      _decrementKey: function(event) {
-        if (!this.disabled) {
-          if (event.detail.key === 'home') {
-            this.value = this.min;
-          } else {
-            this.decrement();
-          }
-          this.fire('change');
-        }
-      },
-
-      _changeValue: function(event) {
-        this.value = event.target.value;
-        this.fire('change');
-      },
-
-      _inputKeyDown: function(event) {
-        event.stopPropagation();
-      },
-
-      // create the element ripple inside the `sliderKnob`
-      _createRipple: function() {
-        this._rippleContainer = this.$.sliderKnob;
-        return Polymer.PaperInkyFocusBehaviorImpl._createRipple.call(this);
-      },
-
-      // Hide the ripple when user is not interacting with keyboard.
-      // This behavior is different from other ripple-y controls, but is
-      // according to spec: https://www.paper.com/design/spec/components/sliders.html
-      _focusedChanged: function(receivedFocusFromKeyboard) {
-        if (receivedFocusFromKeyboard) {
-          this.ensureRipple();
-        }
-        if (this.hasRipple()) {
-          // note, ripple must be un-hidden prior to setting `holdDown`
-          if (receivedFocusFromKeyboard) {
-            this._ripple.style.display = '';
-          } else {
-            this._ripple.style.display = 'none';
-          }
-          this._ripple.holdDown = receivedFocusFromKeyboard;
-        }
-      }
-    });
-
-    /**
-     * Fired when the slider's value changes.
-     *
-     * @event value-change
-     */
-
-    /**
-     * Fired when the slider's immediateValue changes. Only occurs while the
-     * user is dragging.
-     *
-     * To detect changes to immediateValue that happen for any input (i.e.
-     * dragging, tapping, clicking, etc.) listen for immediate-value-changed
-     * instead.
-     *
-     * @event immediate-value-change
-     */
-
-    /**
-     * Fired when the slider's value changes due to user interaction.
-     *
-     * Changes to the slider's value due to changes in an underlying
-     * bound variable will not trigger this event.
-     *
-     * @event change
-     */
-  </script>
-</dom-module>
diff --git a/app/public/custom_components/paper-stepper/animations/fade-in-slide-from-left-animation.html b/app/public/custom_components/paper-stepper/animations/fade-in-slide-from-left-animation.html
deleted file mode 100644
index 860a4381..00000000
--- a/app/public/custom_components/paper-stepper/animations/fade-in-slide-from-left-animation.html
+++ /dev/null
@@ -1,45 +0,0 @@
-<!--
-@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="../../../components/polymer/polymer.html">
-<link rel="import" href="../../../components/neon-animation/neon-animation-behavior.html">
-<link rel="import" href="../../../components/neon-animation/web-animations.html">
-
-<script>
-
-  Polymer({
-
-    is: 'fade-in-slide-from-left-animation',
-
-    behaviors: [
-      Polymer.NeonAnimationBehavior
-    ],
-
-    configure: function(config) {
-      var node = config.node;
-
-      this._effect = new KeyframeEffect(node, [
-        {'transform': 'translateX(-100%)', 'opacity': '0'},
-        {'transform': 'translateX(-50%)', 'opacity': '0'},
-        {'transform': 'none', 'opacity': '1'}
-      ], this.timingFromConfig(config));
-
-      if (config.transformOrigin) {
-        this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
-      } else {
-        this.setPrefixedProperty(node, 'transformOrigin', '0 50%');
-      }
-
-      return this._effect;
-    }
-
-  });
-
-</script>
diff --git a/app/public/custom_components/paper-stepper/animations/fade-in-slide-from-right-animation.html b/app/public/custom_components/paper-stepper/animations/fade-in-slide-from-right-animation.html
deleted file mode 100644
index 03998381..00000000
--- a/app/public/custom_components/paper-stepper/animations/fade-in-slide-from-right-animation.html
+++ /dev/null
@@ -1,45 +0,0 @@
-<!--
-@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="../../../components/polymer/polymer.html">
-<link rel="import" href="../../../components/neon-animation/neon-animation-behavior.html">
-<link rel="import" href="../../../components/neon-animation/web-animations.html">
-
-<script>
-
-  Polymer({
-
-    is: 'fade-in-slide-from-right-animation',
-
-    behaviors: [
-      Polymer.NeonAnimationBehavior
-    ],
-
-    configure: function(config) {
-      var node = config.node;
-
-      this._effect = new KeyframeEffect(node, [
-        {'transform': 'translateX(100%)', 'opacity': '0'},
-        {'transform': 'translateX(50%)', 'opacity': '0'},
-        {'transform': 'none', 'opacity': '1'}
-      ], this.timingFromConfig(config));
-
-      if (config.transformOrigin) {
-        this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
-      } else {
-        this.setPrefixedProperty(node, 'transformOrigin', '0 50%');
-      }
-
-      return this._effect;
-    }
-
-  });
-
-</script>
diff --git a/app/public/custom_components/paper-stepper/animations/fade-out-slide-left-animation.html b/app/public/custom_components/paper-stepper/animations/fade-out-slide-left-animation.html
deleted file mode 100644
index 48f48ea5..00000000
--- a/app/public/custom_components/paper-stepper/animations/fade-out-slide-left-animation.html
+++ /dev/null
@@ -1,45 +0,0 @@
-<!--
-@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="../../../components/polymer/polymer.html">
-<link rel="import" href="../../../components/neon-animation/neon-animation-behavior.html">
-<link rel="import" href="../../../components/neon-animation/web-animations.html">
-
-<script>
-
-  Polymer({
-
-    is: 'fade-out-slide-left-animation',
-
-    behaviors: [
-      Polymer.NeonAnimationBehavior
-    ],
-
-    configure: function(config) {
-      var node = config.node;
-
-      this._effect = new KeyframeEffect(node, [
-        {'transform': 'none', 'opacity': '1'},
-        {'transform': 'translateX(-50%)', 'opacity': '0'},
-        {'transform': 'translateX(-100%)', 'opacity': '0'},
-      ], this.timingFromConfig(config));
-
-      if (config.transformOrigin) {
-        this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
-      } else {
-        this.setPrefixedProperty(node, 'transformOrigin', '0 50%');
-      }
-
-      return this._effect;
-    }
-
-  });
-
-</script>
diff --git a/app/public/custom_components/paper-stepper/animations/fade-out-slide-right-animation.html b/app/public/custom_components/paper-stepper/animations/fade-out-slide-right-animation.html
deleted file mode 100644
index 90ffd990..00000000
--- a/app/public/custom_components/paper-stepper/animations/fade-out-slide-right-animation.html
+++ /dev/null
@@ -1,45 +0,0 @@
-<!--
-@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="../../../components/polymer/polymer.html">
-<link rel="import" href="../../../components/neon-animation/neon-animation-behavior.html">
-<link rel="import" href="../../../components/neon-animation/web-animations.html">
-
-<script>
-
-  Polymer({
-
-    is: 'fade-out-slide-right-animation',
-
-    behaviors: [
-      Polymer.NeonAnimationBehavior
-    ],
-
-    configure: function(config) {
-      var node = config.node;
-
-      this._effect = new KeyframeEffect(node, [
-        {'transform': 'none', 'opacity': '1'},
-        {'transform': 'translateX(50%)', 'opacity': '1'},
-        {'transform': 'translateX(100%)', 'opacity': '0'}
-      ], this.timingFromConfig(config));
-
-      if (config.transformOrigin) {
-        this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
-      } else {
-        this.setPrefixedProperty(node, 'transformOrigin', '0 50%');
-      }
-
-      return this._effect;
-    }
-
-  });
-
-</script>
diff --git a/app/public/custom_components/paper-stepper/bower.json b/app/public/custom_components/paper-stepper/bower.json
deleted file mode 100644
index 1b410d4e..00000000
--- a/app/public/custom_components/paper-stepper/bower.json
+++ /dev/null
@@ -1,48 +0,0 @@
-{
-  "name": "paper-stepper",
-  "version": "2.0-beta.5",
-  "authors": [
-    "Zecat <jullienfelix@gmail.com>"
-  ],
-  "description": "Material paper-stepper element.",
-  "keywords": [
-    "web-component",
-    "polymer",
-    "seed"
-  ],
-  "main": "paper-stepper.html",
-  "license": "http://polymer.github.io/LICENSE.txt",
-  "homepage": "https://github.com/zecat/paper-stepper/",
-  "ignore": [
-    "/.*",
-    "/test/"
-  ],
-  "dependencies": {
-    "polymer": "Polymer/polymer#^1.2.0",
-    "paper-button": "PolymerElements/paper-button#^1.0.11",
-    "iron-icons": "PolymerElements/iron-icons#^1.1.3",
-    "paper-styles": "PolymerElements/paper-styles#^1.1.4",
-    "paper-ripple": "PolymerElements/paper-ripple#^1.0.5",
-    "iron-selector": "PolymerElements/iron-selector#^1.3.0",
-    "iron-icon": "PolymerElements/iron-icon#^1.0.8",
-    "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.3.1",
-    "neon-animation": "PolymerElements/neon-animation#^1.1.1",
-    "iron-validatable-behavior": "PolymerElements/iron-validatable-behavior#^1.0.5",
-    "iron-collapse": "PolymerElements/iron-collapse#^1.2.0"
-  },
-  "devDependencies": {
-    "paper-input": "PolymerElements/paper-input#^1.1.10",
-    "paper-material": "PolymerElements/paper-material#^1.0.6",
-    "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
-    "web-component-tester": "*",
-    "iron-form": "PolymerElements/iron-form#^1.0.16",
-    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.2.2",
-    "paper-toggle-button": "PolymerElements/paper-toggle-button#^1.2.0",
-    "app-layout": "PolymerElements/app-layout#^0.10.2",
-    "paper-menu": "PolymerElements/paper-menu#^1.2.2",
-    "iron-scroll-spy": "Zecat/iron-scroll-spy#^2.1.0",
-    "paper-item": "PolymerElements/paper-item#^1.2.1",
-    "paper-toast": "PolymerElements/paper-toast#^1.3.0",
-    "paper-checkbox": "PolymerElements/paper-checkbox#^1.4.0"
-  }
-}
diff --git a/app/public/custom_components/paper-stepper/hero.svg b/app/public/custom_components/paper-stepper/hero.svg
deleted file mode 100644
index 3e1081d1..00000000
--- a/app/public/custom_components/paper-stepper/hero.svg
+++ /dev/null
@@ -1,27 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 225 126" enable-background="new 0 0 225 126" xml:space="preserve">
-<g id="background" display="none">
-	<rect display="inline" fill="#B0BEC5" width="225" height="126"/>
-</g>
-<g id="label">
-</g>
-<g id="art">
-	<g id="ic_x5F_add_x0D_">
-	</g>
-	<circle cx="78" cy="98" r="4"/>
-	<circle cx="171" cy="90" r="4"/>
-	<circle cx="132" cy="61" r="4"/>
-	<circle cx="53" cy="61" r="4"/>
-	<circle cx="126" cy="28" r="4"/>
-	<circle cx="91" cy="67" r="4"/>
-	<circle cx="132" cy="90" r="4"/>
-	<circle cx="65" cy="32" r="4"/>
-	<path d="M77.7,99.4L51.9,61.1L64.3,31l64.1-4.2L92.6,66.7l16.1,9l23.3-16L174,91h-42.3l-23-12.9L77.7,99.4z M54.1,60.9l24.1,35.7
-		L106.8,77l-17.4-9.8l34.2-38.1L65.7,33L54.1,60.9z M132.3,89H168l-36-26.8l-21.4,14.6L132.3,89z"/>
-</g>
-<g id="Guides">
-</g>
-</svg>
diff --git a/app/public/custom_components/paper-stepper/paper-step.html b/app/public/custom_components/paper-stepper/paper-step.html
deleted file mode 100644
index fba7e5e7..00000000
--- a/app/public/custom_components/paper-stepper/paper-step.html
+++ /dev/null
@@ -1,424 +0,0 @@
-<link rel="import" href="../../components/iron-validatable-behavior/iron-validatable-behavior.html">
-<link rel="import" href="../../components/paper-item/paper-item-behavior.html">
-<link rel="import" href="../../components/paper-behaviors/paper-ripple-behavior.html">
-<link rel="import" href="../../components/neon-animation/neon-animatable-behavior.html">
-<link rel="import" href="../../components/paper-styles/default-theme.html">
-<link rel="import" href="step-horizontal-label.html">
-<link rel="import" href="step-vertical.html">
-<link rel="import" href="../../components/polymer/polymer.html">
-
-<!--
-Missing Doc
-@element paper-step
-@demo demo/index.html
-@hero hero.svg
--->
-<dom-module id="paper-step">
-  <template>
-    <style>
-      :host {
-        display: block;
-        box-sizing: border-box;
-        outline: 0;
-      }
-      :host(:not([vertical])) {
-        overflow: hidden;
-        @apply(--layout);
-        @apply(--layout-flex);
-      }
-      :host(:not([vertical])[opened]){
-        overflow: visible;
-      }
-      :host(:not([opened]):not(.neon-animating)) #slideshowViewport{
-        display: none;
-      }
-      #slideshowViewport {
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        overflow: hidden;
-      }
-      #contentWrapper {
-        padding: 16px 0 16px 16px;
-        @apply(--layout-scroll);
-        @apply(--layout-fit);
-        pointer-events: auto;
-      }
-      :host(:focus:not([opened]):not([saved])) step-horizontal-label ::content #badge {
-        background: var(--paper-step-selectable-hovered-badge-background, --paper-grey-500);
-      }
-    </style>
-
-    <!-- horizontal step layout -->
-
-    <template is="dom-if" if="[[!vertical]]">
-      <step-horizontal-label id="horizontalStepLabel" editable="[[editable]]" label="[[label]]"
-        alternative-label="[[_alternativeLabel]]" optional="[[optional]]"
-        opened="[[opened]]" selectable="[[selectable]]" index="[[index]]"
-        saved="[[saved]]" stepper-data="[[_stepperData]]">
-      </step-horizontal-label>
-      <div id="slideshowViewport">
-        <div id="contentWrapper">
-        </div>
-      </div>
-    </template>
-
-    <!-- vertical step layout -->
-
-    <template is="dom-if" if="[[vertical]]">
-      <step-vertical id="verticalStepLabel" editable="[[editable]]" label="[[label]]"
-        optional="[[optional]]" opened="[[opened]]"
-        selectable="[[selectable]]" stepper-data="[[_stepperData]]" index="[[index]]"
-        saved="[[saved]]" _attr-for-primary-button-text="[[_attrForPrimaryButtonText]]"
-        can-skip="[[_canSkip]]" has-back-step="[[_hasBackStep]]">
-      </step-vertical>
-    </template>
-  </template>
-
-  <script>
-    Polymer({
-
-      is: 'paper-step',
-
-      behaviors: [
-        Polymer.IronValidatableBehavior,
-        Polymer.NeonAnimatableBehavior,
-        Polymer.PaperItemBehavior,
-        Polymer.PaperRippleBehavior
-      ],
-
-      /**
-       * Fired when the step has been saved.
-       *
-       * @event paper-step-saved
-       */
-      /**
-       * Fired when the step has been updated
-       *
-       * @event paper-step-updated
-       */
-      properties: {
-        /**
-         * MISSING Doc
-         */
-        saved: {
-          type: Boolean,
-          value: false,
-          notify: true,
-          readOnly: true
-        },
-        /**
-         * Missing Doc
-         */
-        editable: {
-          type: Boolean,
-          value: false
-        },
-        /**
-         * Missing Doc
-         */
-        index: {
-          type: Number,
-          notify: true,
-          readOnly: true
-        },
-        /**
-         * Missing Doc
-         */
-        _previousSaved: {
-          type: Boolean,
-          readOnly: true
-        },
-        /**
-         * Missing Doc
-         */
-        optional: {
-          type: Boolean,
-          value: false
-        },
-        /**
-         * Missing Doc
-         */
-        selectable: {
-          type: Boolean,
-          computed: '_computeSelectable(_stepperData.linear, saved, editable, _previousSaved)',
-          reflectToAttribute: true,
-          notify: true
-        },
-        /**
-         * Missing Doc
-         */
-        disabled: {
-          computed: '_computeDisabled(selectable)'
-        },
-        /**
-         * Missing Doc
-         */
-        label: {
-          type: String,
-          value: ''
-        },
-        /**
-         * Missing Doc
-         */
-        opened: {
-          type: Boolean,
-          value: false
-        },
-        /**
-         * Missing Doc
-         */
-        animationConfig: {
-          readOnly: true
-        },
-        /**
-         * Missing Doc
-         */
-        entryAnimation: {
-          readOnly: true
-        },
-        /**
-         * Missing Doc
-         */
-        exitAnimation: {
-          readOnly: true
-        },
-        /**
-         * Missing Doc
-         */
-        vertical: {
-          type: Boolean,
-          readOnly: true,
-          reflectToAttribute: true
-        },
-        /**
-         * Missing Doc
-         */
-        horizontalHigherEntryAnimation: {
-          type: String
-        },
-        /**
-         * Missing Doc
-         */
-        horizontalHigherExitAnimation: {
-          type: String
-        },
-        /**
-         * Missing Doc
-         */
-        horizontalLowerEntryAnimation: {
-          type: String
-        },
-        /**
-         * Missing Doc
-         */
-        horizontalLowerExitAnimation: {
-          type: String
-        },
-        /**
-         * Missing Doc
-         */
-        _alternativeLabel: {
-          type: Boolean,
-          readOnly: true
-        },
-        /**
-         * Missing Doc
-         */
-        _optionalText: {
-          type: Boolean,
-          readOnly: true
-        },
-        /**
-         * Missing Doc
-         */
-        _attrForPrimaryButtonText: {
-          type: String,
-          readOnly: true
-        },
-        /**
-         * A reference to the parent stepper
-         */
-        _stepper: {
-          type: Object,
-          readOnly: true
-        },
-        _stepperData: {
-          type: Object,
-          readOnly: true
-        },
-        _canSkip: {
-          type: Boolean,
-          readOnly: true
-        },
-        _hasBackStep: {
-          type: Boolean,
-          readOnly: true
-        }
-      },
-
-      listeners: {
-        'paper-step-vertical-skip-tapped': 'skip',
-        'paper-step-vertical-back-tapped': 'back',
-        'paper-step-vertical-continue-tapped': 'continue',
-        'tap': '_tapHandler'
-      },
-
-      observers: [
-        '_toggleClassPosition(index, _stepperData.stepNumber, vertical)',
-        '_updateSlideshowViewportTop(optional, _alternativeLabel, vertical)',
-        '_verticalChange(vertical)',
-        '_focusedChanged(receivedFocusFromKeyboard)',
-        '_labelElementChanged(_labelElement)'
-      ],
-
-      _focusedChanged: function(receivedFocusFromKeyboard) {
-        if (receivedFocusFromKeyboard) {
-          this.ensureRipple();
-          // generate a ripple effect from the center of the badge
-          var badge = Polymer.dom(this._rippleContainer).querySelector('#badge');
-          var badgePos = badge.getBoundingClientRect();
-          var rippleX = badgePos.left + 12;
-          var rippleY = badgePos.top + 12;
-          this._ripple.downAction({detail: {x: rippleX, y: rippleY}});
-        }
-        if (this.hasRipple()) {
-          this._ripple.holdDown = receivedFocusFromKeyboard;
-        }
-      },
-
-      _tapHandler: function(e) {
-        var rootTarget = Polymer.dom(e).rootTarget;
-        if (rootTarget !== this && rootTarget !== this._rippleContainer) {
-          e.stopImmediatePropagation();
-        }
-      },
-
-      /**
-       * Missing Doc
-       */
-      skip: function() {
-        // would it be better to send an event?
-        this._stepper.progress();
-      },
-
-      /**
-       * Missing Doc
-       */
-      back: function() {
-        // would it be better to send an event?
-        this._stepper.back();
-      },
-
-      /**
-       * Mark the step as saved and fire `paper-step-saved` if it is valid.
-       * @return {Boolean} True if the step has been saved.
-       */
-      save: function() {
-        if ((!this.saved || this.editable) && this.validate()) {
-          if (this.saved) {
-            this.fire('paper-step-updated');
-          } else {
-            this._setSaved(true);
-            this.fire('paper-step-saved');
-          }
-          return true;
-        }
-        return false;
-      },
-
-      /**
-       * Atempte to save the step and select and to progress into the stepper.
-       * @return {Boolean} True if the step is valid for saving.
-       */
-      continue: function() {
-        if (this.save()) {
-          // would it be better to send an event?
-          this._stepper.progress();
-          return true;
-        }
-        return false;
-      },
-
-      _removeAnimatingClass: function() {
-        if (this._animationCanceled) {
-          this._set_animationCanceled(false);
-        } else {
-          this.toggleClass('neon-animating', false);
-        }
-      },
-
-      _cancelAnimation: function() {
-        this._set_animationCanceled(true);
-        this.toggleClass('neon-animating', false);
-      },
-
-      _updateSlideshowViewportTop: function(optional, _alternativeLabel, vertical) {
-        if (!vertical) {
-          this.async(function() {
-            this.$$('#slideshowViewport').style.top = this.clientHeight+'px';
-            this.fire('step-horizontal-label-resize');
-          })
-        }
-      },
-
-      _toggleClassPosition: function(index, stepNumber, vertical) {
-        this.async(function() {
-          var stepLabel = this.$$(vertical ? '#verticalStepLabel' : '#horizontalStepLabel');
-          this.toggleClass('first-step', (index == 1), stepLabel);
-          this.toggleClass('last-step', (index == stepNumber), stepLabel);
-        });
-      },
-
-      _updateAnimationConfig: function() {
-        /* TODO: call this method when horizontalHigher/LowerEntry/ExitAnimation change */
-        var animatedNode = this.$$('#contentWrapper');
-        this._setAnimationConfig({
-          'higher-step-entry': {
-            node: animatedNode,
-            name: this.horizontalHigherEntryAnimation
-          },
-          'higher-step-exit': {
-            node: animatedNode,
-            name: this.horizontalHigherExitAnimation
-          },
-          'lower-step-entry': {
-            node: animatedNode,
-            name: this.horizontalLowerEntryAnimation
-          },
-          'lower-step-exit': {
-            node: animatedNode,
-            name: this.horizontalLowerExitAnimation
-          }
-        });
-      },
-
-      _verticalChange: function(vertical) {
-        this.async(function() {
-          // move or create the content tag
-          Polymer.dom(this.$$(vertical ? '#verticalStepLabel' : '#contentWrapper')).appendChild(this.$$('content') || this.create('content'));
-          // reset the ripple
-          this._ripple = false;
-          this._rippleContainer = vertical ? this.$$('#verticalStepLabel').$.label : this.$$('#horizontalStepLabel').$.label;
-          if (!vertical) {
-            this._updateAnimationConfig();
-          }
-        }.bind(this));
-      },
-
-      _computeSelectable: function(linear, saved, editable, previousSaved) {
-        // TODO: factorize the expression
-        return (!linear || previousSaved) && (!saved || editable) || (editable && saved);
-      },
-
-      _computeDisabled: function(selectable) {
-        // disabled is used by IronMenuBehavior in paper-stepper
-        // TODO: remove selectable attribute and use disabled instead
-        return !selectable;
-      }
-
-    });
-
-  </script>
-</dom-module>
diff --git a/app/public/custom_components/paper-stepper/paper-stepper.html b/app/public/custom_components/paper-stepper/paper-stepper.html
deleted file mode 100644
index c00c4fd7..00000000
--- a/app/public/custom_components/paper-stepper/paper-stepper.html
+++ /dev/null
@@ -1,735 +0,0 @@
-<link rel="import" href="../../components/iron-flex-layout/iron-flex-layout.html">
-<link rel="import" href="../../components/iron-selector/iron-selectable.html">
-<link rel="import" href="../../components/iron-menu-behavior/iron-menu-behavior.html">
-<link rel="import" href="../../components/neon-animation/neon-animation-runner-behavior.html">
-<link rel="import" href="../../components/paper-button/paper-button.html">
-<link rel="import" href="../../components/paper-styles/default-theme.html">
-<link rel="import" href="../../components/paper-styles/shadow.html">
-<link rel="import" href="../../components/iron-collapse/iron-collapse.html">
-<link rel="import" href="../../components/iron-resizable-behavior/iron-resizable-behavior.html">
-<link rel="import" href="../../components/polymer/polymer.html">
-<link rel="import" href="animations/fade-in-slide-from-right-animation.html">
-<link rel="import" href="animations/fade-out-slide-right-animation.html">
-<link rel="import" href="animations/fade-in-slide-from-left-animation.html">
-<link rel="import" href="animations/fade-out-slide-left-animation.html">
-<link rel="import" href="paper-step.html">
-
-<!--
-Missing Doc
-
-
-## Styling
-
-The default color values respect the material specifications. For basic configuration, just defines the `--primary-color` for your app.
-
-The stepper has a complexe interface so many custom properties are available, use them this way :
-
-```html
-<style is="custom-style">
-
-  paper-stepper {
-    --paper-stepper-custom-property: value;
-  }
-
-  paper-step {
-    --paper-step-custom-property: value;
-  }
-
-</style>
-
-<paper-stepper>
-  <paper-step></paper-step>
-  <paper-step></paper-step>
-</paper-stepper>
-```
-
-Note, for sizing the stepper and steps depending on the layout, use the following instead of setting 'height' and 'max-height' :
-- `--paper-stepper-horizontal-opened-height`
-- `--paper-stepper-vertical-max-height`
-- `--paper-vertical-step-max-height`
-
-### Stepper
-
-Custom property | Description | Default
-------|-------------|----------
-`--paper-stepper-horizontal-opened-height` | The horizontal opened stepper height | 450px
-`--paper-stepper-horizontal-opening-transition-duration`| The horizontal stepper opening transition duration (ms) | 500
-`--paper-stepper-vertical-max-height`| The vertical stepper max height so it has a scrollable area | undefined
-
-### Step
-
-Custom property | Description | Default
-------|-------------|----------
-`--paper-step-connector-line-background` | The connector lines background color. | `--divider-color`
-`--paper-step-label-hover-background` | The steps label background when hovered. | rgba(0,0,0,0.04)
-`--paper-step-ink-color` | The steps ripple effect ink color. | `--divider-color`
-
-### Step text label
-
-Custom property | Description | Default
-------|-------------|----------
-`--paper-step-disabled-label-text-color` | The no-selectable steps label text color. | `--paper-grey-400`
-`--paper-step-selectable-label-text-color` | The selectable steps label text color. | `--paper-grey-600`
-`--paper-step-opened-label-text-color` | The opened steps label text color. | `--light-theme-text-color`
-`--paper-step-label-text-font-size` | The steps label text font size. | 14px
-`--paper-step-label-optional-text-font-size` | The steps label optional text font size. | 12px
-
-### Step badge
-
-Custom property | Description | Default
-------|-------------|----------
-`--paper-step-badge-background` | The badge background. | `--paper-grey-300`
-`--paper-step-badge-color` | The badge color. | `--dark-theme-text-color`
-`--paper-step-badge-icon-width` | The badge icon width. | 16px
-`--paper-step-badge-icon-height` | The badge icon height. | 16px
-`--paper-step-opened-badge-background` | The opened steps badge background. | `--primary-color`
-`--paper-step-saved-badge-background` | The saved steps badge background. | `--primary-color`
-`--paper-step-selectable-hovered-badge-background` | The no-opened no-saved selectable steps badge background. | `--paper-grey-500`
-
-### Vertical step
-
-Custom property | Description | Default
-------|-------------|----------
-`--paper-vertical-step-continue-button-background` | The continue button background. | `--primary-color`
-`--paper-vertical-step-continue-button-color` | The continue button background. | `--dark-theme-text-color`
-`--paper-vertical-step-max-height` | The unrolled step content max-height. | 400px
-`--paper-vertical-step-transition-duration` | The step opening transition duration | 500ms
-
-
-@element paper-stepper
-@demo demo/index.html
-@hero hero.svg
--->
-<dom-module id="paper-stepper">
-  <template>
-    <style>
-      :host {
-        display: block;
-        box-sizing: border-box;
-        @apply(--layout-vertical);
-        @apply(--shadow-elevation-2dp);
-        background: white;
-        border-radius: 1px;
-      }
-      #verticalResponsiveWidth {
-        width: var(--paper-stepper-vertical-responsive-width, 0px);
-        visibility: hidden;
-      }
-
-      /* Horizontal layout styles */
-
-      :host([vertical]) {
-        padding: 4px 0;
-        @apply(--layout-scroll);
-        max-height: var(--paper-stepper-vertical-max-height);
-      }
-      :host(:not([vertical])) {
-        position: relative;
-        /* Note: this variable is updated by the stepper itself, don't use it on user side */
-        height: var(--label-wrapper-height);
-        max-height: var(--label-wrapper-height);
-        transition: max-height var(--paper-stepper-horizontal-opening-transition-duration, 300ms), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-      }
-      :host(:not([vertical]):not([opened]):not(.collapsing)) {
-        @apply(--shadow-none);
-      }
-      :host(:not([vertical])[opened]) {
-        max-height: var(--paper-stepper-horizontal-opened-height, 450px);
-      }
-      :host(:not([vertical])[opened]), :host(:not([vertical]).collapsing) {
-        height: var(--paper-stepper-horizontal-opened-height, 450px);
-      }
-      :host(:not([vertical])) #content-wrapper {
-        @apply(--shadow-elevation-2dp);
-        @apply(--layout-horizontal);
-        @apply(--layout-flex-none);
-        @apply(--layout-justified);
-        background: var(--paper-stepper-horizontal-label-wrapper-background, --primary-background-color);
-        border-radius: 1px;
-        overflow: hidden;
-      }
-      .flex {
-        @apply(--layout-flex);
-      }
-      #buttonsWrapper {
-        @apply(--layout-horizontal);
-        overflow: hidden;
-      }
-      #continueButton:not([disabled]) {
-        color: var(--primary-color);
-      }
-      paper-button[disabled] {
-        background-color: transparent;
-      }
-      [hidden] {
-        display: none;
-      }
-      :host(:not[vertical]) #content-wrapper ::content paper-step[opened] {
-        overflow: visible;
-      }
-    </style>
-
-    <!-- Hidden block with width equals to the responsive threshold -->
-    <div id="verticalResponsiveWidth"></div>
-
-    <!-- This wrapper contains the horizontal stepper header or the full vertical stepper -->
-    <div id="content-wrapper">
-      <content select="[[selectable]]"></content>
-    </div>
-
-    <!-- Slideshow and buttons area for horizontal layout -->
-    <template is="dom-if" if="[[!vertical]]">
-      <div class="flex"></div>
-      <!--
-      <div id="buttonsWrapper">
-        <paper-button hidden$="[[!hasBackButton]]" disabled=[[!_hasBackStep]] on-tap="back">[[backText]]</paper-button>
-        <span class="flex"></span>
-        <paper-button hidden$="[[!hasSkipButton]]" disabled="[[!_canSkip]]" on-tap="progress">[[skipText]]</paper-button>
-        <paper-button id="continueButton" on-tap="continue">{{_choosePrimaryButtonText(_attrForSelectedStepPrimaryButtonText, finishText, continueText, updateText)}}</paper-button>
-      </div>
-      -->
-    </template>
-
-  </template>
-
-  <script>
-    'use strict';
-    Polymer({
-
-      is: 'paper-stepper',
-
-      behaviors: [
-        Polymer.IronMenuBehavior,
-        Polymer.NeonAnimationRunnerBehavior,
-        Polymer.IronResizableBehavior
-      ],
-
-      /**
-       * Fired when the stepper progress.
-       *
-       * @event paper-stepper-progressed
-       */
-      /**
-       * Fired when all the steps are saved.
-       *
-       * @event paper-stepper-completed
-       */
-      properties: {
-        opened: {
-          type: Boolean,
-          computed: '_computeOpened(_selectedIndex)',
-          observer: '_openedChanged',
-          notify: true,
-          reflectToAttribute: true
-        },
-        alternativeLabel: {
-          type: Boolean,
-          value: false
-        },
-        vertical: {
-          type: Boolean,
-          value: false,
-          reflectToAttribute: true
-        },
-        backText: {
-          type: String,
-          value: 'BACK'
-        },
-        finishText: {
-          type: String,
-          value: 'FINISH'
-        },
-        continueText: {
-          type: String,
-          value: 'CONTINUE'
-        },
-        skipText: {
-          type: String,
-          value: 'SKIP'
-        },
-        optionalText: {
-          type: String,
-          value: 'Optional'
-        },
-        updateText: {
-          type: String,
-          value: 'UPDATE'
-        },
-        linear: {
-          type: Boolean,
-          value: false
-        },
-        completed: {
-          type: Boolean,
-          value: false,
-          notify: true,
-          computed: '_computeCompleted(stepNumber, savedStepNumber)'
-        },
-        hasSkipButton: {
-          type: Boolean,
-          value: false
-        },
-        hasBackButton: {
-          type: Boolean,
-          value: false
-        },
-        stepNumber: {
-          type: Number,
-          notify: true,
-          computed: '_computeStepNumber(items.length)'
-        },
-        savedStepNumber: {
-          type: Number,
-          notify: true,
-          readOnly: true
-        },
-        selectedAttribute: {
-          value: 'opened',
-          readOnly: true
-        },
-        /**
-         * Note: if you decide to change this attribute, take care to only include `<paper-step>` elements in your `<paper-stepper>`
-         */
-        selectable: {
-          value: 'paper-step'
-        },
-        /**
-         * Multi mode is not allowed for now in paper-stepper.
-         */
-        mutli: {
-          value: false,
-          readOnly: true
-        },
-        responsiveCheckFrequence: {
-          type: Number,
-          value: 200
-        },
-        animateInitialSelection: {
-          type: Boolean,
-          value: false
-        },
-        horizontalHigherEntryAnimation: {
-          type: String,
-          value: 'fade-in-slide-from-right-animation'
-        },
-        horizontalHigherExitAnimation: {
-          type: String,
-          value: 'fade-out-slide-right-animation'
-        },
-        horizontalLowerEntryAnimation: {
-          type: String,
-          value: 'fade-in-slide-from-left-animation'
-        },
-        horizontalLowerExitAnimation: {
-          type: String,
-          value: 'fade-out-slide-left-animation'
-        },
-        _skipStepIndex: {
-          type: Number,
-          computed: '_compute_skipStepIndex(_selectedIndex)'
-        },
-        _canSkip: {
-          type: Boolean,
-          notify: true,
-          computed: '_isntNull(_skipStepIndex)'
-        },
-        _backStepIndex: {
-          type: Number,
-          computed: '_compute_backStepIndex(_selectedIndex)'
-        },
-        _hasBackStep: {
-          type: Boolean,
-          computed: '_isntNull(_backStepIndex)'
-        },
-        _selectedIndex: {
-          type: Number,
-          observer: '_selectedIndexChanged',
-          readOnly: true,
-          value: -1
-        },
-        _attrForSelectedStepPrimaryButtonText: {
-          type: String,
-          computed: '_compute__attrForSelectedStepPrimaryButtonText(_selectedIndex, stepNumber)'
-        },
-        _previousAnimatedStep: {
-          type: Object,
-          value: null,
-          readOnly: true
-        },
-        _previousSelected: {
-          type: Object,
-          readOnly: true
-        }
-      },
-
-      keyBindings: {
-        'left': '_onLeftKey',
-        'right': '_onRightKey'
-      },
-
-      listeners: {
-        'iron-items-changed': '_initializeSteps',
-        'paper-step-saved': '_stepSaved',
-        'transitionend': '_transitionEnd',
-        'step-horizontal-label-resize': '_updateStepperClosedMaxHeight',
-        'iron-resize': '_resizeHandler',
-        'neon-animation-finish': '_onNeonAnimationFinish'
-      },
-
-      observers: [
-        '_forwardCanSkip(_canSkip, selectedItem)',
-        '_forwardHasBackStep(_hasBackStep, selectedItem)',
-        '_forwardVertical(vertical)',
-        '_forwardAlternativeLabel(alternativeLabel)',
-        '_forwardStepperData(linear, backText, optionalText, finishText, continueText, skipText, updateText, hasSkipButton, hasBackButton)'
-      ],
-
-      attached: function() {
-        this._responsiveCheck();
-      },
-
-      /**
-       * Missing Doc
-       */
-      back: function() {
-        this.selectIndex(this._backStepIndex);
-      },
-
-      /**
-       * @return {Boolean} Try to continue the current step (if no step opened, use the first one).
-       */
-      continue: function() {
-        if (this.selectedItem) {
-          if (this.selectedItem.save()) {
-            this.progress();
-          }
-        }
-      },
-
-      /**
-       * Loops around the steps from the current (if no step opened, from the first one)
-       * in order to open the next selectable unsaved step. Returns true if a step has been opened.
-       */
-      progress: function() {
-        if (!this.stepNumber) {
-          return false;
-        }
-        if (this.completed) {
-          this.selected = null;
-          return true;
-        }
-        for (var i = (this._selectedIndex+1)%this.stepNumber; i != this._selectedIndex; i = (i+1)%this.stepNumber) {
-          if (this.items[i].selectable && !this.items[i].saved) {
-            this.selectIndex(i);
-            this.fire('paper-stepper-progressed');
-            return true;
-          }
-        }
-        return false;
-      },
-
-      /* Deselect and set the steps as unsaved*/
-      reset: function() {
-        this._setSavedStepNumber(0);
-        this.selected = null;
-        if (!this.items.length) {
-          return;
-        }
-        this.items.map(function(step) {
-          step._setSaved(false);
-          step._set_previousSaved(false);
-        });
-        this.items[0]._set_previousSaved(true);
-      },
-
-      get _isRTL() {
-        return window.getComputedStyle(this)['direction'] === 'rtl';
-      },
-
-      _onLeftKey: function(event) {
-        if (this._isRTL) {
-          this._focusNext();
-        } else {
-          this._focusPrevious();
-        }
-        event.detail.keyboardEvent.preventDefault();
-      },
-
-      _onRightKey: function(event) {
-        if (this._isRTL) {
-          this._focusPrevious();
-        } else {
-          this._focusNext();
-        }
-        event.detail.keyboardEvent.preventDefault();
-      },
-
-      /**
-       * Work around: Override the method from IronSelectableBehavior to only allow the selection of selectable step. https://github.com/PolymerElements/iron-selector/issues/99
-       */
-      _selectSelected: function(selected) {
-        var item = this._valueToItem(this.selected);
-        if (item) {
-          var selectable = item.selectable;
-          if (selectable == undefined) {
-            // if selectable isn't define it means the step is not yet ready for selection
-            // and this method will be recalled by the initialization method.
-            return;
-          } else if (!selectable) {
-            //reset previous selected if non null and selectable or deselect
-            if (this._previousSelected && this._previousSelected.selectable) {
-              this.selected = this._valueForItem(this.previousSelected);
-            } else {
-              this.selected = null;
-            }
-            this._set_previousSelected(null);
-            return;
-          }
-        }
-        this._selection.select(item);
-        this._set_previousSelected(item);
-        this._set_selectedIndex(this.indexOf(item));
-        // Check for items, since this array is populated only when attached
-        // Since Number(0) is falsy, explicitly check for undefined
-        if (this.fallbackSelection && this.items.length && (this._selection.get() === undefined)) {
-          this.selected = this.fallbackSelection;
-        }
-      },
-
-      _updateStepperClosedMaxHeight: function() {
-        this.debounce('updateStepperClosedMaxHeight', function() {
-          this.customStyle['--label-wrapper-height'] = this.$$('#content-wrapper').clientHeight + 'px';
-          this.updateStyles('--label-wrapper-height');
-        });
-      },
-
-      _openedChanged: function(newValue, oldValue) {
-        if (!this.vertical && oldValue != undefined) {
-          this.toggleClass('collapsing', true);
-        }
-      },
-
-      _transitionEnd: function(e) {
-        // check to ignore event fired by paper-ripple
-        if (e.propertyName == 'max-height') {
-          this.toggleClass('collapsing', false);
-        }
-      },
-
-      _computeOpened: function(_selectedIndex) {
-        return _selectedIndex >= 0;
-      },
-
-      _stepSaved: function(e) {
-        var previousStep = this.items[this.indexOf(e.target)+1];
-        if (previousStep) {
-          previousStep._set_previousSaved(true);
-        }
-        this._setSavedStepNumber(this.savedStepNumber+1);
-      },
-
-      _forwardVertical: function(vertical) {
-        if (this.stepNumber) {
-          this.items.map(function(step) {
-            step._setVertical(vertical);
-          });
-        }
-        this.setAttribute('role', vertical ? 'menu': 'menubar');
-      },
-
-      _forwardStepperData: function(linear, backText, optionalText, finishText, continueText, skipText, updateText, hasSkipButton, hasBackButton) {
-        if (this.stepNumber) {
-          this.items.map(function(step) {
-            step._set_stepperData({
-              linear: linear,
-              backText: backText,
-              optionalText: optionalText,
-              finishText: finishText,
-              continueText: continueText,
-              skipText: skipText,
-              updateText: updateText,
-              hasSkipButton: hasSkipButton,
-              hasBackButton: hasBackButton,
-              stepNumber: this.stepNumber
-            });
-          }.bind(this));
-        }
-      },
-
-      _forwardAlternativeLabel: function(alternativeLabel) {
-        if (this.stepNumber) {
-          this.items.map(function(step) {
-            step._set_alternativeLabel(alternativeLabel);
-          });
-        }
-      },
-
-      _computeStepNumber: function(length) {
-        return length;
-      },
-
-      _selectedIndexChanged: function(newValue, oldValue) {
-        if (!this.vertical && newValue >=0 && oldValue >= 0) {
-          var oldStep = this.items[oldValue], newStep = this.items[newValue];
-          if (newStep.classList.contains('neon-animating')) {
-            this.cancelAnimation();
-          }
-          if (this._previousAnimatedStep && this._previousAnimatedStep.classList.contains('neon-animating')) {
-            this.cancelAnimation();
-            this.toggleClass('neon-animating', false, this._previousAnimatedStep);
-          }
-          var forward = newValue - oldValue > 0;
-
-          this.animationConfig = {
-            'new-step-entry': {
-              animatable: newStep,
-              type: forward ?
-                newStep.horizontalHigherEntryAnimation && 'higher-step-entry' :
-                newStep.horizontalLowerEntryAnimation && 'lower-step-entry'
-            },
-            'old-step-exit': {
-              animatable: oldStep,
-              type: forward ?
-                oldStep.horizontalLowerExitAnimation && 'lower-step-exit' :
-                oldStep.horizontalHigherExitAnimation && 'higher-step-exit'
-            }
-          };
-          if (this.animationConfig['new-step-entry'].type) {
-            this.playAnimation('new-step-entry', {step: newStep});
-            this.toggleClass('neon-animating', true, newStep);
-          }
-          if (this.animationConfig['old-step-exit'].type) {
-            this.playAnimation('old-step-exit', {step: oldStep});
-            this.toggleClass('neon-animating', true, oldStep);
-          }
-
-          this._set_previousAnimatedStep(oldStep);
-        }
-      },
-
-      _onNeonAnimationFinish: function(event) {
-        var step = event.detail.step;
-        if (step) {
-          this.toggleClass('neon-animating', false, step);
-        }
-      },
-
-      _forwardCanSkip: function(_canSkip, selectedItem) {
-        selectedItem._set_canSkip(_canSkip);
-      },
-
-      _forwardHasBackStep: function(_hasBackStep, selectedItem) {
-        selectedItem._set_hasBackStep(_hasBackStep);
-      },
-
-      _compute__attrForSelectedStepPrimaryButtonText: function(selectedIndex) {
-        /* TODO: compute from selectedItem when https://github.com/PolymerElements/iron-selector/issues/118 is fixed*/
-        if (selectedIndex < 0) {
-          return null;
-        }
-        var _attrForPrimaryButtonText = this.selectedItem.saved ? 'updateText' :
-          ( (this.stepNumber - this.savedStepNumber) == 1 ? 'finishText' : 'continueText' );
-        this.selectedItem._set_attrForPrimaryButtonText(_attrForPrimaryButtonText);
-        return _attrForPrimaryButtonText;
-      },
-
-      _initializeSteps: function() {
-        var savedStepNumber = 0;
-        var data = {
-          linear: this.linear,
-          backText: this.backText,
-          optionalText: this.optionalText,
-          finishText: this.finishText,
-          continueText: this.continueText,
-          skipText: this.skipText,
-          updateText: this.updateText,
-          hasSkipButton: this.hasSkipButton,
-          hasBackButton: this.hasBackButton,
-          stepNumber: this.stepNumber
-        };
-        this.items.map(function(step, i) {
-          if (this.horizontalHigherEntryAnimation && !step.horizontalHigherEntryAnimation) {
-            step.horizontalHigherEntryAnimation = this.horizontalHigherEntryAnimation;
-          }
-          if (this.horizontalHigherExitAnimation && !step.horizontalHigherExitAnimation) {
-            step.horizontalHigherExitAnimation = this.horizontalHigherExitAnimation;
-          }
-          if (this.horizontalLowerEntryAnimation && !step.horizontalLowerEntryAnimation) {
-            step.horizontalLowerEntryAnimation = this.horizontalLowerEntryAnimation;
-          }
-          if (this.horizontalLowerExitAnimation && !step.horizontalLowerExitAnimation) {
-            step.horizontalLowerExitAnimation = this.horizontalLowerExitAnimation;
-          }
-          step._setIndex(i + 1);
-          step._set_stepper(this);
-          step._setVertical(this.vertical);
-          step._set_alternativeLabel(this.alternativeLabel);
-          step._set_stepperData(data);
-          // true for index 0
-          step._set_previousSaved(!i);
-          if (step.saved) {
-            savedStepNumber++;
-          }
-        }.bind(this));
-
-        this._setSavedStepNumber(savedStepNumber);
-        // method from IronSelectableBehavior
-        this._updateSelected();
-      },
-
-      _compute_skipStepIndex: function(_selectedIndex) {
-        if (_selectedIndex >= 0 && !this.completed) {
-          for (var i=(_selectedIndex+1)%this.stepNumber; i!=_selectedIndex; i=(i+1)%this.stepNumber) {
-            if (this.items[i].selectable && !this.items[i].saved) {
-              return i;
-            }
-          }
-        }
-        return null;
-      },
-
-      _compute_backStepIndex: function(_selectedIndex) {
-        if (_selectedIndex >= 0) {
-          for (var i=_selectedIndex - 1; i >= 0; i--) {
-            if (this.items[i].selectable) {
-              return i;
-            }
-          }
-        }
-        return null
-      },
-
-      _isntNull: function(n) {
-        return n != null;
-      },
-
-      _computeCompleted: function(savedStepNumber, stepNumber) {
-        var completed = stepNumber == savedStepNumber;
-        if (completed) {
-          this.fire('paper-stepper-completed');
-          return true;
-        }
-        return false;
-      },
-
-      _choosePrimaryButtonText: function(_attrForSelectedStepPrimaryButtonText) {
-        return this[_attrForSelectedStepPrimaryButtonText];
-      },
-
-      _resizeHandler: function() {
-        this.debounce('paper-stepper-responsive-check', function() {
-          this._responsiveCheck();
-        }, this.responsiveCheckFrequence);
-      },
-
-      _responsiveCheck: function() {
-        var verticalResponsiveWidth = this.$.verticalResponsiveWidth.clientWidth;
-        if (verticalResponsiveWidth) {
-          this.vertical = !(this.clientWidth > verticalResponsiveWidth);
-        }
-      }
-
-    });
-
-  </script>
-</dom-module>
diff --git a/app/public/custom_components/paper-stepper/step-horizontal-label.html b/app/public/custom_components/paper-stepper/step-horizontal-label.html
deleted file mode 100644
index 04907f41..00000000
--- a/app/public/custom_components/paper-stepper/step-horizontal-label.html
+++ /dev/null
@@ -1,124 +0,0 @@
-<link rel="import" href="../../components/iron-flex-layout/iron-flex-layout.html">
-<link rel="import" href="../../components/iron-icons/iron-icons.html">
-<link rel="import" href="../../components/iron-icons/editor-icons.html">
-<link rel="import" href="../../components/paper-styles/color.html">
-<link rel="import" href="../../components/paper-styles/typography.html">
-<link rel="import" href="../../components/paper-styles/default-theme.html">
-<link rel="import" href="../../components/polymer/polymer.html">
-<link rel="import" href="step-label-behavior.html">
-<link rel="import" href="step-label-shared-styles.html">
-
-<dom-module id="step-horizontal-label">
-  <template>
-    <style include="step-label-shared-styles">
-      :host{
-        overflow: hidden;
-      }
-      :host([alternative-label]) {
-        @apply(--layout);
-      }
-      #textWrapper {
-        @apply(--layout-vertical);
-        padding-right: 8px;
-        overflow: hidden;
-      }
-      #textLabel, #optional {
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow: hidden;
-      }
-      #badge {
-        margin: 0 8px;
-      }
-      #badgeWrapper, #textWrapper {
-        pointer-events: none;
-        /* to be above paper-ripple*/
-        z-index: 1;
-      }
-      :host(:not([alternative-label])) #label {
-        @apply(--layout-horizontal);
-        @apply(--layout-center);
-        height: 72px;
-      }
-      :host(.firstStep:not([alternative-label])) #badge {
-        margin-left: 24px;
-      }
-      :host(.lastStep:not([alternative-label])) #textWrapper {
-        padding-right: 24px;
-      }
-      :host(:not([alternative-label]):not(.first-step)) #label::before,
-      :host(:not([alternative-label]):not(.last-step)) #label::after,
-      :host([alternative-label]) #badgeWrapper::before,
-      :host([alternative-label]) #badgeWrapper::after  {
-        height: 1px;
-        min-width: 16px;
-        background: var(--paper-step-connector-line-color, --divider-color);
-        @apply(--layout-flex);
-        content: '';
-      }
-      :host([alternative-label].first-step) #badgeWrapper::before,
-      :host([alternative-label].last-step) #badgeWrapper::after {
-        visibility: hidden;
-      }
-      :host([alternative-label]) #textWrapper{
-        padding: 0 16px;
-        @apply(--layout-vertical);
-        @apply(--layout-center);
-      }
-      :host([alternative-label]) #textLabel, :host([alternative-label]) #optional{
-        text-align: center;
-        @apply(--layout-self-stretch);
-      }
-      :host([alternative-label]) #label{
-        @apply(--layout-vertical);
-        @apply(--layout-self-stretch);
-        padding: 24px 0;
-        width: 100%;
-      }
-      :host([alternative-label]) #badgeWrapper {
-        @apply(--layout-horizontal);
-        @apply(--layout-center);
-        padding-bottom: 16px;
-      }
-      :host(.first-step:not([alternative-label])) #label {
-        padding-left: 16px;
-      }
-      :host(.last-step:not([alternative-label])) #label {
-        padding-right: 16px;
-      }
-    </style>
-    <!-- use a "label" wrapper to use the same shared css rules with step-vertical -->
-    <div id="label">
-      <div id="badgeWrapper">
-        <div id="badge">
-          <iron-icon hidden$="{{!_computeIsIconBadge(icon)}}" icon="{{icon}}"></iron-icon>
-          <span hidden$="{{_computeIsIconBadge(icon)}}">{{index}}</span>
-        </div>
-      </div>
-      <div id="textWrapper">
-        <span id="textLabel">[[label]]</span>
-        <template is="dom-if" if="[[optional]]">
-          <span id="optional">[[stepperData.optionalText]]</span>
-        </template>
-      </div>
-    </div>
-  </template>
-  <script>
-    Polymer({
-      is: 'step-horizontal-label',
-
-      behaviors: [
-        Stepper.StepLabelBehavior
-      ],
-
-      properties: {
-        alternativeLabel: {
-          type: Boolean,
-          value: false,
-          reflectToAttribute: true
-        }
-      },
-
-    });
-  </script>
-</dom-module>
diff --git a/app/public/custom_components/paper-stepper/step-label-behavior.html b/app/public/custom_components/paper-stepper/step-label-behavior.html
deleted file mode 100644
index ed995ee7..00000000
--- a/app/public/custom_components/paper-stepper/step-label-behavior.html
+++ /dev/null
@@ -1,58 +0,0 @@
-<link rel="import" href="../../components/polymer/polymer.html">
-
-<script>
-
-window.Stepper = window.Stepper || {};
-
-  /*
-  * @polymerBehavior Stepper.StepLabelBehavior
-  */
-  Stepper.StepLabelBehavior = {
-
-    properties: {
-      icon: {
-        type: String,
-        computed: '_computeIcon(saved, editable)'
-      },
-      opened: {
-        type: Boolean,
-        reflectToAttribute: true
-      },
-      selectable: {
-        type: Boolean,
-        reflectToAttribute: true
-      },
-      editable: {
-        type: Boolean,
-        reflectToAttribute: true,
-      },
-      label: {
-        type: String,
-        notify: true
-      },
-      optional: {
-        type: Boolean,
-        notify: true
-      },
-      saved: {
-        type: Boolean,
-        reflectToAttribute: true
-      },
-      index: {
-        type: Number
-      },
-      stepperData: {
-       type: Object
-      }
-    },
-
-    _computeIcon: function(saved, editable) {
-      return saved ? ( editable ? 'editor:mode-edit' : 'done' ) : '';
-    },
-
-    _computeIsIconBadge: function(icon) {
-      return icon.length > 0;
-    }
-
-  };
-</script>
diff --git a/app/public/custom_components/paper-stepper/step-label-shared-styles.html b/app/public/custom_components/paper-stepper/step-label-shared-styles.html
deleted file mode 100644
index 4a1e1d60..00000000
--- a/app/public/custom_components/paper-stepper/step-label-shared-styles.html
+++ /dev/null
@@ -1,74 +0,0 @@
-<link rel="import" href="../../components/iron-flex-layout/iron-flex-layout.html">
-<link rel="import" href="../../components/paper-styles/default-theme.html">
-<link rel="import" href="../../components/paper-styles/color.html">
-<link rel="import" href="../../components/paper-styles/typography.html">
-<link rel="import" href="../../components/polymer/polymer.html">
-
-<dom-module id="step-label-shared-styles">
-  <template>
-    <style>
-      :host {
-        display: block;
-        box-sizing: border-box;
-        @apply(--paper-font-common-base);
-        @apply(--layout-flex);
-      }
-      #textWrapper {
-        color: var(--paper-step-disabled-label-text-color, --paper-grey-400);
-      }
-      #textLabel {
-        font-size: var(--paper-step-label-text-font-size, 14px);
-      }
-      #optional{
-        font-size: var(--paper-step-label-optional-text-font-size, 12px);
-      }
-      :host([selectable]) #textWrapper {
-        color: var(--paper-step-selectable-label-text-color, --paper-grey-600);
-      }
-      :host([opened]) #textLabel {
-        color: var(--paper-step-opened-label-text-color, --light-theme-text-color);
-        font-weight: 500;
-      }
-      #label {
-        cursor: default;
-        pointer-events: none;
-        /* For paper-ripple */
-        position: relative;
-      }
-      :host([selectable]) #label {
-        cursor: pointer;
-        pointer-events: auto;
-      }
-      #label:hover {
-        /* using alpha chanel for .connectorLine to grow dark */
-        background: var(--paper-step-label-hover-background, rgba(0,0,0,0.04));
-      }
-      #badge {
-        width: 24px;
-        height: 24px;
-        background: var(--paper-step-badge-background, --paper-grey-300);
-        border-radius: 50%;
-        color: var(--paper-step-badge-color, --dark-theme-text-color);
-        font-size: 12px;
-        @apply(--layout);
-        @apply(--layout-center-center);
-      }
-      #badge iron-icon {
-        --iron-icon-height: var(--paper-step-badge-icon-width, 16px);
-        --iron-icon-width: var(--paper-step-badge-icon-height, 16px);
-      }
-      :host([opened]) #badge {
-        background: var(--paper-step-opened-badge-background, --primary-color);
-      }
-      :host([saved]) #badge {
-        background: var(--paper-step-saved-badge-background, --primary-color);
-      }
-      :host([selectable]:not([opened]):not([saved])) #label:hover #badge {
-        background: var(--paper-step-selectable-hovered-badge-background, --paper-grey-500);
-      }
-      paper-ripple {
-        color: var(--paper-step-ink-color, --paper-grey-400);
-      }
-    </style>
-  </template>
-</dom-module>
diff --git a/app/public/custom_components/paper-stepper/step-vertical.html b/app/public/custom_components/paper-stepper/step-vertical.html
deleted file mode 100644
index 9eb8530b..00000000
--- a/app/public/custom_components/paper-stepper/step-vertical.html
+++ /dev/null
@@ -1,177 +0,0 @@
-<link rel="import" href="../../components/iron-flex-layout/iron-flex-layout.html">
-<link rel="import" href="../../components/paper-button/paper-button.html">
-<link rel="import" href="../../components/paper-styles/color.html">
-<link rel="import" href="../../components/paper-styles/default-theme.html">
-<link rel="import" href="../../components/paper-styles/typography.html">
-<link rel="import" href="../../components/polymer/polymer.html">
-<link rel="import" href="../../components/iron-icons/iron-icons.html">
-<link rel="import" href="../../components/iron-icon/iron-icon.html">
-<link rel="import" href="../../components/iron-icons/editor-icons.html">
-<link rel="import" href="../../components/iron-collapse/iron-collapse.html">
-<link rel="import" href="step-label-behavior.html">
-<link rel="import" href="step-label-shared-styles.html">
-
-<dom-module id="step-vertical">
-  <template>
-    <style include="step-label-shared-styles">
-      :host {
-        @apply(--layout-vertical);
-      }
-      #connectedBadge, #textWrapper {
-        pointer-events: none;
-        /* to be above paper-ripple*/
-        z-index: 1;
-      }
-      #collapse {
-        --iron-collapse-transition-duration: var(--paper-vertical-step-transition-duration, 500ms);
-        @apply(--layout-horizontal);
-      }
-      /**
-       * Content
-       */
-      #connectedStep {
-        @apply(--layout-horizontal);
-      }
-      #contentConnectorLine {
-        width: 1px;
-        background: var(--divider-color, --paper-grey-300);
-        margin-left: 36px;
-        margin-right: 24px;
-      }
-      #stepWrapper {
-        @apply(--layout-flex);
-        /*should be 48px on large screen?*/
-        padding-right: 24px;
-      }
-      #paperStepWrapper {
-        max-height: calc(var(--paper-vertical-step-max-height, 400px) - 92px);
-        @apply(--layout-scroll);
-      }
-
-      /**
-       * Buttons
-       */
-      #buttonsWrapper {
-        height: 48px;
-        @apply(--layout-horizontal);
-        @apply(--layout-center);
-        @apply(--layout-flex-none);
-      }
-      #buttonsWrapper > paper-button {
-        margin-right: 8px;
-        margin-left: 0;
-      }
-      #continueButton {
-        --paper-button: {
-          background: var(--paper-vertical-step-continue-button-background, --primary-color);
-          color: var(--paper-vertical-step-continue-button-color, --dark-theme-text-color);
-        };
-      }
-      /**
-       * Label
-       */
-      #textWrapper {
-        @apply(--layout-vertical);
-        padding: 8px 0 8px 8px;
-      }
-      #label {
-        @apply(--layout-horizontal);
-      }
-      #connectedBadge {
-        @apply(--layout-vertical);
-        @apply(--layout-center);
-        margin-left: 24px;
-      }
-      #beforeConnectorLine, #afterConnectorLine {
-        width: 1px;
-        background: var(--paper-step-connector-line-color, --divider-color);
-      }
-      #beforeConnectorLine {
-        height: 10px;
-      }
-      #afterConnectorLine {
-        @apply(--layout-flex);
-      }
-      #badge {
-        margin: 8px 0;
-      }
-      :host(.first-step) #beforeConnectorLine, :host(.lastStep) #contentConnectorLine{
-        visibility: hidden;
-      }
-      :host(.last-step:not([opened])) #afterConnectorLine {
-        display: none;
-      }
-    </style>
-
-    <div id="label">
-      <div id="connectedBadge">
-        <div id="beforeConnectorLine"></div>
-        <div id="badge">
-          <iron-icon hidden$="{{!_computeIsIconBadge(icon)}}" icon="{{icon}}"></iron-icon>
-          <span hidden$="{{_computeIsIconBadge(icon)}}">{{index}}</span>
-        </div>
-        <div id="afterConnectorLine" class="connectorLine"></div>
-      </div>
-      <div id="textWrapper">
-        <span id="textLabel">[[label]]</span>
-        <template is="dom-if" if="[[optional]]">
-          <span id="optional">[[stepperData.optionalText]]</span>
-        </template>
-      </div>
-    </div>
-    <iron-collapse id="collapse" opened="[[opened]]">
-      <div id="contentConnectorLine"></div>
-      <div id="stepWrapper">
-        <div id="paperStepWrapper">
-          <content></content>
-        </div>
-        <div id="buttonsWrapper">
-          <paper-button id="continueButton" on-tap="continue">{{choosePrimaryButtonText(_attrForPrimaryButtonText, stepperData.continueText, stepperData.finishText, stepperData.updateText)}}</paper-button>
-          <paper-button id="backButton" disabled="[[!hasBackStep]]" on-tap="back" hidden$="[[!stepperData.hasBackButton]]">
-            [[stepperData.backText]]
-          </paper-button>
-          <paper-button id="skipButton" disabled="[[!canSkip]]" on-tap="skip" hidden$="[[!stepperData.hasSkipButton]]">
-            [[stepperData.skipText]]
-          </paper-button>
-        </div>
-      </div>
-    </iron-collapse>
-  </template>
-  <script>
-
-    Polymer({
-      is: 'step-vertical',
-
-      properties: {
-        canSkip: {
-          type: Boolean
-        },
-        _attrForPrimaryButtonText: {
-          type: String,
-          value: false
-        },
-        hasBackStep: Boolean
-      },
-
-      behaviors: [
-        Stepper.StepLabelBehavior
-      ],
-
-      skip: function() {
-        this.fire('paper-step-vertical-skip-tapped');
-      },
-
-      back: function() {
-        this.fire('paper-step-vertical-back-tapped');
-      },
-
-      continue: function() {
-        this.fire('paper-step-vertical-continue-tapped');
-      },
-
-      choosePrimaryButtonText: function(_attrForPrimaryButtonText) {
-        return this.stepperData[_attrForPrimaryButtonText];
-      }
-    });
-  </script>
-</dom-module>