From d6270f4e87f6ff36cd3968d2f8a8aaf7739aa312 Mon Sep 17 00:00:00 2001
From: Hayden McParlane <hayden.mcparlane@gmail.com>
Date: Thu, 21 Sep 2017 10:05:08 -0500
Subject: [PATCH] Update: converting to hybrid

---
 bower.json                          |  50 +++++++---
 demo/index.html                     |  49 ++++++----
 package.json                        |  43 --------
 paper-clock-selector.html           | 146 ++++++++++++++++------------
 paper-time-picker-dialog-style.html |  48 ++++-----
 paper-time-picker.html              | 125 +++++++++++++-----------
 6 files changed, 243 insertions(+), 218 deletions(-)
 delete mode 100644 package.json

diff --git a/bower.json b/bower.json
index e22dfab..39f23c1 100644
--- a/bower.json
+++ b/bower.json
@@ -20,23 +20,47 @@
     "/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-behavior": "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",
+    "polymer": "Polymer/polymer#^1.9 || ^2.0",
+    "iron-media-query": "PolymerElements/iron-media-query#^1.0 || ^2.0",
+    "iron-selector": "PolymerElements/iron-selector#^1.0 || ^2.0",
+    "neon-animation": "PolymerElements/neon-animation#^1.0 || ^2.0",
+    "iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#^1.0 || ^2.0",
+    "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0 || ^2.0",
+    "paper-styles": "PolymerElements/paper-styles#^1.0 || ^2.0",
+    "iron-pages": "PolymerElements/iron-pages#^1.0 || ^2.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"
+    "iron-component-page": "PolymerElements/iron-component-page#^1.0 || ^2.0",
+    "paper-dialog": "PolymerElements/paper-dialog#^1.0 || ^2.0",
+    "paper-button": "PolymerElements/paper-button#^1.0 || ^2.0",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0"
+  },
+  "variants": {
+    "1.x": {
+      "dependencies": {
+        "polymer": "Polymer/polymer#^1.9",
+        "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-behavior": "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"
+      }
+    }
   },
   "resolutions": {
-    "webcomponentsjs": "^0.7.2"
+    "webcomponentsjs": "^1.0.0"
   }
 }
diff --git a/demo/index.html b/demo/index.html
index 9254a51..6a9948e 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -6,7 +6,7 @@
   <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">
@@ -14,29 +14,38 @@
   <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>
