From 3efada3975905238a2539454acdf41911151db3b Mon Sep 17 00:00:00 2001
From: Remi Cattiau <remi@cattiau.com>
Date: Thu, 5 Oct 2017 13:47:10 -0700
Subject: [PATCH] Breaking: upgrading to polymer 2.x

---
 bower.json                  |  40 +-
 package.json                |   2 +-
 paper-calendar.html         | 959 +++++++++++++++++++-----------------
 paper-date-picker.html      | 234 ++++-----
 paper-year-list.html        | 145 +++---
 test/paper-date-picker.html |   3 +-
 6 files changed, 718 insertions(+), 665 deletions(-)

diff --git a/bower.json b/bower.json
index 19588cf..fe6a4fd 100644
--- a/bower.json
+++ b/bower.json
@@ -20,29 +20,25 @@
     "/test/"
   ],
   "dependencies": {
-    "moment-element": "bendavis78/moment-element#^1.1.1",
-    "polymer": "Polymer/polymer#^1.1.0",
-    "iron-icon": "PolymerElements/iron-icon#^1.0.7",
-    "iron-iconset-svg": "PolymerElements/iron-iconset-svg#^1.0.9",
-    "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
-    "iron-media-query": "PolymerElements/iron-media-query#^1.0.0",
-    "iron-resizable": "PolymerElements/iron-resizable-behavior#^1.0.0",
-    "iron-selector": "PolymerElements/iron-selector#^1.0.0",
-    "neon-animation": "PolymerElements/neon-animation#^1.0.0",
-    "paper-ripple": "PolymerElements/paper-ripple#^1.0.5",
-    "paper-styles": "PolymerElements/paper-styles#^1.0.0",
-    "paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0",
-    "iron-list": "PolymerElements/iron-list#^1.2.8"
+    "moment-element": "MaritzSTL/moment-imports#^1.1.0",
+    "polymer": "Polymer/polymer#^2.0.0",
+    "iron-icon": "PolymerElements/iron-icon#^2.0.0",
+    "iron-iconset-svg": "PolymerElements/iron-iconset-svg#^2.0.0",
+    "iron-flex-layout": "PolymerElements/iron-flex-layout#^2.0.0",
+    "iron-media-query": "PolymerElements/iron-media-query#^2.0.0",
+    "iron-resizable": "PolymerElements/iron-resizable-behavior#^2.0.0",
+    "iron-selector": "PolymerElements/iron-selector#^2.0.0",
+    "neon-animation": "PolymerElements/neon-animation#^2.0.0",
+    "paper-ripple": "PolymerElements/paper-ripple#^2.0.0",
+    "paper-styles": "PolymerElements/paper-styles#^2.0.0",
+    "paper-icon-button": "PolymerElements/paper-icon-button#^2.0.0",
+    "iron-list": "PolymerElements/iron-list#^2.0.8"
   },
   "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",
-    "web-component-tester": "Polymer/web-component-tester#^4.2.2"
-  },
-  "resolutions": {
-    "polymer": "^1.0.0",
-    "webcomponentsjs": "^0.7.2"
+    "iron-component-page": "PolymerElements/iron-component-page#^2.0.0",
+    "paper-dialog": "PolymerElements/paper-dialog#^2.0.0",
+    "paper-button": "PolymerElements/paper-button#^2.0.0",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0",
+    "web-component-tester": "Polymer/web-component-tester#^5.0.0"
   }
 }
diff --git a/package.json b/package.json
index d0a0eea..ce24fb4 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
     "merge-stream": "^0.1.8",
     "portfinder": "^0.4.0",
     "vinyl-paths": "^1.0.0",
-    "web-component-tester": "^3.3.3"
+    "web-component-tester": "^5.0.0"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
diff --git a/paper-calendar.html b/paper-calendar.html
index 1b6d8a2..b493910 100644
--- a/paper-calendar.html
+++ b/paper-calendar.html
@@ -7,7 +7,7 @@
 <link rel="import" href="../paper-styles/shadow.html">
 <link rel="import" href="../paper-styles/typography.html">
 <link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">
-<link rel="import" href="../moment-element/moment-import.html">
+<link rel="import" href="../moment-element/moment.html">
 <link rel="import" href="paper-date-picker-icons.html">
 
 <dom-module id="paper-calendar">
@@ -227,506 +227,555 @@
     </div>
   </template>
   <script>
