Convert remaining elements to ES6 classes (#538)

* Convert remaining elements to ES6 classes

* Use native DOM methods for tests

* Fix Polymer 2 debounce call

src/components/entity/ha-entity-toggle.html

@@ -1,4 +1,4 @@
-<link rel="import" href="../../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
 <link rel="import" href="../../../bower_components/paper-toggle-button/paper-toggle-button.html">
 <link rel="import" href="../../../bower_components/paper-icon-button/paper-icon-button.html">
 
@@ -36,43 +36,43 @@
 </dom-module>
 
 <script>
-Polymer({
-  is: 'ha-entity-toggle',
+class HaEntityToggle extends Polymer.Element {
+  static get is() { return 'ha-entity-toggle'; }
 
-  properties: {
-    hass: {
-      type: Object,
-    },
+  static get properties() {
+    return {
+      hass: {
+        type: Object,
+      },
 
-    stateObj: {
-      type: Object,
-    },
+      stateObj: {
+        type: Object,
+      },
 
-    toggleChecked: {
-      type: Boolean,
-      value: false,
-    },
+      toggleChecked: {
+        type: Boolean,
+        value: false,
+      },
 
-    isOn: {
-      type: Boolean,
-      computed: 'computeIsOn(stateObj)',
-      observer: 'isOnChanged',
-    },
-  },
+      isOn: {
+        type: Boolean,
+        computed: 'computeIsOn(stateObj)',
+        observer: 'isOnChanged',
+      },
+    };
+  }
 
-  listeners: {
-    tap: 'onTap',
-  },
-
-  onTap: function (ev) {
-    ev.stopPropagation();
-  },
-
-  ready: function () {
+  ready() {
+    super.ready();
+    this.addEventListener('tap', ev => this.onTap(ev));
     this.forceStateChange();
-  },
+  }
 
-  toggleChanged: function (ev) {
+  onTap(ev) {
+    ev.stopPropagation();
+  }
+
+  toggleChanged(ev) {
     var newVal = ev.target.checked;
 
     if (newVal && !this.isOn) {
@@ -80,36 +80,36 @@ Polymer({
     } else if (!newVal && this.isOn) {
       this.callService(false);
     }
-  },
+  }
 
-  isOnChanged: function (newVal) {
+  isOnChanged(newVal) {
     this.toggleChecked = newVal;
-  },
+  }
 
-  forceStateChange: function () {
+  forceStateChange() {
     if (this.toggleChecked === this.isOn) {
       this.toggleChecked = !this.toggleChecked;
     }
     this.toggleChecked = this.isOn;
-  },
+  }
 
-  turnOn: function () {
+  turnOn() {
     this.callService(true);
-  },
+  }
 
-  turnOff: function () {
+  turnOff() {
     this.callService(false);
-  },
+  }
 
-  computeIsOn: function (stateObj) {
+  computeIsOn(stateObj) {
     return stateObj && window.hassUtil.OFF_STATES.indexOf(stateObj.state) === -1;
-  },
+  }
 
   // We call updateToggle after a successful call to re-sync the toggle
   // with the state. It will be out of sync if our service call did not
   // result in the entity to be turned on. Since the state is not changing,
   // the resync is not called automatic.
-  callService: function (turnOn) {
+  callService(turnOn) {
     var stateDomain = window.hassUtil.computeDomain(this.stateObj);
     var serviceDomain;
     var service;
@@ -140,6 +140,8 @@ Polymer({
           }
         }.bind(this), 2000);
       }.bind(this));
-  },
-});
+  }
+}
+
+customElements.define(HaEntityToggle.is, HaEntityToggle);
 </script>

src/components/entity/ha-state-icon.html

@@ -1,4 +1,4 @@
-<link rel="import" href="../../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
 
 <link rel="import" href="../../../bower_components/iron-icon/iron-icon.html">
 
@@ -9,17 +9,21 @@
 </dom-module>
 
 <script>
-Polymer({
-  is: 'ha-state-icon',
+class HaStateIcon extends Polymer.Element {
+  static get is() { return 'ha-state-icon'; }
 
-  properties: {
-    stateObj: {
-      type: Object,
-    },
-  },
+  static get properties() {
+    return {
+      stateObj: {
+        type: Object,
+      },
+    };
+  }
 
-  computeIcon: function (stateObj) {
+  computeIcon(stateObj) {
     return window.hassUtil.stateIcon(stateObj);
-  },
-});
+  }
+}
+
+customElements.define(HaStateIcon.is, HaStateIcon);
 </script>