+  <custom-style>
+    <style is="custom-style" include="paper-time-picker-dialog-style">
+      section {
+        margin: 24px;
+      }
+    </style>
+  </custom-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>
+  <dom-bind id="bindElement">
+    <template is="dom-bind" id="templateElement">
+      <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>
+  </dom-bind>
   <script>
     (function() {
-      var scope = document.querySelector('#scope');
+      var scope;
+      if (Polymer.Element) {
+        scope = document.querySelector('#bindElement');
+      } else {
+        scope = document.querySelector('#templateElement');
+      }
       scope.dismissDialog = function(event) {
         if (event.detail.confirmed) {
           scope.time = scope.$.picker.time;
diff --git a/package.json b/package.json
deleted file mode 100644
index 6bf55e2..0000000
--- a/package.json
+++ /dev/null
@@ -1,43 +0,0 @@
-{
-  "name": "paper-time-picker",
-  "version": "1.1.5",
-  "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
index 34bdf7c..ecc5a63 100644
--- a/paper-clock-selector.html
+++ b/paper-clock-selector.html
@@ -16,7 +16,7 @@
 
       :host {
         display: block;
-        @apply(--paper-font-body1);
+        @apply --paper-font-body1;
         -webkit-touch-callout: none;
         -webkit-user-select: none;
         -khtml-user-select: none;
@@ -24,8 +24,8 @@
         -ms-user-select: none;
         user-select: none;
         pointer-events: none;
-        @apply(--layout-horizontal);
-        @apply(--layout-center-center);
+        @apply --layout-horizontal;
+        @apply --layout-center-center;
       }
       #clock {
         display: block;
@@ -64,7 +64,7 @@
       .number text {
         z-index: 3;
         fill: var(--primary-text-color);
-        @apply(--paper-font-subhead);
+        @apply --paper-font-subhead;
         pointer-events: none;
         dominant-baseline: middle;
         text-align: center;
@@ -109,22 +109,22 @@
       var MAX_VISIBLE = 12;
 
       var instanceCount = 0;
-      
+
       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; 
+          offset = -360;
         }
         if ( angle >= 180 && (to <= (angle - 180)) ) {
-          offset = 360; 
+          offset = 360;
         }
         return from + offset + (to - angle);
       }
@@ -136,46 +136,50 @@
             type: Number,
             notify: true,
             value: 0,
-            observer: '_selectedChanged'
+            observer: '_selectedChanged',
           },
           count: {
             type: Number,
-            value: 0
+            value: 0,
           },
           step: {
             type: Number,
             value: 1,
-            observer: '_stepChanged'
+            observer: '_stepChanged',
           },
           useZero: {
             type: Boolean,
-            value: false
+            value: false,
           },
           zeroPad: {
             type: Boolean,
-            value: false
+            value: false,
           },
           animated: {
             type: Boolean,
-            value: false
-          }
-        },
-        listeners: {
-          'iron-resize': '_updateSize'
+            value: false,
+          },
         },
         observers: [
           '_populate(count, step, useZero, _instanceId)',
-          '_zeroPadChanged(zeroPad, _numbers)'
+          '_zeroPadChanged(zeroPad, _numbers)',
         ],
         behaviors: [
-          Polymer.IronResizableBehavior
+          Polymer.IronResizableBehavior,
         ],
         ready: function() {
+          this._updateSize = this._updateSize.bind(this);
           this._currentAngle = 0;
           this._populate();
           this._selectedChanged(this.selected);
           this._instanceId = instanceCount++;
         },
+        attached: function() {
+          this.addEventListener('iron-resize', this._updateSize);
+        },
+        detached: function() {
+          this.removeEventListener('iron-resize', this._updateSize);
+        },
         setClockHand: function(deg, animate, callback) {
           deg = normalizeAngle(deg);
 
@@ -206,12 +210,12 @@
             window.cancelAnimationFrame(this._animationFrame);
           }
 
-          // If the transition is animated, create an animation loop that will 
+          // If the transition is animated, create an animation loop that will
           // gradually increment towards the new angle while refreshing the hand positions
           if (animate) {
             var previousAngle = this._currentAngle;
             var angleDifference = angle - previousAngle;
-          
+
             var animationStart = null;
             var incrementAngle = function(timestamp) {
               if (!animationStart) {
@@ -227,9 +231,12 @@
               // If the animation hasn't completed, request animation of the next frame
               if (animationProgress === 1) {
                 this._animationFrame = null;
-                this.fire('paper-clock-transition-end');
+                this.dispatchEvent(new CustomEvent('paper-clock-transition-end', {
+                  bubbles: true,
+                  composed: true,
+                }));
               } else {
-                  this._animationFrame = window.requestAnimationFrame(incrementAngle);
+                this._animationFrame = window.requestAnimationFrame(incrementAngle);
               }
             }.bind(this);
 
@@ -277,43 +284,45 @@
           this._step = value;
         },
         _populate: function() {
-          delete this._resizedCache;
-          var display, value, number;
-          var $numbers = this.$.numbers;
+          this.debounce('_populate', function() {
+            delete this._resizedCache;
+            var display, value, number;
+            var $numbers = this.$.numbers;
 
-          this.set('_numbers', []);
-          this._stepChanged(this.step);
+            this.set('_numbers', []);
+            this._stepChanged(this.step);
 
-          // remove dom nodes since they'll be re-created
-          while($numbers.firstChild) {
-            $numbers.removeChild($numbers.firstChild);
-          }
+            // remove dom nodes since they'll be re-created
+            while($numbers.firstChild) {
+              $numbers.removeChild($numbers.firstChild);
+            }
 
-          var numbers = [];
+            var numbers = [];
 
-          for (var i=0; i<this.count; i++) {
-            value = i;
-            display = null;
-            if (i === 0 && !this.useZero) {
-              value = this.count;
-            }
+            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();
-          this._updateHandPositions();
+              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();
+            this._updateHandPositions();
+          });
         },
         _updateNumber: function(number) {
           var dom = number.dom;
@@ -421,12 +430,16 @@
           }
         },
         _getSelectArea: function(radius, outer, inner) {
+          // Default these values to avoid failure in Polymer 2.x
+          radius = radius || 1;
+          outer = outer || 1;
+          inner = inner || 1;
           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'+ 
+            '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) {
@@ -453,7 +466,14 @@
 
           /* 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});
+            this.dispatchEvent(new CustomEvent('paper-clock-selected', {
+              detail: {
+                value: this.selected,
+                animated: this.animated,
+              },
+              bubbles: true,
+              composed: true,
+            }));
           }
         },
         _formatNumber: function(value) {
@@ -470,7 +490,7 @@
           return cssClass;
         },
         _zeroPadChanged: function() {
-          this._numbers.forEach(function(number) {
+          (this._numbers || []).forEach(function(number) {
             this._updateNumber(number);
           }.bind(this));
         },
diff --git a/paper-time-picker-dialog-style.html b/paper-time-picker-dialog-style.html
index b104e0d..aae107a 100644
--- a/paper-time-picker-dialog-style.html
+++ b/paper-time-picker-dialog-style.html
@@ -1,39 +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>
+<custom-style>
+  <style is="custom-style">
+  /* mixin definitions */
+  html {
+    --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>
+<custom-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);
+        @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-calendar;
         };
-        @apply(--paper-time-picker-dialog-picker);
+        @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);
+          @apply --paper-time-picker-dialog-heading;
         };
       }
     </style>
