From 8bba0ba8e87e9a4addacccc6bbb48e7edcfe933f Mon Sep 17 00:00:00 2001
From: Stephane Balasse <stephane.balasse@qiis.fr>
Date: Fri, 7 Apr 2017 08:51:05 +0200
Subject: [PATCH 1/5] Added 24-hour selection and display management

---
 demo/index.html           |    2 +-
 paper-clock-selector.html |  835 ++++++++++++++++-------------
 paper-time-picker.html    | 1059 +++++++++++++++++++------------------
 3 files changed, 1017 insertions(+), 879 deletions(-)

diff --git a/demo/index.html b/demo/index.html
index 9254a51..212df35 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -26,7 +26,7 @@
       <h1>{{time}}</h1>
       <paper-button class="btn" on-tap="showDialog" raised>Change Time</paper-button>
       <paper-dialog id="dialog" class="paper-time-picker-dialog" modal on-iron-overlay-closed="dismissDialog">
-        <paper-time-picker id="picker" time="[[time]]"></paper-time-picker>
+        <paper-time-picker id="picker" time="[[time]]" ></paper-time-picker>
         <div class="buttons">
           <paper-button dialog-dismiss>CANCEL</paper-button>
           <paper-button dialog-confirm>OK</paper-button>
diff --git a/paper-clock-selector.html b/paper-clock-selector.html
index 51a4a2a..c848c49 100644
--- a/paper-clock-selector.html
+++ b/paper-clock-selector.html
@@ -11,7 +11,7 @@
   <template>
     <style>
       :host * {
-        -webkit-tap-highlight-color: rgba(0,0,0,0);
+        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
       }
 
       :host {
@@ -27,40 +27,51 @@
         @apply(--layout-horizontal);
         @apply(--layout-center-center);
       }
+
       #clock {
         display: block;
         overflow: visible;
       }
+
       #clock * {
         pointer-events: fill;
       }
+
       #face {
         fill: var(--divider-color);
         cursor: default;
       }
+
       .line {
         stroke-width: 2;
       }
+
       .dot {
         fill: var(--default-primary-color);
       }
+
       .line {
         stroke: var(--default-primary-color);
       }
+
       .clock-hand {
         z-index: 1;
       }
+
       .disc-large {
         z-index: 2;
         fill: var(--default-primary-color);
       }
+
       .disc-small {
         fill: var(--text-primary-color);
       }
+
       .clock-hand.no-dot .disc-small {
         fill: none;
         stroke: none;
       }
+
       .number text {
         z-index: 3;
         fill: var(--primary-text-color);
@@ -70,16 +81,36 @@
         text-align: center;
         text-anchor: middle;
       }
+
+      .number text.hourFr {
+        z-index: 3;
+        fill: var(--paper-grey-600);
+        @apply(--paper-font-body2);
+        pointer-events: none;
+        dominant-baseline: middle;
+        text-align: center;
+        text-anchor: middle;
+      }
+
       .number text.clipped {
         z-index: 4;
         fill: var(--text-primary-color);
         clip-path: url('#handClip');
       }
+
+      .number text.clippedFr {
+        z-index: 4;
+        fill: var(--text-primary-color);
+        color: red;
+        clip-path: url('#handClip');
+      }
+
       .select-area {
         cursor: pointer;
         fill-opacity: 0;
       }
-      #clock.animating #clockHand, 
+
+      #clock.animating #clockHand,
       #clock.animating #clipCircle {
         transition: transform 150ms ease-in;
       }
@@ -98,371 +129,453 @@
         <circle class="disc-small" r$="{{_selectorDotSize}}" cx$="{{_handX}}" cy$="{{_handY}}"></circle>
       </g>
       <g id="numbers"></g>
+      <g id="numbers24"></g>
+
+      <path class="select-area" on-tap="_onTouch" on-track="_onTouch"
+            d$="{{_getSelectArea(_radius, _selectorInner, _selectorOuter)}}"></path>
       <path class="select-area" on-tap="_onTouch" on-track="_onTouch"
-        d$="{{_getSelectArea(_radius, _selectorInner, _selectorOuter)}}"></path>
+            d$="{{_getSelectArea(_radius, 48, 108)}}"></path>
     </svg>
   </template>
   <script>
-    (function(){
-      var SVG_NS = 'http://www.w3.org/2000/svg';
-
-      // radius values as a percentage of the clock-face radius
-      var MAX_VISIBLE = 12;
-
-      var normalizeAngle = function(a) {
-        // convert angle to a positive value between 0 and 360
-        a = a ? a % 360 : 0;
-        return a < 0 ? a + 360 : a;
-      };
-      function getShortestAngle(from, to) {
-        var angle, offset = 0;
-        from = from || 0;
-        angle = normalizeAngle(from);
-        if ( angle < 180 && (to > (angle + 180)) ) {
-          offset = -360; 
-        }
-        if ( angle >= 180 && (to <= (angle - 180)) ) {
-          offset = 360; 
-        }
-        return from + offset + (to - angle);
-      }
-
-      Polymer({
-        is: 'paper-clock-selector',
-        properties: {
-          selected: {
-            type: Number,
-            notify: true,
-            value: 0,
-            observer: '_selectedChanged'
-          },
-          count: {
-            type: Number,
-            value: 0
-          },
-          step: {
-            type: Number,
-            value: 1,
-            observer: '_stepChanged'
-          },
-          useZero: {
-            type: Boolean,
-            value: false
-          },
-          zeroPad: {
-            type: Boolean,
-            value: false,
-            observer: '_zeroPadChanged'
-          },
-          animated: {
-            type: Boolean,
-            value: false
-          }
-        },
-        listeners: {
-          'iron-resize': '_updateSize'
-        },
-        observers: [
-          '_populate(count, step, useZero)'
-        ],
-        behaviors: [
-          Polymer.IronResizableBehavior
-        ],
-        ready: function() {
-          this._transitionEvent = this.style.WebkitTransition ? 'transitionEnd' : 'webkitTransitionEnd';
-          this._populate();
-          this._selectedChanged(this.selected);
-        },
-        setClockHand: function(deg, animate, callback) {
-          deg = normalizeAngle(deg);
-
-          animate = typeof(animate) === 'undefined' ? this.animated : animate;
-          animate = this._radius ? animate : false;
-
-          this.$.clock.classList.remove('animating');
-
-          var current, transform = this._getTransform(this.$.clockHand);
-          if (transform) {
-            current = parseInt(transform.match(/rotate\((-?\d+)deg\)/)[1]);
-          } else {
-            current = 0;
-          }
-
-          var rotate = getShortestAngle(current, deg);
-          if (normalizeAngle(rotate) === current) {
-            return this._setHandRotation(current);
-          }
-
-          if (!animate) {
-            return this._setHandRotation(rotate);
-          }
-
-          this._once(this._transitionEvent, function() {
-            if (callback) {
-              callback();
-            }
-            this.$.clock.classList.remove('animating');
-            this.fire('paper-clock-transition-end');
-          }.bind(this), this.$.clockHand);
-
-          this.$.clock.classList.add('animating');
-          this.async(function() {
-            this._setHandRotation(rotate);
-          });
-
-        },
-        _getTransform: function(el) {
-          return el.style.transform | el.style.webkitTransform | el.style.msTransform;
-        },
-        _setTransform: function(el, value) {
-          el.style.msTransform = el.style.webkitTransform = el.style.transform = value;
-        },
-        _setTransformOrigin: function(el, value) {
-          el.style.msTransformOrigin = el.style.webkitTransformOrigin = el.style.transformOrigin = value;
-        },
-        _setHandRotation: function(deg) {
-          var hasLabel = ((deg / 360) * this.count) % this.step === 0 ;
-          var transform = 'rotate(' + deg + 'deg)';
-          this.$.clockHand.classList[['remove', 'add'][+hasLabel]]('no-dot');
-          this._setTransform(this.$.clockHand, transform);
-          this._setTransform(this.$.clipCircle, transform);
-        },
-        _selectedChanged: function(selected) {
-          if (!this.count || isNaN(selected)) {
-            return;
-          }
-          var value = selected % this.count;
-          var idx = value;
-
-          if (idx === 0 && !this.useZero) {
-            value = this.count;
-          }
-          if (value !== this.selected) {
-            this.selected = value;
-            return;
-          }
-          this._vibrate();
-          this.setClockHand((360 / this.count) * this.selected);
-        },
-        _stepChanged: function(value, oldValue) {
-          this._step = oldValue;
-          if (!this.count || isNaN(value)) {
-            return;
-          }
-          var minStep = Math.ceil(this.count / MAX_VISIBLE);
-          if (value < minStep) {
-            value = minStep;
-          }
-          this._step = value;
-        },
-        _populate: function() {
-          delete this._resizedCache;
-          var display, value, number;
-          var $numbers = this.$.numbers;
-
-          this.set('_numbers', []);
-          this._stepChanged(this.step);
-
-          // remove dom nodes since they'll be re-created
-          while($numbers.firstChild) {
-            $numbers.removeChild($numbers.firstChild);
-          }
-
-          var numbers = [];
-
-          for (var i=0; i<this.count; i++) {
-            value = i;
-            display = null;
-            if (i === 0 && !this.useZero) {
-              value = this.count;
-            }
-
-            number = {
-              index: i,
-              value: value,
-              display: value % this._step === 0,
-              x: 0,
-              y: 0,
-              label: this._formatNumber(value)
-            };
-
-            number.dom = this._createNumberElement(number);
-            numbers.push(number);
-            $numbers.appendChild(number.dom.g);
-          }
-          this.set('_numbers', numbers);
-          this._positionClockPoints();
-        },
-        _updateNumber: function(number) {
-          var dom = number.dom;
-          if (!dom) {
-            return;
-          }
-          if (number.x && number.y && dom.text) {
-            dom.text.setAttributeNS(null, 'x', number.x);
-            dom.text.setAttributeNS(null, 'y', number.y);
-            dom.text.textContent  = this._formatNumber(number.value);
-            dom.textClipped.setAttributeNS(null, 'x', number.x);
-            dom.textClipped.setAttributeNS(null, 'y', number.y);
-            dom.textClipped.textContent = this._formatNumber(number.value);
-          }
-        },
-        _createNumberElement: function(number) {
-          // We can't use templates inside SVG elements, so we have to create
-          // the numbers in dom and set up attribute bindings manually
-          function create(type, classList) {
-            var el = document.createElementNS(SVG_NS, type);
-            if (classList) {
-              classList.forEach(function(c) {
-                el.classList.add(c);
-              });
-            }
-            if (!Polymer.Settings.useNativeShadow) {
-              el.classList.add('style-scope');
-              el.classList.add('paper-clock-selector');
-            }
-            return el;
-          }
-
-          var g = create('g', ['number']);
-          var text = null;
-          var textClipped = null;
-          if (number.display) {
-            text = create('text');
-            text.textContent = number.label;
-            g.appendChild(text);
-            textClipped = create('text', ['clipped']);
-            textClipped.textContent = number.label;
-            g.appendChild(textClipped);
-          }
-
-          return {g: g, text: text, textClipped: textClipped};
-        },
-        _updateSize: function() {
-          var radius = Math.min(this.offsetWidth, this.offsetHeight) / 2;
-          if (!radius || this._resizedCache === radius) {
-            return;
+      (function () {
+          var SVG_NS = 'http://www.w3.org/2000/svg';
+
+          // radius values as a percentage of the clock-face radius
+          var MAX_VISIBLE = 12;
+
+         var normalizeAngle = function (a) {
+              // convert angle to a positive value between 0 and 360
+              a = a ? a % 360 : 0;
+              return a < 0 ? a + 360 : a;
+          };
+
+          function getShortestAngle(from, to) {
+              var angle, offset = 0;
+              from = from || 0;
+              angle = normalizeAngle(from);
+              if (angle < 180 && (to > (angle + 180))) {
+                  offset = -360;
+              }
+              if (angle >= 180 && (to <= (angle - 180))) {
+                  offset = 360;
+              }
+              return from + offset + (to - angle);
           }
-          this._radius = radius;
-          this._selectorSize = 20;
-          this._selectorDotSize = 3;
-          this._padding = 2;
-          this._positionClockPoints();
-
-          this._resizedCache = this._radius;
-          this.$.clock.style.width = (radius * 2) + 'px';
-          this.$.clock.style.height = (radius * 2) + 'px';
-          var v = radius + 'px ' + radius + 'px';
-          this._setTransformOrigin(this.$.clockHand, v);
-          this._setTransformOrigin(this.$.clipCircle, v);
-
-          this.async(function() {
-            // FIXME: this is hacky, but for some reason we need to wait a bit
-            // to get an accurate measurement
-            this._bounds = this.$.face.getBoundingClientRect();
-          }.bind(this), 150);
-        },
-        _positionClockPoints: function() {
-          if (!this._radius) {
-            return;
-          }
-
-          this._selectorOuter = this._radius - this._padding * 2;
-          this._selectorInner = this._selectorOuter - this._selectorSize * 2;
-          var selectorCenter = this._selectorOuter - this._selectorSize;
 
-          var numbers = this._numbers;
-          var angle = (360 / this.count) * (Math.PI / 180);
-
-          var a, number;
-          for (var i=0; i<this.count; i++) {
-            a = angle * i;
-            number = numbers[i];
-            number.x = this._radius + (Math.sin(a) * selectorCenter);
-            number.y = this._radius - (Math.cos(a) * selectorCenter);
-            this._updateNumber(number);
-          }
-          this._handX = this._numbers[0].x;
-          this._handY = this._numbers[0].y;
-        },
-        _notifyNumberChanged: function(path) {
-          var propPath, props = ['x', 'y'];
-          for (var i=0; i<props.length; i++) {
-            propPath = path + '.' + props[i];
-            if (this.get(propPath)) {
-              this.notifyPath(propPath, this.get(propPath));
-            }
-          }
-        },
-        _getSelectArea: function(radius, outer, inner) {
-          return '\n' +
-            'M ' + (radius - outer) + ' ' + radius + '\n' + 
-            'A ' + outer + ' ' + outer + ' 0 0 0 ' + (radius + outer) + ' ' + radius + '\n' + 
-            'A ' + outer + ' ' + outer + ' 0 0 0 ' + (radius - outer) + ' ' + radius + '\n' + 
-            'M ' + (radius - inner) + ' ' + radius + '\n' + 
-            'A ' + inner + ' ' + inner + ' 0 0 1 ' + (radius + inner) + ' ' + radius + '\n'+ 
-            'A ' + inner + ' ' + inner + ' 0 0 1 ' + (radius - inner) + ' ' + radius;
-        },
-        _onTouch: function(event) {
-          var x = event.detail.x - this._bounds.left - this._radius;
-          var y = event.detail.y - this._bounds.top - this._radius;
-
-          /* only rotate while in the touch area */
-          var distance = Math.abs(Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)));
-          if (distance < this._selectorInner || distance > this._selectorOuter) {
-            return;
-          }
-
-          /* don't animate while tracking */
-          this.animated = event.type !== 'track';
-
-          // use coords to find angle from 12 o'clock position
-          var theta = Math.atan(y / x);
-          theta = (Math.PI / 2) + (x < 0 ? theta + Math.PI : theta);
-          var intervalRad = (360 / this.count) * (Math.PI / 180);
-
-          // determine the selected number
-          this.selected = Math.round(theta / intervalRad);
-
-          /* only fire selected when we've tapped or stopped tracking */
-          if (event.type === 'tap' || event.detail.state === 'end') {
-            this.fire('paper-clock-selected', {value: this.selected, animated: this.animated});
-          }
-        },
-        _formatNumber: function(value) {
-          if (this.zeroPad) {
-            return ('0' + value).substr(-2);
-          }
-          return value.toString();
-        },
-        _getNumberClass: function(pfx, n, selected) {
-          var cssClass = pfx;
-          if (selected.value === n.value) {
-            cssClass += ' selected';
-          }
-          return cssClass;
-        },
-        _vibrate: function() {
-          this.debounce('vibrate', function() {
-            if (navigator.vibrate) {
-              navigator.vibrate(10);
-            }
+          Polymer({
+              is: 'paper-clock-selector',
+              properties: {
+                  selected: {
+                      type: Number,
+                      notify: true,
+                      value: 0,
+                      observer: '_selectedChanged'
+                  },
+                  twentyFourHours: {
+                      type: Boolean,
+                      value: false
+                  },
+                  count: {
+                      type: Number,
+                      value: 0
+                  },
+                  step: {
+                      type: Number,
+                      value: 1,
+                      observer: '_stepChanged'
+                  },
+                  useZero: {
+                      type: Boolean,
+                      value: false
+                  },
+                  zeroPad: {
+                      type: Boolean,
+                      value: false,
+                      observer: '_zeroPadChanged'
+                  },
+                  animated: {
+                      type: Boolean,
+                      value: false
+                  }
+              },
+              listeners: {
+                  'iron-resize': '_updateSize'
+              },
+              observers: [
+                  '_populate(count, step, useZero)'
+              ],
+              behaviors: [
+                  Polymer.IronResizableBehavior
+              ],
+              ready: function () {
+                  this._transitionEvent = this.style.WebkitTransition ? 'transitionEnd' : 'webkitTransitionEnd';
+                  this._populate();
+                  this._selectedChanged(this.selected);
+              },
+              setClockHand: function (deg, animate, callback) {
+                  deg = normalizeAngle(deg);
+
+                  animate = typeof(animate) === 'undefined' ? this.animated : animate;
+                  animate = this._radius ? animate : false;
+
+                  this.$.clock.classList.remove('animating');
+
+                  var current, transform = this._getTransform(this.$.clockHand);
+                  if (transform) {
+                      current = parseInt(transform.match(/rotate\((-?\d+)deg\)/)[1]);
+                  } else {
+                      current = 0;
+                  }
+
+                  var rotate = getShortestAngle(current, deg);
+                  if (normalizeAngle(rotate) === current) {
+                      return this._setHandRotation(current);
+                  }
+
+                  if (!animate) {
+                      return this._setHandRotation(rotate);
+                  }
+
+                  this._once(this._transitionEvent, function () {
+                      if (callback) {
+                          callback();
+                      }
+                      this.$.clock.classList.remove('animating');
+                      this.fire('paper-clock-transition-end');
+                  }.bind(this), this.$.clockHand);
+
+                  this.$.clock.classList.add('animating');
+                  this.async(function () {
+                      this._setHandRotation(rotate);
+                  });
+
+              },
+              _getTransform: function (el) {
+                  return el.style.transform | el.style.webkitTransform | el.style.msTransform;
+              },
+              _setTransform: function (el, value) {
+                  el.style.msTransform = el.style.webkitTransform = el.style.transform = value;
+              },
+              _setTransformOrigin: function (el, value) {
+                  el.style.msTransformOrigin = el.style.webkitTransformOrigin = el.style.transformOrigin = value;
+              },
+              _setHandRotation: function (deg) {
+                  var hasLabel = ((deg / 360) * this.count) % this.step === 0;
+                  var transform = 'rotate(' + deg + 'deg)';
+                  this.$.clockHand.classList[['remove', 'add'][+hasLabel]]('no-dot');
+                  this._setTransform(this.$.clockHand, transform);
+                  this._setTransform(this.$.clipCircle, transform);
+              },
+              _selectedChanged: function (selected) {
+                  if (!this.count || isNaN(selected)) {
+                      return;
+                  }
+                  var value;
+
+                  value = selected === 24 ? 0 : selected;
+
+
+                  var idx = value;
+
+                  if (idx === 0 && !this.useZero && !this.twentyFourHours) {
+                      value = this.count;
+                  }
+                  if (value !== this.selected && value !== 0) {
+                      this.selected = value;
+                      return;
+                  }
+                  if (value === 0 && this.twentyFourHours) {
+                      this.selected = 0;
+                      return;
+                  }
+                  this._vibrate();
+                  this.setClockHand((360 / this.count) * this.selected);
+              },
+              _stepChanged: function (value, oldValue) {
+                  this._step = oldValue;
+                  if (!this.count || isNaN(value)) {
+                      return;
+                  }
+                  var minStep = Math.ceil(this.count / MAX_VISIBLE);
+                  if (value < minStep) {
+                      value = minStep;
+                  }
+                  this._step = value;
+              },
+              _populate: function () {
+                  delete this._resizedCache;
+                  var display, value, number;
+                  var $numbers = this.$.numbers;
+
+                  var $numbers24 = this.$.numbers24;
+
+                  this.set('_numbers', []);
+                  this.set('_numbers24', []);
+                  this._stepChanged(this.step);
+
+                  // remove dom nodes since they'll be re-created
+                  while ($numbers.firstChild) {
+                      $numbers.removeChild($numbers.firstChild);
+                  }
+
+                  while ($numbers24.firstChild) {
+                      $numbers24.removeChild($numbers24.firstChild);
+                  }
+
+                  var numbers = [];
+                  var numbers24 = [];
+
+                  for (var i = 0; i < this.count; i++) {
+                      value = i;
+                      display = null;
+                      if (i === 0 && !this.useZero) {
+                          value = this.count;
+                      }
+
+                      number = {
+                          index: i,
+                          value: value,
+                          display: value % this._step === 0,
+                          x: 0,
+                          y: 0,
+                          label: this._formatNumber(value)
+                      };
+
+
+                      number.dom = this._createNumberElement(number);
+                      numbers.push(number);
+                      $numbers.appendChild(number.dom.g);
+
+                      if (this.count === 12 && this.twentyFourHours) {
+                          number24 = {
+                              index: i,
+                              value: value + 12,
+                              display: value % this._step === 0,
+                              x: 0,
+                              y: 0,
+                              label: this._formatNumber(value + 12)
+                          };
+                          number24.dom = this._createNumberElement(number24);
+                          numbers24.push(number24);
+                          $numbers24.appendChild(number24.dom.g);
+                      }
+
+                  }
+                  this.set('_numbers', numbers);
+                  this.set('_numbers24', numbers24);
+                  this._positionClockPoints();
+              },
+              _updateNumber: function (number) {
+                  var dom = number.dom;
+                  if (!dom) {
+                      return;
+                  }
+                  if (number.x && number.y && dom.text) {
+                      dom.text.setAttributeNS(null, 'x', number.x);
+                      dom.text.setAttributeNS(null, 'y', number.y);
+                      dom.text.textContent = this._formatNumber(number.value);
+                      dom.textClipped.setAttributeNS(null, 'x', number.x);
+                      dom.textClipped.setAttributeNS(null, 'y', number.y);
+                      dom.textClipped.textContent = this._formatNumber(number.value);
+                  }
+              },
+              _createNumberElement: function (number) {
+                  // We can't use templates inside SVG elements, so we have to create
+                  // the numbers in dom and set up attribute bindings manually
+                  function create(type, classList) {
+                      var el = document.createElementNS(SVG_NS, type);
+                      if (classList) {
+                          classList.forEach(function (c) {
+                              el.classList.add(c);
+                          });
+                      }
+                      if (!Polymer.Settings.useNativeShadow) {
+                          el.classList.add('style-scope');
+                          el.classList.add('paper-clock-selector');
+                      }
+                      return el;
+                  }
+
+                  var g = create('g', ['number']);
+                  var text = null;
+                  var textClipped = null;
+                  if (number.display) {
+                      if (this.twentyFourHours && number.value > 12) {
+                          text = create('text', ['hourFr']);
+                      } else {
+                          text = create('text');
+                      }
+//                        text = create('text');
+                      text.textContent = number.label;
+                      g.appendChild(text);
+
+                      textClipped = create('text', ['clipped']);
+
+
+                      textClipped.textContent = number.label;
+                      g.appendChild(textClipped);
+                  }
+
+                  return {g: g, text: text, textClipped: textClipped};
+              },
+              _updateSize: function () {
+                  var radius = Math.min(this.offsetWidth, this.offsetHeight) / 2;
+                  if (!radius || this._resizedCache === radius) {
+                      return;
+                  }
+                  this._radius = radius;
+                  this._selectorSize = 20;
+                  this._selectorDotSize = 3;
+                  this._padding = 2;
+                  this._positionClockPoints();
+
+                  this._resizedCache = this._radius;
+                  this.$.clock.style.width = (radius * 2) + 'px';
+                  this.$.clock.style.height = (radius * 2) + 'px';
+                  var v = radius + 'px ' + radius + 'px';
+                  this._setTransformOrigin(this.$.clockHand, v);
+                  this._setTransformOrigin(this.$.clipCircle, v);
+
+                  this.async(function () {
+                      // FIXME: this is hacky, but for some reason we need to wait a bit
+                      // to get an accurate measurement
+                      this._bounds = this.$.face.getBoundingClientRect();
+                  }.bind(this), 150);
+              },
+              _positionClockPoints: function () {
+                  if (!this._radius) {
+                      return;
+                  }
+                  var rad = this._radius;
+
+
+                  this._selectorOuter = rad - this._padding * 2;
+                  this._selectorInner = this._selectorOuter - this._selectorSize * 2;
+                  var selectorCenter = this._selectorOuter - this._selectorSize;
+
+                  var numbers = this._numbers;
+
+                  var angle = (360 / this.count) * (Math.PI / 180);
+
+                  var a, number;
+                  for (var i = 0; i < this.count; i++) {
+                      a = angle * i;
+                      number = numbers[i];
+                      number.x = this._radius + (Math.sin(a) * selectorCenter);
+                      number.y = this._radius - (Math.cos(a) * selectorCenter);
+                      this._updateNumber(number);
+                  }
+                  this._handX = this._numbers[0].x;
+                  this._handY = this._numbers[0].y;
+
+                  if (this.twentyFourHours) {
+                      //gestion des 24 heures;
+                      var numbers24 = this._numbers24;
+
+                      for (var i = 0; i < this.count; i++) {
+                          a = angle * i;
+                          number = numbers24[i];
+                          number.x = this._radius + (Math.sin(a) * 68);
+                          number.y = this._radius - (Math.cos(a) * 68);
+                          this._updateNumber(number);
+                      }
+                  }
+
+              },
+              _notifyNumberChanged: function (path) {
+                  var propPath, props = ['x', 'y'];
+                  for (var i = 0; i < props.length; i++) {
+                      propPath = path + '.' + props[i];
+                      if (this.get(propPath)) {
+                          this.notifyPath(propPath, this.get(propPath));
+                      }
+                  }
+              },
+              _getSelectArea: function (radius, outer, inner) {
+                  return '\n' +
+                      'M ' + (radius - outer) + ' ' + radius + '\n' +
+                      'A ' + outer + ' ' + outer + ' 0 0 0 ' + (radius + outer) + ' ' + radius + '\n' +
+                      'A ' + outer + ' ' + outer + ' 0 0 0 ' + (radius - outer) + ' ' + radius + '\n' +
+                      'M ' + (radius - inner) + ' ' + radius + '\n' +
+                      'A ' + inner + ' ' + inner + ' 0 0 1 ' + (radius + inner) + ' ' + radius + '\n' +
+                      'A ' + inner + ' ' + inner + ' 0 0 1 ' + (radius - inner) + ' ' + radius;
+              },
+              _onTouch: function (event) {
+                  var x = event.detail.x - this._bounds.left - this._radius;
+                  var y = event.detail.y - this._bounds.top - this._radius;
+
+                /* only rotate while in the touch area */
+                  var distance = Math.abs(Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)));
+
+                  if (!this.twentyFourHours && distance < this._selectorInner || distance > this._selectorOuter) {
+                      return;
+                  }
+                  if (this.twentyFourHours && distance < 48 || distance > 128) {
+                      return;
+                  }
+
+                /* don't animate while tracking */
+                  this.animated = event.type !== 'track';
+
+                  // use coords to find angle from 12 o'clock position
+                  var theta = Math.atan(y / x);
+                  theta = (Math.PI / 2) + (x < 0 ? theta + Math.PI : theta);
+                  var intervalRad = (360 / this.count) * (Math.PI / 180);
+
+                  // determine the selected number
+                  this.selected = Math.round(theta / intervalRad);
+                  this._handX = this._numbers[0].x;
+                  this._handY = this._numbers[0].y;
+
+                  if (distance < 88) {
+                      this.selected = this.selected === 0 ? this.selected : this.selected + 12;
+                      this._handX = this._numbers24[0].x;
+                      this._handY = this._numbers24[0].y;
+                  }
+                /* only fire selected when we've tapped or stopped tracking */
+                  if (event.type === 'tap' || event.detail.state === 'end') {
+                      this.fire('paper-clock-selected', {value: this.selected, animated: this.animated});
+                  }
+              },
+              _formatNumber: function (value) {
+                  if (this.zeroPad) {
+                      return ('0' + value).substr(-2);
+                  }
+                  if (value == 24) {
+                      return ('00');
+                  }
+                  return value.toString();
+              },
+              _getNumberClass: function (pfx, n, selected) {
+                  var cssClass = pfx;
+                  if (selected.value === n.value) {
+                      cssClass += ' selected';
+                  }
+                  return cssClass;
+              },
+              _vibrate: function () {
+                  this.debounce('vibrate', function () {
+                      if (navigator.vibrate) {
+                          navigator.vibrate(10);
+                      }
+                  });
+              },
+              _zeroPadChanged: function () {
+                  this._numbers.forEach(function (number) {
+                      this._updateNumber(number);
+                  }.bind(this));
+              },
+              _once: function (eventName, callback, node) {
+                  node = node || this;
+                  function onceCallback() {
+                      node.removeEventListener(eventName, onceCallback);
+                      callback.apply(null, arguments);
+                  }
+
+                  node.addEventListener(eventName, onceCallback);
+              }
           });
-        },
-        _zeroPadChanged: function() {
-          this._numbers.forEach(function(number) {
-            this._updateNumber(number);
-          }.bind(this));
-        },
-        _once: function(eventName, callback, node) {
-          node = node || this;
-          function onceCallback() {
-            node.removeEventListener(eventName, onceCallback);
-            callback.apply(null, arguments);
-          }
-          node.addEventListener(eventName, onceCallback);
-        }
-      });
-    })();
+      })();
   </script>
 </dom-module>