-    (function() {
-
-    // Ignore movement within this distance (px)
-    var WIGGLE_THRESHOLD = 4;
-    var WIGGLE_THRESHOLD_SQUARE = WIGGLE_THRESHOLD * WIGGLE_THRESHOLD;
-
-    // what constitues a flick (px/ms)
-    var FLICK_SPEED = 0.5;
-
-    // Factor for "springy" resistence effect when swiping too far.
-    var RESIST_LENGTH = 40;
-    var RESIST_FACTOR = 2;
-
-    // Number of months to preload on both sides of the current month
-    var PRELOAD_MONTHS = 1;
-
-    function dateDiff(a, b) {
-      a = new Date(a.getTime());
-      b = new Date(b.getTime());
-      a.setHours(0, 0, 0, 0);
-      b.setHours(0, 0, 0, 0);
-      return (a.getTime() - b.getTime()) / 86400000;
-    }
-
-    Polymer({
-      is: 'paper-calendar',
-      properties: {
-        /*
-         * The selected date
-         */
-        date: {
-          type: Date,
-          notify: true,
-          value: function() {
-            return new Date();
-          },
-          observer: '_dateChanged'
-        },
-        /**
-         * The current locale
-         */
-        locale: {
-          type: String,
-          value: 'en',
-          notify: true,
-          observer: '_localeChanged'
-        },
-        /**
-         * The minimum allowed date
-         */
-        minDate: {
-          type: Date,
-          value: null
-        },
-        /**
-         * The maximum allowed date
-         */
-        maxDate: {
-          type: Date,
-          value: null
-        },
-        /**
-         * The currently selected month (1-12)
-         */
-        currentMonth: {
-          type: Number
-        },
-        /**
-         * The currently selected year
-         */
-        currentYear: {
-          type: Number
-        },
-        _contentClass: String,
-        _months: Array,
-        _firstDayOfWeek: Number,
-      },
-      behaviors: [
-        Polymer.IronResizableBehavior
-      ],
-      observers: [
-        '_populate(currentYear, currentMonth, minDate, maxDate, locale)',
-      ],
-      listeners: {
-        'iron-resize': '_resizeHandler',
-        'swiped': '_onSwipe'
-      },
-      ready: function() {
-        this._updateToday();
-        this.currentMonth = this.date.getMonth() + 1;
-        this.currentYear = this.date.getFullYear();
-        this._transitionEvent = this._whichTransitionEnd();
-      },
-      dateFormat: function(date, format, locale) {
-        if (!date) {
-          return '';
-        }
-        var value = moment(date);
-        value.locale(locale || this.locale);
-        return value.format(format);
-      },
-      _localeChanged: function(locale) {
-        var localeMoment = moment();
-        localeMoment.locale(locale);
-        var weekdays = [];
-        for (var i=0; i<7; i++) {
-          weekdays.push(localeMoment.weekday(i).format('dd'));
-        }
-        this._weekdays = weekdays;
-        this._firstDayOfWeek = localeMoment.weekday(0).format('d');
-      },
-      _populate: function(currentYear, currentMonth, minDate, maxDate) {
-        var date, month, weeks, day, d, dayInfo, monthData, months = [];
-
-        // Make sure currentYear/currentMonth are in min/max range
-        if (minDate && new Date(currentYear, currentMonth, 0) < minDate) {
-          this.currentYear = minDate.getFullYear();
-          this.currentMonth = minDate.getMonth() + 1;
-          return;
-        } else if (maxDate && new Date(currentYear, currentMonth - 1, 1) > maxDate) {
-          this.currentYear = maxDate.getFullYear();
-          this.currentMonth = maxDate.getMonth() + 1;
-          return;
-        }
-
-        for (var i=-PRELOAD_MONTHS; i<=PRELOAD_MONTHS; i++) {
-          weeks = [[]];
-          day = 1;
-          date = new Date(currentYear, currentMonth - 1 + i, 1);
-          month = date.getMonth();
-          monthData = {
-            year: date.getFullYear(),
-            month: date.getMonth() + 1,
-            date: new Date(date)
+    (() => {
+      // Ignore movement within this distance (px)
+      const WIGGLE_THRESHOLD = 4;
+      const WIGGLE_THRESHOLD_SQUARE = WIGGLE_THRESHOLD * WIGGLE_THRESHOLD;
+
+      // what constitues a flick (px/ms)
+      const FLICK_SPEED = 0.5;
+
+      // Factor for "springy" resistence effect when swiping too far.
+      const RESIST_LENGTH = 40;
+      const RESIST_FACTOR = 2;
+
+      // Number of months to preload on both sides of the current month
+      const PRELOAD_MONTHS = 1;
+
+      function dateDiff(a, b) {
+        a = new Date(a.getTime());
+        b = new Date(b.getTime());
+        a.setHours(0, 0, 0, 0);
+        b.setHours(0, 0, 0, 0);
+        return (a.getTime() - b.getTime()) / 86400000;
+      }
+
+      class PaperCalendar extends Polymer.mixinBehaviors([Polymer.IronResizableBehavior], Polymer.Element) {
+        static get is() {
+          return 'paper-calendar';
+        }
+
+        static get properties() {
+          return {
+            /*
+           * The selected date
+           */
+            date: {
+              type: Date,
+              notify: true,
+              value() {
+                return new Date();
+              },
+              observer: '_dateChanged'
+            },
+            /**
+             * The current locale
+             */
+            locale: {
+              type: String,
+              value: 'en',
+              notify: true,
+              observer: '_localeChanged'
+            },
+            /**
+             * The minimum allowed date
+             */
+            minDate: {
+              type: Date,
+              value: null
+            },
+            /**
+             * The maximum allowed date
+             */
+            maxDate: {
+              type: Date,
+              value: null
+            },
+            /**
+             * The currently selected month (1-12)
+             */
+            currentMonth: {
+              type: Number
+            },
+            /**
+             * The currently selected year
+             */
+            currentYear: {
+              type: Number
+            },
+            _contentClass: String,
+            _months: Array,
+            _firstDayOfWeek: Number
           };
+        }
+
+        static get observers() {
+          return [
+            '_populate(currentYear, currentMonth, minDate, maxDate, locale)'
+          ]
+        }
+
+        ready() {
+          super.ready();
+          this._resizeHandler = this._resizeHandler.bind(this);
+          this._onSwipe= this._onSwipe.bind(this);
+          this._updateToday();
+          this.currentMonth = this.date.getMonth() + 1;
+          this.currentYear = this.date.getFullYear();
+          this._transitionEvent = this._whichTransitionEnd();
+        }
+
+        connectedCallback() {
+          super.connectedCallback();
+          this.addEventListener('iron-resize', this._resizeHandler);
+          this.addEventListener('swiped', this._onSwipe);
+        }
+
+        disconnectedCallback() {
+          super.disconnectedCallback();
+          this.removeEventListener('iron-resize', this._resizeHandler);
+          this.removeEventListener('swiped', this._onSwipe);
+        }
 
-          if (!this._monthWithinValidRange(monthData.year, monthData.month)) {
-            continue;
+        dateFormat(date, format, locale) {
+          if (!date) {
+            return '';
           }
+          var value = moment(date);
+          value.locale(locale || this.locale);
+          return value.format(format);
+        }
 
-          // add "padding" days
-          var firstDay = date.getDay() - this._firstDayOfWeek;
-          if (firstDay < 0) {
-            firstDay = 7 + firstDay;
+        _localeChanged(locale) {
+          var localeMoment = moment();
+          localeMoment.locale(locale);
+          var weekdays = [];
+          for (var i = 0; i < 7; i++) {
+            weekdays.push(localeMoment.weekday(i).format('dd'));
           }
-          for (d=0; d<firstDay; d++) {
-            weeks[0].push({day: null, date: null});
+          this._weekdays = weekdays;
+          this._firstDayOfWeek = localeMoment.weekday(0).format('d');
+        }
+
+        _populate(currentYear, currentMonth, minDate, maxDate) {
+          var date, month, weeks, day, d, dayInfo, monthData, months = [];
+
+          // Make sure currentYear/currentMonth are in min/max range
+          if (minDate && new Date(currentYear, currentMonth, 0) < minDate) {
+            this.currentYear = minDate.getFullYear();
+            this.currentMonth = minDate.getMonth() + 1;
+            return;
+          } else if (maxDate && new Date(currentYear, currentMonth - 1, 1) > maxDate) {
+            this.currentYear = maxDate.getFullYear();
+            this.currentMonth = maxDate.getMonth() + 1;
+            return;
           }
 
-          // add actual days
-          while (date.getMonth() === month) {
-            if (weeks[0].length && d % 7 === 0) {
-              // start new week
-              weeks.push([]);
-            }
-            dayInfo = {
-              date: new Date(date.getFullYear(), month, day),
-              name: this.dateFormat(date,'YYYY-MM-DD'),
-              year: currentYear,
-              month: month,
-              day: day,
+          for (var i = -PRELOAD_MONTHS; i <= PRELOAD_MONTHS; i++) {
+            weeks = [[]];
+            day = 1;
+            date = new Date(currentYear, currentMonth - 1 + i, 1);
+            month = date.getMonth();
+            monthData = {
+              year: date.getFullYear(),
+              month: date.getMonth() + 1,
+              date: new Date(date)
             };
-            weeks[weeks.length-1].push(dayInfo);
-            date.setDate(++day);
-            d++;
-          }
 
-          // add remaining "padding" days
-          while (d < 42) {
-            if (d % 7 === 0) {
-              weeks.push([]);
+            if (!this._monthWithinValidRange(monthData.year, monthData.month)) {
+              continue;
+            }
+
+            // add "padding" days
+            var firstDay = date.getDay() - this._firstDayOfWeek;
+            if (firstDay < 0) {
+              firstDay = 7 + firstDay;
+            }
+            for (d = 0; d < firstDay; d++) {
+              weeks[0].push({day: null, date: null});
             }
-            weeks[weeks.length-1].push({day: null, date: null});
-            d += 1;
-          }
 
-          monthData.weeks = weeks;
-          months.push(monthData);
+            // add actual days
+            while (date.getMonth() === month) {
+              if (weeks[0].length && d % 7 === 0) {
+                // start new week
+                weeks.push([]);
+              }
+              dayInfo = {
+                date: new Date(date.getFullYear(), month, day),
+                name: this.dateFormat(date, 'YYYY-MM-DD'),
+                year: currentYear,
+                month: month,
+                day: day,
+              };
+              weeks[weeks.length - 1].push(dayInfo);
+              date.setDate(++day);
+              d++;
+            }
+
+            // add remaining "padding" days
+            while (d < 42) {
+              if (d % 7 === 0) {
+                weeks.push([]);
+              }
+              weeks[weeks.length - 1].push({day: null, date: null});
+              d += 1;
+            }
+
+            monthData.weeks = weeks;
+            months.push(monthData);
 
-        }
-        if (!months.length) {
-          return;
-        }
-        this.set('_months', months);
-        this.async(function() {
-          this._updateSelection();
-          this._positionSlider();
-        });
-      },
-      _getDayClass: function(cssClass, date) {
-        if (date) {
-          if (dateDiff(date, this.today) === 0) {
-            cssClass += ' today';
           }
-          if (dateDiff(date, this.date) === 0) {
-            cssClass += ' selected';
-            this.async(function() {
-              this._updateSelection();
-            });
+          if (!months.length) {
+            return;
           }
+          this.set('_months', months);
+          this.async(function () {
+            this._updateSelection();
+            this._positionSlider();
+          });
         }
-        return cssClass;
-      },
-      _isDisabled: function(day, date) {
-        return !day || !this._withinValidRange(date);
-      },
-      _getMonthClass: function(name, month) {
-        return name + ' month-' + month.year + '-' + month.month;
-      },
-      _onTrack: function(event) {
-        var dx = event.detail.dx;
-        var dy = event.detail.dy;
-        var adx = Math.abs(dx);
-        var ady = Math.abs(dy);
-        var width = this._containerWidth;
-
-        switch (event.detail.state) {
-          case 'start':
-            this._trackStartTime = (new Date()).getTime();
-            this._startPos = this._currentPos;
-            this._moveQueue = [];
-          break;
-
-          case 'track':
-            if (this._moveQueue.length >= 4) {
-              this._moveQueue.shift();
-            }
-            this._moveQueue.push(event);
 
-            // ignore movement within WIGGLE_THRESHOLD
-            var distance = (dx * dx) + (dy * dy);
-            if (!this._gesture && distance > WIGGLE_THRESHOLD_SQUARE) {
-              this._gesture = adx > ady ? 'pan-x' : 'pan-y';
+        _getDayClass(cssClass, date) {
+          if (date) {
+            if (dateDiff(date, this.today) === 0) {
+              cssClass += ' today';
             }
-
-            // only drag during pan-x gesture
-            if (this._gesture !== 'pan-x') {
-              return;
+            if (dateDiff(date, this.date) === 0) {
+              cssClass += ' selected';
+              this.async(function () {
+                this._updateSelection();
+              });
             }
+          }
+          return cssClass;
+        }
+
+        _isDisabled(day, date) {
+          return !day || !this._withinValidRange(date);
+        }
+
+        _getMonthClass(name, month) {
+          return name + ' month-' + month.year + '-' + month.month;
+        }
+
+        _onTrack(event) {
+          var dx = event.detail.dx;
+          var dy = event.detail.dy;
+          var adx = Math.abs(dx);
+          var ady = Math.abs(dy);
+          var width = this._containerWidth;
 
-            this._dragging = true;
-            var fullWidth = width * this._months.length;
-            var x = this._startPos + dx;
+          switch (event.detail.state) {
+            case 'start':
+              this._trackStartTime = (new Date()).getTime();
+              this._startPos = this._currentPos;
+              this._moveQueue = [];
+              break;
 
-            // If we're dragging outside the bounds, add some resistence
-            if (x > 0 || x < (-fullWidth + width)) {
-              if (isNaN(parseInt(this._resistStart, 10))) {
-                this._resistStart = adx;
+            case 'track':
+              if (this._moveQueue.length >= 4) {
+                this._moveQueue.shift();
               }
-              var rdx = adx - this._resistStart;
-              var p, d, max = RESIST_LENGTH;
-              p = rdx > width ? 1 : rdx / width;
-              d = max * (1 - Math.pow(1 - p, RESIST_FACTOR));
-              x = (dx < 0 ? -this._scrollWidth + width - d : d);
-            } else {
-              this._resistStart = null;
-            }
-            this._translateX(x);
-          break;
-
-          case 'end':
-            this._resistStart = null;
-            var lastIdx = this._getMonthIdx(this._startPos);
-            var idx = this._getMonthIdx(this._currentPos);
-            var speed = this._getFastestMovement(event).v;
-            var move = idx !== lastIdx || speed > FLICK_SPEED;
-            if (!this._resistStart && this._gesture === 'pan-x' && move) {
-              if (speed > FLICK_SPEED) {
-                // calculate an ideal transition duration based on current speed of swipe
-                var remainingDistance = width - adx;
-                var newDuration = remainingDistance / speed;
-                if (newDuration > 300) {
-                  newDuration = 300;
+              this._moveQueue.push(event);
+
+              // ignore movement within WIGGLE_THRESHOLD
+              var distance = (dx * dx) + (dy * dy);
+              if (!this._gesture && distance > WIGGLE_THRESHOLD_SQUARE) {
+                this._gesture = adx > ady ? 'pan-x' : 'pan-y';
+              }
+
+              // only drag during pan-x gesture
+              if (this._gesture !== 'pan-x') {
+                return;
+              }
+
+              this._dragging = true;
+              var fullWidth = width * this._months.length;
+              var x = this._startPos + dx;
+
+              // If we're dragging outside the bounds, add some resistence
+              if (x > 0 || x < (-fullWidth + width)) {
+                if (isNaN(parseInt(this._resistStart, 10))) {
+                  this._resistStart = adx;
                 }
-                this._transitionDuration = newDuration;
+                var rdx = adx - this._resistStart;
+                var p, d, max = RESIST_LENGTH;
+                p = rdx > width ? 1 : rdx / width;
+                d = max * (1 - Math.pow(1 - p, RESIST_FACTOR));
+                x = (dx < 0 ? -this._scrollWidth + width - d : d);
+              } else {
+                this._resistStart = null;
               }
+              this._translateX(x);
+              break;
 
-              if (dx > 0) {
-                this._swipePrevMonth();
+            case 'end':
+              this._resistStart = null;
+              var lastIdx = this._getMonthIdx(this._startPos);
+              var idx = this._getMonthIdx(this._currentPos);
+              var speed = this._getFastestMovement(event).v;
+              var move = idx !== lastIdx || speed > FLICK_SPEED;
+              if (!this._resistStart && this._gesture === 'pan-x' && move) {
+                if (speed > FLICK_SPEED) {
+                  // calculate an ideal transition duration based on current speed of swipe
+                  var remainingDistance = width - adx;
+                  var newDuration = remainingDistance / speed;
+                  if (newDuration > 300) {
+                    newDuration = 300;
+                  }
+                  this._transitionDuration = newDuration;
+                }
+
+                if (dx > 0) {
+                  this._swipePrevMonth();
+                } else {
+                  this._swipeNextMonth();
+                }
               } else {
-                this._swipeNextMonth();
+                this._translateX(this._startPos, 'reset');
               }
-            } else {
-              this._translateX(this._startPos, 'reset');
-            }
-            this._gesture = null;
-        }
-      },
-      _swipePrevMonth: function() {
-        this.fire('swipe-start', {direction: 'right'});
-        this._translateX(0, 'swipe', function() {
-          this.set('_contentClass', '');
-          this.transform('translateX(' + this._startPos + 'px)', this.$.months);
-          this.fire('swiped', {direction: 'right'});
-        }.bind(this));
-      },
-      _swipeNextMonth: function() {
-        if (!this.maxDate || this.currentYear < this.maxDate.getFullYear() || this.currentMonth < this.maxDate.getMonth() + 1) {
-          this._translateX(-this._containerWidth * 2, 'swipe', function() {
+              this._gesture = null;
+          }
+        }
+
+        _swipePrevMonth() {
+          this.fire('swipe-start', {direction: 'right'});
+          this._translateX(0, 'swipe', function () {
             this.set('_contentClass', '');
             this.transform('translateX(' + this._startPos + 'px)', this.$.months);
-            this.fire('swiped', {direction: 'left'});
+            this.fire('swiped', {direction: 'right'});
           }.bind(this));
         }
-      },
-      _getMonthIdx: function(pos) {
-        // returns the index for the visible month according to the given position
-        var width = this._containerWidth;
-        var i = Math.floor((-pos + (width/2)) / width);
-        return i < 0 ? 0 : i;
-      },
-      _translateX: function(x, transition, cb) {
-        if (isNaN(parseInt(x, 10))) {
-          throw new Error('Not a number: ' + x);
-        }
-        this._currentPos = x;
-        if (transition) {
-          if (this._transitionDuration) {
-            this.$.months.style.transitionDuration = this._transitionDuration + 'ms';
+
+        _swipeNextMonth() {
+          if (!this.maxDate || this.currentYear < this.maxDate.getFullYear() || this.currentMonth < this.maxDate.getMonth() + 1) {
+            this._translateX(-this._containerWidth * 2, 'swipe', function () {
+              this.set('_contentClass', '');
+              this.transform('translateX(' + this._startPos + 'px)', this.$.months);
+              this.fire('swiped', {direction: 'left'});
+            }.bind(this));
           }
-          this._once(this._transitionEvent, function() {
-            this.set('_contentClass', '');
-            this.$.months.style.transitionDuration = '';
-            this._transitionDuration = null;
-            this.$.monthNav.style.removeProperty('opacity');
-            if (cb) {
-              cb();
+        }
+
+        _getMonthIdx(pos) {
+          // returns the index for the visible month according to the given position
+          var width = this._containerWidth;
+          var i = Math.floor((-pos + (width / 2)) / width);
+          return i < 0 ? 0 : i;
+        }
+
+        _translateX(x, transition, cb) {
+          if (isNaN(parseInt(x, 10))) {
+            throw new Error('Not a number: ' + x);
+          }
+          this._currentPos = x;
+          if (transition) {
+            if (this._transitionDuration) {
+              this.$.months.style.transitionDuration = this._transitionDuration + 'ms';
             }
-          }.bind(this), this.$.months);
-          this.set('_contentClass', 'animating ' + transition);
-          this.$.monthNav.style.removeProperty('opacity');
-          // Fixes odd bug in chrome where we lose touch-events after changing opacity
-          this._once('touchstart', function() {});
-        }
-        window.requestAnimationFrame(function() {
-          if (!transition) {
-            var halfWidth = this._containerWidth / 2;
-            var dx = Math.abs(this._startPos - x);
-            var p = (1 - (dx / halfWidth)) * 100;
-            p = (100 - Math.pow(p, 2)) / 100 / 100;
-            var opacity = Math.abs(parseFloat(p).toFixed(2));
-            this.$.monthNav.style.opacity = opacity;
+            this._once(this._transitionEvent, function () {
+              this.set('_contentClass', '');
+              this.$.months.style.transitionDuration = '';
+              this._transitionDuration = null;
+              this.$.monthNav.style.removeProperty('opacity');
+              if (cb) {
+                cb();
+              }
+            }.bind(this), this.$.months);
+            this.set('_contentClass', 'animating ' + transition);
+            this.$.monthNav.style.removeProperty('opacity');
+            // Fixes odd bug in chrome where we lose touch-events after changing opacity
+            this._once('touchstart', function () {
+            });
           }
-          this.transform('translateX(' + x + 'px)', this.$.months);
-        }.bind(this));
-      },
-      _getFastestMovement: function(event) {
-        // detect flick based on fastest segment of movement
-        var l = this._moveQueue.length;
-        var dt, tx, ty, tv2, x = 0, y = 0, v2 = 0;
-        for (var i = 0, m; i < l && (m = this._moveQueue[i]); i++) {
-          dt = event.timeStamp - m.timeStamp;
-          tx = (event.detail.x - m.detail.x) / dt;
-          ty = (event.detail.y - m.detail.y) / dt;
-          tv2 = tx * tx + ty * ty;
-          if (tv2 > v2) {
-            x = tx;
-            y = ty;
-            v2 = tv2;
+          window.requestAnimationFrame(function () {
+            if (!transition) {
+              var halfWidth = this._containerWidth / 2;
+              var dx = Math.abs(this._startPos - x);
+              var p = (1 - (dx / halfWidth)) * 100;
+              p = (100 - Math.pow(p, 2)) / 100 / 100;
+              var opacity = Math.abs(parseFloat(p).toFixed(2));
+              this.$.monthNav.style.opacity = opacity;
+            }
+            this.transform('translateX(' + x + 'px)', this.$.months);
+          }.bind(this));
+        }
+
+        _getFastestMovement(event) {
+          // detect flick based on fastest segment of movement
+          var l = this._moveQueue.length;
+          var dt, tx, ty, tv2, x = 0, y = 0, v2 = 0;
+          for (var i = 0, m; i < l && (m = this._moveQueue[i]); i++) {
+            dt = event.timeStamp - m.timeStamp;
+            tx = (event.detail.x - m.detail.x) / dt;
+            ty = (event.detail.y - m.detail.y) / dt;
+            tv2 = tx * tx + ty * ty;
+            if (tv2 > v2) {
+              x = tx;
+              y = ty;
+              v2 = tv2;
+            }
           }
+          return {x: x, y: y, v: Math.sqrt(v2)};
         }
-        return {x: x, y: y, v: Math.sqrt(v2)};
-      },
-      _onSwipe: function(event) {
-        if (event.detail.direction === 'right') {
-          this._prevMonth();
-        } else {
-          this._nextMonth();
-        }
-      },
-      _once: function(eventName, callback, node) {
-        node = node || this;
-        function onceCallback() {
-          node.removeEventListener(eventName, onceCallback);
-          callback.apply(null, arguments);
-        }
-        node.addEventListener(eventName, onceCallback);
-      },
-      _incrMonth: function(i) {
-        var date = new Date(this.currentYear, this.currentMonth - 1 + i);
-        var year = date.getFullYear();
-        var month = date.getMonth() + 1;
-        if (this._monthWithinValidRange(year, month)) {
-          this.currentYear = year;
-          this.currentMonth = month;
-        }
-      },
-      _prevMonth: function() {
-        this._incrMonth(-1);
-      },
-      _nextMonth: function() {
-        this._incrMonth(1);
-      },
-      _dateChanged: function(date, oldValue) {
-        if (!this._isValidDate(date)) {
-          console.warn('Invalid date: ' + date);
-          this.date = date = oldValue;
-        }
-        if (!this._withinValidRange(date)) {
-          console.warn('Date outside of valid range: ' + date);
-          if(date.getFullYear() == this.maxDate.getFullYear()) {
-            this.date = this.maxDate;
-          } else if(date.getFullYear() == this.minDate.getFullYear()){
-            this.date = this.minDate;
+
+        _onSwipe(event) {
+          if (event.detail.direction === 'right') {
+            this._prevMonth();
           } else {
+            this._nextMonth();
+          }
+        }
+
+        _once(eventName, callback, node) {
+          node = node || this;
+
+          function onceCallback() {
+            node.removeEventListener(eventName, onceCallback);
+            callback.apply(null, arguments);
+          }
+
+          node.addEventListener(eventName, onceCallback);
+        }
+
+        _incrMonth(i) {
+          var date = new Date(this.currentYear, this.currentMonth - 1 + i);
+          var year = date.getFullYear();
+          var month = date.getMonth() + 1;
+          if (this._monthWithinValidRange(year, month)) {
+            this.currentYear = year;
+            this.currentMonth = month;
+          }
+        }
+
+        _prevMonth() {
+          this._incrMonth(-1);
+        }
+
+        _nextMonth() {
+          this._incrMonth(1);
+        }
+
+        _dateChanged(date, oldValue) {
+          if (!this._isValidDate(date)) {
+            console.warn('Invalid date: ' + date);
             this.date = date = oldValue;
           }
+          if (!this._withinValidRange(date)) {
+            console.warn('Date outside of valid range: ' + date);
+            if (date.getFullYear() == this.maxDate.getFullYear()) {
+              this.date = this.maxDate;
+            } else if (date.getFullYear() == this.minDate.getFullYear()) {
+              this.date = this.minDate;
+            } else {
+              this.date = date = oldValue;
+            }
+          }
+          this.currentYear = date.getFullYear();
+          this.currentMonth = date.getMonth() + 1;
+          // Only trigger a notification if there actually is a difference.
+          if (oldValue && date.getTime && oldValue.getTime && date.getTime() === oldValue.getTime()) {
+            return;
+          }
+          this._updateSelection();
+        }
+
+        _tapDay(event) {
+          if (!this._withinValidRange(event.model.item.date)) {
+            return false;
+          }
+          var item = event.model.item;
+          var newDate = new Date(this.date.getTime());
+          newDate.setDate(1);
+          newDate.setYear(item.year);
+          newDate.setMonth(item.month);
+          newDate.setDate(item.day);
+          newDate.setHours(0, 0, 0, 0);
+          this.date = newDate;
         }
-        this.currentYear = date.getFullYear();
-        this.currentMonth = date.getMonth() + 1;
-        // Only trigger a notification if there actually is a difference.
-        if (oldValue && date.getTime && oldValue.getTime && date.getTime() === oldValue.getTime()) {
-          return;
+
+        _isValidDate(date) {
+          return date && date.getTime && !isNaN(date.getTime());
         }
-        this._updateSelection();
-      },
-      _tapDay: function(event) {
-        if (!this._withinValidRange(event.model.item.date)) {
+
+        _withinValidRange(date) {
+          if (this._isValidDate(date)) {
+            return (!this.minDate || date >= this.minDate) && (!this.maxDate || date <= this.maxDate);
+          }
           return false;
         }
-        var item = event.model.item;
-        var newDate = new Date(this.date.getTime());
-        newDate.setDate(1);
-        newDate.setYear(item.year);
-        newDate.setMonth(item.month);
-        newDate.setDate(item.day);
-        newDate.setHours(0,0,0,0);
-        this.date = newDate;
-      },
-      _isValidDate: function(date) {
-        return date && date.getTime && !isNaN(date.getTime());
-      },
-      _withinValidRange: function(date) {
-        if (this._isValidDate(date)) {
-          return (!this.minDate || date >= this.minDate) && (!this.maxDate || date <= this.maxDate);
-        }
-        return false;
-      },
-      _monthWithinValidRange: function(year, month) {
-        var monthStart = new Date(year, month-1, 1);
-        var monthEnd = new Date(year, month, 0);
-        return this._withinValidRange(monthStart) || this._withinValidRange(monthEnd);
-      },
-      _positionSlider: function() {
-        if (!this._months || !this._containerWidth) {
-          return;
-        }
-        this._scrollWidth = (this.$.calendar.offsetWidth * this._months.length);
-        this.$.months.style.minWidth = this._scrollWidth + 'px';
-        var i = ((this.currentYear * 12) + this.currentMonth) -
-                 ((this._months[0].year * 12) + this._months[0].month);
-        this._translateX(-i * this._containerWidth);
-      },
-      _updateSelection: function() {
-        // Force the day selection circle to maintain a 1:1 ratio
-        var selected = this.$$('.day-item.selected');
-        if (!selected) {
-          return;
-        }
-        selected.style.height = '';
-        selected.style.width = '';
-        var w = selected.parentElement.offsetWidth;
-        var h = selected.parentElement.offsetHeight;
-        selected.style.flex = '';
-        window.requestAnimationFrame(function() {
-          if (w > 0 && w < h) {
-            selected.style.height = w + 'px';
+
+        _monthWithinValidRange(year, month) {
+          var monthStart = new Date(year, month - 1, 1);
+          var monthEnd = new Date(year, month, 0);
+          return this._withinValidRange(monthStart) || this._withinValidRange(monthEnd);
+        }
+
+        _positionSlider() {
+          if (!this._months || !this._containerWidth) {
+            return;
           }
-          else if (h > 0) {
-            selected.style.width = h + 'px';
+          this._scrollWidth = (this.$.calendar.offsetWidth * this._months.length);
+          this.$.months.style.minWidth = this._scrollWidth + 'px';
+          var i = ((this.currentYear * 12) + this.currentMonth) -
+            ((this._months[0].year * 12) + this._months[0].month);
+          this._translateX(-i * this._containerWidth);
+        }
+
+        _updateSelection() {
+          // Force the day selection circle to maintain a 1:1 ratio
+          var selected = this.shadowRoot.querySelector('.day-item.selected');
+          if (!selected) {
+            return;
           }
-        });
-      },
-      _resizeHandler: function() {
-        this._containerWidth = this.$.calendar.offsetWidth;
-        this._positionSlider();
-        this._updateSelection();
-      },
-      _getDayName: function(date) {
-        return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
-      },
-      _updateToday: function() {
-        this.today = new Date();
-        this.today.setHours(0, 0, 0, 0);
-      },
-      _whichTransitionEnd: function() {
-        var transitions = {
-          'WebkitTransition' : 'webkitTransitionEnd',
-          'MozTransition'    : 'transitionend',
-          'OTransition'      : 'oTransitionEnd otransitionend',
-          'transition'       : 'transitionend'
-        };
-
-        for (var t in transitions) {
-          if (this.style[t] !== undefined){
-            return transitions[t];
+          selected.style.height = '';
+          selected.style.width = '';
+          var w = selected.parentElement.offsetWidth;
+          var h = selected.parentElement.offsetHeight;
+          selected.style.flex = '';
+          window.requestAnimationFrame(function () {
+            if (w > 0 && w < h) {
+              selected.style.height = w + 'px';
+            }
+            else if (h > 0) {
+              selected.style.width = h + 'px';
+            }
+          });
+        }
+
+        _resizeHandler() {
+          this._containerWidth = this.$.calendar.offsetWidth;
+          this._positionSlider();
+          this._updateSelection();
+        }
+
+        _getDayName(date) {
+          return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
+        }
+
+        _updateToday() {
+          this.today = new Date();
+          this.today.setHours(0, 0, 0, 0);
+        }
+
+        _whichTransitionEnd() {
+          var transitions = {
+            'WebkitTransition': 'webkitTransitionEnd',
+            'MozTransition': 'transitionend',
+            'OTransition': 'oTransitionEnd otransitionend',
+            'transition': 'transitionend'
+          };
+
+          for (var t in transitions) {
+            if (this.style[t] !== undefined) {
+              return transitions[t];
+            }
           }
         }
       }
-    });
-   })();
+
+      window.customElements.define(PaperCalendar.is, PaperCalendar);
+    })();
   </script>
 </dom-module>
diff --git a/paper-date-picker.html b/paper-date-picker.html
index abf6c5b..f172958 100644
--- a/paper-date-picker.html
+++ b/paper-date-picker.html
@@ -171,105 +171,110 @@
     </div>
   </template>
   <script>
-
-    Polymer({
-      is: 'paper-date-picker',
-      properties: {
-        /**
-         * The selected date (YYYY-MM-DD)
-         */
-        date: {
-          type: Date,
-          notify: true
-        },
-        /**
-         * Maximum screen width at which the picker uses a vertical layout
-         */
-        responsiveWidth: {
-          type: String,
-          value: '560px'
-        },
-        /**
-         * The current locale
-         */
-        locale: {
-          type: String,
-          value: 'en'
-        },
-        /**
-         * The format of the date displayed in the heading.
-         * See docuemntation for Moment.js for more info.
-         */
-        headingFormat: {
-          type: String,
-          value: 'ddd, MMM D'
-        },
-        /**
-         * The minimum allowed date
-         */
-        minDate: {
-          type: Date,
-          value: null
-        },
-        /**
-         * The maximum allowed date
-         */
-        maxDate: {
-          type: Date,
-          value: null
-        },
-        /**
-         * Force narrow layout
-         */
-        forceNarrow: {
-          type: Boolean,
-          value: false
-        },
-        narrow: {
-          type: Boolean,
-          reflectToAttribute: true,
-          notify: true,
-          computed: '_computeNarrow(forceNarrow, _queryMatches)'
-        },
-        isTouch: {
-          type: Boolean,
-          value: false,
-          readOnly: true,
-          reflectToAttribute: true
-        },
-        _queryMatches: {
-          type: Boolean,
-          value: false
-        },
-        headingBreak: {
-          type: String,
-          value: '[,]'
-        },
-        _selectedPage: String,
-        _maxYear: {
-          type: Number,
-          computed: '_getFullYear(maxDate)'
-        },
-        _minYear: {
-          type: Number,
-          computed: '_getFullYear(minDate)'
-        }
-      },
-      behaviors: [
-        Polymer.IronResizableBehavior
-      ],
-      listeners: {
-        'iron-resize': '_resizeHandler'
-      },
-      ready: function() {
+    class PaperDatePicker extends Polymer.mixinBehaviors([Polymer.IronResizableBehavior], Polymer.Element) {
+      static get is() { return 'paper-date-picker'; }
+      static get properties() {
+        return {
+          /**
+           * The selected date (YYYY-MM-DD)
+           */
+          date: {
+            type: Date,
+            notify: true
+          },
+          /**
+           * Maximum screen width at which the picker uses a vertical layout
+           */
+          responsiveWidth: {
+            type: String,
+            value: '560px'
+          },
+          /**
+           * The current locale
+           */
+          locale: {
+            type: String,
+            value: 'en'
+          },
+          /**
+           * The format of the date displayed in the heading.
+           * See docuemntation for Moment.js for more info.
+           */
+          headingFormat: {
+            type: String,
+            value: 'ddd, MMM D'
+          },
+          /**
+           * The minimum allowed date
+           */
+          minDate: {
+            type: Date,
+            value: null
+          },
+          /**
+           * The maximum allowed date
+           */
+          maxDate: {
+            type: Date,
+            value: null
+          },
+          /**
+           * Force narrow layout
+           */
+          forceNarrow: {
+            type: Boolean,
+            value: false
+          },
+          narrow: {
+            type: Boolean,
+            reflectToAttribute: true,
+            notify: true,
+            computed: '_computeNarrow(forceNarrow, _queryMatches)'
+          },
+          isTouch: {
+            type: Boolean,
+            value: false,
+            readOnly: true,
+            reflectToAttribute: true
+          },
+          _queryMatches: {
+            type: Boolean,
+            value: false
+          },
+          headingBreak: {
+            type: String,
+            value: '[,]'
+          },
+          _selectedPage: String,
+          _maxYear: {
+            type: Number,
+            computed: '_getFullYear(maxDate)'
+          },
+          _minYear: {
+            type: Number,
+            computed: '_getFullYear(minDate)'
+          }
+        };
+      }
+      ready() {
+        super.ready();
+        this._resizeHandler = this._resizeHandler.bind(this);
         this.today = this.$.calendar.today;
         this._setIsTouch('ontouchstart' in window);
         this._selectPage('chooseDate');
-      },
-      dateFormat: function() {
+      }
+      connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('iron-resize', this._resizeHandler);
+      }
+      disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('iron-resize', this._resizeHandler);
+      }
+      dateFormat() {
         return this.$.calendar.dateFormat.apply(this.$.calendar, arguments);
-      },
-      _tapHeadingDate: function() {
+      }
+      _tapHeadingDate() {
         if (this.$.pages.selected !== 'chooseDate') {
           this._selectPage('chooseDate');
         } else {
@@ -278,26 +283,26 @@
           this.$.calendar.currentMonth = this.date.getMonth() + 1;
           this.$.calendar.currentYear = this.date.getFullYear();
         }
-      },
-      _tapHeadingYear: function() {
+      }
+      _tapHeadingYear() {
         if (this.$.pages.selected !== 'chooseYear') {
           this._selectPage('chooseYear');
           this.$.yearList.centerSelected();
         }
-      },
-      _selectPage: function(page) {
+      }
+      _selectPage(page) {
         this.$.pages.selected = page;
-      },
-      _getMediaQuery: function(forceNarrow, responsiveWidth) {
+      }
+      _getMediaQuery(forceNarrow, responsiveWidth) {
         return '(max-width: ' + (forceNarrow ? '' : responsiveWidth) + ')';
-      },
-      _getHeadingClass: function(pfx, selectedPage) {
+      }
+      _getHeadingClass(pfx, selectedPage) {
         return pfx + ' pg-' + selectedPage;
-      },
-      _getFullYear: function(date) {
+      }
+      _getFullYear(date) {
         return date ? new Date(date).getFullYear() : null;
-      },
-      _splitHeadingDate: function(date, format, locale) {
+      }
+      _splitHeadingDate(date, format, locale) {
         var re = new RegExp(this.headingBreak, 'g');
         var text = this.dateFormat(date, format, locale);
         var seps = text.match(re);
@@ -310,14 +315,14 @@
           });
         }
         return value;
-      },
-      _computeNarrow: function(queryMatches, forceNarrow) {
+      }
+      _computeNarrow(queryMatches, forceNarrow) {
         return queryMatches || forceNarrow;
-      },
-      _pageSelected: function() {
+      }
+      _pageSelected() {
         this._resizeHandler();
-      },
-      _resizeHandler: function() {
+      }
+      _resizeHandler() {
         if (this._resizing) {
           return;
         }
@@ -327,6 +332,7 @@
 
         this.updateStyles();
       }
-    });
+    }
+    window.customElements.define(PaperDatePicker.is, PaperDatePicker);
   </script>
 </dom-module>
diff --git a/paper-year-list.html b/paper-year-list.html
index 8741c50..ea60ba7 100644
--- a/paper-year-list.html
+++ b/paper-year-list.html
@@ -40,52 +40,55 @@
     </iron-list>
   </template>
   <script>
-    Polymer({
-      is: 'paper-year-list',
-      properties: {
-        date: {
-          type: Date,
-          notify: true,
-          observer: '_dateChange'
-        },
-        /**
-         * Maximum allowed year.
-         */
-        max: {
-          type: Number,
-          value: 2100,
-          observer: '_maxChange'
-        },
-        /**
-         * Minimum allowed year.
-         */
-        min: {
-          type: Number,
-          value: 1900,
-          observer: '_minChange'
-        },
-        /**
-         * The selected year, sync with the year of the given date
-         * or null if year isn't within range.
-         */
-        selected: {
-          type: Number,
-          notify: true,
-          observer: '_selectedChange'
-        },
-        /**
-         * The allowed years array.
-         */
-        _years: {
-          type: Array,
-          computed: '_computeYears(min, max)',
-          readOnly: true,
-          value: function() {
-            return Date.now().getFullYear;
+    class PaperYearList extends Polymer.mixinBehaviors([Polymer.IronResizableBehavior], Polymer.Element) {
+      static get is() { return 'paper-year-list'; }
+      static get properties() {
+        return {
+          date: {
+            type: Date,
+            notify: true,
+            observer: '_dateChange'
+          },
+          /**
+           * Maximum allowed year.
+           */
+          max: {
+            type: Number,
+            value: 2100,
+            observer: '_maxChange'
+          },
+          /**
+           * Minimum allowed year.
+           */
+          min: {
+            type: Number,
+            value: 1900,
+            observer: '_minChange'
+          },
+          /**
+           * The selected year, sync with the year of the given date
+           * or null if year isn't within range.
+           */
+          selected: {
+            type: Number,
+            notify: true,
+            observer: '_selectedChange'
+          },
+          /**
+           * The allowed years array.
+           */
+          _years: {
+            type: Array,
+            computed: '_computeYears(min, max)',
+            readOnly: true,
+            value() {
+              return Date.now().getFullYear;
+            }
           }
-        }
-      },
-      ready: function() {
+        };
+      }
+      ready() {
+        super.ready();
         // hack for iron-list not to scroll to the first visible index on resize 
         this.$.yearList._resizeHandler = function() {
           this.debounce('resize', function() {
@@ -96,11 +99,11 @@
             }
           });
         }.bind(this.$.yearList);
-      },
+      }
       /**
        * Scroll in the years list to center the selected year.
        */
-      centerSelected: function() {
+      centerSelected() {
         if (this.selected !== null) {
           var selectedYearIdx = this.selected - this.min;
           this.$.yearList.scrollToIndex(selectedYearIdx);
@@ -115,19 +118,19 @@
             }
           }.bind(this.$.yearList));
         }
-      },
+      }
       /**
        * Return the selected class if needed.
        */
-      _addSelectedClass: function(selected) {
+      _addSelectedClass(selected) {
         if (selected) {
           return ' selected';
         }
-      },
+      }
       /**
        * Compute the years array passed to the iron-list.
        */
-      _computeYears: function(min, max) {
+      _computeYears(min, max) {
         if (typeof min !== 'number' || typeof max !== 'number') {
           return;
         }
@@ -136,29 +139,29 @@
           years.push({year: min});
         }
         return years;
-      },
+      }
       /**
        * Set 'selected' attribute to the new date's year if it is within range, else set it to null.
        */
-      _dateChange: function(date) {
+      _dateChange(date) {
         var newYear = date.getFullYear();
         this.selected = this._withinRange(newYear) ? newYear : null;
-      },
-      _maxChange: function(max) {
+      }
+      _maxChange(max) {
         if (typeof max !== 'number') {
           this.max = 2100;
         }
-      },
-      _minChange: function(min) {
+      }
+      _minChange(min) {
         if (typeof min !== 'number') {
           this.min = 1900;
         }
-      },
+      }
       /**
        * If selected is null, clear iron-list selection,
        * else select it in iron-list and synchronize 'date' attribute.
        */
-      _selectedChange: function(selected) {
+      _selectedChange(selected) {
         if (selected === null) {
           this.$.yearList.clearSelection();
           return;
@@ -168,35 +171,33 @@
           this.date = new Date(this.date.setFullYear(selected));
         }
         this._selectYearInList(selected);
-      },
+      }
       /**
        * Select the given year in the years list.
        */
-      _selectYearInList: function(year) {
+      _selectYearInList(year) {
         var yearIdx = year - this.min;
-        this.$.yearList.selectItem(yearIdx);
-      },
+        this.$.yearList.selectIndex(yearIdx);
+      }
       /**
        * Update 'selected' attribute and select in iron-list
        * from a tapped item's event in the years list.
        */
-      _tappedYearHandler: function(e) {
-        var yearItem = e.model.__data__.item;
+      _tappedYearHandler(e) {
+        var yearItem = e.model.item;
         var year = yearItem.year;
         if (this.selected !== year) {
           this.$.yearList.selectItem(yearItem);
           this.selected = year;
         }
-      },
+      }
       /**
        * Return true if year is between min and max.
        */
-      _withinRange: function(year) {
+      _withinRange(year) {
         return  !(this.min && year < this.min || this.max && year > this.max );
-      },
-      behaviors: [
-        Polymer.IronResizableBehavior
-      ]
-    });
+      }
+    }
+    window.customElements.define(PaperYearList.is, PaperYearList);
   </script>
 </dom-module>
diff --git a/test/paper-date-picker.html b/test/paper-date-picker.html
index 2f3d872..9cbfc8e 100644
--- a/test/paper-date-picker.html
+++ b/test/paper-date-picker.html
@@ -37,9 +37,10 @@
           // Check initialization
           expect(element.date).to.be.not.null;
           expect(element.maxDate).to.be.not.null;
+          expect(element.id).to.be.equal('picker');
 
           // Try to swipe after the max bound
-          var calendar = element.$$('paper-calendar');
+          var calendar = element.$.calendar;
           calendar._swipeNextMonth();
           calendar._swipeNextMonth();
           calendar._swipeNextMonth();