diff --git a/paper-time-picker.html b/paper-time-picker.html
index d4803ea..3a96971 100644
--- a/paper-time-picker.html
+++ b/paper-time-picker.html
@@ -46,9 +46,11 @@
 @demo demo/index.html
 -->
 
-<style is="custom-style" include="paper-time-picker-dialog-style">
-  /* include dialog style at document-level for backward compatibility */
-</style>
+<custom-style>
+  <style is="custom-style" include="paper-time-picker-dialog-style">
+    /* include dialog style at document-level for backward compatibility */
+  </style>
+</custom-style>
 
 <dom-module id="paper-time-picker">
   <template>
@@ -66,7 +68,7 @@
         -moz-user-select: none;
         -ms-user-select: none;
         user-select: none;
-        @apply(--paper-font-body1);
+        @apply --paper-font-body1;
         font-size: 14px;
       }
 
@@ -74,14 +76,14 @@
       #timePicker {
         width: 512px;
         height: 304px;
-        @apply(--layout-horizontal);
-        @apply(--paper-time-picker);
+        @apply --layout-horizontal;
+        @apply --paper-time-picker;
       }
       #heading {
         width: 168px;
         padding: 16px;
-        @apply(--layout-vertical);
-        @apply(--paper-time-picker-heading);
+        @apply --layout-vertical;
+        @apply --paper-time-picker-heading;
       }
       :host([enable-seconds]) #heading {
         width: 200px;
@@ -94,21 +96,21 @@
       :host([narrow]) #timePicker {
         width: 328px;
         height: 428px;
-        @apply(--layout-vertical);
+        @apply --layout-vertical;
       }
       :host([narrow]) #heading {
         width: auto;
         height: 96px;
         padding: 0 48px;
-        @apply(--layout-horizontal);
-        @apply(--layout-end-justified);
+        @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);
+        @apply --paper-font-display3;
       }
       :host([narrow]) #timePicker #heading .time {
         font-size: 60px;
@@ -121,24 +123,24 @@
       :host([narrow]) #clockArea {
         /* padding: 30px 20px 10px 20px; */
         padding: 16px;
-        @apply(--paper-time-picker-clock);
+        @apply --paper-time-picker-clock;
       }
 
       /** Heading ********************/
       #heading {
         box-sizing: border-box;
-        color: var(--light-primary-color); 
+        color: var(--light-primary-color);
         background: var(--default-primary-color);
-        @apply(--layout-vertical);
-        @apply(--layout-center-center);
+        @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);
+        @apply --paper-font-display2;
+        @apply --layout-horizontal;
+        @apply --layout-end-justified;
         width: 5.34ex;
         letter-spacing: .13ex !important;
       }
@@ -151,7 +153,7 @@
       }
       #heading .period {
         font-weight: 600;
-        @apply(--paper-font-subhead);
+        @apply --paper-font-subhead;
       }
       #heading .time div,
       #heading .period div {
@@ -162,22 +164,22 @@
       #clockArea {
         background: var(--default-background-color);
         overflow: hidden;
-        @apply(--layout-flex);
-        @apply(--paper-time-picker-clock);
-        @apply(--layout-vertical);
+        @apply --layout-flex;
+        @apply --paper-time-picker-clock;
+        @apply --layout-vertical;
       }
       #clockArea > div {
-        @apply(--layout-flex);
+        @apply --layout-flex;
         position: relative;
       }
       .clock {
-        @apply(--layout-fit);
+        @apply --layout-fit;
       }
       .clock-animatable{
-        @apply(--layout-fit);
+        @apply --layout-fit;
       }
     </style>
-    <iron-media-query query="{{_getMediaQuery(forceNarrow, responsiveWidth)}}" 
+    <iron-media-query query="{{_getMediaQuery(forceNarrow, responsiveWidth)}}"
       query-matches="{{_queryMatches}}"></iron-media-query>
     <div id="timePicker">
       <div id="heading">
@@ -201,16 +203,16 @@
             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> 
+                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> 
+                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> 
+                  animated="[[animated]]" use-zero zero-pad selected="{{second}}"></paper-clock-selector>
               </neon-animatable>
             </template>
           </neon-animated-pages>
@@ -236,7 +238,7 @@
             type: String,
             value: '00:00',
             notify: true,