diff --git a/paper-time-picker.html b/paper-time-picker.html
index 5a1e946..70eeeac 100644
--- a/paper-time-picker.html
+++ b/paper-time-picker.html
@@ -47,530 +47,555 @@
 -->
 
 <style is="custom-style" include="paper-time-picker-dialog-style">
-  /* include dialog style at document-level for backward compatibility */
+    /* include dialog style at document-level for backward compatibility */
 </style>
 
 <dom-module id="paper-time-picker">
-  <template>
-    <style>
-      :host * {
-        -webkit-tap-highlight-color: rgba(0,0,0,0);
-      }
-
-      :host {
-        display: block;
-        background-color: var(--primary-background-color);
-        -webkit-touch-callout: none;
-        -webkit-user-select: none;
-        -khtml-user-select: none;
-        -moz-user-select: none;
-        -ms-user-select: none;
-        user-select: none;
-        @apply(--paper-font-body1);
-        font-size: 14px;
-      }
-
-      /** Landscape ******************/
-      #timePicker {
-        width: 512px;
-        height: 304px;
-        @apply(--layout-horizontal);
-        @apply(--paper-time-picker);
-      }
-      #heading {
-        width: 168px;
-        padding: 16px;
-        @apply(--layout-vertical);
-        @apply(--paper-time-picker-heading);
-      }
-      :host([enable-seconds]) #heading {
-        width: 200px;
-      }
-      #clockArea {
-        padding: 20px;
-      }
-
-      /** Narrow *********************/
-      :host([narrow]) #timePicker {
-        width: 328px;
-        height: 428px;
-        @apply(--layout-vertical);
-      }
-      :host([narrow]) #heading {
-        width: auto;
-        height: 96px;
-        padding: 0 48px;
-        @apply(--layout-horizontal);
-        @apply(--layout-end-justified);
-      }
-      :host([enable-seconds][narrow]) #heading {
-        padding: 0 16px;
-      }
-      :host([narrow]) #heading .time {
-        margin-top: 6px;
-        @apply(--paper-font-display3);
-      }
-      :host([narrow]) #timePicker #heading .time {
-        font-size: 60px;
-        letter-spacing: .1ex !important;
-      }
-      :host([narrow]) #heading .period {
-        margin-left: 12px;
-        margin-top: 12px;
-      }
-      :host([narrow]) #clockArea {
-        /* padding: 30px 20px 10px 20px; */
-        padding: 16px;
-        @apply(--paper-time-picker-clock);
-      }
-
-      /** Heading ********************/
-      #heading {
-        box-sizing: border-box;
-        color: var(--light-primary-color); 
-        background: var(--default-primary-color);
-        @apply(--layout-vertical);
-        @apply(--layout-center-center);
-      }
-      #heading > iron-selector {
-        margin-top: 10px;
-      }
-      #heading .time {
-        @apply(--paper-font-display2);
-        @apply(--layout-horizontal);
-        @apply(--layout-end-justified);
-        width: 5.34ex;
-        letter-spacing: .13ex !important;
-      }
-      :host([enable-seconds]) #heading .time{
-        width: 8.5ex;
-        font-size: 40px;
-      }
-      #heading .iron-selected {
-        color: var(--text-primary-color);
-      }
-      #heading .period {
-        font-weight: 600;
-        @apply(--paper-font-subhead);
-      }
-      #heading .time div,
-      #heading .period div {
-        cursor: pointer;
-      }
-
-      /** Clock *********************/
-      #clockArea {
-        background: var(--default-background-color);
-        overflow: hidden;
-        @apply(--layout-flex);
-        @apply(--paper-time-picker-clock);
-        @apply(--layout-vertical);
-      }
-      #clockArea > div {
-        @apply(--layout-flex);
-        position: relative;
-      }
-      .clock {
-        @apply(--layout-fit);
-      }
-      .clock-animatable{
-        @apply(--layout-fit);
-      }
-    </style>
-    <iron-media-query query="{{_getMediaQuery(forceNarrow, responsiveWidth)}}" 
-      query-matches="{{_queryMatches}}"></iron-media-query>
-    <div id="timePicker">
-      <div id="heading">
-        <iron-selector class="time" selectable="[name]" attr-for-selected="name" selected="{{view}}">
-          <div name="hours" class="hour">{{hour12}}</div>
-          <div class="sep">:</div>
-          <div name="minutes" class="minute">{{_zeroPad(minute, 2)}}</div>
-          <template is="dom-if" if="[[ enableSeconds ]]">
-            <div class="sep">:</div>
-            <div name="seconds" class="second">{{_zeroPad(second, 2)}}</div>
-          </template>
-        </iron-selector>
-        <iron-selector class="period" attr-for-selected="name" selected="{{period}}">
-          <div name="AM">AM</div>
-          <div name="PM">PM</div>
-        </iron-selector>
-      </div>
-      <div id="clockArea">
-        <div>
-          <neon-animated-pages id="pages" class="clock-animatable" attr-for-selected="name" selected="{{view}}"
-            entry-animation="fade-in-animation" exit-animation="fade-out-animation">
-            <neon-animatable class="clock-animatable" name="hours">
-              <paper-clock-selector class="clock" id="hourClock" count="12" step="1"
-                animated="[[animated]]" selected="{{hour12}}"></paper-clock-selector> 
-            </neon-animatable>
-            <neon-animatable class="clock-animatable" name="minutes">
-              <paper-clock-selector class="clock" id="minuteClock" count="60" step="5"
-                animated="[[animated]]" use-zero zero-pad selected="{{minute}}"></paper-clock-selector> 
-            </neon-animatable>
-            <template is="dom-if" if="[[ enableSeconds ]]">
-              <neon-animatable class="clock-animatable" name="seconds">
-                <paper-clock-selector class="clock" id="secondClock" count="60" step="5"
-                  animated="[[animated]]" use-zero zero-pad selected="{{second}}"></paper-clock-selector> 
-              </neon-animatable>
-            </template>
-          </neon-animated-pages>
-        </div>
-      </div>
-    </div>
-  </template>
-  <script>
-    (function() {
-      function warn() {
-        if (window.console) {
-          console.warn.apply(console, arguments);
-        }
-      }
-
-      Polymer({
-        is: 'paper-time-picker',
-        properties: {
-          /**
-           * The selected time
-           */
-          time: {
-            type: String,
-            value: '00:00',
-            notify: true,
-            observer: '_timeChanged' 
-          },
-          /**
-           * The time value as the number of minutes(if enableSeconds then number of seconds) from midnight
-           */
-          rawValue: {
-            type: Number,
-            value: 0,
-            notify: true,
-            observer: '_rawValueChanged'
-          },
-          /**
-           * The current 24-hour value (0-24)
-           */
-          hour: {
-            type: Number,
-            observer: '_hourChanged',
-            notify: true,
-            value: 0
-          },
-          /**
-           * The current 12-hour value (0-12)
-           */
-          hour12: {
-            type: Number,
-            notify: true,
-            observer: '_hour12Changed'
-          },
-          /**
-           * The current minute (0-59)
-           */
-          minute: {
-            type: Number,
-            notify: true,
-            observer: '_minuteChanged',
-            value: 0
-          },
-          /**
-           * The current second (0-59)
-           */
-           second: {
-            type: Number,
-            notify: true,
-            observer: '_secondChanged',
-            value: 0
-          },
-          /**
-           * The current period ('AM', 'PM')
-           */
-          period: {
-            type: String,
-            notify: true,
-            observer: '_periodChanged',
-            value: 'AM'
-          },
-          /**
-           * The current selector view ('hours' or 'minutes')
-           */
-          view: {
-            type: String,
-            notify: true,
-            value: 'hours',
-            observer: '_viewChanged'
-          },
-          /**
-           * Maximum screen width at which the picker uses a vertical layout
-           */
-          responsiveWidth: {
-            type: String,
-            value: '560px'
-          },
-          /**
-           * Force narrow layout
-           */
-          forceNarrow: {
-            type: Boolean,
-            value: false
-          },
-          /**
-           * Whether or not to animate the clock hand between selections
-           */
-          animated: {
-            type: Boolean,
-            value: false
-          },
-          narrow: {
-            type: Boolean,
-            reflectToAttribute: true,
-            value: false,
-            notify: true,
-          },
-          isTouch: {
-            type: Boolean,
-            value: false,
-            reflectToAttribute: true
-          },
-          enableSeconds: {
-            type: Boolean,
-            value: false
-          },
-          _queryMatches: {
-            type: Boolean,
-            value: false,
-            observer: '_computeNarrow'
-          }
-        },
-        behaviors: [
-          Polymer.IronResizableBehavior
-        ],
-        observers: [
-          '_updateTime(hour, minute, second)'
-        ],
-        listeners: {
-          'iron-resize': '_resizeHandler',
-          'paper-clock-selected': '_onClockSelected'
-        },
-        ready: function() {
-          this.isTouch = 'ontouchstart' in window;
-          this.view = 'hours';
-        },
-        _timeChanged: function(time) {
-          if (!time) {
-            this.rawValue = 0;
-            return;
-          }
-
-          var parsed = this.parseTime(time);
-          var cleanedTime = this.formatTime(parsed.hour, parsed.minute, parsed.second);
-          if (cleanedTime !== time) {
-            this.time = cleanedTime;
-            return;
-          }
-          var rawValue = (parsed.hour * 60) + parsed.minute;
-          if (this.enableSeconds) {
-            rawValue = (rawValue * 60) + parsed.second;
-          }
-          this.rawValue = rawValue;
-        },
-        _updateTime: function(hour, minute, second) {
-          var rawValue = (hour * 60) + minute;
-          if (this.enableSeconds) {
-            rawValue = (rawValue * 60) + second;
-          }
-          this.rawValue = rawValue;
-        },
-        formatTime: function(hour, minute, second) {
-          var period = (hour % 24) < 12 ? 'AM' : 'PM';
-          hour = hour % 12 || 12;
-          minute = ('0' + minute).substr(-2);
-          second = ('0' + second).substr(-2);
-          if (this.enableSeconds) {
-            minute += ':' + second;
-          }
-          return hour + ':' + minute + ' ' + period;
-        },
-        parseTime: function(timeString) {
-          var pattern = /^\s*(\d{1,2}):?(\d{2})(:?(\d{2}))?(\s*([AaPp])\.?[Mm]\.?|[A-Z])?\s*$/;
-          var match = timeString.match(pattern);
-          if (!match) {
-            warn('Invalid time:', timeString);
-            return;
-          }
-          var hour = parseInt(match[1]);
-          var minute = parseInt(match[2]);
-          var second = match[4] ? parseInt(match[4]) : 0;
-          var period = match[6] ? (match[6][0].toUpperCase() + 'M') : 'AM';
-          if (period === 'PM' && hour < 12) {
-            hour = (hour + 12) % 24;
-          } else if (period === 'AM' && hour === 12) {
-            hour = 0;
-          }
-          return {hour: hour, minute: minute, second: second};
-        },
-        togglePeriod: function() {
-          this.period = (this.period === 'AM') ? 'PM' : 'AM';
-        },
-        _rawValueChanged: function(value, oldValue) {
-          if (isNaN(parseInt(value))) {
-            this.rawValue = oldValue;
-            return;
-          }
-          if (this.enableSeconds) {
-            this.hour = Math.floor(value / 3600);
-            this.minute = Math.floor(value / 60) % 60;
-            this.second = value % 60;
-          } else {
-            this.hour = Math.floor(value / 60);
-            this.minute = value % 60;
-            this.second = 0;
-          }
-          this.time = this.formatTime(this.hour, this.minute, this.second);
-        },
-        _hour12Changed: function(hour12) {
-          var add = (this.period === 'PM' ? 12 : 0);
-          this.hour = ((hour12 % 12) + add) % 24;
-        },
-        _hourChanged: function(hour, oldValue) {
-          hour = parseInt(hour);
-          if (isNaN(hour) && !hour) {
-            return;
-          }
-          if (isNaN(hour)) {
-            warn('Invalid number:', hour);
-            this.hour = oldValue;
-            return;
-          }
-          hour = parseFloat(hour) % 24;
-          this.hour = hour;
-          this.hour12 = this._twelveHour(hour);
-          this.period = ['PM', 'AM'][+(hour < 12)];
-        },
-        _minuteChanged: function(minute) {
-          minute = parseFloat(minute) % 60;
-          this.minute = minute;
-        },
-        _secondChanged: function(second) {
-          second = parseFloat(second) % 60;
-          this.second = second;
-        },
-        _periodChanged: function(period) {
-          if (isNaN(parseInt(this.hour)) || isNaN(parseInt(this.minute))) {
-            return;
-          }
-          if (period === 'AM' &&  this.hour >= 12) {
-            this.hour -= 12;
-          } else if (period === 'PM' && this.hour < 12) {
-            this.hour += 12;
-          }
-        },
-        _zeroPad: function(value, length) {
-          if (value === undefined || isNaN(value) || isNaN(length)) {
-            return;
-          }
-          return ('0' + value).substr(-length);
-        },
-        _twelveHour: function(hour) {
-          return hour % 12 || 12;
-        },
-        _isEqual: function(a, b) {
-          return a === b;
-        },
-        _getMediaQuery: function(forceNarrow, responsiveWidth) {
-          return '(max-width: ' + (forceNarrow ? '' : responsiveWidth) + ')';
-        },
-        _computeNarrow: function() {
-          this.set('narrow', this._queryMatches || this.forceNarrow);
-        },
-        _viewChanged: function(toView, fromView) {
-          this.$.pages._notifyPageResize();
-
-          // prevent the clock-hand transition when selecting, otherwise the 
-          // extra movement would be confusing
-          if (this._selecting || !fromView || !toView || !this.animated) {
-            return;
-          }
-
-          var clocks = {'hours': this.$.hourClock, 'minutes': this.$.minuteClock, 'seconds': this.$.secondClock};
-          var from = clocks[fromView];
-          var to = clocks[toView];
-          var fromAngle = (360 / from.count) * from.selected;
-          var toAngle = (360 / to.count) * to.selected;
-
-          // transition both clock hands at the same time
-          to.setClockHand(fromAngle, false);
-          from.setClockHand(toAngle);
-
-          this.async(function() {
-            to.setClockHand(toAngle, true, function() {
-              this.async(function() {
-                from.setClockHand(fromAngle, false);
-              }, 200);
-            }.bind(this));
-          }.bind(this));
-        },
-        _onClockSelected: function(event) {
-          if (this.view === 'hours') {
-
-            var showMinutes = function() {
-              this.async(function() {
-                this._selecting = true;
-                this.view = 'minutes';
-                this._selecting = false;
-              }.bind(this), 100);
-              this.$.hourClock.removeEventListener('paper-clock-transition-end', showMinutes);
-            }.bind(this);
-
-            if (event.detail.animated) {
-              this.$.hourClock.addEventListener('paper-clock-transition-end', showMinutes);
-            } else {
-              showMinutes();
+    <template>
+        <style>
+            :host * {
+                -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+            }
+
+            :host {
+                display: block;
+                background-color: var(--primary-background-color);
+                -webkit-touch-callout: none;
+                -webkit-user-select: none;
+                -khtml-user-select: none;
+                -moz-user-select: none;
+                -ms-user-select: none;
+                user-select: none;
+                @apply(--paper-font-body1);
+                font-size: 14px;
+            }
+
+            /** Landscape ******************/
+            #timePicker {
+                width: 512px;
+                height: 304px;
+                @apply(--layout-horizontal);
+                @apply(--paper-time-picker);
+            }
+
+            #heading {
+                width: 168px;
+                padding: 16px;
+                @apply(--layout-vertical);
+                @apply(--paper-time-picker-heading);
+            }
+
+            :host([enable-seconds]) #heading {
+                width: 200px;
+            }
+
+            #clockArea {
+                padding: 20px;
+            }
+
+            /** Narrow *********************/
+            :host([narrow]) #timePicker {
+                width: 328px;
+                height: 428px;
+                @apply(--layout-vertical);
+            }
+
+            :host([narrow]) #heading {
+                width: auto;
+                height: 96px;
+                padding: 0 48px;
+                @apply(--layout-horizontal);
+                @apply(--layout-end-justified);
+            }
+
+            :host([enable-seconds][narrow]) #heading {
+                padding: 0 16px;
+            }
+
+            :host([narrow]) #heading .time {
+                margin-top: 6px;
+                @apply(--paper-font-display3);
+            }
+
+            :host([narrow]) #timePicker #heading .time {
+                font-size: 60px;
+                letter-spacing: .1ex !important;
+            }
+
+            :host([narrow]) #heading .period {
+                margin-left: 12px;
+                margin-top: 12px;
+            }
+
+            :host([narrow]) #clockArea {
+                /* padding: 30px 20px 10px 20px; */
+                padding: 16px;
+                @apply(--paper-time-picker-clock);
+            }
+
+            /** Heading ********************/
+            #heading {
+                box-sizing: border-box;
+                color: var(--light-primary-color);
+                background: var(--default-primary-color);
+                @apply(--layout-vertical);
+                @apply(--layout-center-center);
             }
 