src/components/entity/ha-state-label-badge.html

@@ -1,4 +1,6 @@
-<link rel='import' href='../../../bower_components/polymer/polymer.html'>
+<link rel='import' href='../../../bower_components/polymer/polymer-element.html'>
+
+<link rel='import' href='../../../src/util/hass-mixins.html'>
 
 <link rel='import' href='../ha-label-badge.html'>
 
@@ -45,30 +47,33 @@
 </dom-module>
 
 <script>
-Polymer({
-  is: 'ha-state-label-badge',
+class HaStateLabelBadge extends window.hassMixins.EventsMixin(Polymer.Element) {
+  static get is() { return 'ha-state-label-badge'; }
 
-  properties: {
-    hass: {
-      type: Object,
-    },
+  static get properties() {
+    return {
+      hass: {
+        type: Object,
+      },
 
-    state: {
-      type: Object,
-      observer: 'stateChanged',
-    },
-  },
+      state: {
+        type: Object,
+        observer: 'stateChanged',
+      },
+    };
+  }
 
-  listeners: {
-    tap: 'badgeTap',
-  },
+  ready() {
+    super.ready();
+    this.addEventListener('tap', ev => this.badgeTap(ev));
+  }
 
-  badgeTap: function (ev) {
+  badgeTap(ev) {
     ev.stopPropagation();
     this.fire('hass-more-info', { entityId: this.state.entity_id });
-  },
+  }
 
-  computeClasses: function (state) {
+  computeClasses(state) {
     switch (window.hassUtil.computeDomain(state)) {
       case 'binary_sensor':
       case 'updater':
@@ -76,9 +81,9 @@ Polymer({
       default:
         return '';
     }
-  },
+  }
 
-  computeValue: function (state) {
+  computeValue(state) {
     switch (window.hassUtil.computeDomain(state)) {
       case 'binary_sensor':
       case 'device_tracker':
@@ -90,9 +95,9 @@ Polymer({
       default:
         return state.state === 'unknown' ? '-' : state.state;
     }
-  },
+  }
 
-  computeIcon: function (state) {
+  computeIcon(state) {
     if (state.state === 'unavailable') {
       return null;
     }
@@ -120,13 +125,13 @@ Polymer({
       default:
         return null;
     }
-  },
+  }
 
-  computeImage: function (state) {
+  computeImage(state) {
     return state.attributes.entity_picture || null;
-  },
+  }
 
-  computeLabel: function (state) {
+  computeLabel(state) {
     if (state.state === 'unavailable') {
       return 'unavai';
     }
@@ -146,14 +151,16 @@ Polymer({
       default:
         return state.attributes.unit_of_measurement || null;
     }
-  },
+  }
 
-  computeDescription: function (state) {
+  computeDescription(state) {
     return window.hassUtil.computeStateName(state);
-  },
+  }
 
-  stateChanged: function () {
+  stateChanged() {
     this.updateStyles();
-  },
-});
+  }
+}
+
+customElements.define(HaStateLabelBadge.is, HaStateLabelBadge);
 </script>

src/components/entity/state-info.html

@@ -1,4 +1,4 @@
-<link rel="import" href="../../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
 
 <link rel="import" href="./state-badge.html">
 <link rel="import" href="../ha-relative-time.html">
@@ -57,26 +57,30 @@
 </dom-module>
 
 <script>
-Polymer({
-  is: 'state-info',
+class StateInfo extends Polymer.Element {
+  static get is() { return 'state-info'; }
 
-  properties: {
-    detailed: {
-      type: Boolean,
-      value: false,
-    },
+  static get properties() {
+    return {
+      detailed: {
+        type: Boolean,
+        value: false,
+      },
 
-    stateObj: {
-      type: Object,
-    },
+      stateObj: {
+        type: Object,
+      },
 
-    inDialog: {
-      type: Boolean,
-    },
-  },
+      inDialog: {
+        type: Boolean,
+      },
+    };
+  }
 
-  computeStateName: function (stateObj) {
+  computeStateName(stateObj) {
     return window.hassUtil.computeStateName(stateObj);
   }
-});
+}
+
+customElements.define(StateInfo.is, StateInfo);
 </script>