-            observer: '_timeChanged' 
+            observer: '_timeChanged',
           },
           /**
            * The time value as the number of minutes(if enableSeconds then number of seconds) from midnight
@@ -245,7 +247,7 @@
             type: Number,
             value: 0,
             notify: true,
-            observer: '_rawValueChanged'
+            observer: '_rawValueChanged',
           },
           /**
            * The current 24-hour value (0-24)
@@ -254,7 +256,7 @@
             type: Number,
             observer: '_hourChanged',
             notify: true,
-            value: 0
+            value: 0,
           },
           /**
            * The current 12-hour value (0-12)
@@ -262,7 +264,7 @@
           hour12: {
             type: Number,
             notify: true,
-            observer: '_hour12Changed'
+            observer: '_hour12Changed',
           },
           /**
            * The current minute (0-59)
@@ -271,16 +273,16 @@
             type: Number,
             notify: true,
             observer: '_minuteChanged',
-            value: 0
+            value: 0,
           },
           /**
            * The current second (0-59)
            */
-           second: {
+          second: {
             type: Number,
             notify: true,
             observer: '_secondChanged',
-            value: 0
+            value: 0,
           },
           /**
            * The current period ('AM', 'PM')
@@ -289,7 +291,7 @@
             type: String,
             notify: true,
             observer: '_periodChanged',
-            value: 'AM'
+            value: 'AM',
           },
           /**
            * The current selector view ('hours' or 'minutes')
@@ -298,28 +300,28 @@
             type: String,
             notify: true,
             value: 'hours',
-            observer: '_viewChanged'
+            observer: '_viewChanged',
           },
           /**
            * Maximum screen width at which the picker uses a vertical layout
            */
           responsiveWidth: {
             type: String,
-            value: '560px'
+            value: '560px',
           },
           /**
            * Force narrow layout
            */
           forceNarrow: {
             type: Boolean,
-            value: false
+            value: false,
           },
           /**
            * Whether or not to animate the clock hand between selections
            */
           animated: {
             type: Boolean,
-            value: false
+            value: false,
           },
           narrow: {
             type: Boolean,
@@ -330,32 +332,38 @@
           isTouch: {
             type: Boolean,
             value: false,
-            reflectToAttribute: true
+            reflectToAttribute: true,
           },
           enableSeconds: {
             type: Boolean,
-            value: false
+            value: false,
           },
           _queryMatches: {
             type: Boolean,
             value: false,
-            observer: '_computeNarrow'
-          }
+            observer: '_computeNarrow',
+          },
         },
         behaviors: [
-          Polymer.IronResizableBehavior
+          Polymer.IronResizableBehavior,
         ],
         observers: [
-          '_updateTime(hour, minute, second)'
+          '_updateTime(hour, minute, second, enableSeconds)',
         ],
-        listeners: {
-          'iron-resize': '_resizeHandler',
-          'paper-clock-selected': '_onClockSelected'
-        },
         ready: function() {
+          this._resizeHandler = this._resizeHandler.bind(this);
+          this._onClockSelected = this._onClockSelected.bind(this);
           this.isTouch = 'ontouchstart' in window;
           this.view = 'hours';
         },
+        attached: function() {
+          this.addEventListener('iron-resize', this._resizeHandler);
+          this.addEventListener('paper-clock-selected', this._onClockSelected);
+        },
+        detached: function() {
+          this.removeEventListener('iron-resize', this._resizeHandler);
+          this.removeEventListener('paper-clock-selected', this._onClockSelected);
+        },
         _timeChanged: function(time) {
           if (!time) {
             this.rawValue = 0;
@@ -374,9 +382,15 @@
           }
           this.rawValue = rawValue;
         },
-        _updateTime: function(hour, minute, second) {
+        _updateTime: function(hour, minute, second, enableSeconds) {
+          if (hour === undefined || minute === undefined ||
+            enableSeconds === undefined ||
+            (enableSeconds && second === undefined)) {
+            this.rawValue = 0;
+            return;
+          }
           var rawValue = (hour * 60) + minute;
-          if (this.enableSeconds) {
+          if (enableSeconds) {
             rawValue = (rawValue * 60) + second;
           }
           this.rawValue = rawValue;
@@ -486,7 +500,7 @@
         _viewChanged: function(toView, fromView) {
           this.$.pages._notifyPageResize();
 
-          // prevent the clock-hand transition when selecting, otherwise the 
+          // prevent the clock-hand transition when selecting, otherwise the
           // extra movement would be confusing
           if (this._selecting || !fromView || !toView || !this.animated) {
             return;
@@ -512,7 +526,6 @@
         },
         _onClockSelected: function(event) {
           if (this.view === 'hours') {
-
             var showMinutes = function() {
               this.async(function() {
                 this._selecting = true;