-            if (this.hour12 !== event.detail.value) {
-              this.hour12 = event.detail.value;
-            } else {
-              // show minutes if same hour is selected
-              showMinutes();
+            #heading > iron-selector {
+                margin-top: 10px;
             }
-          } else if (this.view === 'minutes' && this.enableSeconds) {
-
-            var showSeconds = function() {
-              this.async(function() {
-                this._selecting = true;
-                this.view = 'seconds';
-                this._selecting = false;
-              }.bind(this), 100);
-              this.$.minuteClock.removeEventListener('paper-clock-transition-end', showSeconds);
-            }.bind(this);
-
-            if (event.detail.animated) {
-              this.$.minuteClock.addEventListener('paper-clock-transition-end', showSeconds);
-            } else {
-              showSeconds();
+
+            #heading .time {
+                @apply(--paper-font-display2);
+                @apply(--layout-horizontal);
+                @apply(--layout-end-justified);
+                width: 5.34ex;
+                letter-spacing: .13ex !important;
+            }
+
+            :host([enable-seconds]) #heading .time {
+                width: 8.5ex;
+                font-size: 40px;
+            }
+
+            #heading .iron-selected {
+                color: var(--text-primary-color);
+            }
+
+            #heading .period {
+                font-weight: 600;
+                @apply(--paper-font-subhead);
+            }
+
+            #heading .time div,
+            #heading .period div {
+                cursor: pointer;
+            }
+
+            /** Clock *********************/
+            #clockArea {
+                background: var(--default-background-color);
+                overflow: hidden;
+                @apply(--layout-flex);
+                @apply(--paper-time-picker-clock);
+                @apply(--layout-vertical);
+            }
+
+            #clockArea > div {
+                @apply(--layout-flex);
+                position: relative;
+            }
+
+            .clock {
+                @apply(--layout-fit);
             }
 
-            if (this.minute !== event.detail.value) {
-              this.minute = event.detail.value;
-            } else {
-              // show seconds if same minute is selected
-              showSeconds();
+            .clock-animatable {
+                @apply(--layout-fit);
             }
-          }
-        },
-        _resizeHandler: function() {
-          if (!this.offsetWidth || this._resizing) {
-            return;
-          }
-          this.updateStyles();
-          this.async(function() {
-            this._resizing = true;
-            this.$.pages._notifyPageResize();
-            this._resizing = false;
-          }.bind(this));
-        }
-      });
-    })();
-  </script>
+        </style>
+        <iron-media-query query="{{_getMediaQuery(forceNarrow, responsiveWidth)}}"
+                          query-matches="{{_queryMatches}}"></iron-media-query>
+        <div id="timePicker">
+            <div id="heading">
+                <iron-selector class="time" selectable="[name]" attr-for-selected="name" selected="{{view}}">
+                    <div name="hours" class="hour">{{hour12}}</div>
+                    <div class="sep">:</div>
+                    <div name="minutes" class="minute">{{_zeroPad(minute, 2)}}</div>
+                    <template is="dom-if" if="[[ enableSeconds ]]">
+                        <div class="sep">:</div>
+                        <div name="seconds" class="second">{{_zeroPad(second, 2)}}</div>
+                    </template>
+                </iron-selector>
+                <iron-selector class="period" attr-for-selected="name" selected="{{period}}">
+                    <div name="AM">AM</div>
+                    <div name="PM">PM</div>
+                </iron-selector>
+            </div>
+            <div id="clockArea">
+                <div>
+                    <neon-animated-pages id="pages" class="clock-animatable" attr-for-selected="name"
+                                         selected="{{view}}"
+                                         entry-animation="fade-in-animation" exit-animation="fade-out-animation">
+                        <neon-animatable class="clock-animatable" name="hours">
+                            <paper-clock-selector class="clock" id="hourClock" count="12" step="1" twenty-four-hours
+                                                  animated="[[animated]]" selected="{{hour12}}"></paper-clock-selector>
+                        </neon-animatable>
+                        <neon-animatable class="clock-animatable" name="minutes">
+                            <paper-clock-selector class="clock" id="minuteClock" count="60" step="5"
+                                                  animated="[[animated]]" use-zero zero-pad
+                                                  selected="{{minute}}"></paper-clock-selector>
+                        </neon-animatable>
+                        <template is="dom-if" if="[[ enableSeconds ]]">
+                            <neon-animatable class="clock-animatable" name="seconds">
+                                <paper-clock-selector class="clock" id="secondClock" count="60" step="5"
+                                                      animated="[[animated]]" use-zero zero-pad
+                                                      selected="{{second}}"></paper-clock-selector>
+                            </neon-animatable>
+                        </template>
+                    </neon-animated-pages>
+                </div>
+            </div>
+        </div>
+    </template>
+    <script>
+        (function () {
+            function warn() {
+                if (window.console) {
+                    console.warn.apply(console, arguments);
+                }
+            }
+
+            Polymer({
+                is: 'paper-time-picker',
+                properties: {
+                    /**
+                     * The selected time
+                     */
+                    time: {
+                        type: String,
+                        value: '00:00',
+                        notify: true,
+                        observer: '_timeChanged'
+                    },
+                    /**
+                     * The time value as the number of minutes(if enableSeconds then number of seconds) from midnight
+                     */
+                    rawValue: {
+                        type: Number,
+                        value: 0,
+                        notify: true,
+                        observer: '_rawValueChanged'
+                    },
+                    /**
+                     * The current 24-hour value (0-24)
+                     */
+                    hour: {
+                        type: Number,
+                        observer: '_hourChanged',
+                        notify: true,
+                        value: 0
+                    },
+                    /**
+                     * The current 12-hour value (0-12)
+                     */
+                    hour12: {
+                        type: Number,
+                        notify: true,
+                        observer: '_hour12Changed'
+                    },
+                    /**
+                     * The current minute (0-59)
+                     */
+                    minute: {
+                        type: Number,
+                        notify: true,
+                        observer: '_minuteChanged',
+                        value: 0
+                    },
+                    /**
+                     * The current second (0-59)
+                     */
+                    second: {
+                        type: Number,
+                        notify: true,
+                        observer: '_secondChanged',
+                        value: 0
+                    },
+                    /**
+                     * The current period ('AM', 'PM')
+                     */
+                    period: {
+                        type: String,
+                        notify: true,
+                        observer: '_periodChanged',
+                        value: 'AM'
+                    },
+                    /**
+                     * The current selector view ('hours' or 'minutes')
+                     */
+                    view: {
+                        type: String,
+                        notify: true,
+                        value: 'hours',
+                        observer: '_viewChanged'
+                    },
+                    /**
+                     * Maximum screen width at which the picker uses a vertical layout
+                     */
+                    responsiveWidth: {
+                        type: String,
+                        value: '560px'
+                    },
+                    /**
+                     * Force narrow layout
+                     */
+                    forceNarrow: {
+                        type: Boolean,
+                        value: false
+                    },
+                    /**
+                     * Whether or not to animate the clock hand between selections
+                     */
+                    animated: {
+                        type: Boolean,
+                        value: false
+                    },
+                    narrow: {
+                        type: Boolean,
+                        reflectToAttribute: true,
+                        value: false,
+                        notify: true
+                    },
+                    isTouch: {
+                        type: Boolean,
+                        value: false,
+                        reflectToAttribute: true
+                    },
+                    enableSeconds: {
+                        type: Boolean,
+                        value: false
+                    },
+                    _queryMatches: {
+                        type: Boolean,
+                        value: false,
+                        observer: '_computeNarrow'
+                    }
+                },
+                behaviors: [
+                    Polymer.IronResizableBehavior
+                ],
+                observers: [
+                    '_updateTime(hour, minute, second)'
+                ],
+                listeners: {
+                    'iron-resize': '_resizeHandler',
+                    'paper-clock-selected': '_onClockSelected'
+                },
+                ready: function () {
+                    this.isTouch = 'ontouchstart' in window;
+                    this.view = 'hours';
+                },
+                _timeChanged: function (time) {
+                    if (!time) {
+                        this.rawValue = 0;
+                        return;
+                    }
+
+                    var parsed = this.parseTime(time);
+                    var cleanedTime = this.formatTime(parsed.hour, parsed.minute, parsed.second);
+                    if (cleanedTime !== time) {
+                        this.time = cleanedTime;
+                        return;
+                    }
+                    var rawValue = (parsed.hour * 60) + parsed.minute;
+                    if (this.enableSeconds) {
+                        rawValue = (rawValue * 60) + parsed.second;
+                    }
+                    this.rawValue = rawValue;
+                },
+                _updateTime: function (hour, minute, second) {
+                    var rawValue = (hour * 60) + minute;
+                    if (this.enableSeconds) {
+                        rawValue = (rawValue * 60) + second;
+                    }
+                    this.rawValue = rawValue;
+                },
+                formatTime: function (hour, minute, second) {
+                    var period = (hour % 24) < 12 ? 'AM' : 'PM';
+                    hour = hour % 12 || 12;
+                    minute = ('0' + minute).substr(-2);
+                    second = ('0' + second).substr(-2);
+                    if (this.enableSeconds) {
+                        minute += ':' + second;
+                    }
+                    return hour + ':' + minute + ' ' + period;
+                },
+                parseTime: function (timeString) {
+                    var pattern = /^\s*(\d{1,2}):?(\d{2})(:?(\d{2}))?(\s*([AaPp])\.?[Mm]\.?|[A-Z])?\s*$/;
+                    var match = timeString.match(pattern);
+                    if (!match) {
+                        warn('Invalid time:', timeString);
+                        return;
+                    }
+                    var hour = parseInt(match[1]);
+                    var minute = parseInt(match[2]);
+                    var second = match[4] ? parseInt(match[4]) : 0;
+                    var period = match[6] ? (match[6][0].toUpperCase() + 'M') : 'AM';
+                    if (period === 'PM' && hour < 12) {
+                        hour = (hour + 12) % 24;
+                    } else if (period === 'AM' && hour === 12) {
+                        hour = 0;
+                    }
+                    return {hour: hour, minute: minute, second: second};
+                },
+                togglePeriod: function () {
+                    this.period = (this.period === 'AM') ? 'PM' : 'AM';
+                },
+                _rawValueChanged: function (value, oldValue) {
+                    if (isNaN(parseInt(value))) {
+                        this.rawValue = oldValue;
+                        return;
+                    }
+                    if (this.enableSeconds) {
+                        this.hour = Math.floor(value / 3600);
+                        this.minute = Math.floor(value / 60) % 60;
+                        this.second = value % 60;
+                    } else {
+                        this.hour = Math.floor(value / 60);
+                        this.minute = value % 60;
+                        this.second = 0;
+                    }
+                    this.time = this.formatTime(this.hour, this.minute, this.second);
+                },
+                _hour12Changed: function (hour12) {
+                    var add = (this.period === 'PM' ? 12 : 0);
+                    this.hour = ((hour12 % 12) + add) % 24;
+                },
+                _hourChanged: function (hour, oldValue) {
+                    hour = parseInt(hour);
+                    if (isNaN(hour) && !hour) {
+                        return;
+                    }
+                    if (isNaN(hour)) {
+                        warn('Invalid number:', hour);
+                        this.hour = oldValue;
+                        return;
+                    }
+                    hour = parseFloat(hour) % 24;
+                    this.hour = hour;
+                    this.hour12 = this._twelveHour(hour);
+                    this.period = ['PM', 'AM'][+(hour < 12)];
+                },
+                _minuteChanged: function (minute) {
+                    minute = parseFloat(minute) % 60;
+                    this.minute = minute;
+                },
+                _secondChanged: function (second) {
+                    second = parseFloat(second) % 60;
+                    this.second = second;
+                },
+                _periodChanged: function (period) {
+                    if (isNaN(parseInt(this.hour)) || isNaN(parseInt(this.minute))) {
+                        return;
+                    }
+                    if (period === 'AM' && this.hour >= 12) {
+                        this.hour -= 12;
+                    } else if (period === 'PM' && this.hour < 12) {
+                        this.hour += 12;
+                    }
+                },
+                _zeroPad: function (value, length) {
+                    if (value === undefined || isNaN(value) || isNaN(length)) {
+                        return;
+                    }
+                    return ('0' + value).substr(-length);
+                },
+                _twelveHour: function (hour) {
+                    return hour % 12 || 12;
+                },
+                _isEqual: function (a, b) {
+                    return a === b;
+                },
+                _getMediaQuery: function (forceNarrow, responsiveWidth) {
+                    return '(max-width: ' + (forceNarrow ? '' : responsiveWidth) + ')';
+                },
+                _computeNarrow: function () {
+                    this.set('narrow', this._queryMatches || this.forceNarrow);
+                },
+                _viewChanged: function (toView, fromView) {
+                    this.$.pages._notifyPageResize();
+
+                    // prevent the clock-hand transition when selecting, otherwise the
+                    // extra movement would be confusing
+                    if (this._selecting || !fromView || !toView || !this.animated) {
+                        return;
+                    }
+
+                    var clocks = {
+                        'hours': this.$.hourClock,
+                        'minutes': this.$.minuteClock,
+                        'seconds': this.$.secondClock
+                    };
+                    var from = clocks[fromView];
+                    var to = clocks[toView];
+                    var fromAngle = (360 / from.count) * from.selected;
+                    var toAngle = (360 / to.count) * to.selected;
+
+                    // transition both clock hands at the same time
+                    to.setClockHand(fromAngle, false);
+                    from.setClockHand(toAngle);
+
+                    this.async(function () {
+                        to.setClockHand(toAngle, true, function () {
+                            this.async(function () {
+                                from.setClockHand(fromAngle, false);
+                            }, 200);
+                        }.bind(this));
+                    }.bind(this));
+                },
+                _onClockSelected: function (event) {
+                    if (this.view === 'hours') {
+
+                        var showMinutes = function () {
+                            this.async(function () {
+                                this._selecting = true;
+                                this.view = 'minutes';
+                                this._selecting = false;
+                            }.bind(this), 100);
+                            this.$.hourClock.removeEventListener('paper-clock-transition-end', showMinutes);
+                        }.bind(this);
+
+                        if (event.detail.animated) {
+                            this.$.hourClock.addEventListener('paper-clock-transition-end', showMinutes);
+                        } else {
+                            showMinutes();
+                        }
+
+                        if (this.hour12 !== event.detail.value) {
+                            this.hour12 = event.detail.value;
+                        } else {
+                            // show minutes if same hour is selected
+                            showMinutes();
+                        }
+                    } else if (this.view === 'minutes' && this.enableSeconds) {
+
+                        var showSeconds = function () {
+                            this.async(function () {
+                                this._selecting = true;
+                                this.view = 'seconds';
+                                this._selecting = false;
+                            }.bind(this), 100);
+                            this.$.minuteClock.removeEventListener('paper-clock-transition-end', showSeconds);
+                        }.bind(this);
+
+                        if (event.detail.animated) {
+                            this.$.minuteClock.addEventListener('paper-clock-transition-end', showSeconds);
+                        } else {
+                            showSeconds();
+                        }
+
+                        if (this.minute !== event.detail.value) {
+                            this.minute = event.detail.value;
+                        } else {
+                            // show seconds if same minute is selected
+                            showSeconds();
+                        }
+                    }
+                },
+                _resizeHandler: function () {
+                    if (!this.offsetWidth || this._resizing) {
+                        return;
+                    }
+                    this.updateStyles();
+                    this.async(function () {
+                        this._resizing = true;
+                        this.$.pages._notifyPageResize();
+                        this._resizing = false;
+                    }.bind(this));
+                }
+            });
+        })();
+    </script>
 </dom-module>

From c323ab85ad1287fd15466e7f6d1b734ec9acb480 Mon Sep 17 00:00:00 2001
From: Stephane Balasse <stephane.balasse@qiis.fr>
Date: Mon, 10 Apr 2017 14:59:56 +0200
Subject: [PATCH 2/5] Supports the display of a dial for 24-hour management
 (without AM and PM)

---
 paper-time-picker.html | 40 +++++++++++++++++++++++++++++-----------
 1 file changed, 29 insertions(+), 11 deletions(-)

diff --git a/paper-time-picker.html b/paper-time-picker.html
index 70eeeac..da2e4fa 100644
--- a/paper-time-picker.html
+++ b/paper-time-picker.html
@@ -200,7 +200,7 @@
         <div id="timePicker">
             <div id="heading">
                 <iron-selector class="time" selectable="[name]" attr-for-selected="name" selected="{{view}}">
-                    <div name="hours" class="hour">{{hour12}}</div>
+                    <div name="hours" class="hour">{{hour}}</div>
                     <div class="sep">:</div>
                     <div name="minutes" class="minute">{{_zeroPad(minute, 2)}}</div>
                     <template is="dom-if" if="[[ enableSeconds ]]">
@@ -208,9 +208,12 @@
                         <div name="seconds" class="second">{{_zeroPad(second, 2)}}</div>
                     </template>
                 </iron-selector>
+
                 <iron-selector class="period" attr-for-selected="name" selected="{{period}}">
-                    <div name="AM">AM</div>
-                    <div name="PM">PM</div>
+                    <template is="dom-if" if="{{!isTwentyFourHours}}">
+                        <div name="AM">AM</div>
+                        <div name="PM">PM</div>
+                    </template>
                 </iron-selector>
             </div>
             <div id="clockArea">
@@ -219,8 +222,8 @@
                                          selected="{{view}}"
                                          entry-animation="fade-in-animation" exit-animation="fade-out-animation">
                         <neon-animatable class="clock-animatable" name="hours">
-                            <paper-clock-selector class="clock" id="hourClock" count="12" step="1" twenty-four-hours
-                                                  animated="[[animated]]" selected="{{hour12}}"></paper-clock-selector>
+                            <paper-clock-selector class="clock" id="hourClock" count="12" step="1" twenty-four-hours="{{isTwentyFourHours}}"
+                                                  animated="[[animated]]" selected="{{hour}}"></paper-clock-selector>
                         </neon-animatable>
                         <neon-animatable class="clock-animatable" name="minutes">
                             <paper-clock-selector class="clock" id="minuteClock" count="60" step="5"
@@ -250,6 +253,11 @@
             Polymer({
                 is: 'paper-time-picker',
                 properties: {
+                    isTwentyFourHours: {
+                        type: Boolean,
+                        value: false,
+                        notify: true
+                    },
                     /**
                      * The selected time
                      */
@@ -268,6 +276,7 @@
                         notify: true,
                         observer: '_rawValueChanged'
                     },
+
                     /**
                      * The current 24-hour value (0-24)
                      */
@@ -367,7 +376,7 @@
                     Polymer.IronResizableBehavior
                 ],
                 observers: [
-                    '_updateTime(hour, minute, second)'
+                   '_updateTime(hour, minute, second)'
                 ],
                 listeners: {
                     'iron-resize': '_resizeHandler',
@@ -403,14 +412,22 @@
                     this.rawValue = rawValue;
                 },
                 formatTime: function (hour, minute, second) {
-                    var period = (hour % 24) < 12 ? 'AM' : 'PM';
-                    hour = hour % 12 || 12;
+                    var period = "";
+
+                        period = (hour % 24) < 12 ? 'AM' : 'PM';
+                    if(!this.isTwentyFourHours){
+                        hour = hour % 12 || 12;
+                    }
                     minute = ('0' + minute).substr(-2);
                     second = ('0' + second).substr(-2);
                     if (this.enableSeconds) {
                         minute += ':' + second;
                     }
-                    return hour + ':' + minute + ' ' + period;
+                    if(this.isTwentyFourHours){
+                        return hour+':'+minute;
+                    }else{
+                         return hour + ':' + minute + ' ' + period;
+                    }
                 },
                 parseTime: function (timeString) {
                     var pattern = /^\s*(\d{1,2}):?(\d{2})(:?(\d{2}))?(\s*([AaPp])\.?[Mm]\.?|[A-Z])?\s*$/;
@@ -463,9 +480,10 @@
                         this.hour = oldValue;
                         return;
                     }
-                    hour = parseFloat(hour) % 24;
-                    this.hour = hour;
+
                     this.hour12 = this._twelveHour(hour);
+
+                    this.hour = hour;
                     this.period = ['PM', 'AM'][+(hour < 12)];
                 },
                 _minuteChanged: function (minute) {

From 2efa247d477db7b9f44bebc103d2cec2cdad1e7e Mon Sep 17 00:00:00 2001
From: Stephane Balasse <stephane.balasse@qiis.fr>
Date: Mon, 10 Apr 2017 15:08:53 +0200
Subject: [PATCH 3/5] Supports the display of a dial for 24-hour management
 (without AM and PM)

---
 demo/index.html           |  4 +--
 paper-clock-selector.html | 57 ++++++++++++++++++++++++++++++---------
 paper-time-picker.html    |  3 +++
 3 files changed, 50 insertions(+), 14 deletions(-)

diff --git a/demo/index.html b/demo/index.html
index 212df35..b749518 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -26,7 +26,7 @@
       <h1>{{time}}</h1>
       <paper-button class="btn" on-tap="showDialog" raised>Change Time</paper-button>
       <paper-dialog id="dialog" class="paper-time-picker-dialog" modal on-iron-overlay-closed="dismissDialog">
-        <paper-time-picker id="picker" time="[[time]]" ></paper-time-picker>
+        <paper-time-picker id="picker"  is-twenty-four-hours time="15:30" ></paper-time-picker>
         <div class="buttons">
           <paper-button dialog-dismiss>CANCEL</paper-button>
           <paper-button dialog-confirm>OK</paper-button>
@@ -48,7 +48,7 @@ <h1>{{time}}</h1>
         this.$.dialog.toggle();
       };
       document.addEventListener('WebComponentsReady', function() {
-        scope.time = '3:30 PM';
+        scope.time = '15:30';
         scope.showDialog();
       });
     })();
diff --git a/paper-clock-selector.html b/paper-clock-selector.html
index c848c49..d9ba325 100644
--- a/paper-clock-selector.html
+++ b/paper-clock-selector.html
@@ -213,6 +213,7 @@
                   this._populate();
                   this._selectedChanged(this.selected);
               },
+
               setClockHand: function (deg, animate, callback) {
                   deg = normalizeAngle(deg);
 
@@ -251,15 +252,19 @@
                   });
 
               },
+
               _getTransform: function (el) {
                   return el.style.transform | el.style.webkitTransform | el.style.msTransform;
               },
+
               _setTransform: function (el, value) {
                   el.style.msTransform = el.style.webkitTransform = el.style.transform = value;
               },
+
               _setTransformOrigin: function (el, value) {
                   el.style.msTransformOrigin = el.style.webkitTransformOrigin = el.style.transformOrigin = value;
               },
+
               _setHandRotation: function (deg) {
                   var hasLabel = ((deg / 360) * this.count) % this.step === 0;
                   var transform = 'rotate(' + deg + 'deg)';
@@ -267,6 +272,7 @@
                   this._setTransform(this.$.clockHand, transform);
                   this._setTransform(this.$.clipCircle, transform);
               },
+
               _selectedChanged: function (selected) {
                   if (!this.count || isNaN(selected)) {
                       return;
@@ -282,16 +288,17 @@
                       value = this.count;
                   }
                   if (value !== this.selected && value !== 0) {
-                      this.selected = value;
+                      this.set('selected', value);
                       return;
                   }
                   if (value === 0 && this.twentyFourHours) {
-                      this.selected = 0;
+                      this.set('selected', 0);
                       return;
                   }
                   this._vibrate();
                   this.setClockHand((360 / this.count) * this.selected);
               },
+
               _stepChanged: function (value, oldValue) {
                   this._step = oldValue;
                   if (!this.count || isNaN(value)) {
@@ -303,6 +310,7 @@
                   }
                   this._step = value;
               },
+
               _populate: function () {
                   delete this._resizedCache;
                   var display, value, number;
@@ -350,7 +358,7 @@
                       if (this.count === 12 && this.twentyFourHours) {
                           number24 = {
                               index: i,
-                              value: value + 12,
+                              value: value+12,
                               display: value % this._step === 0,
                               x: 0,
                               y: 0,
@@ -366,6 +374,7 @@
                   this.set('_numbers24', numbers24);
                   this._positionClockPoints();
               },
+
               _updateNumber: function (number) {
                   var dom = number.dom;
                   if (!dom) {
@@ -380,6 +389,7 @@
                       dom.textClipped.textContent = this._formatNumber(number.value);
                   }
               },
+
               _createNumberElement: function (number) {
                   // We can't use templates inside SVG elements, so we have to create
                   // the numbers in dom and set up attribute bindings manually
@@ -419,6 +429,7 @@
 
                   return {g: g, text: text, textClipped: textClipped};
               },
+
               _updateSize: function () {
                   var radius = Math.min(this.offsetWidth, this.offsetHeight) / 2;
                   if (!radius || this._resizedCache === radius) {
@@ -443,6 +454,7 @@
                       this._bounds = this.$.face.getBoundingClientRect();
                   }.bind(this), 150);
               },
+
               _positionClockPoints: function () {
                   if (!this._radius) {
                       return;
@@ -466,8 +478,7 @@
                       number.y = this._radius - (Math.cos(a) * selectorCenter);
                       this._updateNumber(number);
                   }
-                  this._handX = this._numbers[0].x;
-                  this._handY = this._numbers[0].y;
+
 
                   if (this.twentyFourHours) {
                       //gestion des 24 heures;
@@ -476,13 +487,22 @@
                       for (var i = 0; i < this.count; i++) {
                           a = angle * i;
                           number = numbers24[i];
-                          number.x = this._radius + (Math.sin(a) * 68);
-                          number.y = this._radius - (Math.cos(a) * 68);
+                          number.x = this._radius + (Math.sin(a) * (selectorCenter - 40));
+                          number.y = this._radius - (Math.cos(a) * (selectorCenter - 40));
                           this._updateNumber(number);
                       }
                   }
 
+                  if(this.twentyFourHours && this.selected > 12){
+                      this._handX = this._numbers24[0].x;
+                      this._handY = this._numbers24[0].y;
+                  }else{
+                      this._handX = this._numbers[0].x;
+                      this._handY = this._numbers[0].y;
+                  }
+
               },
+
               _notifyNumberChanged: function (path) {
                   var propPath, props = ['x', 'y'];
                   for (var i = 0; i < props.length; i++) {
@@ -492,6 +512,7 @@
                       }
                   }
               },
+
               _getSelectArea: function (radius, outer, inner) {
                   return '\n' +
                       'M ' + (radius - outer) + ' ' + radius + '\n' +
@@ -501,6 +522,7 @@
                       'A ' + inner + ' ' + inner + ' 0 0 1 ' + (radius + inner) + ' ' + radius + '\n' +
                       'A ' + inner + ' ' + inner + ' 0 0 1 ' + (radius - inner) + ' ' + radius;
               },
+
               _onTouch: function (event) {
                   var x = event.detail.x - this._bounds.left - this._radius;
                   var y = event.detail.y - this._bounds.top - this._radius;
@@ -523,21 +545,27 @@
                   theta = (Math.PI / 2) + (x < 0 ? theta + Math.PI : theta);
                   var intervalRad = (360 / this.count) * (Math.PI / 180);
 
-                  // determine the selected number
-                  this.selected = Math.round(theta / intervalRad);
-                  this._handX = this._numbers[0].x;
-                  this._handY = this._numbers[0].y;
+                  var selected = Math.round(theta / intervalRad) ;
 
+                  // determine the selected number
                   if (distance < 88) {
-                      this.selected = this.selected === 0 ? this.selected : this.selected + 12;
+                      selected =  selected === 0 ? 24 : Math.round(theta / intervalRad) + 12;
                       this._handX = this._numbers24[0].x;
                       this._handY = this._numbers24[0].y;
+                  }else {
+                      selected = Math.round(theta / intervalRad);
+                      this._handX = this._numbers[0].x;
+                      this._handY = this._numbers[0].y;
                   }
+
+                  this.selected = selected;
+
                 /* only fire selected when we've tapped or stopped tracking */
                   if (event.type === 'tap' || event.detail.state === 'end') {
                       this.fire('paper-clock-selected', {value: this.selected, animated: this.animated});
                   }
               },
+
               _formatNumber: function (value) {
                   if (this.zeroPad) {
                       return ('0' + value).substr(-2);
@@ -547,6 +575,7 @@
                   }
                   return value.toString();
               },
+
               _getNumberClass: function (pfx, n, selected) {
                   var cssClass = pfx;
                   if (selected.value === n.value) {
@@ -554,6 +583,7 @@
                   }
                   return cssClass;
               },
+
               _vibrate: function () {
                   this.debounce('vibrate', function () {
                       if (navigator.vibrate) {
@@ -561,11 +591,13 @@
                       }
                   });
               },
+
               _zeroPadChanged: function () {
                   this._numbers.forEach(function (number) {
                       this._updateNumber(number);
                   }.bind(this));
               },
+
               _once: function (eventName, callback, node) {
                   node = node || this;
                   function onceCallback() {
@@ -575,6 +607,7 @@
 
                   node.addEventListener(eventName, onceCallback);
               }
+
           });
       })();
   </script>
diff --git a/paper-time-picker.html b/paper-time-picker.html
index da2e4fa..f77c18b 100644
--- a/paper-time-picker.html
+++ b/paper-time-picker.html
@@ -253,6 +253,9 @@
             Polymer({
                 is: 'paper-time-picker',
                 properties: {
+                    /**
+                     * If True, Supports the display of a dial for the management of the 24h (without AM and PM)
+                     */
                     isTwentyFourHours: {
                         type: Boolean,
                         value: false,

From a78a194967daf577d2204fd315122b1580f737b7 Mon Sep 17 00:00:00 2001
From: Stephane Balasse <stephane.balasse@qiis.fr>
Date: Mon, 10 Apr 2017 17:02:47 +0200
Subject: [PATCH 4/5] Supports the display of a dial for 24-hour management
 (without AM and PM)

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 455c659..6bf55e2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "paper-time-picker",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "description": "Provides a responsive time picker based on the material design spec",
   "main": "index.html",
   "devDependencies": {

From fac34c7f2b0b1e2043de4cae92a3ea67883da23a Mon Sep 17 00:00:00 2001
From: Stephane Balasse <stephane.balasse@qiis.fr>
Date: Thu, 13 Apr 2017 10:57:43 +0200
Subject: [PATCH 5/5] first commit

---
 .gitignore                                   |   5 +
 .idea/inspectionProfiles/Project_Default.xml |   6 +
 .idea/modules.xml                            |   8 +
 .idea/paper-time-picker.iml                  |  12 +
 .idea/vcs.xml                                |   6 +
 .idea/workspace.xml                          | 362 +++++++++++
 .jshintrc                                    |  25 +
 LICENSE                                      |  20 +
 README.md                                    |  56 ++
 bower.json                                   |  42 ++
 classlist-shim.html                          |   1 +
 demo/index.html                              |  57 ++
 index.html                                   |  18 +
 package.json                                 |  43 ++
 paper-clock-selector.html                    | 581 ++++++++++++++++++
 paper-time-picker-dialog-style.html          |  41 ++
 paper-time-picker.html                       | 601 +++++++++++++++++++
 17 files changed, 1884 insertions(+)
 create mode 100644 .gitignore
 create mode 100644 .idea/inspectionProfiles/Project_Default.xml
 create mode 100644 .idea/modules.xml
 create mode 100644 .idea/paper-time-picker.iml
 create mode 100644 .idea/vcs.xml
 create mode 100644 .idea/workspace.xml
 create mode 100644 .jshintrc
 create mode 100644 LICENSE
 create mode 100644 README.md
 create mode 100644 bower.json
 create mode 100644 classlist-shim.html
 create mode 100644 demo/index.html
 create mode 100644 index.html
 create mode 100644 package.json
 create mode 100644 paper-clock-selector.html
 create mode 100644 paper-time-picker-dialog-style.html
 create mode 100644 paper-time-picker.html

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..9f5d893
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,5 @@
+.bowerrc
+bower_components
+components
+node_modules
+gulpfile.js
diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
new file mode 100644
index 0000000..eff7139
--- /dev/null
+++ b/.idea/inspectionProfiles/Project_Default.xml
@@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="JSHint" enabled="true" level="ERROR" enabled_by_default="true" />
+  </profile>
+</component>
\ No newline at end of file
diff --git a/.idea/modules.xml b/.idea/modules.xml
new file mode 100644
index 0000000..5e2a5f3
--- /dev/null
+++ b/.idea/modules.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/paper-time-picker.iml" filepath="$PROJECT_DIR$/.idea/paper-time-picker.iml" />
+    </modules>
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/paper-time-picker.iml b/.idea/paper-time-picker.iml
new file mode 100644
index 0000000..24643cc
--- /dev/null
+++ b/.idea/paper-time-picker.iml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
\ No newline at end of file
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
new file mode 100644
index 0000000..94a25f7
--- /dev/null
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
new file mode 100644
index 0000000..69f6e78
--- /dev/null
+++ b/.idea/workspace.xml
@@ -0,0 +1,362 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ChangeListManager">
+    <list default="true" id="904e54f8-b020-4e03-a68a-22a398a6e8ab" name="Default" comment="" />
+    <ignored path="$PROJECT_DIR$/.tmp/" />
+    <ignored path="$PROJECT_DIR$/temp/" />
+    <ignored path="$PROJECT_DIR$/tmp/" />
+    <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
+    <option name="TRACKING_ENABLED" value="true" />
+    <option name="SHOW_DIALOG" value="false" />
+    <option name="HIGHLIGHT_CONFLICTS" value="true" />
+    <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
+    <option name="LAST_RESOLUTION" value="IGNORE" />
+  </component>
+  <component name="ExecutionTargetManager" SELECTED_TARGET="default_target" />
+  <component name="FileEditorManager">
+    <leaf SIDE_TABS_SIZE_LIMIT_KEY="300">
+      <file leaf-file-name="paper-clock-selector.html" pinned="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/paper-clock-selector.html">
+          <provider selected="true" editor-type-id="text-editor">
+            <state relative-caret-position="6012">
+              <caret line="334" column="0" lean-forward="false" selection-start-line="334" selection-start-column="0" selection-end-line="334" selection-end-column="0" />
+              <folding />
+            </state>
+          </provider>
+        </entry>
+      </file>
+      <file leaf-file-name="paper-time-picker.html" pinned="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/paper-time-picker.html">
+          <provider selected="true" editor-type-id="text-editor">
+            <state relative-caret-position="4698">
+              <caret line="261" column="0" lean-forward="false" selection-start-line="261" selection-start-column="0" selection-end-line="261" selection-end-column="0" />
+              <folding />
+            </state>
+          </provider>
+        </entry>
+      </file>
+      <file leaf-file-name="index.html" pinned="false" current-in-tab="true">
+        <entry file="file://$PROJECT_DIR$/demo/index.html">
+          <provider selected="true" editor-type-id="text-editor">
+            <state relative-caret-position="72">
+              <caret line="22" column="17" lean-forward="false" selection-start-line="22" selection-start-column="17" selection-end-line="22" selection-end-column="17" />
+              <folding />
+            </state>
+          </provider>
+        </entry>
+      </file>
+    </leaf>
+  </component>
+  <component name="FindInProjectRecents">
+    <findStrings>
+      <find>this.lang</find>
+    </findStrings>
+  </component>
+  <component name="Git.Settings">
+    <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
+  </component>
+  <component name="HighlightingSettingsPerFile">
+    <setting file="file://$PROJECT_DIR$/paper-clock-selector.html" root0="SKIP_INSPECTION" />
+  </component>
+  <component name="IdeDocumentHistory">
+    <option name="CHANGED_PATHS">
+      <list>
+        <option value="$PROJECT_DIR$/paper-clock-selector.html" />
+        <option value="$PROJECT_DIR$/paper-time-picker.html" />
+        <option value="$PROJECT_DIR$/demo/index.html" />
+      </list>
+    </option>
+  </component>
+  <component name="JsBuildToolGruntFileManager" detection-done="true" sorting="DEFINITION_ORDER" />
+  <component name="JsBuildToolPackageJson" detection-done="true" sorting="DEFINITION_ORDER">
+    <package-json value="$PROJECT_DIR$/package.json" />
+  </component>
+  <component name="JsGulpfileManager">
+    <detection-done>true</detection-done>
+    <sorting>DEFINITION_ORDER</sorting>
+  </component>
+  <component name="ProjectFrameBounds">
+    <option name="x" value="1920" />
+    <option name="y" value="27" />
+    <option name="width" value="1920" />
+    <option name="height" value="1020" />
+  </component>
+  <component name="ProjectView">
+    <navigator currentView="Scope" currentSubView="Project Files" proportions="" version="1">
+      <flattenPackages />
+      <showMembers />
+      <showModules />
+      <showLibraryContents />
+      <hideEmptyPackages />
+      <abbreviatePackageNames />
+      <autoscrollToSource />
+      <autoscrollFromSource />
+      <sortByType />
+      <manualOrder />
+      <foldersAlwaysOnTop value="true" />
+    </navigator>
+    <panes>
+      <pane id="ProjectPane">
+        <subPane>
+          <PATH>
+            <PATH_ELEMENT>
+              <option name="myItemId" value="paper-time-picker" />
+              <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.ProjectViewProjectNode" />
+            </PATH_ELEMENT>
+            <PATH_ELEMENT>
+              <option name="myItemId" value="paper-time-picker" />
+              <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
+            </PATH_ELEMENT>
+          </PATH>
+          <PATH>
+            <PATH_ELEMENT>
+              <option name="myItemId" value="paper-time-picker" />
+              <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.ProjectViewProjectNode" />
+            </PATH_ELEMENT>
+            <PATH_ELEMENT>
+              <option name="myItemId" value="paper-time-picker" />
+              <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
+            </PATH_ELEMENT>
+            <PATH_ELEMENT>
+              <option name="myItemId" value="demo" />
+              <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
+            </PATH_ELEMENT>
+          </PATH>
+        </subPane>
+      </pane>
+      <pane id="Scratches" />
+      <pane id="Scope">
+        <subPane subId="Project Files">
+          <PATH>
+            <PATH_ELEMENT USER_OBJECT="Root">
+              <option name="myItemId" value="" />
+              <option name="myItemType" value="" />
+            </PATH_ELEMENT>
+            <PATH_ELEMENT USER_OBJECT="paper-time-picker">
+              <option name="myItemId" value="" />
+              <option name="myItemType" value="" />
+            </PATH_ELEMENT>
+          </PATH>
+        </subPane>
+      </pane>
+    </panes>
+  </component>
+  <component name="PropertiesComponent">
+    <property name="nodejs_interpreter_path" value="/usr/bin/node" />
+    <property name="WebServerToolWindowFactoryState" value="false" />
+    <property name="HbShouldOpenHtmlAsHb" value="" />
+  </component>
+  <component name="RunDashboard">
+    <option name="ruleStates">
+      <list>
+        <RuleState>
+          <option name="name" value="ConfigurationTypeDashboardGroupingRule" />
+        </RuleState>
+        <RuleState>
+          <option name="name" value="StatusDashboardGroupingRule" />
+        </RuleState>
+      </list>
+    </option>
+  </component>
+  <component name="RunManager">
+    <configuration default="true" type="DartCommandLineRunConfigurationType" factoryName="Dart Command Line Application">
+      <method />
+    </configuration>
+    <configuration default="true" type="DartTestRunConfigurationType" factoryName="Dart Test">
+      <method />
+    </configuration>
+    <configuration default="true" type="JavaScriptTestRunnerJest" factoryName="Jest">
+      <node-interpreter value="project" />
+      <working-dir value="" />
+      <envs />
+      <scope-kind value="ALL" />
+      <method />
+    </configuration>
+    <configuration default="true" type="JavaScriptTestRunnerKarma" factoryName="Karma">
+      <config-file value="" />
+      <node-interpreter value="project" />
+      <envs />
+      <method />
+    </configuration>
+    <configuration default="true" type="JavaScriptTestRunnerProtractor" factoryName="Protractor">
+      <config-file value="" />
+      <node-interpreter value="project" />
+      <envs />
+      <method />
+    </configuration>
+    <configuration default="true" type="JavascriptDebugType" factoryName="JavaScript Debug">
+      <method />
+    </configuration>
+    <configuration default="true" type="NodeJSConfigurationType" factoryName="Node.js" path-to-node="project" working-dir="">
+      <method />
+    </configuration>
+    <configuration default="true" type="cucumber.js" factoryName="Cucumber.js">
+      <option name="cucumberJsArguments" value="" />
+      <option name="executablePath" />
+      <option name="filePath" />
+      <method />
+    </configuration>
+    <configuration default="true" type="js.build_tools.gulp" factoryName="Gulp.js">
+      <node-interpreter>project</node-interpreter>
+      <node-options />
+      <gulpfile />
+      <tasks />
+      <arguments />
+      <envs />
+      <method />
+    </configuration>
+    <configuration default="true" type="js.build_tools.npm" factoryName="npm">
+      <command value="run" />
+      <scripts />
+      <node-interpreter value="project" />
+      <envs />
+      <method />
+    </configuration>
+    <configuration default="true" type="mocha-javascript-test-runner" factoryName="Mocha">
+      <node-interpreter>project</node-interpreter>
+      <node-options />
+      <working-directory />
+      <pass-parent-env>true</pass-parent-env>
+      <envs />
+      <ui />
+      <extra-mocha-options />
+      <test-kind>DIRECTORY</test-kind>
+      <test-directory />
+      <recursive>false</recursive>
+      <method />
+    </configuration>
+  </component>
+  <component name="ShelveChangesManager" show_recycled="false">
+    <option name="remove_strategy" value="false" />
+  </component>
+  <component name="TaskManager">
+    <task active="true" id="Default" summary="Default task">
+      <changelist id="904e54f8-b020-4e03-a68a-22a398a6e8ab" name="Default" comment="" />
+      <created>1491468202991</created>
+      <option name="number" value="Default" />
+      <option name="presentableId" value="Default" />
+      <updated>1491468202991</updated>
+      <workItem from="1491468204383" duration="1401000" />
+      <workItem from="1491493405367" duration="1782000" />
+      <workItem from="1492073752202" duration="94000" />
+    </task>
+    <task id="LOCAL-00001" summary="Added 24-hour selection and display management">
+      <created>1491547865201</created>
+      <option name="number" value="00001" />
+      <option name="presentableId" value="LOCAL-00001" />
+      <option name="project" value="LOCAL" />
+      <updated>1491547865201</updated>
+    </task>
+    <option name="localTasksCounter" value="2" />
+    <servers />
+  </component>
+  <component name="TimeTrackingManager">
+    <option name="totallyTimeSpent" value="3277000" />
+  </component>
+  <component name="ToolWindowManager">
+    <frame x="1920" y="27" width="1920" height="1020" extended-state="0" />
+    <layout>
+      <window_info id="GfmBrowser" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="3" side_tool="false" content_ui="tabs" />
+      <window_info id="Project" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.25747862" sideWeight="0.5" order="0" side_tool="false" content_ui="combo" />
+      <window_info id="TODO" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="6" side_tool="false" content_ui="tabs" />
+      <window_info id="Statistic" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="7" side_tool="false" content_ui="tabs" />
+      <window_info id="Event Log" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="7" side_tool="true" content_ui="tabs" />
+      <window_info id="Run" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="2" side_tool="false" content_ui="tabs" />
+      <window_info id="Version Control" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="7" side_tool="false" content_ui="tabs" />
+      <window_info id="npm" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="2" side_tool="true" content_ui="tabs" />
+      <window_info id="Structure" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
+      <window_info id="Terminal" active="true" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.3428246" sideWeight="0.5" order="7" side_tool="false" content_ui="tabs" />
+      <window_info id="Debug" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.4" sideWeight="0.5" order="3" side_tool="false" content_ui="tabs" />
+      <window_info id="Favorites" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="2" side_tool="true" content_ui="tabs" />
+      <window_info id="Cvs" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="4" side_tool="false" content_ui="tabs" />
+      <window_info id="Message" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="0" side_tool="false" content_ui="tabs" />
+      <window_info id="Commander" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.4" sideWeight="0.5" order="0" side_tool="false" content_ui="tabs" />
+      <window_info id="Inspection" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.4" sideWeight="0.5" order="5" side_tool="false" content_ui="tabs" />
+      <window_info id="Hierarchy" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="2" side_tool="false" content_ui="combo" />
+      <window_info id="Find" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
+      <window_info id="Ant Build" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
+    </layout>
+  </component>
+  <component name="TypeScriptGeneratedFilesManager">
+    <option name="processedProjectFiles" value="true" />
+  </component>
+  <component name="VcsContentAnnotationSettings">
+    <option name="myLimit" value="2678400000" />
+  </component>
+  <component name="VcsManagerConfiguration">
+    <option name="CHECK_CODE_SMELLS_BEFORE_PROJECT_COMMIT" value="false" />
+    <option name="CHECK_NEW_TODO" value="false" />
+    <MESSAGE value="Added 24-hour selection and display management" />
+    <option name="LAST_COMMIT_MESSAGE" value="Added 24-hour selection and display management" />
+  </component>
+  <component name="XDebuggerManager">
+    <breakpoint-manager />
+    <watches-manager />
+  </component>
+  <component name="editorHistoryManager">
+    <entry file="file://$PROJECT_DIR$/paper-clock-selector.html">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="6012">
+          <caret line="334" column="0" lean-forward="true" selection-start-line="334" selection-start-column="0" selection-end-line="334" selection-end-column="0" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/paper-time-picker.html">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="4698">
+          <caret line="261" column="0" lean-forward="false" selection-start-line="261" selection-start-column="0" selection-end-line="261" selection-end-column="0" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/demo/index.html">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="396">
+          <caret line="22" column="17" lean-forward="true" selection-start-line="22" selection-start-column="17" selection-end-line="22" selection-end-column="17" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/paper-clock-selector.html">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="8010">
+          <caret line="445" column="49" lean-forward="true" selection-start-line="445" selection-start-column="49" selection-end-line="445" selection-end-column="49" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/paper-time-picker.html">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="3438">
+          <caret line="191" column="24" lean-forward="true" selection-start-line="191" selection-start-column="24" selection-end-line="191" selection-end-column="24" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/paper-clock-selector.html">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="6012">
+          <caret line="334" column="0" lean-forward="false" selection-start-line="334" selection-start-column="0" selection-end-line="334" selection-end-column="0" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/paper-time-picker.html">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="4698">
+          <caret line="261" column="0" lean-forward="false" selection-start-line="261" selection-start-column="0" selection-end-line="261" selection-end-column="0" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/demo/index.html">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="72">
+          <caret line="22" column="17" lean-forward="false" selection-start-line="22" selection-start-column="17" selection-end-line="22" selection-end-column="17" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
+  </component>
+</project>
\ No newline at end of file
diff --git a/.jshintrc b/.jshintrc
new file mode 100644
index 0000000..2de42eb
--- /dev/null
+++ b/.jshintrc
@@ -0,0 +1,25 @@
+{
+  "node": true,
+  "browser": true,
+  "esnext": true,
+  "bitwise": true,
+  "camelcase": true,
+  "curly": true,
+  "eqeqeq": true,
+  "immed": true,
+  "indent": 2,
+  "latedef": true,
+  "noarg": true,
+  "quotmark": "single",
+  "undef": true,
+  "unused": true,
+  "globals": {
+    "wrap": true,
+    "unwrap": true,
+    "Polymer": true,
+    "Platform": true,
+    "HTMLImports": true,
+    "moment": true
+  }
+}
+
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..99d4ebe
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 Ben Davis <bendavis78@gmail.com>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..6fd4572
--- /dev/null
+++ b/README.md
@@ -0,0 +1,56 @@
+paper-time-picker
+==========
+Material Design time picker, compatible with *Polymer 1.0*
+
+Provides a responsive time picker based on the material design spec. This
+component aims to be a clone of the time picker introduced in Android Lollipop.
+
+![wide picker screenshot][wide] ![narrow picker screenshot][narrow]
+
+See the [component page](http://bendavis78.github.io/paper-time-picker/) for
+full documentation.
+
+## Examples:
+
+Default picker:
+
+```html
+<paper-time-picker></paper-time-picker>
+```
+
+Setting the initial time to 4:20pm (note that hours given as 24-hour):
+
+```html
+<paper-time-picker time="4:20pm"></paper-time-picker>
+```
+
+If you include this element as part of `paper-dialog`, use the class
+`"paper-time-picker-dialog"` on the dialog in order to give it proper styling.
+
+```html
+<paper-dialog id="dialog" modal class="paper-time-picker-dialog"
+  on-iron-overlay-closed="dismissDialog">
+  <paper-time-picker id="timePicker" time="[[time]]"></paper-time-picker>
+  <div class="buttons">
+    <paper-button dialog-dismiss>Cancel</paper-button>
+    <paper-button dialog-confirm>OK</paper-button>
+  </div>
+</paper-dialog>
+```
+
+# Reporting Bugs
+
+When filing a bug report, please provide an example of how to repoduce using
+plunker, jsbin, jsfiddle, etc. You can use the following plunker as a starting
+point: http://plnkr.co/edit/gVQluG0GrFP3RzCPZPIi
+
+---
+
+If you find this component useful, please show your support by donating to
+[Bold Idea](http://boldidea.org). Click the button below!
+
+[![ideaSpark campaign button][donate]](https://donorbox.org/bold-idea-make-ideaspark-possible-for-dallas-area-students)
+
+[wide]: http://i.imgur.com/kosRJrF.png
+[narrow]: http://i.imgur.com/s3honuG.png
+[donate]: http://www.boldidea.org/donate-badge-md-1.png
diff --git a/bower.json b/bower.json
new file mode 100644
index 0000000..fe7f243
--- /dev/null
+++ b/bower.json
@@ -0,0 +1,42 @@
+{
+  "name": "paper-time-picker",
+  "version": "1.1.4",
+  "authors": [
+    "Ben Davis <bendavis78@gmail.com>"
+  ],
+  "description": "Provides a responsive time picker based on the material design spec",
+  "keywords": [
+    "web-component",
+    "web-components",
+    "polymer",
+    "timepicker",
+    "paper-time-picker"
+  ],
+  "main": "paper-time-picker.html",
+  "license": "MIT",
+  "homepage": "http://bendavis78.github.io/paper-time-picker/",
+  "ignore": [
+    "/.*",
+    "/tests/"
+  ],
+  "dependencies": {
+    "polymer": "Polymer/polymer#^1.1.0",
+    "iron-media-query": "PolymerElements/iron-media-query#^1.0.0",
+    "iron-selector": "PolymerElements/iron-selector#^1.0.0",
+    "neon-animation": "PolymerElements/neon-animation#^1.0.0",
+    "iron-resizable": "PolymerElements/iron-resizable-behavior#^1.0.0",
+    "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
+    "paper-styles": "PolymerElements/paper-styles#^1.0.0",
+    "iron-pages": "PolymerElements/iron-pages#^1.0.0",
+    "classList.js": "https://github.com/eligrey/classList.js.git#~1.1.20150312"
+  },
+  "devDependencies": {
+    "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
+    "paper-dialog": "PolymerElements/paper-dialog#^1.0.0",
+    "paper-button": "PolymerElements/paper-button#^1.0.0",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
+  },
+  "resolutions": {
+    "webcomponentsjs": "^0.7.2"
+  }
+}
diff --git a/classlist-shim.html b/classlist-shim.html
new file mode 100644
index 0000000..52a3c1c
--- /dev/null
+++ b/classlist-shim.html
@@ -0,0 +1 @@
+<script src="../classList.js/classList.min.js"></script>
diff --git a/demo/index.html b/demo/index.html
new file mode 100644
index 0000000..212df35
--- /dev/null
+++ b/demo/index.html
@@ -0,0 +1,57 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+
+  <title>paper-time-picker Demo</title>
+  
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+
+  <link rel="import" href="../paper-time-picker.html">
+  <link rel="import" href="../../paper-styles/demo-pages.html">
+  <link rel="import" href="../../paper-dialog/paper-dialog.html">
+  <link rel="import" href="../../paper-button/paper-button.html">
+
+  <style is="custom-style" include="paper-time-picker-dialog-style">
+    section {
+      margin: 24px;
+    }
+  </style>
+</head>
+<body unresolved>
+  <template is="dom-bind" id="scope">
+    <section>
+      <h1>{{time}}</h1>
+      <paper-button class="btn" on-tap="showDialog" raised>Change Time</paper-button>
+      <paper-dialog id="dialog" class="paper-time-picker-dialog" modal on-iron-overlay-closed="dismissDialog">
+        <paper-time-picker id="picker" time="[[time]]" ></paper-time-picker>
+        <div class="buttons">
+          <paper-button dialog-dismiss>CANCEL</paper-button>
+          <paper-button dialog-confirm>OK</paper-button>
+        </div>
+      </paper-dialog>
+    </section>
+  </template>
+  <script>
+    (function() {
+      var scope = document.querySelector('#scope');
+      scope.dismissDialog = function(event) {
+        if (event.detail.confirmed) {
+          scope.time = scope.$.picker.time;
+          // reset the picker to hours
+          this.$.picker.view = 'hours';
+        }
+      };
+      scope.showDialog = function() {
+        this.$.dialog.toggle();
+      };
+      document.addEventListener('WebComponentsReady', function() {
+        scope.time = '3:30 PM';
+        scope.showDialog();
+      });
+    })();
+  </script>
+</body>
+</html>
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..42fc3b7
--- /dev/null
+++ b/index.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html>
+<head>
+
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <title>paper-time-picker</title>
+
+  <script src="../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../iron-component-page/iron-component-page.html">
+
+</head>
+<body>
+
+  <iron-component-page></iron-component-page>
+
+</body>
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..455c659
--- /dev/null
+++ b/package.json
@@ -0,0 +1,43 @@
+{
+  "name": "paper-time-picker",
+  "version": "1.1.4",
+  "description": "Provides a responsive time picker based on the material design spec",
+  "main": "index.html",
+  "devDependencies": {
+    "browser-sync": "^2.8.0",
+    "del": "^1.2.0",
+    "gulp": "^3.9.0",
+    "gulp-add": "0.0.2",
+    "gulp-bower": "0.0.10",
+    "gulp-bump": "^0.3.1",
+    "gulp-copy": "0.0.2",
+    "gulp-filter": "^2.0.2",
+    "gulp-gh-pages": "^0.5.2",
+    "gulp-git": "^1.2.4",
+    "gulp-tag-version": "^1.3.0",
+    "merge-stream": "^0.1.8",
+    "portfinder": "^0.4.0",
+    "vinyl-paths": "^1.0.0",
+    "web-component-tester": "^3.3.3"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/bendavis78/paper-time-picker.git"
+  },
+  "keywords": [
+    "web-component",
+    "webcomponents",
+    "polymer",
+    "timepicker",
+    "paper-time-picker"
+  ],
+  "author": "Ben Davis <bendavis78@gmail.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/bendavis78/paper-time-picker/issues"
+  },
+  "homepage": "https://github.com/bendavis78/paper-time-picker#readme"
+}
diff --git a/paper-clock-selector.html b/paper-clock-selector.html
new file mode 100644
index 0000000..c848c49
--- /dev/null
+++ b/paper-clock-selector.html
@@ -0,0 +1,581 @@
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../iron-resizable/iron-resizable-behavior.html">
+<link rel="import" href="classlist-shim.html">
+
+<!--
+@element paper-clock-selector
+@blurb Only intended for use by paper-time-picker
+-->
+
+<dom-module id="paper-clock-selector">
+  <template>
+    <style>
+      :host * {
+        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+      }
+
+      :host {
+        display: block;
+        @apply(--paper-font-body1);
+        -webkit-touch-callout: none;
+        -webkit-user-select: none;
+        -khtml-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+        pointer-events: none;
+        @apply(--layout-horizontal);
+        @apply(--layout-center-center);
+      }
+
+      #clock {
+        display: block;
+        overflow: visible;
+      }
+
+      #clock * {
+        pointer-events: fill;
+      }
+
+      #face {
+        fill: var(--divider-color);
+        cursor: default;
+      }
+
+      .line {
+        stroke-width: 2;
+      }
+
+      .dot {
+        fill: var(--default-primary-color);
+      }
+
+      .line {
+        stroke: var(--default-primary-color);
+      }
+
+      .clock-hand {
+        z-index: 1;
+      }
+
+      .disc-large {
+        z-index: 2;
+        fill: var(--default-primary-color);
+      }
+
+      .disc-small {
+        fill: var(--text-primary-color);
+      }
+
+      .clock-hand.no-dot .disc-small {
+        fill: none;
+        stroke: none;
+      }
+
+      .number text {
+        z-index: 3;
+        fill: var(--primary-text-color);
+        @apply(--paper-font-subhead);
+        pointer-events: none;
+        dominant-baseline: middle;
+        text-align: center;
+        text-anchor: middle;
+      }
+
+      .number text.hourFr {
+        z-index: 3;
+        fill: var(--paper-grey-600);
+        @apply(--paper-font-body2);
+        pointer-events: none;
+        dominant-baseline: middle;
+        text-align: center;
+        text-anchor: middle;
+      }
+
+      .number text.clipped {
+        z-index: 4;
+        fill: var(--text-primary-color);
+        clip-path: url('#handClip');
+      }
+
+      .number text.clippedFr {
+        z-index: 4;
+        fill: var(--text-primary-color);
+        color: red;
+        clip-path: url('#handClip');
+      }
+
+      .select-area {
+        cursor: pointer;
+        fill-opacity: 0;
+      }
+
+      #clock.animating #clockHand,
+      #clock.animating #clipCircle {
+        transition: transform 150ms ease-in;
+      }
+    </style>
+    <svg version="1.1" id="clock">
+      <defs>
+        <clipPath id="handClip">
+          <circle id="clipCircle" r$="{{_selectorSize}}" cx$="{{_handX}}" cy$="{{_handY}}"></circle>
+        </clipPath>
+      </defs>
+      <circle id="face" class="bg" r$="{{_radius}}" cx$="{{_radius}}" cy$="{{_radius}}"></circle>
+      <g id="clockHand" class="clock-hand">
+        <circle class="dot" r="2" cx$="{{_radius}}" cy$="{{_radius}}"></circle>
+        <line class="line" x1$="{{_radius}}" y1$="{{_radius}}" x2$="{{_handX}}" y2$="{{_handY}}"></line>
+        <circle class="disc-large" r$="{{_selectorSize}}" cx$="{{_handX}}" cy$="{{_handY}}"></circle>
+        <circle class="disc-small" r$="{{_selectorDotSize}}" cx$="{{_handX}}" cy$="{{_handY}}"></circle>
+      </g>
+      <g id="numbers"></g>
+      <g id="numbers24"></g>
+
+      <path class="select-area" on-tap="_onTouch" on-track="_onTouch"
+            d$="{{_getSelectArea(_radius, _selectorInner, _selectorOuter)}}"></path>
+      <path class="select-area" on-tap="_onTouch" on-track="_onTouch"
+            d$="{{_getSelectArea(_radius, 48, 108)}}"></path>
+    </svg>
+  </template>
+  <script>
+      (function () {
+          var SVG_NS = 'http://www.w3.org/2000/svg';
+
+          // radius values as a percentage of the clock-face radius
+          var MAX_VISIBLE = 12;
+
+         var normalizeAngle = function (a) {
+              // convert angle to a positive value between 0 and 360
+              a = a ? a % 360 : 0;
+              return a < 0 ? a + 360 : a;
+          };
+
+          function getShortestAngle(from, to) {
+              var angle, offset = 0;
+              from = from || 0;
+              angle = normalizeAngle(from);
+              if (angle < 180 && (to > (angle + 180))) {
+                  offset = -360;
+              }
+              if (angle >= 180 && (to <= (angle - 180))) {
+                  offset = 360;
+              }
+              return from + offset + (to - angle);
+          }
+
+          Polymer({
+              is: 'paper-clock-selector',
+              properties: {
+                  selected: {
+                      type: Number,
+                      notify: true,
+                      value: 0,
+                      observer: '_selectedChanged'
+                  },
+                  twentyFourHours: {
+                      type: Boolean,
+                      value: false
+                  },
+                  count: {
+                      type: Number,
+                      value: 0
+                  },
+                  step: {
+                      type: Number,
+                      value: 1,
+                      observer: '_stepChanged'
+                  },
+                  useZero: {
+                      type: Boolean,
+                      value: false
+                  },
+                  zeroPad: {
+                      type: Boolean,
+                      value: false,
+                      observer: '_zeroPadChanged'
+                  },
+                  animated: {
+                      type: Boolean,
+                      value: false
+                  }
+              },
+              listeners: {
+                  'iron-resize': '_updateSize'
+              },
+              observers: [
+                  '_populate(count, step, useZero)'
+              ],
+              behaviors: [
+                  Polymer.IronResizableBehavior
+              ],
+              ready: function () {
+                  this._transitionEvent = this.style.WebkitTransition ? 'transitionEnd' : 'webkitTransitionEnd';
+                  this._populate();
+                  this._selectedChanged(this.selected);
+              },
+              setClockHand: function (deg, animate, callback) {
+                  deg = normalizeAngle(deg);
+
+                  animate = typeof(animate) === 'undefined' ? this.animated : animate;
+                  animate = this._radius ? animate : false;
+
+                  this.$.clock.classList.remove('animating');
+
+                  var current, transform = this._getTransform(this.$.clockHand);
+                  if (transform) {
+                      current = parseInt(transform.match(/rotate\((-?\d+)deg\)/)[1]);
+                  } else {
+                      current = 0;
+                  }
+
+                  var rotate = getShortestAngle(current, deg);
+                  if (normalizeAngle(rotate) === current) {
+                      return this._setHandRotation(current);
+                  }
+
+                  if (!animate) {
+                      return this._setHandRotation(rotate);
+                  }
+
+                  this._once(this._transitionEvent, function () {
+                      if (callback) {
+                          callback();
+                      }
+                      this.$.clock.classList.remove('animating');
+                      this.fire('paper-clock-transition-end');
+                  }.bind(this), this.$.clockHand);
+
+                  this.$.clock.classList.add('animating');
+                  this.async(function () {
+                      this._setHandRotation(rotate);
+                  });
+
+              },
+              _getTransform: function (el) {
+                  return el.style.transform | el.style.webkitTransform | el.style.msTransform;
+              },
+              _setTransform: function (el, value) {
+                  el.style.msTransform = el.style.webkitTransform = el.style.transform = value;
+              },
+              _setTransformOrigin: function (el, value) {
+                  el.style.msTransformOrigin = el.style.webkitTransformOrigin = el.style.transformOrigin = value;
+              },
+              _setHandRotation: function (deg) {
+                  var hasLabel = ((deg / 360) * this.count) % this.step === 0;
+                  var transform = 'rotate(' + deg + 'deg)';
+                  this.$.clockHand.classList[['remove', 'add'][+hasLabel]]('no-dot');
+                  this._setTransform(this.$.clockHand, transform);
+                  this._setTransform(this.$.clipCircle, transform);
+              },
+              _selectedChanged: function (selected) {
+                  if (!this.count || isNaN(selected)) {
+                      return;
+                  }
+                  var value;
+
+                  value = selected === 24 ? 0 : selected;
+
+
+                  var idx = value;
+
+                  if (idx === 0 && !this.useZero && !this.twentyFourHours) {
+                      value = this.count;
+                  }
+                  if (value !== this.selected && value !== 0) {
+                      this.selected = value;
+                      return;
+                  }
+                  if (value === 0 && this.twentyFourHours) {
+                      this.selected = 0;
+                      return;
+                  }
+                  this._vibrate();
+                  this.setClockHand((360 / this.count) * this.selected);
+              },
+              _stepChanged: function (value, oldValue) {
+                  this._step = oldValue;
+                  if (!this.count || isNaN(value)) {
+                      return;
+                  }
+                  var minStep = Math.ceil(this.count / MAX_VISIBLE);
+                  if (value < minStep) {
+                      value = minStep;
+                  }
+                  this._step = value;
+              },
+              _populate: function () {
+                  delete this._resizedCache;
+                  var display, value, number;
+                  var $numbers = this.$.numbers;
+
+                  var $numbers24 = this.$.numbers24;
+
+                  this.set('_numbers', []);
+                  this.set('_numbers24', []);
+                  this._stepChanged(this.step);
+
+                  // remove dom nodes since they'll be re-created
+                  while ($numbers.firstChild) {
+                      $numbers.removeChild($numbers.firstChild);
+                  }
+
+                  while ($numbers24.firstChild) {
+                      $numbers24.removeChild($numbers24.firstChild);
+                  }
+
+                  var numbers = [];
+                  var numbers24 = [];
+
+                  for (var i = 0; i < this.count; i++) {
+                      value = i;
+                      display = null;
+                      if (i === 0 && !this.useZero) {
+                          value = this.count;
+                      }
+
+                      number = {
+                          index: i,
+                          value: value,
+                          display: value % this._step === 0,
+                          x: 0,
+                          y: 0,
+                          label: this._formatNumber(value)
+                      };
+
+
+                      number.dom = this._createNumberElement(number);
+                      numbers.push(number);
+                      $numbers.appendChild(number.dom.g);
+
+                      if (this.count === 12 && this.twentyFourHours) {
+                          number24 = {
+                              index: i,
+                              value: value + 12,
+                              display: value % this._step === 0,
+                              x: 0,
+                              y: 0,
+                              label: this._formatNumber(value + 12)
+                          };
+                          number24.dom = this._createNumberElement(number24);
+                          numbers24.push(number24);
+                          $numbers24.appendChild(number24.dom.g);
+                      }
+
+                  }
+                  this.set('_numbers', numbers);
+                  this.set('_numbers24', numbers24);
+                  this._positionClockPoints();
+              },
+              _updateNumber: function (number) {
+                  var dom = number.dom;
+                  if (!dom) {
+                      return;
+                  }
+                  if (number.x && number.y && dom.text) {
+                      dom.text.setAttributeNS(null, 'x', number.x);
+                      dom.text.setAttributeNS(null, 'y', number.y);
+                      dom.text.textContent = this._formatNumber(number.value);
+                      dom.textClipped.setAttributeNS(null, 'x', number.x);
+                      dom.textClipped.setAttributeNS(null, 'y', number.y);
+                      dom.textClipped.textContent = this._formatNumber(number.value);
+                  }
+              },
+              _createNumberElement: function (number) {
+                  // We can't use templates inside SVG elements, so we have to create
+                  // the numbers in dom and set up attribute bindings manually
+                  function create(type, classList) {
+                      var el = document.createElementNS(SVG_NS, type);
+                      if (classList) {
+                          classList.forEach(function (c) {
+                              el.classList.add(c);
+                          });
+                      }
+                      if (!Polymer.Settings.useNativeShadow) {
+                          el.classList.add('style-scope');
+                          el.classList.add('paper-clock-selector');
+                      }
+                      return el;
+                  }
+
+                  var g = create('g', ['number']);
+                  var text = null;
+                  var textClipped = null;
+                  if (number.display) {
+                      if (this.twentyFourHours && number.value > 12) {
+                          text = create('text', ['hourFr']);
+                      } else {
+                          text = create('text');
+                      }
+//                        text = create('text');
+                      text.textContent = number.label;
+                      g.appendChild(text);
+
+                      textClipped = create('text', ['clipped']);
+
+
+                      textClipped.textContent = number.label;
+                      g.appendChild(textClipped);
+                  }
+
+                  return {g: g, text: text, textClipped: textClipped};
+              },
+              _updateSize: function () {
+                  var radius = Math.min(this.offsetWidth, this.offsetHeight) / 2;
+                  if (!radius || this._resizedCache === radius) {
+                      return;
+                  }
+                  this._radius = radius;
+                  this._selectorSize = 20;
+                  this._selectorDotSize = 3;
+                  this._padding = 2;
+                  this._positionClockPoints();
+
+                  this._resizedCache = this._radius;
+                  this.$.clock.style.width = (radius * 2) + 'px';
+                  this.$.clock.style.height = (radius * 2) + 'px';
+                  var v = radius + 'px ' + radius + 'px';
+                  this._setTransformOrigin(this.$.clockHand, v);
+                  this._setTransformOrigin(this.$.clipCircle, v);
+
+                  this.async(function () {
+                      // FIXME: this is hacky, but for some reason we need to wait a bit
+                      // to get an accurate measurement
+                      this._bounds = this.$.face.getBoundingClientRect();
+                  }.bind(this), 150);
+              },
+              _positionClockPoints: function () {
+                  if (!this._radius) {
+                      return;
+                  }
+                  var rad = this._radius;
+
+
+                  this._selectorOuter = rad - this._padding * 2;
+                  this._selectorInner = this._selectorOuter - this._selectorSize * 2;
+                  var selectorCenter = this._selectorOuter - this._selectorSize;
+
+                  var numbers = this._numbers;
+
+                  var angle = (360 / this.count) * (Math.PI / 180);
+
+                  var a, number;
+                  for (var i = 0; i < this.count; i++) {
+                      a = angle * i;
+                      number = numbers[i];
+                      number.x = this._radius + (Math.sin(a) * selectorCenter);
+                      number.y = this._radius - (Math.cos(a) * selectorCenter);
+                      this._updateNumber(number);
+                  }
+                  this._handX = this._numbers[0].x;
+                  this._handY = this._numbers[0].y;
+
+                  if (this.twentyFourHours) {
+                      //gestion des 24 heures;
+                      var numbers24 = this._numbers24;
+
+                      for (var i = 0; i < this.count; i++) {
+                          a = angle * i;
+                          number = numbers24[i];
+                          number.x = this._radius + (Math.sin(a) * 68);
+                          number.y = this._radius - (Math.cos(a) * 68);
+                          this._updateNumber(number);
+                      }
+                  }
+
+              },
+              _notifyNumberChanged: function (path) {
+                  var propPath, props = ['x', 'y'];
+                  for (var i = 0; i < props.length; i++) {
+                      propPath = path + '.' + props[i];
+                      if (this.get(propPath)) {
+                          this.notifyPath(propPath, this.get(propPath));
+                      }
+                  }
+              },
+              _getSelectArea: function (radius, outer, inner) {
+                  return '\n' +
+                      'M ' + (radius - outer) + ' ' + radius + '\n' +
+                      'A ' + outer + ' ' + outer + ' 0 0 0 ' + (radius + outer) + ' ' + radius + '\n' +
+                      'A ' + outer + ' ' + outer + ' 0 0 0 ' + (radius - outer) + ' ' + radius + '\n' +
+                      'M ' + (radius - inner) + ' ' + radius + '\n' +
+                      'A ' + inner + ' ' + inner + ' 0 0 1 ' + (radius + inner) + ' ' + radius + '\n' +
+                      'A ' + inner + ' ' + inner + ' 0 0 1 ' + (radius - inner) + ' ' + radius;
+              },
+              _onTouch: function (event) {
+                  var x = event.detail.x - this._bounds.left - this._radius;
+                  var y = event.detail.y - this._bounds.top - this._radius;
+
+                /* only rotate while in the touch area */
+                  var distance = Math.abs(Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)));
+
+                  if (!this.twentyFourHours && distance < this._selectorInner || distance > this._selectorOuter) {
+                      return;
+                  }
+                  if (this.twentyFourHours && distance < 48 || distance > 128) {
+                      return;
+                  }
+
+                /* don't animate while tracking */
+                  this.animated = event.type !== 'track';
+
+                  // use coords to find angle from 12 o'clock position
+                  var theta = Math.atan(y / x);
+                  theta = (Math.PI / 2) + (x < 0 ? theta + Math.PI : theta);
+                  var intervalRad = (360 / this.count) * (Math.PI / 180);
+
+                  // determine the selected number
+                  this.selected = Math.round(theta / intervalRad);
+                  this._handX = this._numbers[0].x;
+                  this._handY = this._numbers[0].y;
+
+                  if (distance < 88) {
+                      this.selected = this.selected === 0 ? this.selected : this.selected + 12;
+                      this._handX = this._numbers24[0].x;
+                      this._handY = this._numbers24[0].y;
+                  }
+                /* only fire selected when we've tapped or stopped tracking */
+                  if (event.type === 'tap' || event.detail.state === 'end') {
+                      this.fire('paper-clock-selected', {value: this.selected, animated: this.animated});
+                  }
+              },
+              _formatNumber: function (value) {
+                  if (this.zeroPad) {
+                      return ('0' + value).substr(-2);
+                  }
+                  if (value == 24) {
+                      return ('00');
+                  }
+                  return value.toString();
+              },
+              _getNumberClass: function (pfx, n, selected) {
+                  var cssClass = pfx;
+                  if (selected.value === n.value) {
+                      cssClass += ' selected';
+                  }
+                  return cssClass;
+              },
+              _vibrate: function () {
+                  this.debounce('vibrate', function () {
+                      if (navigator.vibrate) {
+                          navigator.vibrate(10);
+                      }
+                  });
+              },
+              _zeroPadChanged: function () {
+                  this._numbers.forEach(function (number) {
+                      this._updateNumber(number);
+                  }.bind(this));
+              },
+              _once: function (eventName, callback, node) {
+                  node = node || this;
+                  function onceCallback() {
+                      node.removeEventListener(eventName, onceCallback);
+                      callback.apply(null, arguments);
+                  }
+
+                  node.addEventListener(eventName, onceCallback);
+              }
+          });
+      })();
+  </script>
+</dom-module>
diff --git a/paper-time-picker-dialog-style.html b/paper-time-picker-dialog-style.html
new file mode 100644
index 0000000..b104e0d
--- /dev/null
+++ b/paper-time-picker-dialog-style.html
@@ -0,0 +1,41 @@
+<style is="custom-style">
+/* mixin definitions */
+:root {
+  --paper-time-picker-dialog: {
+    margin: 0;
+    max-height: 520px !important;
+  };
+  --paper-time-picker-dialog-picker: {
+    margin-top: 0 !important;
+    padding: 0;
+  };
+  --paper-time-picker-dialog-calendar: {
+    padding-bottom: 0;
+  };
+  --paper-time-picker-dialog-heading: {
+    margin-bottom: -56px;
+  };
+}
+</style>
+
+<dom-module id="paper-time-picker-dialog-style">
+  <template>
+    <style>
+      /* Application of mixins to local .paper-time-picker-dialog elements */
+      .paper-time-picker-dialog {
+        @apply(--paper-time-picker-dialog);
+      }
+      .paper-time-picker-dialog > paper-time-picker {
+        --paper-calendar: {
+          @apply(--paper-time-picker-dialog-calendar);
+        };
+        @apply(--paper-time-picker-dialog-picker);
+      }
+      .paper-time-picker-dialog > paper-time-picker:not([narrow]) {
+        --paper-time-picker-heading: {
+          @apply(--paper-time-picker-dialog-heading);
+        };
+      }
+    </style>
+  </template>
+</dom-module>
diff --git a/paper-time-picker.html b/paper-time-picker.html
new file mode 100644
index 0000000..70eeeac
--- /dev/null
+++ b/paper-time-picker.html
@@ -0,0 +1,601 @@
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../iron-media-query/iron-media-query.html">
+<link rel="import" href="../iron-resizable/iron-resizable-behavior.html">
+<link rel="import" href="../iron-selector/iron-selector.html">
+<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
+<link rel="import" href="../paper-styles/typography.html">
+<link rel="import" href="../neon-animation/neon-animated-pages.html">
+<link rel="import" href="../neon-animation/neon-animatable.html">
+<link rel="import" href="../neon-animation/animations/fade-in-animation.html">
+<link rel="import" href="../neon-animation/animations/fade-out-animation.html">
+<link rel="import" href="paper-clock-selector.html">
+<link rel="import" href="paper-time-picker-dialog-style.html">
+
+<!--
+
+[Material Design Pickers](http://www.google.com/design/spec/components/pickers.html)
+
+Provides a responsive time picker based on the material design spec. This
+component aims to be a clone of the time picker introduced in Android Lollipop.
+
+## Examples:
+
+Default picker:
+
+    <paper-time-picker></paper-time-picker>
+
+Setting the initial time to 4:20pm (note that hours given as 24-hour):
+
+    <paper-time-picker time="4:20pm"></paper-time-picker>
+
+If you include this element as part of `paper-dialog`, use the class
+`"paper-time-picker-dialog"` on the dialog in order to give it proper styling.
+
+    <paper-dialog id="dialog" modal class="paper-time-picker-dialog"
+      on-iron-overlay-closed="dismissDialog">
+      <paper-time-picker id="timePicker" time="[[time]]"></paper-time-picker>
+      <div class="buttons">
+        <paper-button dialog-dismiss>Cancel</paper-button>
+        <paper-button dialog-confirm>OK</paper-button>
+      </div>
+    </paper-dialog>
+
+@element paper-time-picker
+@blurb Provides a responsive time picker based on the material design spec.
+@homepage http://bendavis78.github.io/paper-time-picker/
+@demo demo/index.html
+-->
+
+<style is="custom-style" include="paper-time-picker-dialog-style">
+    /* include dialog style at document-level for backward compatibility */
+</style>
+
+<dom-module id="paper-time-picker">
+    <template>
+        <style>
+            :host * {
+                -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+            }
+
+            :host {
+                display: block;
+                background-color: var(--primary-background-color);
+                -webkit-touch-callout: none;
+                -webkit-user-select: none;
+                -khtml-user-select: none;
+                -moz-user-select: none;
+                -ms-user-select: none;
+                user-select: none;
+                @apply(--paper-font-body1);
+                font-size: 14px;
+            }
+
+            /** Landscape ******************/
+            #timePicker {
+                width: 512px;
+                height: 304px;
+                @apply(--layout-horizontal);
+                @apply(--paper-time-picker);
+            }
+
+            #heading {
+                width: 168px;
+                padding: 16px;
+                @apply(--layout-vertical);
+                @apply(--paper-time-picker-heading);
+            }
+
+            :host([enable-seconds]) #heading {
+                width: 200px;
+            }
+
+            #clockArea {
+                padding: 20px;
+            }
+
+            /** Narrow *********************/
+            :host([narrow]) #timePicker {
+                width: 328px;
+                height: 428px;
+                @apply(--layout-vertical);
+            }
+
+            :host([narrow]) #heading {
+                width: auto;
+                height: 96px;
+                padding: 0 48px;
+                @apply(--layout-horizontal);
+                @apply(--layout-end-justified);
+            }
+
+            :host([enable-seconds][narrow]) #heading {
+                padding: 0 16px;
+            }
+
+            :host([narrow]) #heading .time {
+                margin-top: 6px;
+                @apply(--paper-font-display3);
+            }
+
+            :host([narrow]) #timePicker #heading .time {
+                font-size: 60px;
+                letter-spacing: .1ex !important;
+            }
+
+            :host([narrow]) #heading .period {
+                margin-left: 12px;
+                margin-top: 12px;
+            }
+
+            :host([narrow]) #clockArea {
+                /* padding: 30px 20px 10px 20px; */
+                padding: 16px;
+                @apply(--paper-time-picker-clock);
+            }
+
+            /** Heading ********************/
+            #heading {
+                box-sizing: border-box;
+                color: var(--light-primary-color);
+                background: var(--default-primary-color);
+                @apply(--layout-vertical);
+                @apply(--layout-center-center);
+            }
+
+            #heading > iron-selector {
+                margin-top: 10px;
+            }
+
+            #heading .time {
+                @apply(--paper-font-display2);
+                @apply(--layout-horizontal);
+                @apply(--layout-end-justified);
+                width: 5.34ex;
+                letter-spacing: .13ex !important;
+            }
+
+            :host([enable-seconds]) #heading .time {
+                width: 8.5ex;
+                font-size: 40px;
+            }
+
+            #heading .iron-selected {
+                color: var(--text-primary-color);
+            }
+
+            #heading .period {
+                font-weight: 600;
+                @apply(--paper-font-subhead);
+            }
+
+            #heading .time div,
+            #heading .period div {
+                cursor: pointer;
+            }
+
+            /** Clock *********************/
+            #clockArea {
+                background: var(--default-background-color);
+                overflow: hidden;
+                @apply(--layout-flex);
+                @apply(--paper-time-picker-clock);
+                @apply(--layout-vertical);
+            }
+
+            #clockArea > div {
+                @apply(--layout-flex);
+                position: relative;
+            }
+
+            .clock {
+                @apply(--layout-fit);
+            }
+
+            .clock-animatable {
+                @apply(--layout-fit);
+            }
+        </style>
+        <iron-media-query query="{{_getMediaQuery(forceNarrow, responsiveWidth)}}"
+                          query-matches="{{_queryMatches}}"></iron-media-query>
+        <div id="timePicker">
+            <div id="heading">
+                <iron-selector class="time" selectable="[name]" attr-for-selected="name" selected="{{view}}">
+                    <div name="hours" class="hour">{{hour12}}</div>
+                    <div class="sep">:</div>
+                    <div name="minutes" class="minute">{{_zeroPad(minute, 2)}}</div>
+                    <template is="dom-if" if="[[ enableSeconds ]]">
+                        <div class="sep">:</div>
+                        <div name="seconds" class="second">{{_zeroPad(second, 2)}}</div>
+                    </template>
+                </iron-selector>
+                <iron-selector class="period" attr-for-selected="name" selected="{{period}}">
+                    <div name="AM">AM</div>
+                    <div name="PM">PM</div>
+                </iron-selector>
+            </div>
+            <div id="clockArea">
+                <div>
+                    <neon-animated-pages id="pages" class="clock-animatable" attr-for-selected="name"
+                                         selected="{{view}}"
+                                         entry-animation="fade-in-animation" exit-animation="fade-out-animation">
+                        <neon-animatable class="clock-animatable" name="hours">
+                            <paper-clock-selector class="clock" id="hourClock" count="12" step="1" twenty-four-hours
+                                                  animated="[[animated]]" selected="{{hour12}}"></paper-clock-selector>
+                        </neon-animatable>
+                        <neon-animatable class="clock-animatable" name="minutes">
+                            <paper-clock-selector class="clock" id="minuteClock" count="60" step="5"
+                                                  animated="[[animated]]" use-zero zero-pad
+                                                  selected="{{minute}}"></paper-clock-selector>
+                        </neon-animatable>
+                        <template is="dom-if" if="[[ enableSeconds ]]">
+                            <neon-animatable class="clock-animatable" name="seconds">
+                                <paper-clock-selector class="clock" id="secondClock" count="60" step="5"
+                                                      animated="[[animated]]" use-zero zero-pad
+                                                      selected="{{second}}"></paper-clock-selector>
+                            </neon-animatable>
+                        </template>
+                    </neon-animated-pages>
+                </div>
+            </div>
+        </div>
+    </template>
+    <script>
+        (function () {
+            function warn() {
+                if (window.console) {
+                    console.warn.apply(console, arguments);
+                }
+            }
+
+            Polymer({
+                is: 'paper-time-picker',
+                properties: {
+                    /**
+                     * The selected time
+                     */
+                    time: {
+                        type: String,
+                        value: '00:00',
+                        notify: true,
+                        observer: '_timeChanged'
+                    },
+                    /**
+                     * The time value as the number of minutes(if enableSeconds then number of seconds) from midnight
+                     */
+                    rawValue: {
+                        type: Number,
+                        value: 0,
+                        notify: true,
+                        observer: '_rawValueChanged'
+                    },
+                    /**
+                     * The current 24-hour value (0-24)
+                     */
+                    hour: {
+                        type: Number,
+                        observer: '_hourChanged',
+                        notify: true,
+                        value: 0
+                    },
+                    /**
+                     * The current 12-hour value (0-12)
+                     */
+                    hour12: {
+                        type: Number,
+                        notify: true,
+                        observer: '_hour12Changed'
+                    },
+                    /**
+                     * The current minute (0-59)
+                     */
+                    minute: {
+                        type: Number,
+                        notify: true,
+                        observer: '_minuteChanged',
+                        value: 0
+                    },
+                    /**
+                     * The current second (0-59)
+                     */
+                    second: {
+                        type: Number,
+                        notify: true,
+                        observer: '_secondChanged',
+                        value: 0
+                    },
+                    /**
+                     * The current period ('AM', 'PM')
+                     */
+                    period: {
+                        type: String,
+                        notify: true,
+                        observer: '_periodChanged',
+                        value: 'AM'
+                    },
+                    /**
+                     * The current selector view ('hours' or 'minutes')
+                     */
+                    view: {
+                        type: String,
+                        notify: true,
+                        value: 'hours',
+                        observer: '_viewChanged'
+                    },
+                    /**
+                     * Maximum screen width at which the picker uses a vertical layout
+                     */
+                    responsiveWidth: {
+                        type: String,
+                        value: '560px'
+                    },
+                    /**
+                     * Force narrow layout
+                     */
+                    forceNarrow: {
+                        type: Boolean,
+                        value: false
+                    },
+                    /**
+                     * Whether or not to animate the clock hand between selections
+                     */
+                    animated: {
+                        type: Boolean,
+                        value: false
+                    },
+                    narrow: {
+                        type: Boolean,
+                        reflectToAttribute: true,
+                        value: false,
+                        notify: true
+                    },
+                    isTouch: {
+                        type: Boolean,
+                        value: false,
+                        reflectToAttribute: true
+                    },
+                    enableSeconds: {
+                        type: Boolean,
+                        value: false
+                    },
+                    _queryMatches: {
+                        type: Boolean,
+                        value: false,
+                        observer: '_computeNarrow'
+                    }
+                },
+                behaviors: [
+                    Polymer.IronResizableBehavior
+                ],
+                observers: [
+                    '_updateTime(hour, minute, second)'
+                ],
+                listeners: {
+                    'iron-resize': '_resizeHandler',
+                    'paper-clock-selected': '_onClockSelected'
+                },
+                ready: function () {
+                    this.isTouch = 'ontouchstart' in window;
+                    this.view = 'hours';
+                },
+                _timeChanged: function (time) {
+                    if (!time) {
+                        this.rawValue = 0;
+                        return;
+                    }
+
+                    var parsed = this.parseTime(time);
+                    var cleanedTime = this.formatTime(parsed.hour, parsed.minute, parsed.second);
+                    if (cleanedTime !== time) {
+                        this.time = cleanedTime;
+                        return;
+                    }
+                    var rawValue = (parsed.hour * 60) + parsed.minute;
+                    if (this.enableSeconds) {
+                        rawValue = (rawValue * 60) + parsed.second;
+                    }
+                    this.rawValue = rawValue;
+                },
+                _updateTime: function (hour, minute, second) {
+                    var rawValue = (hour * 60) + minute;
+                    if (this.enableSeconds) {
+                        rawValue = (rawValue * 60) + second;
+                    }
+                    this.rawValue = rawValue;
+                },
+                formatTime: function (hour, minute, second) {
+                    var period = (hour % 24) < 12 ? 'AM' : 'PM';
+                    hour = hour % 12 || 12;
+                    minute = ('0' + minute).substr(-2);
+                    second = ('0' + second).substr(-2);
+                    if (this.enableSeconds) {
+                        minute += ':' + second;
+                    }
+                    return hour + ':' + minute + ' ' + period;
+                },
+                parseTime: function (timeString) {
+                    var pattern = /^\s*(\d{1,2}):?(\d{2})(:?(\d{2}))?(\s*([AaPp])\.?[Mm]\.?|[A-Z])?\s*$/;
+                    var match = timeString.match(pattern);
+                    if (!match) {
+                        warn('Invalid time:', timeString);
+                        return;
+                    }
+                    var hour = parseInt(match[1]);
+                    var minute = parseInt(match[2]);
+                    var second = match[4] ? parseInt(match[4]) : 0;
+                    var period = match[6] ? (match[6][0].toUpperCase() + 'M') : 'AM';
+                    if (period === 'PM' && hour < 12) {
+                        hour = (hour + 12) % 24;
+                    } else if (period === 'AM' && hour === 12) {
+                        hour = 0;
+                    }
+                    return {hour: hour, minute: minute, second: second};
+                },
+                togglePeriod: function () {
+                    this.period = (this.period === 'AM') ? 'PM' : 'AM';
+                },
+                _rawValueChanged: function (value, oldValue) {
+                    if (isNaN(parseInt(value))) {
+                        this.rawValue = oldValue;
+                        return;
+                    }
+                    if (this.enableSeconds) {
+                        this.hour = Math.floor(value / 3600);
+                        this.minute = Math.floor(value / 60) % 60;
+                        this.second = value % 60;
+                    } else {
+                        this.hour = Math.floor(value / 60);
+                        this.minute = value % 60;
+                        this.second = 0;
+                    }
+                    this.time = this.formatTime(this.hour, this.minute, this.second);
+                },
+                _hour12Changed: function (hour12) {
+                    var add = (this.period === 'PM' ? 12 : 0);
+                    this.hour = ((hour12 % 12) + add) % 24;
+                },
+                _hourChanged: function (hour, oldValue) {
+                    hour = parseInt(hour);
+                    if (isNaN(hour) && !hour) {
+                        return;
+                    }
+                    if (isNaN(hour)) {
+                        warn('Invalid number:', hour);
+                        this.hour = oldValue;
+                        return;
+                    }
+                    hour = parseFloat(hour) % 24;
+                    this.hour = hour;
+                    this.hour12 = this._twelveHour(hour);
+                    this.period = ['PM', 'AM'][+(hour < 12)];
+                },
+                _minuteChanged: function (minute) {
+                    minute = parseFloat(minute) % 60;
+                    this.minute = minute;
+                },
+                _secondChanged: function (second) {
+                    second = parseFloat(second) % 60;
+                    this.second = second;
+                },
+                _periodChanged: function (period) {
+                    if (isNaN(parseInt(this.hour)) || isNaN(parseInt(this.minute))) {
+                        return;
+                    }
+                    if (period === 'AM' && this.hour >= 12) {
+                        this.hour -= 12;
+                    } else if (period === 'PM' && this.hour < 12) {
+                        this.hour += 12;
+                    }
+                },
+                _zeroPad: function (value, length) {
+                    if (value === undefined || isNaN(value) || isNaN(length)) {
+                        return;
+                    }
+                    return ('0' + value).substr(-length);
+                },
+                _twelveHour: function (hour) {
+                    return hour % 12 || 12;
+                },
+                _isEqual: function (a, b) {
+                    return a === b;
+                },
+                _getMediaQuery: function (forceNarrow, responsiveWidth) {
+                    return '(max-width: ' + (forceNarrow ? '' : responsiveWidth) + ')';
+                },
+                _computeNarrow: function () {
+                    this.set('narrow', this._queryMatches || this.forceNarrow);
+                },
+                _viewChanged: function (toView, fromView) {
+                    this.$.pages._notifyPageResize();
+
+                    // prevent the clock-hand transition when selecting, otherwise the
+                    // extra movement would be confusing
+                    if (this._selecting || !fromView || !toView || !this.animated) {
+                        return;
+                    }
+
+                    var clocks = {
+                        'hours': this.$.hourClock,
+                        'minutes': this.$.minuteClock,
+                        'seconds': this.$.secondClock
+                    };
+                    var from = clocks[fromView];
+                    var to = clocks[toView];
+                    var fromAngle = (360 / from.count) * from.selected;
+                    var toAngle = (360 / to.count) * to.selected;
+
+                    // transition both clock hands at the same time
+                    to.setClockHand(fromAngle, false);
+                    from.setClockHand(toAngle);
+
+                    this.async(function () {
+                        to.setClockHand(toAngle, true, function () {
+                            this.async(function () {
+                                from.setClockHand(fromAngle, false);
+                            }, 200);
+                        }.bind(this));
+                    }.bind(this));
+                },
+                _onClockSelected: function (event) {
+                    if (this.view === 'hours') {
+
+                        var showMinutes = function () {
+                            this.async(function () {
+                                this._selecting = true;
+                                this.view = 'minutes';
+                                this._selecting = false;
+                            }.bind(this), 100);
+                            this.$.hourClock.removeEventListener('paper-clock-transition-end', showMinutes);
+                        }.bind(this);
+
+                        if (event.detail.animated) {
+                            this.$.hourClock.addEventListener('paper-clock-transition-end', showMinutes);
+                        } else {
+                            showMinutes();
+                        }
+
+                        if (this.hour12 !== event.detail.value) {
+                            this.hour12 = event.detail.value;
+                        } else {
+                            // show minutes if same hour is selected
+                            showMinutes();
+                        }
+                    } else if (this.view === 'minutes' && this.enableSeconds) {
+
+                        var showSeconds = function () {
+                            this.async(function () {
+                                this._selecting = true;
+                                this.view = 'seconds';
+                                this._selecting = false;
+                            }.bind(this), 100);
+                            this.$.minuteClock.removeEventListener('paper-clock-transition-end', showSeconds);
+                        }.bind(this);
+
+                        if (event.detail.animated) {
+                            this.$.minuteClock.addEventListener('paper-clock-transition-end', showSeconds);
+                        } else {
+                            showSeconds();
+                        }
+
+                        if (this.minute !== event.detail.value) {
+                            this.minute = event.detail.value;
+                        } else {
+                            // show seconds if same minute is selected
+                            showSeconds();
+                        }
+                    }
+                },
+                _resizeHandler: function () {
+                    if (!this.offsetWidth || this._resizing) {
+                        return;
+                    }
+                    this.updateStyles();
+                    this.async(function () {
+                        this._resizing = true;
+                        this.$.pages._notifyPageResize();
+                        this._resizing = false;
+                    }.bind(this));
+                }
+            });
+        })();
+    </script>
+</dom-module>