Convert remaining elements to ES6 classes (#538)

* Convert remaining elements to ES6 classes

* Use native DOM methods for tests

* Fix Polymer 2 debounce call

panels/config/automation/ha-automation-editor.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/app-layout/app-header-layout/app-header-layout.html">
 <link rel="import" href="../../../bower_components/app-layout/app-header/app-header.html">
 <link rel="import" href="../../../bower_components/app-layout/app-toolbar/app-toolbar.html">
@@ -16,6 +16,8 @@
 <link rel="import" href="../../../bower_components/paper-fab/paper-fab.html">
 <link rel="import" href="../../../bower_components/iron-autogrow-textarea/iron-autogrow-textarea.html">
 
+<link rel='import' href='../../../src/util/hass-mixins.html'>
+
 <link rel="import" href="../ha-config-section.html">
 
 <script src='../../../build-temp/automation-editor.js'></script>
@@ -108,10 +110,11 @@
 </dom-module>
 
 <script>
-Polymer({
+class HaAutomationEditor extends window.hassMixins.EventsMixin(Polymer.Element) {
-  is: 'ha-automation-editor',
+  static get is() { return 'ha-automation-editor'; }
 
-  properties: {
+  static get properties() {
+    return {
       hass: {
         type: Object,
       },
@@ -159,29 +162,32 @@ Polymer({
         type: Boolean,
         observer: 'isWideChanged',
       },
-  },
+    };
+  }
 
-  created: function () {
+  constructor() {
+    super();
     this.configChanged = this.configChanged.bind(this);
     this._rendered = null;
-  },
+  }
 
-  detached: function () {
+  disconnectedCallback() {
+    super.disconnectedCallback();
     if (this._rendered) {
       window.unmountPreact(this._rendered);
     }
-  },
+  }
 
-  configChanged: function (config) {
+  configChanged(config) {
     // onChange gets called a lot during initial rendering causing recursing calls.
     if (this._rendered === null) return;
     this.config = config;
     this.errors = null;
     this.dirty = true;
     this._updateComponent(config);
-  },
+  }
 
-  automationChanged: function (newVal, oldVal) {
+  automationChanged(newVal, oldVal) {
     if (!newVal) return;
     if (!this.hass) {
       setTimeout(this.automationChanged.bind(this, newVal, oldVal), 0);
@@ -204,9 +210,9 @@ Polymer({
         this.config = config;
         this._updateComponent();
       }.bind(this));
-  },
+  }
 
-  creatingNewChanged: function (newVal) {
+  creatingNewChanged(newVal) {
     if (!newVal) {
       return;
     }
@@ -222,31 +228,31 @@ Polymer({
       ],
     };
     this._updateComponent();
-  },
+  }
 
-  isWideChanged: function () {
+  isWideChanged() {
     if (this.config === null) return;
     this._updateComponent();
-  },
+  }
 
-  backTapped: function () {
+  backTapped() {
     if (this.dirty &&
         // eslint-disable-next-line
         !confirm('You have unsaved changes. Are you sure you want to leave?')) {
       return;
     }
     history.back();
-  },
+  }
 
-  _updateComponent: function () {
+  _updateComponent() {
     this._rendered = window.AutomationEditor(this.$.root, {
       automation: this.config,
       onChange: this.configChanged,
       isWide: this.isWide,
     }, this._rendered);
-  },
+  }
 
-  saveAutomation: function () {
+  saveAutomation() {
     var id = this.creatingNew ? '' + Date.now() : this.automation.attributes.id;
     this.hass.callApi('post', 'config/automation/config/' + id, this.config).then(function () {
       this.dirty = false;
@@ -259,10 +265,12 @@ Polymer({
       this.errors = errors.body.message;
       throw errors;
     }.bind(this));
-  },
+  }
 
-  computeName: function (automation) {
+  computeName(automation) {
     return automation && window.hassUtil.computeStateName(automation);
-  },
+  }
-});
+}
+
+customElements.define(HaAutomationEditor.is, HaAutomationEditor);
 </script>

panels/config/automation/ha-automation-picker.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/app-layout/app-header-layout/app-header-layout.html">
 <link rel="import" href="../../../bower_components/app-layout/app-header/app-header.html">
 <link rel="import" href="../../../bower_components/app-layout/app-toolbar/app-toolbar.html">
@@ -8,6 +8,8 @@
 <link rel="import" href="../../../bower_components/paper-fab/paper-fab.html">
 <link rel="import" href="../../../bower_components/paper-icon-button/paper-icon-button.html">
 
+<link rel='import' href='../../../src/util/hass-mixins.html'>
+
 <link rel="import" href="../ha-config-section.html">
 
 <dom-module id="ha-automation-picker">
@@ -92,10 +94,11 @@
 </dom-module>
 
 <script>
-Polymer({
+class HaAutomationPicker extends window.hassMixins.EventsMixin(Polymer.Element) {
-  is: 'ha-automation-picker',
+  static get is() { return 'ha-automation-picker'; }
 
-  properties: {
+  static get properties() {
+    return {
       hass: {
         type: Object,
       },
@@ -116,30 +119,33 @@ Polymer({
       isWide: {
         type: Boolean,
       },
-  },
+    };
+  }
 
-  automationTapped: function (ev) {
+  automationTapped(ev) {
     history.pushState(null, null, '/config/automation/edit/' + this.automations[ev.model.index].attributes.id);
     this.fire('location-changed');
-  },
+  }
 
-  addAutomation: function () {
+  addAutomation() {
     history.pushState(null, null, '/config/automation/new');
     this.fire('location-changed');
-  },
+  }
 
-  computeName: function (automation) {
+  computeName(automation) {
     return window.hassUtil.computeStateName(automation);
-  },
+  }
 
   // Still thinking of something to add here.
   // eslint-disable-next-line
-  computeDescription: function (automation) {
+  computeDescription(automation) {
     return '';
-  },
+  }
 
-  _backTapped: function () {
+  _backTapped() {
     history.back();
-  },
+  }
-});
+}
+
+customElements.define(HaAutomationPicker.is, HaAutomationPicker);
 </script>

panels/config/automation/ha-config-automation.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/app-route/app-route.html'>
 
 <link rel="import" href="./ha-automation-picker.html">
@@ -45,10 +45,11 @@
 </dom-module>
 
 <script>
-Polymer({
+class HaConfigAutomation extends Polymer.Element {
-  is: 'ha-config-automation',
+  static get is() { return 'ha-config-automation'; }
 
-  properties: {
+  static get properties() {
+    return {
       hass: Object,
       narrow: Boolean,
       showMenu: Boolean,
@@ -73,9 +74,10 @@ Polymer({
         type: Boolean,
         computed: 'computeShowEditor(_edittingAutomation, _creatingNew)',
       }
-  },
+    };
+  }
 
-  computeAutomation: function (automations, edittingAddon, routeData) {
+  computeAutomation(automations, edittingAddon, routeData) {
     if (!automations || !edittingAddon) {
       return null;
     }
@@ -85,9 +87,9 @@ Polymer({
       }
     }
     return null;
-  },
+  }
 
-  computeAutomations: function (hass) {
+  computeAutomations(hass) {
     var automations = [];
 
     Object.keys(hass.states).forEach(function (key) {
@@ -113,10 +115,12 @@ Polymer({
       }
       return 0;
     });
-  },
+  }
 
-  computeShowEditor: function (_edittingAutomation, _creatingNew) {
+  computeShowEditor(_edittingAutomation, _creatingNew) {
     return _creatingNew || _edittingAutomation;
-  },
+  }
-});
+}
+
+customElements.define(HaConfigAutomation.is, HaConfigAutomation);
 </script>

panels/config/core/ha-config-section-hassbian.html

@@ -101,12 +101,13 @@ class HaConfigSectionHassbian extends Polymer.Element {
       }
 
       if (isInstalling) {
-        this.async(this.updateStatus, 5000);
+        setTimeout(() => this.updateStatus(), 5000);
       }
     }.bind(this));
   }
 
-  attached() {
+  connectedCallback() {
+    super.connectedCallback();
     this.updateStatus = this.updateStatus.bind(this);
     this.updateStatus();
   }

panels/config/dashboard/ha-config-navigation.html

@@ -1,9 +1,11 @@
-<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-card/paper-card.html">
 <link rel="import" href="../../../bower_components/paper-item/paper-item.html">
 <link rel="import" href="../../../bower_components/paper-item/paper-item-body.html">
 <link rel="import" href="../../../bower_components/iron-icon/iron-icon.html">
 
+<link rel='import' href='../../../src/util/hass-mixins.html'>
+
 <dom-module id="ha-config-navigation">
   <template>
     <style include="iron-flex">
@@ -31,10 +33,11 @@
 </dom-module>
 
 <script>
-Polymer({
+class HaConfigNavigation extends window.hassMixins.EventsMixin(Polymer.Element) {
-  is: 'ha-config-navigation',
+  static get is() { return 'ha-config-navigation'; }
 
-  properties: {
+  static get properties() {
+    return {
       hass: {
         type: Object,
       },
@@ -71,23 +74,26 @@ Polymer({
           }
         ],
       }
-  },
+    };
+  }
 
-  _computeLoaded: function (hass, component) {
+  _computeLoaded(hass, component) {
     return component.loaded || window.hassUtil.isComponentLoaded(hass, component.domain);
-  },
+  }
 
-  _computeCaption: function (component) {
+  _computeCaption(component) {
     return component.caption;
-  },
+  }
 
-  _computeDescription: function (component) {
+  _computeDescription(component) {
     return component.description;
-  },
+  }
 
-  _navigate: function (ev) {
+  _navigate(ev) {
     history.pushState(null, null, '/config/' + ev.model.item.domain);
     this.fire('location-changed');
-  },
+  }
-});
+}
+
+customElements.define(HaConfigNavigation.is, HaConfigNavigation);
 </script>

panels/config/ha-config-section.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="../../src/resources/ha-style.html">
 
 <dom-module id="ha-config-section">
@@ -67,10 +67,11 @@
 </dom-module>
 
 <script>
-Polymer({
+class HaConfigSection extends Polymer.Element {
-  is: 'ha-config-section',
+  static get is() { return 'ha-config-section'; }
 
-  properties: {
+  static get properties() {
+    return {
       hass: {
         type: Object,
       },
@@ -88,18 +89,21 @@ Polymer({
         type: Boolean,
         value: false,
       },
-  },
+    };
+  }
 
-  computeContentClasses: function (isWide) {
+  computeContentClasses(isWide) {
     var classes = 'content ';
 
     return isWide ? classes : classes + 'narrow';
-  },
+  }
 
-  computeClasses: function (isWide) {
+  computeClasses(isWide) {
     var classes = 'together layout ';
 
     return classes + (isWide ? 'horizontal' : 'vertical narrow');
-  },
+  }
-});
+}
+
+customElements.define(HaConfigSection.is, HaConfigSection);
 </script>

panels/config/ha-entity-config.html

@@ -1,3 +1,4 @@
+<link rel="import" href="../../bower_components/polymer/polymer-element.html">
 <dom-module id="ha-entity-config">
   <template>
     <style include="iron-flex ha-style">
@@ -80,10 +81,11 @@
 </dom-module>
 
 <script>
-Polymer({
+class HaEntityConfig extends Polymer.Element {
-  is: 'ha-entity-config',
+  static get is() { return 'ha-entity-config'; }
 
-  properties: {
+  static get properties() {
+    return {
       hass: {
         type: Object,
         observer: 'hassChanged',
@@ -119,44 +121,46 @@ Polymer({
       config: {
         type: Object,
       }
-  },
+    };
+  }
 
-  attached: function () {
+  connectedCallback() {
+    super.connectedCallback();
     this.formEl = document.createElement(this.config.component);
     this.formEl.hass = this.hass;
     this.$.form.appendChild(this.formEl);
     this.entityChanged(this.selectedEntity);
-  },
+  }
 
-  computeSelectCaption: function (stateObj) {
+  computeSelectCaption(stateObj) {
     return this.config.computeSelectCaption ?
       this.config.computeSelectCaption(stateObj) :
       window.hassUtil.computeStateName(stateObj);
-  },
+  }
 
-  computeShowNoDevices: function (formState) {
+  computeShowNoDevices(formState) {
     return formState === 'no-devices';
-  },
+  }
 
-  computeShowSpinner: function (formState) {
+  computeShowSpinner(formState) {
     return formState === 'loading' || formState === 'saving';
-  },
+  }
 
-  computeShowPlaceholder: function (formState) {
+  computeShowPlaceholder(formState) {
     return formState !== 'editing';
-  },
+  }
 
-  computeShowForm: function (formState) {
+  computeShowForm(formState) {
     return formState === 'editing';
-  },
+  }
 
-  hassChanged: function (hass) {
+  hassChanged(hass) {
     if (this.formEl) {
       this.formEl.hass = hass;
     }
-  },
+  }
 
-  entitiesChanged: function (entities, oldEntities) {
+  entitiesChanged(entities, oldEntities) {
     if (entities.length === 0) {
       this.formState = 'no-devices';
       return;
@@ -177,9 +181,9 @@ Polymer({
       // Entity moved index
       this.selectedEntity = newIndex;
     }
-  },
+  }
 
-  entityChanged: function (index) {
+  entityChanged(index) {
     if (!this.entities || !this.formEl) return;
     var entity = this.entities[index];
     if (!entity) return;
@@ -190,15 +194,17 @@ Polymer({
       .then(function () {
         el.formState = 'editing';
       });
-  },
+  }
 
-  saveEntity: function () {
+  saveEntity() {
     this.formState = 'saving';
     var el = this;
     this.formEl.saveEntity()
       .then(function () {
         el.formState = 'editing';
       });
-  },
+  }
-});
+}
+
+customElements.define(HaEntityConfig.is, HaEntityConfig);
 </script>

panels/config/script/ha-config-script.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/app-route/app-route.html'>
 
 <link rel="import" href="./ha-script-picker.html">
@@ -45,10 +45,11 @@
 </dom-module>
 
 <script>
-Polymer({
+class HaConfigScript extends Polymer.Element {
-  is: 'ha-config-script',
+  static get is() { return 'ha-config-script'; }
 
-  properties: {
+  static get properties() {
+    return {
       hass: Object,
       narrow: Boolean,
       showMenu: Boolean,
@@ -73,9 +74,10 @@ Polymer({
         type: Boolean,
         computed: 'computeShowEditor(_edittingScript, _creatingNew)',
       }
-  },
+    };
+  }
 
-  computeScript: function (scripts, edittingAddon, routeData) {
+  computeScript(scripts, edittingAddon, routeData) {
     if (!scripts || !edittingAddon) {
       return null;
     }
@@ -85,9 +87,9 @@ Polymer({
       }
     }
     return null;
-  },
+  }
 
-  computeScripts: function (hass) {
+  computeScripts(hass) {
     var scripts = [];
 
     Object.keys(hass.states).forEach(function (key) {
@@ -110,10 +112,12 @@ Polymer({
       }
       return 0;
     });
-  },
+  }
 
-  computeShowEditor: function (_edittingScript, _creatingNew) {
+  computeShowEditor(_edittingScript, _creatingNew) {
     return _creatingNew || _edittingScript;
-  },
+  }
-});
+}
+
+customElements.define(HaConfigScript.is, HaConfigScript);
 </script>

panels/config/script/ha-script-editor.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/app-layout/app-header-layout/app-header-layout.html">
 <link rel="import" href="../../../bower_components/app-layout/app-header/app-header.html">
 <link rel="import" href="../../../bower_components/app-layout/app-toolbar/app-toolbar.html">
@@ -16,6 +16,8 @@
 <link rel="import" href="../../../bower_components/paper-fab/paper-fab.html">
 <link rel="import" href="../../../bower_components/iron-autogrow-textarea/iron-autogrow-textarea.html">
 
+<link rel='import' href='../../../src/util/hass-mixins.html'>
+
 <link rel="import" href="../ha-config-section.html">
 
 <script src='../../../build-temp/script-editor.js'></script>
@@ -108,10 +110,11 @@
 </dom-module>
 
 <script>
-Polymer({
+class HaScriptEditor extends window.hassMixins.EventsMixin(Polymer.Element) {
-  is: 'ha-script-editor',
+  static get is() { return 'ha-script-editor'; }
 
-  properties: {
+  static get properties() {
+    return {
       hass: {
         type: Object,
       },
@@ -159,29 +162,32 @@ Polymer({
         type: Boolean,
         observer: 'isWideChanged',
       },
-  },
+    };
+  }
 
-  created: function () {
+  constructor() {
+    super();
     this.configChanged = this.configChanged.bind(this);
     this._rendered = null;
-  },
+  }
 
-  detached: function () {
+  disconnectedCallback() {
+    super.disconnectedCallback();
     if (this._rendered) {
       window.unmountPreact(this._rendered);
     }
-  },
+  }
 
-  configChanged: function (config) {
+  configChanged(config) {
     // onChange gets called a lot during initial rendering causing recursing calls.
     if (this._rendered === null) return;
     this.config = config;
     this.errors = null;
     this.dirty = true;
     this._updateComponent(config);
-  },
+  }
 
-  scriptChanged: function (newVal, oldVal) {
+  scriptChanged(newVal, oldVal) {
     if (!newVal) return;
     if (!this.hass) {
       setTimeout(this.scriptChanged.bind(this, newVal, oldVal), 0);
@@ -203,9 +209,9 @@ Polymer({
         this.config = config;
         this._updateComponent();
       }.bind(this));
-  },
+  }
 
-  creatingNewChanged: function (newVal) {
+  creatingNewChanged(newVal) {
     if (!newVal) {
       return;
     }
@@ -217,31 +223,31 @@ Polymer({
       ],
     };
     this._updateComponent();
-  },
+  }
 
-  isWideChanged: function () {
+  isWideChanged() {
     if (this.config === null) return;
     this._updateComponent();
-  },
+  }
 
-  backTapped: function () {
+  backTapped() {
     if (this.dirty &&
         // eslint-disable-next-line
         !confirm('You have unsaved changes. Are you sure you want to leave?')) {
       return;
     }
     history.back();
-  },
+  }
 
-  _updateComponent: function () {
+  _updateComponent() {
     this._rendered = window.ScriptEditor(this.$.root, {
       script: this.config,
       onChange: this.configChanged,
       isWide: this.isWide,
     }, this._rendered);
-  },
+  }
 
-  saveScript: function () {
+  saveScript() {
     var id = this.creatingNew ? '' + Date.now() : window.hassUtil.computeObjectId(this.script);
     this.hass.callApi('post', 'config/script/config/' + id, this.config).then(function () {
       this.dirty = false;
@@ -254,10 +260,12 @@ Polymer({
       this.errors = errors.body.message;
       throw errors;
     }.bind(this));
-  },
+  }
 
-  computeName: function (script) {
+  computeName(script) {
     return script && window.hassUtil.computeStateName(script);
-  },
+  }
-});
+}
+
+customElements.define(HaScriptEditor.is, HaScriptEditor);
 </script>

panels/config/script/ha-script-picker.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/app-layout/app-header-layout/app-header-layout.html">
 <link rel="import" href="../../../bower_components/app-layout/app-header/app-header.html">
 <link rel="import" href="../../../bower_components/app-layout/app-toolbar/app-toolbar.html">
@@ -8,6 +8,8 @@
 <link rel="import" href="../../../bower_components/paper-fab/paper-fab.html">
 <link rel="import" href="../../../bower_components/paper-icon-button/paper-icon-button.html">
 
+<link rel='import' href='../../../src/util/hass-mixins.html'>
+
 <link rel="import" href="../ha-config-section.html">
 
 <dom-module id="ha-script-picker">
@@ -88,10 +90,11 @@
 </dom-module>
 
 <script>
-Polymer({
+class HaScriptPicker extends window.hassMixins.EventsMixin(Polymer.Element) {
-  is: 'ha-script-picker',
+  static get is() { return 'ha-script-picker'; }
 
-  properties: {
+  static get properties() {
+    return {
       hass: {
         type: Object,
       },
@@ -112,30 +115,33 @@ Polymer({
       isWide: {
         type: Boolean,
       },
-  },
+    };
+  }
 
-  scriptTapped: function (ev) {
+  scriptTapped(ev) {
     history.pushState(null, null, '/config/script/edit/' + this.scripts[ev.model.index].entity_id);
     this.fire('location-changed');
-  },
+  }
 
-  addScript: function () {
+  addScript() {
     history.pushState(null, null, '/config/script/new');
     this.fire('location-changed');
-  },
+  }
 
-  computeName: function (script) {
+  computeName(script) {
     return window.hassUtil.computeStateName(script);
-  },
+  }
 
   // Still thinking of something to add here.
   // eslint-disable-next-line
-  computeDescription: function (script) {
+  computeDescription(script) {
     return '';
-  },
+  }
 
-  _backTapped: function () {
+  _backTapped() {
     history.back();
-  },
+  }
-});
+}
+
+customElements.define(HaScriptPicker.is, HaScriptPicker);
 </script>

panels/config/zwave/ha-config-zwave.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-card/paper-card.html">
 <link rel="import" href="../../../src/components/ha-menu-button.html">
 <link rel="import" href="../../../bower_components/app-layout/app-header-layout/app-header-layout.html">
@@ -319,10 +319,11 @@
 </dom-module>
 
 <script>
-Polymer({
+class HaConfigZwave extends Polymer.Element {
-  is: 'ha-config-zwave',
+  static get is() { return 'ha-config-zwave'; }
 
-  properties: {
+  static get properties() {
+    return {
       hass: Object,
       isWide: Boolean,
 
@@ -400,20 +401,22 @@ Polymer({
       entityPollingIntensity: {
         type: Number,
       },
-  },
+    };
+  }
 
-  listeners: {
+  ready() {
-    'hass-service-called': 'serviceCalled',
+    super.ready();
-  },
+    this.addEventListener('hass-service-called', ev => this.serviceCalled(ev));
+  }
 
-  serviceCalled: function (ev) {
+  serviceCalled(ev) {
     var el = this;
     if ((ev.detail.success) && (ev.detail.service === 'set_poll_intensity')) {
       el.saveEntity();
     }
-  },
+  }
 
-  computeNodes: function (hass) {
+  computeNodes(hass) {
     return Object.keys(hass.states)
       .map(function (key) { return hass.states[key]; })
       .filter(function (ent) {
@@ -421,9 +424,9 @@ Polymer({
                 (ent.entity_id).match('zwave[.]'));
       })
       .sort(window.hassUtil.sortByName);
-  },
+  }
 
-  computeEntities: function (selectedNode) {
+  computeEntities(selectedNode) {
     if (!this.nodes || selectedNode === -1) return -1;
     var hass = this.hass;
     var nodeid = this.nodes[this.selectedNode].attributes.node_id;
@@ -439,9 +442,9 @@ Polymer({
                 (!(ent.entity_id).match('zwave[.]')));
       })
       .sort(window.hassUtil.sortByName);
-  },
+  }
 
-  selectedNodeChanged: function (selectedNode) {
+  selectedNodeChanged(selectedNode) {
     this.newNodeNameInput = '';
 
     if (selectedNode === -1) return;
@@ -468,9 +471,9 @@ Polymer({
       this.hasNodeUserCodes = this.userCodes.length > 0;
       this.notifyPath('hasNodeUserCodes');
     });
-  },
+  }
 
-  selectedEntityChanged: function (selectedEntity) {
+  selectedEntityChanged(selectedEntity) {
     if (selectedEntity === -1) return;
     var el = this;
     el.hass.callApi('GET', 'zwave/values/' + el.nodes[el.selectedNode].attributes.node_id).then((values) => {
@@ -485,9 +488,9 @@ Polymer({
         el.entityIgnored = data.ignored || false;
         el.entityPollingIntensity = el.values[valueIndex].value.poll_intensity;
       });
-  },
+  }
 
-  computeSelectedEntityAttrs: function (selectedEntity) {
+  computeSelectedEntityAttrs(selectedEntity) {
     if (selectedEntity === -1) return 'No entity selected';
     var entityAttrs = this.entities[selectedEntity].attributes;
     var att = [];
@@ -495,71 +498,71 @@ Polymer({
       att.push(key + ': ' + entityAttrs[key]);
     });
     return att.sort();
-  },
+  }
 
-  computeSelectCaption: function (stateObj) {
+  computeSelectCaption(stateObj) {
     return window.hassUtil.computeStateName(stateObj) + ' (Node:' +
       stateObj.attributes.node_id + ' ' +
       stateObj.attributes.query_stage + ')';
-  },
+  }
 
-  computeSelectCaptionEnt: function (stateObj) {
+  computeSelectCaptionEnt(stateObj) {
     return (window.hassUtil.computeDomain(stateObj) + '.'
             + window.hassUtil.computeStateName(stateObj));
-  },
+  }
 
-  computeIsNodeSelected: function () {
+  computeIsNodeSelected() {
     return (this.nodes && this.selectedNode !== -1);
-  },
+  }
 
-  computeIsEntitySelected: function (selectedEntity) {
+  computeIsEntitySelected(selectedEntity) {
     return (selectedEntity === -1);
-  },
+  }
 
-  computeNodeServiceData: function (selectedNode) {
+  computeNodeServiceData(selectedNode) {
     return { node_id: this.nodes[selectedNode].attributes.node_id };
-  },
+  }
 
-  computeGetNodeName: function (selectedNode) {
+  computeGetNodeName(selectedNode) {
     if (this.selectedNode === -1 ||
       !this.nodes[selectedNode].entity_id) return -1;
     return this.nodes[selectedNode].attributes.node_name;
-  },
+  }
 
-  computeNodeNameServiceData: function (newNodeNameInput) {
+  computeNodeNameServiceData(newNodeNameInput) {
     return {
       node_id: this.nodes[this.selectedNode].attributes.node_id,
       name: newNodeNameInput
     };
-  },
+  }
 
-  computeRefreshEntityServiceData: function (selectedEntity) {
+  computeRefreshEntityServiceData(selectedEntity) {
     if (selectedEntity === -1) return -1;
     return { entity_id: this.entities[selectedEntity].entity_id };
-  },
+  }
 
-  computePollIntensityServiceData: function (entityPollingIntensity) {
+  computePollIntensityServiceData(entityPollingIntensity) {
     if (!this.selectedNode === -1 || this.selectedEntity === -1) return -1;
     return {
       node_id: this.nodes[this.selectedNode].attributes.node_id,
       value_id: this.entities[this.selectedEntity].attributes.value_id,
       poll_intensity: parseInt(entityPollingIntensity),
     };
-  },
+  }
 
-  saveEntity: function () {
+  saveEntity() {
     var data = {
       ignored: this.entityIgnored,
       polling_intensity: parseInt(this.entityPollingIntensity),
     };
     return this.hass.callApi('POST', 'config/zwave/device_config/' + this.entities[this.selectedEntity].entity_id, data);
-  },
+  }
 
-  toggleHelp: function () {
+  toggleHelp() {
     this.showHelp = !this.showHelp;
-  },
+  }
 
-  _objToArray: function (obj) {
+  _objToArray(obj) {
     var array = [];
     Object.keys(obj).forEach(function (key) {
       array.push({
@@ -568,10 +571,12 @@ Polymer({
       });
     });
     return array;
-  },
+  }
 
-  _backTapped: function () {
+  _backTapped() {
     history.back();
-  },
+  }
-});
+}
+
+customElements.define(HaConfigZwave.is, HaConfigZwave);
 </script>

panels/config/zwave/zwave-groups.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-card/paper-card.html">
 <link rel="import" href="../../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
 <link rel='import' href='../../../bower_components/paper-item/paper-item.html'>
@@ -96,10 +96,11 @@
 </dom-module>
 
 <script>
-Polymer({
+class ZwaveGroups extends Polymer.Element {
-  is: 'zwave-groups',
+  static get is() { return 'zwave-groups'; }
 
-  properties: {
+  static get properties() {
+    return {
       hass: {
         type: Object,
       },
@@ -144,34 +145,36 @@ Polymer({
         value: true,
         computed: 'computeAssociationsLeft(selectedGroup)'
       },
-  },
+    };
+  }
 
-  listeners: {
+  ready() {
-    'hass-service-called': 'serviceCalled',
+    super.ready();
-  },
+    this.addEventListener('hass-service-called', ev => this.serviceCalled(ev));
+  }
 
-  serviceCalled: function (ev) {
+  serviceCalled(ev) {
     if (ev.detail.success) {
       var foo = this;
       setTimeout(function () {
         foo.refreshGroups(foo.selectedNode);
       }, 5000);
     }
-  },
+  }
 
-  computeAssociationsLeft: function (selectedGroup) {
+  computeAssociationsLeft(selectedGroup) {
     if (selectedGroup === -1) return true;
     return (this.maxAssociations === this.otherGroupNodes.length);
-  },
+  }
 
-  computeMaxAssociations: function (selectedGroup) {
+  computeMaxAssociations(selectedGroup) {
     if (selectedGroup === -1) return -1;
     var maxAssociations = this.groups[selectedGroup].value.max_associations;
     if (!maxAssociations) return 'None';
     return maxAssociations;
-  },
+  }
 
-  computeOtherGroupNodes: function (selectedGroup) {
+  computeOtherGroupNodes(selectedGroup) {
     if (selectedGroup === -1) return -1;
     var associations = Object.values(this.groups[selectedGroup].value.association_instances);
     if (!associations.length) return ['None'];
@@ -191,34 +194,34 @@ Polymer({
       }
       return caption;
     });
-  },
+  }
 
-  computeTargetInGroup: function (selectedGroup, selectedTargetNode) {
+  computeTargetInGroup(selectedGroup, selectedTargetNode) {
     if (selectedGroup === -1 || selectedTargetNode === -1) return false;
     const associations = Object.values(this.groups[selectedGroup].value.associations);
     if (!associations.length) return false;
     return associations.indexOf(this.nodes[selectedTargetNode].attributes.node_id) !== -1;
-  },
+  }
 
-  computeSelectCaption: function (stateObj) {
+  computeSelectCaption(stateObj) {
     return window.hassUtil.computeStateName(stateObj) + ' (Node:' +
       stateObj.attributes.node_id + ' ' +
       stateObj.attributes.query_stage + ')';
-  },
+  }
 
-  computeSelectCaptionGroup: function (stateObj) {
+  computeSelectCaptionGroup(stateObj) {
     return (stateObj.key + ': ' + stateObj.value.label);
-  },
+  }
 
-  computeIsTargetNodeSelected: function (selectedTargetNode) {
+  computeIsTargetNodeSelected(selectedTargetNode) {
     return this.nodes && selectedTargetNode !== -1;
-  },
+  }
 
-  computeIsGroupSelected: function (selectedGroup) {
+  computeIsGroupSelected(selectedGroup) {
     return this.nodes && this.selectedNode !== -1 && selectedGroup !== -1;
-  },
+  }
 
-  computeAssocServiceData: function (selectedGroup, type) {
+  computeAssocServiceData(selectedGroup, type) {
     if (!this.groups === -1 || selectedGroup === -1 || this.selectedNode === -1) return -1;
     return {
       node_id: this.nodes[this.selectedNode].attributes.node_id,
@@ -226,9 +229,9 @@ Polymer({
       target_node_id: this.nodes[this.selectedTargetNode].attributes.node_id,
       group: this.groups[selectedGroup].key
     };
-  },
+  }
 
-  refreshGroups: function (selectedNode) {
+  refreshGroups(selectedNode) {
     var groupData = [];
     this.hass.callApi('GET', 'zwave/groups/' + this.nodes[selectedNode].attributes.node_id).then(function (groups) {
       Object.keys(groups).forEach(function (key) {
@@ -240,12 +243,14 @@ Polymer({
       this.groups = groupData;
       this.selectedGroupChanged(this.selectedGroup);
     }.bind(this));
-  },
+  }
 
-  selectedGroupChanged: function (selectedGroup) {
+  selectedGroupChanged(selectedGroup) {
     if (this.selectedGroup === -1 || selectedGroup === -1) return;
     this.maxAssociations = this.groups[selectedGroup].value.max_associations;
     this.otherGroupNodes = Object.values(this.groups[selectedGroup].value.associations);
-  },
+  }
-});
+}
+
+customElements.define(ZwaveGroups.is, ZwaveGroups);
 </script>

panels/config/zwave/zwave-log.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-card/paper-card.html">
 <link rel="import" href="../../../bower_components/paper-button/paper-button.html">
 
@@ -32,10 +32,11 @@
 </dom-module>
 <script>
 
-Polymer({
+class OzwLog extends Polymer.Element {
-  is: 'ozw-log',
+  static get is() { return 'ozw-log'; }
 
-  properties: {
+  static get properties() {
+    return {
       hass: {
         type: Object,
       },
@@ -49,14 +50,17 @@ Polymer({
         type: String,
         value: 'Refresh to pull log'
       },
-  },
+    };
+  }
 
-  refreshLog: function () {
+  refreshLog() {
     this.ozwLogs = 'Loading ozw log...';
     this.hass.callApi('GET', 'zwave/ozwlog')
       .then((info) => {
         this.ozwLogs = info;
       });
-  },
+  }
-});
+}
+
+customElements.define(OzwLog.is, OzwLog);
 </script>

panels/config/zwave/zwave-network.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-card/paper-card.html">
 <link rel="import" href="../../../bower_components/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="../../../src/components/buttons/ha-call-service-button.html">
@@ -169,10 +169,11 @@
 </dom-module>
 <script>
 
-Polymer({
+class ZwaveNetwork extends Polymer.Element {
-  is: 'zwave-network',
+  static get is() { return 'zwave-network'; }
 
-  properties: {
+  static get properties() {
+    return {
       hass: {
         type: Object,
       },
@@ -186,10 +187,13 @@ Polymer({
         type: Boolean,
         value: false,
       },
-  },
+    };
+  }
 
-  helpTap: function () {
+  helpTap() {
     this.showDescription = !this.showDescription;
   }
-});
+}
+
+customElements.define(ZwaveNetwork.is, ZwaveNetwork);
 </script>

panels/config/zwave/zwave-node-config.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-card/paper-card.html">
 <link rel="import" href="../../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
 <link rel='import' href='../../../bower_components/paper-item/paper-item.html'>
@@ -120,10 +120,11 @@
 </dom-module>
 
 <script>
-Polymer({
+class ZwaveNodeConfig extends Polymer.Element {
-  is: 'zwave-node-config',
+  static get is() { return 'zwave-node-config'; }
 
-  properties: {
+  static get properties() {
+    return {
       hass: {
         type: Object,
       },
@@ -204,22 +205,24 @@ Polymer({
         type: Boolean,
         value: false,
       },
-  },
+    };
+  }
 
-  listeners: {
+  ready() {
-    'hass-service-called': 'serviceCalled',
+    super.ready();
-  },
+    this.addEventListener('hass-service-called', ev => this.serviceCalled(ev));
+  }
 
-  serviceCalled: function (ev) {
+  serviceCalled(ev) {
     if (ev.detail.success) {
       var foo = this;
       setTimeout(function () {
         foo.refreshConfig(foo.selectedNode);
       }, 5000);
     }
-  },
+  }
 
-  nodesChanged: function () {
+  nodesChanged() {
     if (!this.nodes) return;
     this.wakeupNode = (this.nodes[this.selectedNode].attributes.wake_up_interval === 0 ||
       this.nodes[this.selectedNode].attributes.wake_up_interval);
@@ -227,29 +230,29 @@ Polymer({
       if (this.nodes[this.selectedNode].attributes.wake_up_interval === 0) this.wakeupInput = '';
       else this.wakeupInput = this.nodes[this.selectedNode].attributes.wake_up_interval;
     }
-  },
+  }
 
-  computeGetWakeupValue: function (selectedNode) {
+  computeGetWakeupValue(selectedNode) {
     if (this.selectedNode === -1 ||
       !this.nodes[selectedNode].attributes.wake_up_interval) return 'unknown';
     return (this.nodes[selectedNode].attributes.wake_up_interval);
-  },
+  }
 
-  computeWakeupServiceData: function (wakeupInput) {
+  computeWakeupServiceData(wakeupInput) {
     return {
       node_id: this.nodes[this.selectedNode].attributes.node_id,
       value: wakeupInput
     };
-  },
+  }
 
-  computeConfigValueHelp: function (selectedConfigParameter) {
+  computeConfigValueHelp(selectedConfigParameter) {
     if (selectedConfigParameter === -1) return '';
     var helpText = this.config[selectedConfigParameter].value.help;
     if (!helpText) return ['No helptext available'];
     return helpText;
-  },
+  }
 
-  computeSetConfigParameterServiceData: function (selectedConfigValue) {
+  computeSetConfigParameterServiceData(selectedConfigValue) {
     if (this.selectedNode === -1 || this.selectedConfigParameter === -1) return -1;
     var valueData = null;
     if (('Short Byte Int').includes(this.selectedConfigParameterType)) {
@@ -264,9 +267,9 @@ Polymer({
       parameter: this.config[this.selectedConfigParameter].key,
       value: valueData
     };
-  },
+  }
 
-  selectedConfigParameterChanged: function (selectedConfigParameter) {
+  selectedConfigParameterChanged(selectedConfigParameter) {
     if (selectedConfigParameter === -1) return;
     this.selectedConfigValue = -1;
     this.loadedConfigValue = -1;
@@ -289,20 +292,20 @@ Polymer({
     if (('List').includes(this.selectedConfigParameterType)) {
       this.selectedConfigParameterValues = this.config[selectedConfigParameter].value.data_items;
     }
-  },
+  }
 
-  isConfigParameterSelected: function (selectedConfigParameter, type) {
+  isConfigParameterSelected(selectedConfigParameter, type) {
     if (selectedConfigParameter === -1) return false;
     if (this.config[selectedConfigParameter].value.type === type) return true;
     if (type.includes(this.config[selectedConfigParameter].value.type)) return true;
     return false;
-  },
+  }
 
-  computeSelectCaptionConfigParameter: function (stateObj) {
+  computeSelectCaptionConfigParameter(stateObj) {
     return (stateObj.key + ': ' + stateObj.value.label);
-  },
+  }
 
-  refreshConfig: function (selectedNode) {
+  refreshConfig(selectedNode) {
     var configData = [];
     this.hass.callApi('GET', 'zwave/config/' + this.nodes[selectedNode].attributes.node_id).then(function (config) {
       Object.keys(config).forEach(function (key) {
@@ -314,6 +317,8 @@ Polymer({
       this.config = configData;
       this.selectedConfigParameterChanged(this.selectedConfigParameter);
     }.bind(this));
-  },
+  }
-});
+}
+
+customElements.define(ZwaveNodeConfig.is, ZwaveNodeConfig);
 </script>

panels/config/zwave/zwave-node-information.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-card/paper-card.html">
 
 <dom-module id='zwave-node-information'>
@@ -43,10 +43,11 @@
 </dom-module>
 <script>
 
-Polymer({
+class ZwaveNodeInformation extends Polymer.Element {
-  is: 'zwave-node-information',
+  static get is() { return 'zwave-node-information'; }
 
-  properties: {
+  static get properties() {
+    return {
       nodes: {
         type: Array,
         observer: 'nodeChanged'
@@ -65,9 +66,10 @@ Polymer({
       nodeInfoActive: {
         type: Boolean,
       },
-  },
+    };
+  }
 
-  nodeChanged: function (selectedNode) {
+  nodeChanged(selectedNode) {
     if (!this.nodes || selectedNode === -1) return;
     var nodeAttrs = this.nodes[this.selectedNode].attributes;
     var att = [];
@@ -75,6 +77,8 @@ Polymer({
       att.push(key + ': ' + nodeAttrs[key]);
     });
     this.selectedNodeAttrs = att.sort();
-  },
+  }
-});
+}
+
+customElements.define(ZwaveNodeInformation.is, ZwaveNodeInformation);
 </script>

panels/config/zwave/zwave-node-options.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-button/paper-button.html">
 <link rel="import" href="../../../bower_components/paper-card/paper-card.html">
 <link rel="import" href="../../../bower_components/paper-checkbox/paper-checkbox.html">
@@ -32,10 +32,11 @@
 </dom-module>
 
 <script>
-Polymer({
+class ZwaveNodeOptions extends Polymer.Element {
-  is: 'zwave-node-options',
+  static get is() { return 'zwave-node-options'; }
 
-  properties: {
+  static get properties() {
+    return {
       hass: {
         type: Object,
       },
@@ -60,9 +61,10 @@ Polymer({
           },
         }
       }
-  },
+    };
+  }
 
-  computeEntities: function (hass) {
+  computeEntities(hass) {
     return Object.keys(hass.states)
       .map(function (key) { return hass.states[key]; })
       .filter(function (ent) {
@@ -70,6 +72,8 @@ Polymer({
                 'node_id' in ent.attributes);
       })
       .sort(window.hassUtil.sortByName);
-  },
+  }
-});
+}
+
+customElements.define(ZwaveNodeOptions.is, ZwaveNodeOptions);
 </script>

panels/config/zwave/zwave-usercodes.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-card/paper-card.html">
 <link rel="import" href="../../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
 <link rel='import' href='../../../bower_components/paper-item/paper-item.html'>
@@ -73,10 +73,11 @@
 </dom-module>
 <script>
 
-Polymer({
+class ZwaveUsercodes extends Polymer.Element {
-  is: 'zwave-usercodes',
+  static get is() { return 'zwave-usercodes'; }
 
-  properties: {
+  static get properties() {
+    return {
       hass: {
         type: Object,
       },
@@ -108,38 +109,41 @@ Polymer({
         type: Number,
         value: -1
       },
-  },
+    };
+  }
 
-  listeners: {
+  ready() {
-    'hass-service-called': 'serviceCalled',
+    super.ready();
-  },
+    this.addEventListener('hass-service-called', ev => this.serviceCalled(ev));
-  serviceCalled: function (ev) {
+  }
+
+  serviceCalled(ev) {
     if (ev.detail.success) {
       var foo = this;
       setTimeout(function () {
         foo.refreshUserCodes(foo.selectedNode);
       }, 5000);
     }
-  },
+  }
 
-  isUserCodeSelected: function (selectedUserCode) {
+  isUserCodeSelected(selectedUserCode) {
     if (selectedUserCode === -1) return false;
     return true;
-  },
+  }
 
-  computeSelectCaptionUserCodes: function (stateObj) {
+  computeSelectCaptionUserCodes(stateObj) {
     return (stateObj.key + ': ' + stateObj.value.label);
-  },
+  }
 
-  selectedUserCodeChanged: function (selectedUserCode) {
+  selectedUserCodeChanged(selectedUserCode) {
     if (this.selectedUserCode === -1 || selectedUserCode === -1) return;
     var value = (parseInt((this.userCodes[selectedUserCode].value.code).trim()));
     this.userCodeMaxLen = (this.userCodes[selectedUserCode].value.length);
     if (isNaN(value)) this.selectedUserCodeValue = '';
     else this.selectedUserCodeValue = value;
-  },
+  }
 
-  computeUserCodeServiceData: function (selectedUserCodeValue, type) {
+  computeUserCodeServiceData(selectedUserCodeValue, type) {
     if (this.selectedNode === -1 || !selectedUserCodeValue) return -1;
     var serviceData = null;
     var valueData = null;
@@ -158,9 +162,9 @@ Polymer({
       };
     }
     return serviceData;
-  },
+  }
 
-  refreshUserCodes: function (selectedNode) {
+  refreshUserCodes(selectedNode) {
     this.selectedUserCodeValue = '';
     var userCodes = [];
     this.hass.callApi('GET', 'zwave/usercodes/' + this.nodes[selectedNode].attributes.node_id).then(function (usercodes) {
@@ -173,6 +177,8 @@ Polymer({
       this.userCodes = userCodes;
       this.selectedUserCodeChanged(this.selectedUserCode);
     }.bind(this));
-  },
+  }
-});
+}
+
+customElements.define(ZwaveUsercodes.is, ZwaveUsercodes);
 </script>

panels/config/zwave/zwave-values.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-card/paper-card.html">
 <link rel="import" href="../../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
 <link rel='import' href='../../../bower_components/paper-item/paper-item.html'>
@@ -68,10 +68,11 @@
 </dom-module>
 
 <script>
-Polymer({
+class ZwaveValues extends Polymer.Element {
-  is: 'zwave-values',
+  static get is() { return 'zwave-values'; }
 
-  properties: {
+  static get properties() {
+    return {
       hass: {
         type: Object,
       },
@@ -93,34 +94,36 @@ Polymer({
         value: -1,
         observer: 'selectedValueChanged'
       },
-  },
+    };
+  }
 
-  listeners: {
+  ready() {
-    'hass-service-called': 'serviceCalled',
+    super.ready();
-  },
+    this.addEventListener('hass-service-called', ev => this.serviceCalled(ev));
+  }
 
-  serviceCalled: function (ev) {
+  serviceCalled(ev) {
     var foo = this;
     if (ev.detail.success) {
       setTimeout(function () {
         foo.refreshValues(foo.selectedNode);
       }, 5000);
     }
-  },
+  }
 
-  computeSelectCaption: function (item) {
+  computeSelectCaption(item) {
     return item.value.label + ' (Instance: ' + item.value.instance + ', Index: ' + item.value.index + ')';
-  },
+  }
 
-  computeGetValueName: function (selectedValue) {
+  computeGetValueName(selectedValue) {
     return this.values[selectedValue].value.label;
-  },
+  }
 
-  computeIsValueSelected: function (selectedValue) {
+  computeIsValueSelected(selectedValue) {
     return (!this.nodes || this.selectedNode === -1 || selectedValue === -1);
-  },
+  }
 
-  refreshValues: function (selectedNode) {
+  refreshValues(selectedNode) {
     var valueData = [];
     this.hass.callApi('GET', 'zwave/values/' + this.nodes[selectedNode].attributes.node_id).then(function (values) {
       Object.keys(values).forEach(function (key) {
@@ -132,18 +135,18 @@ Polymer({
       this.values = valueData;
       this.selectedValueChanged(this.selectedValue);
     }.bind(this));
-  },
+  }
 
-  computeValueNameServiceData: function (newValueNameInput) {
+  computeValueNameServiceData(newValueNameInput) {
     if (!this.selectedNode === -1 || this.selectedValue === -1) return -1;
     return {
       node_id: this.nodes[this.selectedNode].attributes.node_id,
       value_id: this.values[this.selectedValue].key,
       name: newValueNameInput,
     };
-  },
+  }
 
-  selectedValueChanged: function (selectedValue) {
+  selectedValueChanged(selectedValue) {
     if (!this.selectedNode === -1 || this.selectedValue === -1) return;
     var el = this;
     this.hass.callApi('GET', 'config/zwave/device_config/' + this.values[selectedValue].value.entity_id)
@@ -151,7 +154,9 @@ Polymer({
         el.entityIgnored = data.ignored || false;
         el.entityPollingIntensity = el.values[selectedValue].value.poll_intensity;
       });
-  },
+  }
-});
+}
+
+customElements.define(ZwaveValues.is, ZwaveValues);
 </script>
 

panels/dev-event/events-list.html

@@ -1,5 +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'>
 
 <dom-module id="events-list">
   <template>
@@ -31,10 +32,11 @@
 </dom-module>
 
 <script>
-  Polymer({
+class EventsList extends window.hassMixins.EventsMixin(Polymer.Element) {
-    is: 'events-list',
+  static get is() { return 'events-list'; }
 
-    properties: {
+  static get properties() {
+    return {
       hass: {
         type: Object,
       },
@@ -42,17 +44,21 @@
       events: {
         type: Array,
       },
-    },
+    };
+  }
 
-    attached: function () {
+  connectedCallback() {
+    super.connectedCallback();
     this.hass.callApi('GET', 'events').then(function (events) {
       this.events = events;
     }.bind(this));
-    },
+  }
 
-    eventSelected: function (ev) {
+  eventSelected(ev) {
     ev.preventDefault();
     this.fire('event-selected', { eventType: ev.model.event.event });
-    },
+  }
-  });
+}
+
+customElements.define(EventsList.is, EventsList);
 </script>

panels/dev-event/ha-panel-dev-event.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-flex-layout/iron-flex-layout-classes.html">
 
@@ -12,6 +12,7 @@
 
 <link rel="import" href="../../src/components/ha-menu-button.html">
 <link rel="import" href="../../src/resources/ha-style.html">
+<link rel='import' href='../../src/util/hass-mixins.html'>
 
 <link rel="import" href="./events-list.html">
 
@@ -71,10 +72,11 @@
 </dom-module>
 
 <script>
-Polymer({
+class HaPanelDevEvent extends window.hassMixins.EventsMixin(Polymer.Element) {
-  is: 'ha-panel-dev-event',
+  static get is() { return 'ha-panel-dev-event'; }
 
-  properties: {
+  static get properties() {
+    return {
       hass: {
         type: Object,
       },
@@ -98,13 +100,14 @@ Polymer({
         type: String,
         value: '',
       },
-  },
+    };
+  }
 
-  eventSelected: function (ev) {
+  eventSelected(ev) {
     this.eventType = ev.detail.eventType;
-  },
+  }
 
-  fireEvent: function () {
+  fireEvent() {
     var eventData;
 
     try {
@@ -122,11 +125,13 @@ Polymer({
           message: 'Event ' + this.eventType + ' successful fired!',
         });
       }.bind(this));
-  },
+  }
 
-  computeFormClasses: function (narrow) {
+  computeFormClasses(narrow) {
     return narrow ?
       'content fit' : 'content fit layout horizontal';
-  },
+  }
-});
+}
+
+customElements.define(HaPanelDevEvent.is, HaPanelDevEvent);
 </script>

panels/dev-info/ha-panel-dev-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="../../bower_components/paper-icon-button/paper-icon-button.html">
 
@@ -103,10 +103,11 @@
 </dom-module>
 
 <script>
-Polymer({
+class HaPanelDevInfo extends Polymer.Element {
-  is: 'ha-panel-dev-info',
+  static get is() { return 'ha-panel-dev-info'; }
 
-  properties: {
+  static get properties() {
+    return {
       hass: {
         type: Object,
       },
@@ -130,13 +131,15 @@ Polymer({
         type: String,
         value: '',
       },
-  },
+    };
+  }
 
-  attached: function () {
+  connectedCallback() {
+    super.connectedCallback();
     this.refreshErrorLog();
-  },
+  }
 
-  refreshErrorLog: function (ev) {
+  refreshErrorLog(ev) {
     if (ev) ev.preventDefault();
 
     this.errorLog = 'Loading error log…';
@@ -144,6 +147,8 @@ Polymer({
     this.hass.callApi('GET', 'error_log').then(function (log) {
       this.errorLog = log || 'No errors have been reported.';
     }.bind(this));
-  },
+  }
-});
+}
+
+customElements.define(HaPanelDevInfo.is, HaPanelDevInfo);
 </script>

panels/dev-mqtt/ha-panel-dev-mqtt.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/app-layout/app-header-layout/app-header-layout.html'>
 <link rel='import' href='../../bower_components/app-layout/app-header/app-header.html'>
@@ -79,22 +79,26 @@
 </dom-module>
 
 <script>
-Polymer({
+class HaPanelDevMqtt extends Polymer.Element {
-  is: 'ha-panel-dev-mqtt',
+  static get is() { return 'ha-panel-dev-mqtt'; }
 
-  properties: {
+  static get properties() {
+    return {
       hass: Object,
       narrow: Boolean,
       showMenu: Boolean,
       topic: String,
       payload: String,
-  },
+    };
+  }
 
-  _publish: function () {
+  _publish() {
     this.hass.callService('mqtt', 'publish', {
       topic: this.topic,
       payload_template: this.payload,
     });
-  },
+  }
-});
+}
+
+customElements.define(HaPanelDevMqtt.is, HaPanelDevMqtt);
 </script>

panels/dev-service/ha-panel-dev-service.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-button/paper-button.html'>
 <link rel='import' href='../../bower_components/paper-input/paper-textarea.html'>
@@ -147,10 +147,11 @@
 </dom-module>
 
 <script>
-Polymer({
+class HaPanelDevService extends Polymer.Element {
-  is: 'ha-panel-dev-service',
+  static get is() { return 'ha-panel-dev-service'; }
 
-  properties: {
+  static get properties() {
+    return {
       hass: {
         type: Object,
       },
@@ -196,13 +197,14 @@ Polymer({
         type: Object,
         computed: 'computeServiceDomains(hass)',
       },
-  },
+    };
+  }
 
-  computeServiceDomains: function (hass) {
+  computeServiceDomains(hass) {
     return hass.config.services;
-  },
+  }
 
-  computeAttributesArray: function (serviceDomains, domain, service) {
+  computeAttributesArray(serviceDomains, domain, service) {
     if (!serviceDomains) return [];
     if (!(domain in serviceDomains)) return [];
     if (!(service in serviceDomains[domain])) return [];
@@ -211,49 +213,49 @@ Polymer({
     return Object.keys(fields).map(function (field) {
       return Object.assign({}, fields[field], { key: field });
     });
-  },
+  }
 
-  computeDescription: function (serviceDomains, domain, service) {
+  computeDescription(serviceDomains, domain, service) {
     if (!serviceDomains) return undefined;
     if (!(domain in serviceDomains)) return undefined;
     if (!(service in serviceDomains[domain])) return undefined;
     return serviceDomains[domain][service].description;
-  },
+  }
 
-  computeDomains: function (serviceDomains) {
+  computeDomains(serviceDomains) {
     return Object.keys(serviceDomains).sort();
-  },
+  }
 
-  computeServices: function (serviceDomains, domain) {
+  computeServices(serviceDomains, domain) {
     if (!(domain in serviceDomains)) return [];
 
     return Object.keys(serviceDomains[domain]).sort();
-  },
+  }
 
-  computeServiceKey: function (domain) {
+  computeServiceKey(domain) {
     if (!domain) {
       return 'panel-dev-service-state-service';
     }
     return 'panel-dev-service-state-service.' + domain;
-  },
+  }
 
-  computeServicedataKey: function (domain, service) {
+  computeServicedataKey(domain, service) {
     if (!domain || !service) {
       return 'panel-dev-service-state-servicedata';
     }
     return 'panel-dev-service-state-servicedata.' + domain + '.' + service;
-  },
+  }
 
-  domainChanged: function () {
+  domainChanged() {
     this.service = '';
     this.serviceData = '';
-  },
+  }
 
-  serviceChanged: function () {
+  serviceChanged() {
     this.serviceData = '';
-  },
+  }
 
-  callService: function () {
+  callService() {
     var serviceData;
     try {
       serviceData = this.serviceData ? JSON.parse(this.serviceData) : {};
@@ -265,6 +267,8 @@ Polymer({
     }
 
     this.hass.callService(this.domain, this.service, serviceData);
-  },
+  }
-});
+}
+
+customElements.define(HaPanelDevService.is, HaPanelDevService);
 </script>

panels/dev-state/ha-panel-dev-state.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-button/paper-button.html">
 <link rel="import" href="../../bower_components/paper-input/paper-input.html">
@@ -98,10 +98,11 @@
 </dom-module>
 
 <script>
-Polymer({
+class HaPanelDevState extends Polymer.Element {
-  is: 'ha-panel-dev-state',
+  static get is() { return 'ha-panel-dev-state'; }
 
-  properties: {
+  static get properties() {
+    return {
       hass: {
         type: Object,
       },
@@ -140,17 +141,18 @@ Polymer({
         type: Array,
         computed: 'computeEntities(hass)',
       },
-  },
+    };
+  }
 
-  entitySelected: function (ev) {
+  entitySelected(ev) {
     var state = ev.model.entity;
     this._entityId = state.entity_id;
     this._state = state.state;
     this._stateAttributes = JSON.stringify(state.attributes, null, '  ');
     ev.preventDefault();
-  },
+  }
 
-  handleSetState: function () {
+  handleSetState() {
     var attr;
     var attrRaw = this._stateAttributes.replace(/^\s+|\s+$/g, '');
     try {
@@ -167,9 +169,9 @@ Polymer({
       state: this._state,
       attributes: attr,
     });
-  },
+  }
 
-  computeEntities: function (hass) {
+  computeEntities(hass) {
     return Object.keys(hass.states).map(function (key) { return hass.states[key]; })
       .sort(function (entityA, entityB) {
         if (entityA.entity_id < entityB.entity_id) {
@@ -180,13 +182,13 @@ Polymer({
         }
         return 0;
       });
-  },
+  }
 
-  computeShowAttributes: function (narrow, _showAttributes) {
+  computeShowAttributes(narrow, _showAttributes) {
     return !narrow && _showAttributes;
-  },
+  }
 
-  attributeString: function (entity) {
+  attributeString(entity) {
     var output = '';
     var i;
     var keys;
@@ -203,6 +205,8 @@ Polymer({
     }
 
     return output;
-  },
+  }
-});
+}
+
+customElements.define(HaPanelDevState.is, HaPanelDevState);
 </script>

panels/dev-template/ha-panel-dev-template.html

@@ -1,4 +1,5 @@
-<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/polymer/lib/utils/debounce.html">
 
 <link rel="import" href="../../bower_components/paper-input/paper-textarea.html">
 <link rel="import" href="../../bower_components/paper-spinner/paper-spinner.html">
@@ -88,10 +89,11 @@
 </dom-module>
 
 <script>
-Polymer({
+class HaPanelDevTemplate extends Polymer.Element {
-  is: 'ha-panel-dev-template',
+  static get is() { return 'ha-panel-dev-template'; }
 
-  properties: {
+  static get properties() {
+    return {
       hass: {
         type: Object,
       },
@@ -152,25 +154,30 @@ Polymer({
         type: String,
         value: '',
       },
-  },
+    };
+  }
 
-  computeFormClasses: function (narrow) {
+  computeFormClasses(narrow) {
     return narrow ?
       'content fit' : 'content fit layout horizontal';
-  },
+  }
 
-  computeRenderedClasses: function (error) {
+  computeRenderedClasses(error) {
     return error ? 'error rendered' : 'rendered';
-  },
+  }
 
-  templateChanged: function () {
+  templateChanged() {
     if (this.error) {
       this.error = false;
     }
-    this.debounce('render-template', this.renderTemplate.bind(this), 500);
+    this._debouncer = Polymer.Debouncer.debounce(
-  },
+      this._debouncer,
+      Polymer.Async.timeOut.after(500),
+      () => { this.renderTemplate(); }
+    );
+  }
 
-  renderTemplate: function () {
+  renderTemplate() {
     this.rendering = true;
 
     this.hass.callApi('POST', 'template', { template: this.template })
@@ -182,6 +189,8 @@ Polymer({
         this.error = true;
         this.rendering = false;
       }.bind(this));
-  },
+  }
-});
+}
+
+customElements.define(HaPanelDevTemplate.is, HaPanelDevTemplate);
 </script>

panels/hassio/addon-store/hassio-addon-repository.html

@@ -1,8 +1,10 @@
-<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-card/paper-card.html">
 <link rel="import" href="../../../bower_components/paper-item/paper-item.html">
 <link rel="import" href="../../../bower_components/paper-item/paper-item-body.html">
 
+<link rel='import' href='../../../src/util/hass-mixins.html'>
+
 <dom-module id="hassio-addon-repository">
   <template>
     <style include="iron-flex ha-style">
@@ -41,10 +43,11 @@
 </dom-module>
 
 <script>
-Polymer({
+class HassioAddonRepository extends window.hassMixins.EventsMixin(Polymer.Element) {
-  is: 'hassio-addon-repository',
+  static get is() { return 'hassio-addon-repository'; }
 
-  properties: {
+  static get properties() {
+    return {
       repo: {
         type: Object,
       },
@@ -52,24 +55,27 @@ Polymer({
       addons: {
         type: Array,
       },
-  },
+    };
+  }
 
-  computeShowIntro: function (repo) {
+  computeShowIntro(repo) {
     return repo.url || repo.maintainer;
-  },
+  }
 
-  computeInstallStatus: function (addon) {
+  computeInstallStatus(addon) {
     if (!addon.installed) {
       return 'Not installed';
     } else if (addon.installed !== addon.version) {
       return addon.installed + ' (update available)';
     }
     return addon.installed;
-  },
+  }
 
-  addonTapped: function (ev) {
+  addonTapped(ev) {
     history.pushState(null, null, '/hassio/store/' + this.addons[ev.model.index].slug);
     this.fire('location-changed');
-  },
+  }
-});
+}
+
+customElements.define(HassioAddonRepository.is, HassioAddonRepository);
 </script>

panels/hassio/addon-store/hassio-addon-store-overview.html

@@ -1,9 +1,11 @@
-<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/app-layout/app-header-layout/app-header-layout.html">
 <link rel="import" href="../../../bower_components/app-layout/app-header/app-header.html">
 <link rel="import" href="../../../bower_components/app-layout/app-toolbar/app-toolbar.html">
 <link rel="import" href="../../../bower_components/paper-icon-button/paper-icon-button.html">
 
+<link rel='import' href='../../../src/util/hass-mixins.html'>
+
 <link rel="import" href="./hassio-repositories-editor.html">
 <link rel="import" href="./hassio-addon-repository.html">
 
@@ -56,10 +58,11 @@
 </dom-module>
 
 <script>
-Polymer({
+class HassioAddonStoreOverview extends window.hassMixins.EventsMixin(Polymer.Element) {
-  is: 'hassio-addon-store-overview',
+  static get is() { return 'hassio-addon-store-overview'; }
 
-  properties: {
+  static get properties() {
+    return {
       hass: {
         type: Object,
       },
@@ -82,20 +85,23 @@ Polymer({
       supervisorInfo: {
         type: Object,
       }
-  },
+    };
+  }
 
-  computeAddOns: function (repo) {
+  computeAddOns(repo) {
     return this.addons.filter(function (addon) {
       return addon.repository === repo;
     });
-  },
+  }
 
-  refreshTapped: function () {
+  refreshTapped() {
     this.fire('hassio-store-refresh');
-  },
+  }
 
-  backTapped: function () {
+  backTapped() {
     history.back();
-  },
+  }
-});
+}
+
+customElements.define(HassioAddonStoreOverview.is, HassioAddonStoreOverview);
 </script>

panels/hassio/addon-store/hassio-addon-store-view.html

@@ -1,9 +1,10 @@
-<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/app-layout/app-header-layout/app-header-layout.html">
 <link rel="import" href="../../../bower_components/app-layout/app-header/app-header.html">
 <link rel="import" href="../../../bower_components/app-layout/app-toolbar/app-toolbar.html">
 <link rel="import" href="../../../bower_components/paper-card/paper-card.html">
 
+<link rel='import' href='../../../src/util/hass-mixins.html'>
 <link rel="import" href="../../../src/components/buttons/ha-call-api-button.html">
 
 <dom-module id="hassio-addon-store-view">
@@ -90,10 +91,11 @@
 </dom-module>
 
 <script>
-Polymer({
+class HassioAddonStoreView extends window.hassMixins.EventsMixin(Polymer.Element) {
-  is: 'hassio-addon-store-view',
+  static get is() { return 'hassio-addon-store-view'; }
 
-  properties: {
+  static get properties() {
+    return {
       hass: {
         type: Object,
       },
@@ -111,29 +113,33 @@ Polymer({
       repo: {
         type: Object,
       },
-  },
+    };
+  }
 
-  listeners: {
+  ready() {
-    'hass-api-called': 'apiCalled',
+    super.ready();
-  },
+    this.addEventListener('hass-api-called', ev => this.apiCalled(ev));
+  }
 
-  pathInstall: function (addon) {
+  pathInstall(addon) {
     return addon && 'hassio/addons/' + addon.slug + '/install';
-  },
+  }
 
-  apiCalled: function (ev) {
+  apiCalled(ev) {
     if (ev.detail.success) {
       this.openAddon();
     }
-  },
+  }
 
-  openAddon: function () {
+  openAddon() {
     history.pushState(null, null, '/hassio/addon/' + this.addon.slug);
     this.fire('location-changed');
-  },
+  }
 
-  backTapped: function () {
+  backTapped() {
     history.back();
-  },
+  }
-});
+}
+
+customElements.define(HassioAddonStoreView.is, HassioAddonStoreView);
 </script>

panels/hassio/addon-store/hassio-addon-store.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/app-layout/app-header-layout/app-header-layout.html">
 <link rel="import" href="../../../bower_components/app-layout/app-header/app-header.html">
 <link rel="import" href="../../../bower_components/app-layout/app-toolbar/app-toolbar.html">
@@ -39,10 +39,11 @@
 </dom-module>
 
 <script>
-Polymer({
+class HassioAddonStore extends Polymer.Element {
-  is: 'hassio-addon-store',
+  static get is() { return 'hassio-addon-store'; }
 
-  properties: {
+  static get properties() {
+    return {
       hass: {
         type: Object,
       },
@@ -74,26 +75,28 @@ Polymer({
       supervisorInfo: {
         type: Object,
       }
-  },
+    };
+  }
 
-  listeners: {
+  ready() {
-    'hass-api-called': 'apiCalled',
+    super.ready();
-    'hassio-store-refresh': 'refreshData',
+    this.addEventListener('hass-api-called', ev => this.apiCalled(ev));
-  },
+    this.addEventListener('hassio-store-refresh', ev => this.refreshData(ev));
+  }
 
-  apiCalled: function (ev) {
+  apiCalled(ev) {
     if (ev.detail.success) {
       this._loadData();
     }
-  },
+  }
 
-  _visibleChanged: function (visible) {
+  _visibleChanged(visible) {
     if (visible) {
       this._loadData();
     }
-  },
+  }
 
-  _loadData: function () {
+  _loadData() {
     this.hass.callApi('get', 'hassio/addons')
       .then(function (info) {
         this.addons = info.data.addons;
@@ -102,18 +105,18 @@ Polymer({
         this.addons = [];
         this.repos = [];
       }.bind(this));
-  },
+  }
 
-  computeActiveAddon: function (addons, selectedAddon) {
+  computeActiveAddon(addons, selectedAddon) {
     for (var i = 0; i < addons.length; i++) {
       if (addons[i].slug === selectedAddon) {
         return addons[i];
       }
     }
     return null;
-  },
+  }
 
-  computeActiveRepo: function (repos, selectedAddonObject) {
+  computeActiveRepo(repos, selectedAddonObject) {
     if (!selectedAddonObject) return null;
 
     for (var i = 0; i < repos.length; i++) {
@@ -122,13 +125,15 @@ Polymer({
       }
     }
     return null;
-  },
+  }
 
-  refreshData: function () {
+  refreshData() {
     this.hass.callApi('post', 'hassio/addons/reload')
       .then(function () {
         this._loadData();
       }.bind(this));
-  },
+  }
-});
+}
+
+customElements.define(HassioAddonStore.is, HassioAddonStore);
 </script>

panels/hassio/addon-store/hassio-repositories-editor.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-card/paper-card.html">
 <link rel="import" href="../../../bower_components/iron-autogrow-textarea/iron-autogrow-textarea.html">
 
@@ -34,10 +34,11 @@
 </dom-module>
 
 <script>
-Polymer({
+class HassioRepositoriesEditor extends Polymer.Element {
-  is: 'hassio-repositories-editor',
+  static get is() { return 'hassio-repositories-editor'; }
 
-  properties: {
+  static get properties() {
+    return {
       hass: {
         type: Object,
       },
@@ -51,22 +52,25 @@ Polymer({
         type: Array,
         observer: 'reposChanged',
       },
-  },
+    };
+  }
 
-  reposChanged: function (repos) {
+  reposChanged(repos) {
     this.options = repos
       .filter(function (el) { return el.source !== null; })
       .map(function (el) { return el.source; })
       .join('\n');
-  },
+  }
 
-  computeOptionsData: function (options) {
+  computeOptionsData(options) {
     var parsed = options.trim();
     parsed = parsed ?
       parsed.split('\n').map(function (ent) { return ent.trim(); }) : [];
     return {
       addons_repositories: parsed,
     };
-  },
+  }
-});
+}
+
+customElements.define(HassioRepositoriesEditor.is, HassioRepositoriesEditor);
 </script>

panels/hassio/addon-view/hassio-addon-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="../../../bower_components/app-layout/app-header-layout/app-header-layout.html">
 <link rel="import" href="../../../bower_components/app-layout/app-header/app-header.html">
 <link rel="import" href="../../../bower_components/app-layout/app-toolbar/app-toolbar.html">
@@ -172,10 +172,11 @@
 </dom-module>
 
 <script>
-Polymer({
+class HassioAddonInfo extends Polymer.Element {
-  is: 'hassio-addon-info',
+  static get is() { return 'hassio-addon-info'; }
 
-  properties: {
+  static get properties() {
+    return {
       hass: Object,
       addonInfo: Object,
       addonState: Object,
@@ -184,54 +185,57 @@ Polymer({
         type: Boolean,
         computed: '_computeIsRunning(addonState)',
       },
-  },
+    };
+  }
 
-  _computeIsRunning: function (addonState) {
+  _computeIsRunning(addonState) {
     return addonState && addonState.state === 'started';
-  },
+  }
 
-  _computeUpdateAvailable: function (data) {
+  _computeUpdateAvailable(data) {
     return data && !data.detached && data.version !== data.last_version;
-  },
+  }
 
-  _pathStart: function (addon) {
+  _pathStart(addon) {
     return 'hassio/addons/' + addon + '/start';
-  },
+  }
 
-  _pathStop: function (addon) {
+  _pathStop(addon) {
     return 'hassio/addons/' + addon + '/stop';
-  },
+  }
 
-  _pathRestart: function (addon) {
+  _pathRestart(addon) {
     return 'hassio/addons/' + addon + '/restart';
-  },
+  }
 
-  _pathUninstall: function (addon) {
+  _pathUninstall(addon) {
     return 'hassio/addons/' + addon + '/uninstall';
-  },
+  }
 
-  _pathUpdate: function (addon) {
+  _pathUpdate(addon) {
     return 'hassio/addons/' + addon + '/update';
-  },
+  }
 
-  _pathAddonOptions: function (addon) {
+  _pathAddonOptions(addon) {
     return 'hassio/addons/' + addon + '/options';
-  },
+  }
 
-  _pathWebui: function (webui) {
+  _pathWebui(webui) {
     return webui && webui.replace('[HOST]', document.location.hostname);
-  },
+  }
 
-  _pathLogo: function (addon) {
+  _pathLogo(addon) {
     return '/api/hassio/addons/' + addon + '/logo';
-  },
+  }
 
-  _dataToggleAutoUpdate: function (addon, addonState) {
+  _dataToggleAutoUpdate(addon, addonState) {
     return addonState && { auto_update: !addonState.auto_update };
-  },
+  }
 
-  _dataToggleBoot: function (addon, addonState) {
+  _dataToggleBoot(addon, addonState) {
     return addonState && { boot: addonState.boot === 'manual' ? 'auto' : 'manual' };
   }
-});
+}
+
+customElements.define(HassioAddonInfo.is, HassioAddonInfo);
 </script>

panels/hassio/addon-view/hassio-addon-logs.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-card/paper-card.html">
 <link rel="import" href="../../../bower_components/paper-button/paper-button.html">
 
@@ -22,10 +22,11 @@
 </dom-module>
 
 <script>
-Polymer({
+class HassioAddonLogs extends Polymer.Element {
-  is: 'hassio-addon-logs',
+  static get is() { return 'hassio-addon-logs'; }
 
-  properties: {
+  static get properties() {
+    return {
       hass: {
         type: Object,
       },
@@ -39,22 +40,25 @@ Polymer({
         type: String,
         value: '',
       },
-  },
+    };
+  }
 
-  addonChanged: function (addon) {
+  addonChanged(addon) {
     if (!this.hass) {
       setTimeout(function () { this.addonChanged(addon); }.bind(this), 0);
       return;
     }
 
     this.refresh();
-  },
+  }
 
-  refresh: function () {
+  refresh() {
     this.hass.callApi('get', 'hassio/addons/' + this.addon + '/logs')
       .then(function (info) {
         this.addonLogs = info;
       }.bind(this));
-  },
+  }
-});
+}
+
+customElements.define(HassioAddonLogs.is, HassioAddonLogs);
 </script>

panels/hassio/addon-view/hassio-addon-network.html

@@ -1,7 +1,9 @@
-<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-card/paper-card.html">
 <link rel="import" href="../../../bower_components/paper-input/paper-input.html">
 
+<link rel='import' href='../../../src/util/hass-mixins.html'>
+
 <link rel="import" href="../../../src/components/buttons/ha-call-api-button.html">
 
 <dom-module id="hassio-addon-network">
@@ -67,10 +69,11 @@
 </dom-module>
 
 <script>
-Polymer({
+class HassioAddonNetwork extends window.hassMixins.EventsMixin(Polymer.Element) {
-  is: 'hassio-addon-network',
+  static get is() { return 'hassio-addon-network'; }
 
-  properties: {
+  static get properties() {
+    return {
       hass: Object,
       addon: String,
       errors: {
@@ -94,9 +97,10 @@ Polymer({
           network: null,
         },
       },
-  },
+    };
+  }
 
-  _addonStateChanged: function (addonState) {
+  _addonStateChanged(addonState) {
     if (!addonState) return;
 
     var network = addonState.network || {};
@@ -107,9 +111,9 @@ Polymer({
       };
     });
     this._data = items.sort(function (el1, el2) { return el1.host - el2.host; });
-  },
+  }
 
-  _saveTapped: function () {
+  _saveTapped() {
     this.errors = null;
     var toSend = {};
     this._data.forEach(function (item) {
@@ -124,10 +128,12 @@ Polymer({
     }.bind(this), function (resp) {
       this.errors = resp.body.message;
     }.bind(this));
-  },
+  }
 
-  _pathAddonOptions: function (addon) {
+  _pathAddonOptions(addon) {
     return 'hassio/addons/' + addon + '/options';
-  },
+  }
-});
+}
+
+customElements.define(HassioAddonNetwork.is, HassioAddonNetwork);
 </script>

panels/hassio/addon-view/hassio-addon-options.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-card/paper-card.html">
 <link rel="import" href="../../../bower_components/iron-autogrow-textarea/iron-autogrow-textarea.html">
 <link rel="import" href="../../../bower_components/iron-flex-layout/iron-flex-layout.html">
@@ -51,10 +51,11 @@
 </dom-module>
 
 <script>
-Polymer({
+class HassioAddonOptions extends Polymer.Element {
-  is: 'hassio-addon-options',
+  static get is() { return 'hassio-addon-options'; }
 
-  properties: {
+  static get properties() {
+    return {
       hass: {
         type: Object,
       },
@@ -88,21 +89,22 @@ Polymer({
         type: Object,
         value: { options: {} },
       },
-  },
+    };
+  }
 
-  addonStateChanged: function (addonState) {
+  addonStateChanged(addonState) {
     this.options = addonState ? JSON.stringify(addonState.options, null, 2) : '';
-  },
+  }
 
-  parseOptions: function (options) {
+  parseOptions(options) {
     try {
       return JSON.parse(options);
     } catch (err) {
       return null;
     }
-  },
+  }
 
-  saveTapped: function () {
+  saveTapped() {
     this.errors = null;
 
     this.hass.callApi('post', 'hassio/addons/' + this.addon + '/options', {
@@ -110,16 +112,18 @@ Polymer({
     }).catch(function (resp) {
       this.errors = resp.body.message;
     }.bind(this));
-  },
+  }
 
-  computeOptionsData: function (optionsParsed) {
+  computeOptionsData(optionsParsed) {
     return {
       options: optionsParsed,
     };
-  },
+  }
 
-  pathOptions: function (addon) {
+  pathOptions(addon) {
     return 'hassio/addons/' + addon + '/options';
-  },
+  }
-});
+}
+
+customElements.define(HassioAddonOptions.is, HassioAddonOptions);
 </script>

panels/hassio/addon-view/hassio-addon-view.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/app-layout/app-header-layout/app-header-layout.html">
 <link rel="import" href="../../../bower_components/app-layout/app-header/app-header.html">
 <link rel="import" href="../../../bower_components/app-layout/app-toolbar/app-toolbar.html">
@@ -70,10 +70,11 @@
 </dom-module>
 
 <script>
-Polymer({
+class HassioAddonView extends Polymer.Element {
-  is: 'hassio-addon-view',
+  static get is() { return 'hassio-addon-view'; }
 
-  properties: {
+  static get properties() {
+    return {
       hass: {
         type: Object,
       },
@@ -102,13 +103,15 @@ Polymer({
         type: String,
         value: '',
       },
-  },
+    };
+  }
 
-  listeners: {
+  ready() {
-    'hass-api-called': 'apiCalled',
+    super.ready();
-  },
+    this.addEventListener('hass-api-called', ev => this.apiCalled(ev));
+  }
 
-  apiCalled: function (ev) {
+  apiCalled(ev) {
     var path = ev.detail.path;
 
     if (!path) return;
@@ -118,9 +121,9 @@ Polymer({
     } else {
       this._routeDataChanged(this._routeData);
     }
-  },
+  }
 
-  _routeDataChanged: function (routeData) {
+  _routeDataChanged(routeData) {
     if (!routeData || !routeData.addon) return;
     this.hass.callApi('get', 'hassio/addons/' + routeData.addon + '/info')
       .then(function (info) {
@@ -128,9 +131,9 @@ Polymer({
       }.bind(this), function () {
         this.addonState = null;
       }.bind(this));
-  },
+  }
 
-  computeAddonInfo: function (supervisorInfo, addon) {
+  computeAddonInfo(supervisorInfo, addon) {
     if (!supervisorInfo) return null;
 
     for (var i = 0; i < supervisorInfo.addons.length; i++) {
@@ -138,10 +141,12 @@ Polymer({
       if (addonInfo.slug === addon) return addonInfo;
     }
     return null;
-  },
+  }
 
-  backTapped: function () {
+  backTapped() {
     history.back();
-  },
+  }
-});
+}
+
+customElements.define(HassioAddonView.is, HassioAddonView);
 </script>

panels/hassio/advanced/hassio-advanced.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/app-layout/app-header-layout/app-header-layout.html">
 <link rel="import" href="../../../bower_components/app-layout/app-header/app-header.html">
 <link rel="import" href="../../../bower_components/app-layout/app-toolbar/app-toolbar.html">
@@ -67,10 +67,11 @@
 </dom-module>
 
 <script>
-Polymer({
+class HassioAdvanced extends Polymer.Element {
-  is: 'hassio-advanced',
+  static get is() { return 'hassio-advanced'; }
 
-  properties: {
+  static get properties() {
+    return {
       hass: {
         type: Object,
       },
@@ -89,10 +90,13 @@ Polymer({
         type: Object,
         value: {},
       },
-  },
+    };
+  }
 
-  backTapped: function () {
+  backTapped() {
     history.back();
-  },
+  }
-});
+}
+
+customElements.define(HassioAdvanced.is, HassioAdvanced);
 </script>

panels/hassio/advanced/hassio-hass-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="../../../bower_components/paper-card/paper-card.html">
 
 <link rel="import" href="../../../src/components/buttons/ha-call-api-button.html">
@@ -57,10 +57,11 @@
 </dom-module>
 
 <script>
-Polymer({
+class HassioHassInfo extends Polymer.Element {
-  is: 'hassio-hass-info',
+  static get is() { return 'hassio-hass-info'; }
 
-  properties: {
+  static get properties() {
+    return {
       hass: {
         type: Object,
       },
@@ -69,13 +70,15 @@ Polymer({
         type: Object,
         value: {},
       },
-  },
+    };
+  }
 
-  listeners: {
+  ready() {
-    'hass-api-called': 'apiCalled',
+    super.ready();
-  },
+    this.addEventListener('hass-api-called', ev => this.apiCalled(ev));
+  }
 
-  apiCalled: function (ev) {
+  apiCalled(ev) {
     if (ev.detail.success) {
       this.errors = null;
       return;
@@ -88,10 +91,12 @@ Polymer({
     } else {
       this.errors = response.body;
     }
-  },
+  }
 
-  computeUpdateAvailable: function (data) {
+  computeUpdateAvailable(data) {
     return data.version !== data.last_version;
-  },
+  }
-});
+}
+
+customElements.define(HassioHassInfo.is, HassioHassInfo);
 </script>

panels/hassio/advanced/hassio-host-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="../../../bower_components/paper-card/paper-card.html">
 
 <link rel="import" href="../../../src/components/buttons/ha-call-api-button.html">
@@ -76,10 +76,11 @@
 </dom-module>
 
 <script>
-Polymer({
+class HassioHostInfo extends Polymer.Element {
-  is: 'hassio-host-info',
+  static get is() { return 'hassio-host-info'; }
 
-  properties: {
+  static get properties() {
+    return {
       hass: {
         type: Object,
       },
@@ -90,13 +91,15 @@ Polymer({
       },
 
       errors: String,
-  },
+    };
+  }
 
-  listeners: {
+  ready() {
-    'hass-api-called': 'apiCalled',
+    super.ready();
-  },
+    this.addEventListener('hass-api-called', ev => this.apiCalled(ev));
+  }
 
-  apiCalled: function (ev) {
+  apiCalled(ev) {
     if (ev.detail.success) {
       this.errors = null;
       return;
@@ -109,18 +112,20 @@ Polymer({
     } else {
       this.errors = response.body;
     }
-  },
+  }
 
-  computeUpdateAvailable: function (data) {
+  computeUpdateAvailable(data) {
     return data.version !== data.last_version;
-  },
+  }
 
-  computeRebootAvailable: function (data) {
+  computeRebootAvailable(data) {
     return data.features && data.features.indexOf('reboot') !== -1;
-  },
+  }
 
-  computeShutdownAvailable: function (data) {
+  computeShutdownAvailable(data) {
     return data.features && data.features.indexOf('shutdown') !== -1;
-  },
+  }
-});
+}
+
+customElements.define(HassioHostInfo.is, HassioHostInfo);
 </script>

panels/hassio/advanced/hassio-supervisor-info.html

@@ -1,6 +1,7 @@
-<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-card/paper-card.html">
 
+<link rel='import' href='../../../src/util/hass-mixins.html'>
 <link rel="import" href="../../../src/components/buttons/ha-call-api-button.html">
 
 <dom-module id="hassio-supervisor-info">
@@ -60,10 +61,11 @@
 </dom-module>
 
 <script>
-Polymer({
+class HassioSupervisorInfo extends window.hassMixins.EventsMixin(Polymer.Element) {
-  is: 'hassio-supervisor-info',
+  static get is() { return 'hassio-supervisor-info'; }
 
-  properties: {
+  static get properties() {
+    return {
       hass: {
         type: Object,
       },
@@ -74,13 +76,15 @@ Polymer({
       },
 
       errors: String,
-  },
+    };
+  }
 
-  listeners: {
+  ready() {
-    'hass-api-called': 'apiCalled',
+    super.ready();
-  },
+    this.addEventListener('hass-api-called', ev => this.apiCalled(ev));
+  }
 
-  apiCalled: function (ev) {
+  apiCalled(ev) {
     if (ev.detail.success) {
       this.errors = null;
       return;
@@ -93,15 +97,17 @@ Polymer({
     } else {
       this.errors = response.body;
     }
-  },
+  }
 
-  computeUpdateAvailable: function (data) {
+  computeUpdateAvailable(data) {
     return data.version !== data.last_version;
-  },
+  }
 
-  supervisorLogsTapped: function () {
+  supervisorLogsTapped() {
     history.pushState(null, null, '/hassio/supervisor');
     this.fire('location-changed');
   }
-});
+}
+
+customElements.define(HassioSupervisorInfo.is, HassioSupervisorInfo);
 </script>

panels/hassio/dashboard/hassio-addons.html

@@ -1,8 +1,10 @@
-<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-card/paper-card.html">
 <link rel="import" href="../../../bower_components/paper-item/paper-item.html">
 <link rel="import" href="../../../bower_components/paper-item/paper-item-body.html">
 
+<link rel='import' href='../../../src/util/hass-mixins.html'>
+
 <dom-module id="hassio-addons">
   <template>
     <style include="ha-style">
@@ -36,10 +38,11 @@
 </dom-module>
 
 <script>
-Polymer({
+class HassioAddons extends window.hassMixins.EventsMixin(Polymer.Element) {
-  is: 'hassio-addons',
+  static get is() { return 'hassio-addons'; }
 
-  properties: {
+  static get properties() {
+    return {
       hass: {
         type: Object,
       },
@@ -57,18 +60,21 @@ Polymer({
         type: Object,
         value: [],
       },
-  },
+    };
+  }
 
-  addonTapped: function (ev) {
+  addonTapped(ev) {
     history.pushState(null, null, '/hassio/addon/' + this.data[ev.model.index].slug);
     this.fire('location-changed');
     ev.target.blur();
-  },
+  }
 
-  openStore: function (ev) {
+  openStore(ev) {
     history.pushState(null, null, '/hassio/store');
     this.fire('location-changed');
     ev.target.blur();
   }
-});
+}
+
+customElements.define(HassioAddons.is, HassioAddons);
 </script>

panels/hassio/dashboard/hassio-dashboard.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/app-layout/app-header-layout/app-header-layout.html">
 <link rel="import" href="../../../bower_components/app-layout/app-header/app-header.html">
 <link rel="import" href="../../../bower_components/app-layout/app-toolbar/app-toolbar.html">
@@ -10,7 +10,7 @@
 <link rel="import" href="../../../bower_components/paper-menu-button/paper-menu-button.html">
 <link rel="import" href="../../../bower_components/paper-item/paper-item.html">
 
-
+<link rel='import' href='../../../src/util/hass-mixins.html'>
 <link rel="import" href="../../../src/components/ha-menu-button.html">
 
 <link rel="import" href="./hassio-addons.html">
@@ -87,10 +87,11 @@
 </dom-module>
 
 <script>
-Polymer({
+class HassioDashboard extends window.hassMixins.EventsMixin(Polymer.Element) {
-  is: 'hassio-dashboard',
+  static get is() { return 'hassio-dashboard'; }
 
-  properties: {
+  static get properties() {
+    return {
       hass: {
         type: Object,
       },
@@ -113,32 +114,35 @@ Polymer({
         type: Object,
         value: {},
       },
-  },
+    };
+  }
 
-  _openStore: function (ev) {
+  _openStore(ev) {
     history.pushState(null, null, '/hassio/store');
     this.fire('location-changed');
     ev.target.blur();
-  },
+  }
 
-  _openAdvanced: function (ev) {
+  _openAdvanced(ev) {
     history.pushState(null, null, '/hassio/advanced');
     this.fire('location-changed');
     ev.target.blur();
-  },
+  }
 
-  _openSnapshot: function (ev) {
+  _openSnapshot(ev) {
     history.pushState(null, null, '/hassio/snapshot');
     this.fire('location-changed');
     ev.target.blur();
-  },
+  }
 
-  _restartHomeAssistant: function (ev) {
+  _restartHomeAssistant(ev) {
     ev.target.blur();
     // eslint-disable-next-line no-alert
     if (confirm('Are you sure you want to restart Home Assistant?')) {
       this.hass.callApi('POST', 'hassio/homeassistant/restart');
     }
   }
-});
+}
+
+customElements.define(HassioDashboard.is, HassioDashboard);
 </script>

panels/hassio/dashboard/hassio-hass-update.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-card/paper-card.html">
 
 <link rel="import" href="../../../src/components/buttons/ha-call-api-button.html">
@@ -38,19 +38,22 @@
 </dom-module>
 
 <script>
-Polymer({
+class HassioHassUpdate extends Polymer.Element {
-  is: 'hassio-hass-update',
+  static get is() { return 'hassio-hass-update'; }
 
-  properties: {
+  static get properties() {
+    return {
       hass: Object,
       data: Object,
-  },
+    };
+  }
 
-  listeners: {
+  ready() {
-    'hass-api-called': 'apiCalled',
+    super.ready();
-  },
+    this.addEventListener('hass-api-called', ev => this.apiCalled(ev));
+  }
 
-  apiCalled: function (ev) {
+  apiCalled(ev) {
     if (ev.detail.success) {
       this.errors = null;
       return;
@@ -63,10 +66,12 @@ Polymer({
     } else {
       this.errors = response.body;
     }
-  },
+  }
 
-  _computeUpdateAvailable: function (data) {
+  _computeUpdateAvailable(data) {
     return data.version !== data.last_version;
-  },
+  }
-});
+}
+
+customElements.define(HassioHassUpdate.is, HassioHassUpdate);
 </script>

panels/hassio/ha-panel-hassio.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="./hassio-main.html">
 
 <dom-module id="ha-panel-hassio">
@@ -19,10 +19,11 @@
 </dom-module>
 
 <script>
-Polymer({
+class HaPanelHassio extends Polymer.Element {
-  is: 'ha-panel-hassio',
+  static get is() { return 'ha-panel-hassio'; }
 
-  properties: {
+  static get properties() {
+    return {
       hass: Object,
       narrow: Boolean,
       showMenu: Boolean,
@@ -32,15 +33,19 @@ Polymer({
         type: Boolean,
         value: false,
       },
-  },
+    };
+  }
 
-  attached: function () {
+  connectedCallback() {
+    super.connectedCallback();
     if (!window.HASS_DEV) {
-      this.importHref('/api/hassio/panel', null, function () {
+      Polymer.importHref('/api/hassio/panel', null, () => {
         // eslint-disable-next-line
         alert('Failed to load the Hass.io panel from supervisor.');
       });
     }
-  },
+  }
-});
+}
+
+customElements.define(HaPanelHassio.is, HaPanelHassio);
 </script>

panels/hassio/hassio-data.html

@@ -1,10 +1,11 @@
-<link rel="import" href="../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../bower_components/polymer/polymer-element.html">
 
 <script>
-Polymer({
+class HassioData extends Polymer.Element {
-  is: 'hassio-data',
+  static get is() { return 'hassio-data'; }
 
-  properties: {
+  static get properties() {
+    return {
       supervisor: {
         type: Object,
         value: {},
@@ -22,39 +23,43 @@ Polymer({
         value: {},
         notify: true,
       },
-  },
+    };
+  }
 
-  attached: function () {
+  connectedCallback() {
+    super.connectedCallback();
     this.refresh();
-  },
+  }
 
-  refresh: function () {
+  refresh() {
     return Promise.all([
       this.fetchSupervisorInfo(),
       this.fetchHostInfo(),
       this.fetchHassInfo(),
     ]);
-  },
+  }
 
-  fetchSupervisorInfo: function () {
+  fetchSupervisorInfo() {
     return this.hass.callApi('get', 'hassio/supervisor/info')
       .then(function (info) {
         this.supervisor = info.data;
       }.bind(this));
-  },
+  }
 
-  fetchHostInfo: function () {
+  fetchHostInfo() {
     return this.hass.callApi('get', 'hassio/host/info')
       .then(function (info) {
         this.host = info.data;
       }.bind(this));
-  },
+  }
 
-  fetchHassInfo: function () {
+  fetchHassInfo() {
     return this.hass.callApi('get', 'hassio/homeassistant/info')
       .then(function (info) {
         this.homeassistant = info.data;
       }.bind(this));
-  },
+  }
-});
+}
+
+customElements.define(HassioData.is, HassioData);
 </script>

panels/hassio/hassio-main.html

@@ -1,9 +1,10 @@
-<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/app-route/app-route.html">
 <link rel="import" href="../../bower_components/iron-pages/iron-pages.html">
 
 <link rel="import" href="../../src/layouts/hass-loading-screen.html">
 <link rel="import" href="../../src/layouts/hass-error-screen.html">
+<link rel='import' href='../../src/util/hass-mixins.html'>
 
 <link rel="import" href="./dashboard/hassio-dashboard.html">
 <link rel="import" href="./advanced/hassio-advanced.html">
@@ -102,10 +103,11 @@
 </dom-module>
 
 <script>
-Polymer({
+class HassioMain extends window.hassMixins.EventsMixin(Polymer.Element) {
-  is: 'hassio-main',
+  static get is() { return 'hassio-main'; }
 
-  properties: {
+  static get properties() {
+    return {
       hass: Object,
       narrow: Boolean,
       showMenu: Boolean,
@@ -146,17 +148,20 @@ Polymer({
         type: Boolean,
         computed: '_computeIsLoaded(supervisorInfo, hostInfo, hassInfo)',
       },
-  },
+    };
+  }
 
-  listeners: {
+  ready() {
-    'hass-api-called': '_apiCalled',
+    super.ready();
-  },
+    this.addEventListener('hass-api-called', ev => this._apiCalled(ev));
+  }
 
-  attached: function () {
+  connectedCallback() {
+    super.connectedCallback();
     this._routeChanged(this.route);
-  },
+  }
 
-  _apiCalled: function (ev) {
+  _apiCalled(ev) {
     if (ev.detail.success) {
       var tries = 1;
 
@@ -169,19 +174,21 @@ Polymer({
 
       tryUpdate();
     }
-  },
+  }
 
-  _computeIsLoaded: function (supervisorInfo, hostInfo, hassInfo) {
+  _computeIsLoaded(supervisorInfo, hostInfo, hassInfo) {
     return (supervisorInfo !== null &&
             hostInfo !== null &&
             hassInfo !== null);
-  },
+  }
 
-  _routeChanged: function (route) {
+  _routeChanged(route) {
     if (route.path === '' && route.prefix === '/hassio') {
       history.replaceState(null, null, '/hassio/dashboard');
       this.fire('location-changed');
     }
   }
-});
+}
+
+customElements.define(HassioMain.is, HassioMain);
 </script>

panels/hassio/snapshot/hassio-snapshot.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/app-layout/app-header-layout/app-header-layout.html">
 <link rel="import" href="../../../bower_components/app-layout/app-header/app-header.html">
 <link rel="import" href="../../../bower_components/app-layout/app-toolbar/app-toolbar.html">
@@ -7,6 +7,8 @@
 <link rel="import" href="../../../bower_components/paper-button/paper-button.html">
 <link rel="import" href="../../../bower_components/paper-input/paper-input.html">
 
+<link rel='import' href='../../../src/util/hass-mixins.html'>
+
 <link rel="import" href="../../../src/components/ha-menu-button.html">
 <link rel="import" href="../../../src/components/buttons/ha-call-api-button.html">
 
@@ -98,10 +100,11 @@
 </dom-module>
 
 <script>
-Polymer({
+class HassioSnapshot extends window.hassMixins.EventsMixin(Polymer.Element) {
-  is: 'hassio-snapshot',
+  static get is() { return 'hassio-snapshot'; }
 
-  properties: {
+  static get properties() {
+    return {
       hass: Object,
       visible: {
         type: Boolean,
@@ -114,34 +117,36 @@ Polymer({
         type: Array,
         value: [],
       },
-  },
+    };
+  }
 
-  listeners: {
+  ready() {
-    'hass-api-called': '_apiCalled',
+    super.ready();
-  },
+    this.addEventListener('hass-api-called', ev => this.apiCalled(ev));
+  }
 
-  _visibleChanged: function (visible) {
+  _visibleChanged(visible) {
     if (visible) {
       this._updateData();
     }
-  },
+  }
 
-  _apiCalled: function (ev) {
+  _apiCalled(ev) {
     if (ev.detail.success) {
       this._updateData();
     }
-  },
+  }
 
-  _updateData: function () {
+  _updateData() {
     this.hass.callApi('get', 'hassio/snapshots')
       .then(function (result) {
         this._data = result.data.snapshots;
       }.bind(this), function (error) {
         this._error = error.message;
       }.bind(this));
-  },
+  }
 
-  _createSnapshot: function () {
+  _createSnapshot() {
     this._creatingSnapshot = true;
     this.hass.callApi('post', 'hassio/snapshots/new/full', {
       name: this._snapshotName,
@@ -156,21 +161,23 @@ Polymer({
         this._creatingSnapshot = false;
         this._error = error.message;
       }.bind(this));
-  },
+  }
 
-  _computeRestorePath: function (snapshot) {
+  _computeRestorePath(snapshot) {
     return 'hassio/snapshots/' + snapshot.slug + '/restore/full';
-  },
+  }
 
-  _backTapped: function () {
+  _backTapped() {
     history.back();
-  },
+  }
 
-  _refreshTapped: function () {
+  _refreshTapped() {
     this.hass.callApi('post', 'hassio/snapshots/reload')
       .then(function () {
         this._updateData();
       }.bind(this));
-  },
+  }
-});
+}
+
+customElements.define(HassioSnapshot.is, HassioSnapshot);
 </script>

panels/hassio/supervisor/hassio-supervisor.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/app-layout/app-header-layout/app-header-layout.html">
 <link rel="import" href="../../../bower_components/app-layout/app-header/app-header.html">
 <link rel="import" href="../../../bower_components/app-layout/app-toolbar/app-toolbar.html">
@@ -36,10 +36,11 @@
 </dom-module>
 
 <script>
-Polymer({
+class HassioSupervisor extends Polymer.Element {
-  is: 'hassio-supervisor',
+  static get is() { return 'hassio-supervisor'; }
 
-  properties: {
+  static get properties() {
+    return {
       hass: {
         type: Object,
       },
@@ -53,29 +54,32 @@ Polymer({
         type: String,
         value: '',
       },
-  },
+    };
+  }
 
-  _visibleChanged: function (visible) {
+  _visibleChanged(visible) {
     if (visible) {
       this._loadData();
     }
-  },
+  }
 
-  _loadData: function () {
+  _loadData() {
     this.hass.callApi('get', 'hassio/supervisor/logs')
       .then(function (info) {
         this.logs = info;
       }.bind(this), function () {
         this.logs = 'Error fetching logs';
       }.bind(this));
-  },
+  }
 
-  _refreshTapped: function () {
+  _refreshTapped() {
     this._loadData();
-  },
+  }
 
-  _backTapped: function () {
+  _backTapped() {
     history.back();
-  },
+  }
-});
+}
+
+customElements.define(HassioSupervisor.is, HassioSupervisor);
 </script>

panels/history/ha-panel-history.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-icon-button/paper-icon-button.html">
 <link rel="import" href="../../bower_components/paper-input/paper-input.html">
 <link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
@@ -91,10 +91,11 @@
 </dom-module>
 
 <script>
-Polymer({
+class HaPanelHistory extends Polymer.Element {
-  is: 'ha-panel-history',
+  static get is() { return 'ha-panel-history'; }
 
-  properties: {
+  static get properties() {
+    return {
       hass: {
         type: Object,
       },
@@ -148,13 +149,15 @@ Polymer({
         type: String,
         value: 'date',
       },
-  },
+    };
+  }
 
-  datepickerFocus: function () {
+  datepickerFocus() {
     this.datePicker.adjustPosition();
-  },
+  }
 
-  attached: function () {
+  connectedCallback() {
+    super.connectedCallback();
     // We are unable to parse date because we use intl api to render date
     // So we just return last known date.
     var lastFormatDate = new Date();
@@ -165,23 +168,23 @@ Polymer({
       lastFormatDate = date;
       return window.hassUtil.formatDate(date);
     });
-  },
+  }
 
-  _computeStartTime: function (_currentDate) {
+  _computeStartTime(_currentDate) {
     if (!_currentDate) return undefined;
     var parts = _currentDate.split('-');
     parts[1] = parseInt(parts[1]) - 1;
     return new Date(parts[0], parts[1], parts[2]);
-  },
+  }
 
-  _computeEndTime: function (_currentDate, periodIndex) {
+  _computeEndTime(_currentDate, periodIndex) {
     var startTime = this._computeStartTime(_currentDate);
     var endTime = new Date(startTime);
     endTime.setDate(startTime.getDate() + this._computeFilterDays(periodIndex));
     return endTime;
-  },
+  }
 
-  _computeFilterDays: function (periodIndex) {
+  _computeFilterDays(periodIndex) {
     switch (periodIndex) {
       case 1:
         return 3;
@@ -189,15 +192,17 @@ Polymer({
         return 7;
       default: return 1;
     }
-  },
+  }
 
-  stateHistoryObserver: function (newVal) {
+  stateHistoryObserver(newVal) {
-    this.async(function () {
+    setTimeout(() => {
       if (newVal === this.stateHistoryInput) {
         // Input didn't change
         this.stateHistoryOutput = newVal;
       }
-    }.bind(this), 1);
+    }, 1);
-  },
+  }
-});
+}
+
+customElements.define(HaPanelHistory.is, HaPanelHistory);
 </script>

panels/iframe/ha-panel-iframe.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/app-layout/app-toolbar/app-toolbar.html">
 
@@ -28,10 +28,11 @@
 </dom-module>
 
 <script>
-Polymer({
+class HaPanelIframe extends Polymer.Element {
-  is: 'ha-panel-iframe',
+  static get is() { return 'ha-panel-iframe'; }
 
-  properties: {
+  static get properties() {
+    return {
       panel: {
         type: Object,
       },
@@ -43,6 +44,9 @@ Polymer({
       showMenu: {
         type: Boolean,
       },
-  },
+    };
-});
+  }
+}
+
+customElements.define(HaPanelIframe.is, HaPanelIframe);
 </script>

panels/kiosk/ha-panel-kiosk.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='../../src/layouts/partial-cards.html'>
 
@@ -15,12 +15,16 @@
 </dom-module>
 
 <script>
-Polymer({
+class HaPanelKiosk extends Polymer.Element {
-  is: 'ha-panel-kiosk',
+  static get is() { return 'ha-panel-kiosk'; }
 
-  properties: {
+  static get properties() {
+    return {
       hass: Object,
       route: Object,
-  },
+    };
-});
+  }
+}
+
+customElements.define(HaPanelKiosk.is, HaPanelKiosk);
 </script>

panels/logbook/ha-logbook-data.html

@@ -1,13 +1,14 @@
-<link rel="import" href="../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../bower_components/polymer/polymer-element.html">
 
 <script>
-(function () {
+{
   var DATE_CACHE = {};
 
-  Polymer({
+  class HaLogbookData extends Polymer.Element {
-    is: 'ha-logbook-data',
+    static get is() { return 'ha-logbook-data'; }
 
-    properties: {
+    static get properties() {
+      return {
         hass: {
           type: Object,
           observer: 'hassChanged',
@@ -31,15 +32,16 @@
           readOnly: true,
           notify: true,
         },
-    },
+      };
+    }
 
-    hassChanged: function (newHass, oldHass) {
+    hassChanged(newHass, oldHass) {
       if (!oldHass && this.filterDate) {
         this.filterDateChanged(this.filterDate);
       }
-    },
+    }
 
-    filterDateChanged: function (filterDate) {
+    filterDateChanged(filterDate) {
       if (!this.hass) return;
 
       this._setIsLoading(true);
@@ -48,9 +50,9 @@
         this._setEntries(logbookEntries);
         this._setIsLoading(false);
       }.bind(this));
-    },
+    }
 
-    getDate: function (date) {
+    getDate(date) {
       if (!DATE_CACHE[date]) {
         DATE_CACHE[date] = this.hass.callApi('GET', 'logbook/' + date).then(
           function (logbookEntries) {
@@ -65,7 +67,9 @@
       }
 
       return DATE_CACHE[date];
-    },
+    }
-  });
+  }
-}());
+
+  customElements.define(HaLogbookData.is, HaLogbookData);
+}
 </script>

panels/logbook/ha-logbook.html

@@ -1,6 +1,8 @@
-<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-flex-layout/iron-flex-layout-classes.html">
+
 <link rel="import" href="../../src/components/domain-icon.html">
+<link rel='import' href='../../src/util/hass-mixins.html'>
 
 
 <dom-module id="ha-logbook">
@@ -60,10 +62,11 @@
 </dom-module>
 
 <script>
-Polymer({
+class HaLogbook extends window.hassMixins.EventsMixin(Polymer.Element) {
-  is: 'ha-logbook',
+  static get is() { return 'ha-logbook'; }
 
-  properties: {
+  static get properties() {
+    return {
       hass: {
         type: Object,
       },
@@ -72,15 +75,18 @@ Polymer({
         type: Array,
         value: [],
       },
-  },
+    };
+  }
 
-  formatTime: function (date) {
+  formatTime(date) {
     return window.hassUtil.formatTime(new Date(date));
-  },
+  }
 
-  entityClicked: function (ev) {
+  entityClicked(ev) {
     ev.preventDefault();
     this.fire('hass-more-info', { entityId: ev.model.item.entity_id });
-  },
+  }
-});
+}
+
+customElements.define(HaLogbook.is, HaLogbook);
 </script>

panels/logbook/ha-panel-logbook.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-icon-button/paper-icon-button.html">
 <link rel="import" href="../../bower_components/paper-spinner/paper-spinner.html">
@@ -78,10 +78,11 @@
 </dom-module>
 
 <script>
-Polymer({
+class HaPanelLogbook extends Polymer.Element {
-  is: 'ha-panel-logbook',
+  static get is() { return 'ha-panel-logbook'; }
 
-  properties: {
+  static get properties() {
+    return {
       hass: {
         type: Object,
       },
@@ -117,9 +118,11 @@ Polymer({
       datePicker: {
         type: Object,
       },
-  },
+    };
+  }
 
-  attached: function () {
+  connectedCallback() {
+    super.connectedCallback();
     // We are unable to parse date because we use intl api to render date
     // So we just return last known date.
     var lastFormatDate = new Date();
@@ -130,13 +133,15 @@ Polymer({
       lastFormatDate = date;
       return window.hassUtil.formatDate(date);
     });
-  },
+  }
 
-  _computeFilterDate: function (_currentDate) {
+  _computeFilterDate(_currentDate) {
     if (!_currentDate) return undefined;
     var parts = _currentDate.split('-');
     parts[1] = parseInt(parts[1]) - 1;
     return new Date(parts[0], parts[1], parts[2]).toISOString();
-  },
+  }
-});
+}
+
+customElements.define(HaPanelLogbook.is, HaPanelLogbook);
 </script>

panels/mailbox/ha-panel-mailbox.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-button/paper-button.html'>
 <link rel='import' href='../../bower_components/paper-dialog/paper-dialog.html'>
@@ -144,9 +144,11 @@
 </dom-module>
 
 <script>
-Polymer({
+class HaPanelMailbox extends Polymer.Element {
-  is: 'ha-panel-mailbox',
+  static get is() { return 'ha-panel-mailbox'; }
-  properties: {
+
+  static get properties() {
+    return {
       hass: {
         type: Object,
       },
@@ -172,9 +174,11 @@ Polymer({
       currentMessage: {
         type: Object,
       },
-  },
+    };
+  }
 
-  attached: function () {
+  connectedCallback() {
+    super.connectedCallback();
     this.hassChanged = this.hassChanged.bind(this);
     this.hass.connection.subscribeEvents(this.hassChanged, 'mailbox_updated')
       .then(function (unsub) { this._unsubEvents = unsub; }.bind(this));
@@ -182,22 +186,23 @@ Polymer({
       this.platforms = platforms;
       this.hassChanged();
     }.bind(this));
-  },
+  }
 
-  detached: function () {
+  disconnectedCallback() {
+    super.disconnectedCallback();
     if (this._unsubEvents) this._unsubEvents();
-  },
+  }
 
-  hassChanged: function () {
+  hassChanged() {
     if (!this._messages) {
       this._messages = [];
     }
     this.getMessages().then(function (items) {
       this._messages = items;
     }.bind(this));
-  },
+  }
 
-  openMP3Dialog: function (event) {
+  openMP3Dialog(event) {
     var platform = event.model.item.platform;
     this.currentMessage = event.model.item;
     this.$.mp3dialog.open();
@@ -205,22 +210,22 @@ Polymer({
     this.$.transcribe.innerText = event.model.item.message;
     this.$.mp3.load();
     this.$.mp3.play();
-  },
+  }
 
-  _mp3Closed: function () {
+  _mp3Closed() {
     this.$.mp3.pause();
-  },
+  }
 
-  openDeleteDialog: function () {
+  openDeleteDialog() {
     this.$.confirmdel.open();
-  },
+  }
 
-  deleteSelected: function () {
+  deleteSelected() {
     var msg = this.currentMessage;
     this.hass.callApi('DELETE', 'mailbox/delete/' + msg.platform + '/' + msg.sha);
     this.$.mp3dialog.close();
-  },
+  }
-  getMessages: function () {
+  getMessages() {
     const items = this.platforms.map(function (platform) {
       return this.hass.callApi('GET', 'mailbox/messages/' + platform).then(function (values) {
         var platformItems = [];
@@ -250,11 +255,13 @@ Polymer({
       });
       return final;
     });
-  },
+  }
 
-  computePlatforms: function () {
+  computePlatforms() {
     return this.hass.callApi('GET', 'mailbox/platforms');
-  },
+  }
-});
+}
+
+customElements.define(HaPanelMailbox.is, HaPanelMailbox);
 
 </script>

panels/map/ha-entity-marker.html

@@ -1,7 +1,9 @@
-<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-image/iron-image.html'>
 <link rel='import' href='../../bower_components/iron-icon/iron-icon.html'>
 
+<link rel='import' href='../../src/util/hass-mixins.html'>
+
 <dom-module id='ha-entity-marker'>
   <template>
     <style is="custom-style" include="iron-positioning"></style>
@@ -36,16 +38,11 @@
 </dom-module>
 
 <script>
-Polymer({
+class HaEntityMarker extends window.hassMixins.EventsMixin(Polymer.Element) {
-  is: 'ha-entity-marker',
+  static get is() { return 'ha-entity-marker'; }
 
-  hostAttributes: {
+  static get properties() {
-    entityId: null,
+    return {
-    entityName: null,
-    entityPicture: null,
-  },
-
-  properties: {
       hass: {
         type: Object,
       },
@@ -64,17 +61,21 @@ Polymer({
         type: String,
         value: null,
       }
-  },
+    };
+  }
 
-  listeners: {
+  ready() {
-    tap: 'badgeTap',
+    super.ready();
-  },
+    this.addEventListener('tap', ev => this.badgeTap(ev));
+  }
 
-  badgeTap: function (ev) {
+  badgeTap(ev) {
     ev.stopPropagation();
     if (this.entityId) {
       this.fire('hass-more-info', { entityId: this.entityId });
     }
-  },
+  }
-});
+}
+
+customElements.define(HaEntityMarker.is, HaEntityMarker);
 </script>

panels/map/ha-panel-map.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'>
 <link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">
 
@@ -29,10 +29,11 @@
 <script>
 window.L.Icon.Default.imagePath = '/static/images/leaflet';
 
-Polymer({
+class HaPanelMap extends Polymer.Element {
-  is: 'ha-panel-map',
+  static get is() { return 'ha-panel-map'; }
 
-  properties: {
+  static get properties() {
+    return {
       hass: {
         type: Object,
         observer: 'drawEntities',
@@ -46,9 +47,11 @@ Polymer({
         type: Boolean,
         value: false,
       },
-  },
+    };
+  }
 
-  attached: function () {
+  connectedCallback() {
+    super.connectedCallback();
     var map = this._map = window.L.map(this.$.map);
     var style = document.createElement('link');
     style.setAttribute('href', window.HASS_DEV ?
@@ -67,13 +70,13 @@ Polymer({
 
     this.drawEntities(this.hass);
 
-    this.async(function () {
+    setTimeout(() => {
       map.invalidateSize();
       this.fitMap();
-    }.bind(this), 1);
+    }, 1);
-  },
+  }
 
-  fitMap: function () {
+  fitMap() {
     var bounds;
 
     if (this._mapItems.length === 0) {
@@ -85,9 +88,9 @@ Polymer({
       bounds = new window.L.latLngBounds(this._mapItems.map(item => item.getLatLng()));
       this._map.fitBounds(bounds.pad(0.5));
     }
-  },
+  }
 
-  drawEntities: function (hass) {
+  drawEntities(hass) {
     /* eslint-disable vars-on-top */
     var map = this._map;
     if (!map) return;
@@ -186,6 +189,8 @@ Polymer({
         ).addTo(map));
       }
     });
-  },
+  }
-});
+}
+
+customElements.define(HaPanelMap.is, HaPanelMap);
 </script>

panels/shopping-list/ha-panel-shopping-list.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/app-layout/app-header-layout/app-header-layout.html">
 <link rel="import" href="../../bower_components/app-layout/app-header/app-header.html">
 <link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">
@@ -138,10 +138,11 @@
 </dom-module>
 
 <script>
-Polymer({
+class HaPanelShoppingList extends Polymer.Element {
-  is: 'ha-panel-shopping-list',
+  static get is() { return 'ha-panel-shopping-list'; }
 
-  properties: {
+  static get properties() {
+    return {
       hass: Object,
       narrow: Boolean,
       showMenu: Boolean,
@@ -157,36 +158,40 @@ Polymer({
         type: String,
         value: '',
       },
-  },
+    };
+  }
 
-  listeners: {
+  ready() {
-    keydown: '_checkEsc'
+    super.ready();
-  },
+    this.addEventListener('keydown', ev => this._checkEsc(ev));
+  }
 
-  attached: function () {
+  connectedCallback() {
+    super.connectedCallback();
     this._fetchData = this._fetchData.bind(this);
 
     this.hass.connection.subscribeEvents(this._fetchData, 'shopping_list_updated')
       .then(function (unsub) { this._unsubEvents = unsub; }.bind(this));
     this._fetchData();
-  },
+  }
 
-  detached: function () {
+  disconnectedCallback() {
+    super.disconnectedCallback();
     if (this._unsubEvents) this._unsubEvents();
-  },
+  }
 
-  _fetchData: function () {
+  _fetchData() {
     this.hass.callApi('get', 'shopping_list')
       .then(function (items) {
         this.items = items;
       }.bind(this));
-  },
+  }
 
   _computeIsEditting(editIndex, index) {
     return editIndex === index;
-  },
+  }
 
-  _itemCompleteTapped: function (ev) {
+  _itemCompleteTapped(ev) {
     ev.stopPropagation();
     var item = ev.model.item;
     this.hass.callApi('post', 'shopping_list/item/' + item.id, {
@@ -194,9 +199,9 @@ Polymer({
     }).catch(function () {
       this._fetchData();
     }.bind(this));
-  },
+  }
 
-  _enableEditting: function (ev) {
+  _enableEditting(ev) {
     var item = ev.model.item;
     var index = this.items.indexOf(item);
 
@@ -204,14 +209,14 @@ Polymer({
 
     this._editValue = item.name;
     this._editIndex = index;
-  },
+  }
 
-  _cancelEditting: function () {
+  _cancelEditting() {
     this._editIndex = -1;
     this._editValue = '';
-  },
+  }
 
-  _finishEditting: function (ev) {
+  _finishEditting(ev) {
     ev.stopPropagation();
 
     var index = this._editIndex;
@@ -231,22 +236,24 @@ Polymer({
     }).catch(function () {
       this._fetchData();
     }.bind(this));
-  },
+  }
 
-  _editKeyPress: function (ev) {
+  _editKeyPress(ev) {
     if (ev.keyCode === 13) {
       this._finishEditting(ev);
     }
-  },
+  }
 
-  _checkEsc: function (ev) {
+  _checkEsc(ev) {
     if (ev.keyCode === 27) {
       this._cancelEditting();
     }
-  },
+  }
 
-  _clearCompleted: function () {
+  _clearCompleted() {
     this.hass.callApi('POST', 'shopping_list/clear_completed');
   }
-});
+}
+
+customElements.define(HaPanelShoppingList.is, HaPanelShoppingList);
 </script>

src/cards/ha-weather-card.html

@@ -70,9 +70,7 @@
 </dom-module>
 
 <script>
-(function () {
+{
-  'use strict';
-
   var _WEATHER_TO_ICON = {
     cloudy: '\u2601\ufe0f',
     fog: '\uD83C\uDF2B\ufe0f',
@@ -216,5 +214,5 @@
     }
   }
   customElements.define(HaWeatherCard.is, HaWeatherCard);
-}());
+}
 </script>

src/components/buttons/ha-call-api-button.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="./ha-progress-button.html">
 
 <dom-module id='ha-call-api-button'>
@@ -13,10 +13,11 @@
 </dom-module>
 
 <script>
-Polymer({
+class HaCallApiButton extends Polymer.Element {
-  is: 'ha-call-api-button',
+  static get is() { return 'ha-call-api-button'; }
 
-  properties: {
+  static get properties() {
+    return {
       hass: {
         type: Object,
       },
@@ -44,9 +45,10 @@ Polymer({
         type: Boolean,
         value: false,
       },
-  },
+    };
+  }
 
-  buttonTapped: function () {
+  buttonTapped() {
     this.progress = true;
     var el = this;
     var eventData = {
@@ -70,5 +72,7 @@ Polymer({
         el.fire('hass-api-called', eventData);
       });
   }
-});
+}
+
+customElements.define(HaCallApiButton.is, HaCallApiButton);
 </script>

src/components/buttons/ha-call-service-button.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="./ha-progress-button.html">
 
 <dom-module id='ha-call-service-button'>
@@ -12,10 +12,11 @@
 </dom-module>
 
 <script>
-Polymer({
+class HaCallServiceButton extends Polymer.Element {
-  is: 'ha-call-service-button',
+  static get is() { return 'ha-call-service-button'; }
 
-  properties: {
+  static get properties() {
+    return {
       hass: {
         type: Object,
       },
@@ -37,9 +38,10 @@ Polymer({
         type: Object,
         value: {},
       },
-  },
+    };
+  }
 
-  buttonTapped: function () {
+  buttonTapped() {
     this.progress = true;
     var el = this;
     var eventData = {
@@ -60,6 +62,8 @@ Polymer({
       }).then(function () {
         el.fire('hass-service-called', eventData);
       });
-  },
+  }
-});
+}
+
+customElements.define(HaCallServiceButton.is, HaCallServiceButton);
 </script>

src/components/buttons/ha-progress-button.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-button/paper-button.html">
 <link rel="import" href="../../../bower_components/paper-spinner/paper-spinner.html">
 
@@ -58,10 +58,11 @@
 </dom-module>
 
 <script>
-Polymer({
+class HaProgressButton extends Polymer.Element {
-  is: 'ha-progress-button',
+  static get is() { return 'ha-progress-button'; }
 
-  properties: {
+  static get properties() {
+    return {
       hass: {
         type: Object,
       },
@@ -75,34 +76,38 @@ Polymer({
         type: Boolean,
         value: false,
       },
-  },
+    };
+  }
 
-  tempClass: function (className) {
+  tempClass(className) {
     var classList = this.$.container.classList;
     classList.add(className);
-    this.async(function () {
+    setTimeout(() => {
       classList.remove(className);
     }, 1000);
-  },
+  }
 
-  listeners: {
+  ready() {
-    tap: 'buttonTapped',
+    super.ready();
-  },
+    this.addEventListener('tap', ev => this.buttonTapped(ev));
+  }
 
-  buttonTapped: function (ev) {
+  buttonTapped(ev) {
     if (this.progress) ev.stopPropagation();
-  },
+  }
 
-  actionSuccess: function () {
+  actionSuccess() {
     this.tempClass('success');
-  },
+  }
 
-  actionError: function () {
+  actionError() {
     this.tempClass('error');
-  },
+  }
 
-  computeDisabled: function (disabled, progress) {
+  computeDisabled(disabled, progress) {
     return disabled || progress;
-  },
+  }
-});
+}
+
+customElements.define(HaProgressButton.is, HaProgressButton);
 </script>

src/components/domain-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,10 +9,11 @@
 </dom-module>
 
 <script>
-Polymer({
+class DomainIcon extends Polymer.Element {
-  is: 'domain-icon',
+  static get is() { return 'domain-icon'; }
 
-  properties: {
+  static get properties() {
+    return {
       domain: {
         type: String,
         value: '',
@@ -22,10 +23,13 @@ Polymer({
         type: String,
         value: '',
       },
-  },
+    };
+  }
 
-  computeIcon: function (domain, state) {
+  computeIcon(domain, state) {
     return window.hassUtil.domainIcon(domain, state);
-  },
+  }
-});
+}
+
+customElements.define(DomainIcon.is, DomainIcon);
 </script>

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,10 +36,11 @@
 </dom-module>
 
 <script>
-Polymer({
+class HaEntityToggle extends Polymer.Element {
-  is: 'ha-entity-toggle',
+  static get is() { return 'ha-entity-toggle'; }
 
-  properties: {
+  static get properties() {
+    return {
       hass: {
         type: Object,
       },
@@ -58,21 +59,20 @@ Polymer({
         computed: 'computeIsOn(stateObj)',
         observer: 'isOnChanged',
       },
-  },
+    };
+  }
 
-  listeners: {
+  ready() {
-    tap: 'onTap',
+    super.ready();
-  },
+    this.addEventListener('tap', ev => this.onTap(ev));
-
-  onTap: function (ev) {
-    ev.stopPropagation();
-  },
-
-  ready: function () {
     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({
+class HaStateIcon extends Polymer.Element {
-  is: 'ha-state-icon',
+  static get is() { return 'ha-state-icon'; }
 
-  properties: {
+  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,10 +47,11 @@
 </dom-module>
 
 <script>
-Polymer({
+class HaStateLabelBadge extends window.hassMixins.EventsMixin(Polymer.Element) {
-  is: 'ha-state-label-badge',
+  static get is() { return 'ha-state-label-badge'; }
 
-  properties: {
+  static get properties() {
+    return {
       hass: {
         type: Object,
       },
@@ -57,18 +60,20 @@ Polymer({
         type: Object,
         observer: 'stateChanged',
       },
-  },
+    };
+  }
 
-  listeners: {
+  ready() {
-    tap: 'badgeTap',
+    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,10 +57,11 @@
 </dom-module>
 
 <script>
-Polymer({
+class StateInfo extends Polymer.Element {
-  is: 'state-info',
+  static get is() { return 'state-info'; }
 
-  properties: {
+  static get properties() {
+    return {
       detailed: {
         type: Boolean,
         value: false,
@@ -73,10 +74,13 @@ Polymer({
       inDialog: {
         type: Boolean,
       },
-  },
+    };
+  }
 
-  computeStateName: function (stateObj) {
+  computeStateName(stateObj) {
     return window.hassUtil.computeStateName(stateObj);
   }
-});
+}
+
+customElements.define(StateInfo.is, StateInfo);
 </script>

src/components/ha-attributes.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-flex-layout/iron-flex-layout-classes.html">
 
@@ -30,12 +30,11 @@
 </dom-module>
 
 <script>
-(function () {
+class HaAttributes extends Polymer.Element {
-  'use strict';
+  static get is() { return 'ha-attributes'; }
 
-  Polymer({
+  static get properties() {
-    is: 'ha-attributes',
+    return {
-    properties: {
       stateObj: {
         type: Object,
       },
@@ -47,37 +46,39 @@
         type: Array,
         computed: 'computeFiltersArray(extraFilters)',
       },
-    },
+    };
+  }
 
-    computeFiltersArray: function (extraFilters) {
+  computeFiltersArray(extraFilters) {
     return Object.keys(window.hassAttributeUtil.LOGIC_STATE_ATTRIBUTES).concat(extraFilters ? extraFilters.split(',') : []);
-    },
+  }
 
-    computeDisplayAttributes: function (stateObj, filtersArray) {
+  computeDisplayAttributes(stateObj, filtersArray) {
     if (!stateObj) {
       return [];
     }
     return Object.keys(stateObj.attributes).filter(function (key) {
       return filtersArray.indexOf(key) === -1;
     });
-    },
+  }
 
-    formatAttribute: function (attribute) {
+  formatAttribute(attribute) {
     return attribute.replace(/_/g, ' ');
-    },
+  }
 
-    formatAttributeValue: function (stateObj, attribute) {
+  formatAttributeValue(stateObj, attribute) {
     var value = stateObj.attributes[attribute];
     if (value === null) return '-';
     if (Array.isArray(value)) {
       return value.join(', ');
     }
     return (value instanceof Object) ? JSON.stringify(value, null, 2) : value;
-    },
+  }
 
-    computeAttribution: function (stateObj) {
+  computeAttribution(stateObj) {
     return stateObj.attributes.attribution;
-    },
+  }
-  });
+}
-}());
+
+customElements.define(HaAttributes.is, HaAttributes);
 </script>

src/components/ha-card.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-material/paper-material.html">
 
 <dom-module id='ha-card'>
@@ -28,10 +28,11 @@
 </dom-module>
 
 <script>
-Polymer({
+class HaCard extends Polymer.Element {
-  is: 'ha-card',
+  static get is() { return 'ha-card'; }
 
-  properties: {
+  static get properties() {
+    return {
       header: {
         type: String,
       },
@@ -43,6 +44,9 @@ Polymer({
         value: 1,
         reflectToAttribute: true,
       },
-  },
+    };
-});
+  }
+}
+
+customElements.define(HaCard.is, HaCard);
 </script>

src/components/ha-cards.html

@@ -1,4 +1,5 @@
 <link rel="import" href="../../bower_components/polymer/polymer-element.html">
+<link rel="import" href="../../bower_components/polymer/lib/utils/debounce.html">
 
 <link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
 

src/components/ha-climate-control.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-flex-layout/iron-flex-layout-classes.html">
 <link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
 
@@ -40,10 +40,13 @@
       </div>
     </div>
   </template>
-  <script>
+</dom-module>
-    Polymer({
+<script>
-      is: 'ha-climate-control',
+class HaClimateControl extends Polymer.Element {
-      properties: {
+  static get is() { return 'ha-climate-control'; }
+
+  static get properties() {
+    return {
       value: {
         type: Number,
         observer: 'valueChanged'
@@ -61,8 +64,9 @@
         type: Number,
         value: 1,
       },
-      },
+    };
-      incrementValue: function () {
+  }
+  incrementValue() {
     var newval = this.value + this.step;
     this.last_changed = Date.now();
     if (newval <= this.max) {
@@ -70,8 +74,8 @@
     } else {
       this.value = this.max;
     }
-      },
+  }
-      decrementValue: function () {
+  decrementValue() {
     var newval = this.value - this.step;
     this.last_changed = Date.now();
     if (newval >= this.min) {
@@ -79,8 +83,8 @@
     } else {
       this.value = this.min;
     }
-      },
+  }
-      valueChanged: function () {
+  valueChanged() {
     // when the value is changed, trigger a potential even fire in
     // the future, as long as last changed is far enough in the
     // past.
@@ -98,8 +102,8 @@
         }
       }, 2010, this);
     }
-      },
+  }
-    });
+}
-  </script>
 
-</dom-module>
+customElements.define(HaClimateControl.is, HaClimateControl);
+</script>

src/components/ha-color-picker.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'>
 
 <dom-module id='ha-color-picker'>
   <template>
@@ -20,10 +22,11 @@
  *
  * Adapted to work with Polymer.
  */
-Polymer({
+class HaColorPicker extends window.hassMixins.EventsMixin(Polymer.Element) {
-  is: 'ha-color-picker',
+  static get is() { return 'ha-color-picker'; }
 
-  properties: {
+  static get properties() {
+    return {
       color: {
         type: Object,
       },
@@ -35,52 +38,59 @@ Polymer({
       height: {
         type: Number,
       },
-  },
+    };
+  }
 
-  listeners: {
+  ready() {
-    mousedown: 'onMouseDown',
+    super.ready();
-    mouseup: 'onMouseUp',
+    this.addEventListener('mousedown', ev => this.onMouseDown(ev));
-    touchstart: 'onTouchStart',
+    this.addEventListener('mouseup', ev => this.onMouseUp(ev));
-    touchend: 'onTouchEnd',
+    this.addEventListener('touchstart', ev => this.onTouchStart(ev));
-  },
+    this.addEventListener('touchend', ev => this.onTouchEnd(ev));
+    this.setColor = this.setColor.bind(this);
+    this.mouseMoveIsThrottled = true;
+    this.canvas = this.$.canvas;
+    this.context = this.canvas.getContext('2d');
+    this.drawGradient();
+  }
 
-  onMouseDown: function (ev) {
+  onMouseDown(ev) {
     this.onMouseMove(ev);
     this.addEventListener('mousemove', this.onMouseMove);
-  },
+  }
 
-  onMouseUp: function () {
+  onMouseUp() {
     this.removeEventListener('mousemove', this.onMouseMove);
-  },
+  }
 
-  onTouchStart: function (ev) {
+  onTouchStart(ev) {
     this.onTouchMove(ev);
     this.addEventListener('touchmove', this.onTouchMove);
-  },
+  }
 
-  onTouchEnd: function () {
+  onTouchEnd() {
     this.removeEventListener('touchmove', this.onTouchMove);
-  },
+  }
 
-  onTouchMove: function (ev) {
+  onTouchMove(ev) {
     if (!this.mouseMoveIsThrottled) {
       return;
     }
     this.mouseMoveIsThrottled = false;
     this.processColorSelect(ev.touches[0]);
-    this.async(function () { this.mouseMoveIsThrottled = true; }.bind(this), 100);
+    setTimeout(() => { this.mouseMoveIsThrottled = true; }, 100);
-  },
+  }
 
-  onMouseMove: function (ev) {
+  onMouseMove(ev) {
     if (!this.mouseMoveIsThrottled) {
       return;
     }
     this.mouseMoveIsThrottled = false;
     this.processColorSelect(ev);
     this.async(function () { this.mouseMoveIsThrottled = true; }.bind(this), 100);
-  },
+  }
 
-  processColorSelect: function (ev) {
+  processColorSelect(ev) {
     var rect = this.canvas.getBoundingClientRect();
 
     // boundary check because people can move off-canvas.
@@ -90,29 +100,21 @@ Polymer({
     }
 
     this.onColorSelect(ev.clientX - rect.left, ev.clientY - rect.top);
-  },
+  }
 
-  onColorSelect: function (x, y) {
+  onColorSelect(x, y) {
     var data = this.context.getImageData(x, y, 1, 1).data;
 
     this.setColor({ r: data[0], g: data[1], b: data[2] });
-  },
+  }
 
-  setColor: function (rgb) {
+  setColor(rgb) {
     this.color = rgb;
 
     this.fire('colorselected', { rgb: this.color });
-  },
+  }
 
-  ready: function () {
+  drawGradient() {
-    this.setColor = this.setColor.bind(this);
-    this.mouseMoveIsThrottled = true;
-    this.canvas = this.$.canvas;
-    this.context = this.canvas.getContext('2d');
-    this.drawGradient();
-  },
-
-  drawGradient: function () {
     var style;
     var width;
     var height;
@@ -143,6 +145,8 @@ Polymer({
 
     this.context.fillStyle = bwGradient;
     this.context.fillRect(0, 0, width, height);
-  },
+  }
-});
+}
+
+customElements.define(HaColorPicker.is, HaColorPicker);
 </script>

src/components/ha-cover-controls.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-icon-button/paper-icon-button.html">
 
 <link rel="import" href="../util/cover-model.html">
@@ -28,9 +28,11 @@
 </dom-module>
 
 <script>
-Polymer({
+class HaCoverControls extends Polymer.Element {
-  is: 'ha-cover-controls',
+  static get is() { return 'ha-cover-controls'; }
-  properties: {
+
+  static get properties() {
+    return {
       hass: {
         type: Object,
       },
@@ -41,29 +43,32 @@ Polymer({
         type: Object,
         computed: 'computeEntityObj(hass, stateObj)',
       },
-  },
+    };
-  computeEntityObj: function (hass, stateObj) {
+  }
+  computeEntityObj(hass, stateObj) {
     return new window.CoverEntity(hass, stateObj);
-  },
+  }
-  computeOpenDisabled: function (stateObj, entityObj) {
+  computeOpenDisabled(stateObj, entityObj) {
     var assumedState = stateObj.attributes.assumed_state === true;
     return entityObj.isFullyOpen && !assumedState;
-  },
+  }
-  computeClosedDisabled: function (stateObj, entityObj) {
+  computeClosedDisabled(stateObj, entityObj) {
     var assumedState = (stateObj.attributes.assumed_state === true);
     return entityObj.isFullyClosed && !assumedState;
-  },
+  }
-  onOpenTap: function (ev) {
+  onOpenTap(ev) {
     ev.stopPropagation();
     this.entityObj.openCover();
-  },
+  }
-  onCloseTap: function (ev) {
+  onCloseTap(ev) {
     ev.stopPropagation();
     this.entityObj.closeCover();
-  },
+  }
-  onStopTap: function (ev) {
+  onStopTap(ev) {
     ev.stopPropagation();
     this.entityObj.stopCover();
-  },
+  }
-});
+}
+
+customElements.define(HaCoverControls.is, HaCoverControls);
 </script>

src/components/ha-cover-tilt-controls.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-flex-layout/iron-flex-layout-classes.html">
 <link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
@@ -32,9 +32,11 @@
 </dom-module>
 
 <script>
-Polymer({
+class HaCoverTiltControls extends Polymer.Element {
-  is: 'ha-cover-tilt-controls',
+  static get is() { return 'ha-cover-tilt-controls'; }
-  properties: {
+
+  static get properties() {
+    return {
       hass: {
         type: Object,
       },
@@ -45,29 +47,32 @@ Polymer({
         type: Object,
         computed: 'computeEntityObj(hass, stateObj)',
       },
-  },
+    };
-  computeEntityObj: function (hass, stateObj) {
+  }
+  computeEntityObj(hass, stateObj) {
     return new window.CoverEntity(hass, stateObj);
-  },
+  }
-  computeOpenDisabled: function (stateObj, entityObj) {
+  computeOpenDisabled(stateObj, entityObj) {
     var assumedState = stateObj.attributes.assumed_state === true;
     return entityObj.isFullyOpenTilt && !assumedState;
-  },
+  }
-  computeClosedDisabled: function (stateObj, entityObj) {
+  computeClosedDisabled(stateObj, entityObj) {
     var assumedState = (stateObj.attributes.assumed_state === true);
     return entityObj.isFullyClosedTilt && !assumedState;
-  },
+  }
-  onOpenTiltTap: function (ev) {
+  onOpenTiltTap(ev) {
     ev.stopPropagation();
     this.entityObj.openCoverTilt();
-  },
+  }
-  onCloseTiltTap: function (ev) {
+  onCloseTiltTap(ev) {
     ev.stopPropagation();
     this.entityObj.closeCoverTilt();
-  },
+  }
-  onStopTiltTap: function (ev) {
+  onStopTiltTap(ev) {
     ev.stopPropagation();
     this.entityObj.stopCoverTilt();
-  },
+  }
-});
+}
+
+customElements.define(HaCoverTiltControls.is, HaCoverTiltControls);
 </script>

src/components/ha-demo-badge.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='./ha-label-badge.html'>
 
@@ -19,7 +19,9 @@
 </dom-module>
 
 <script>
-Polymer({
+class HaDemoBadge extends Polymer.Element {
-  is: 'ha-demo-badge',
+  static get is() { return 'ha-demo-badge'; }
-});
+}
+
+customElements.define(HaDemoBadge.is, HaDemoBadge);
 </script>

src/components/ha-icon-check.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'>
 
 <dom-module id='ha-icon-check'>
@@ -37,10 +37,15 @@
 </dom-module>
 
 <script>
-Polymer({
+class HaIconCheck extends Polymer.Element {
-  is: 'ha-icon-check',
+  static get is() { return 'ha-icon-check'; }
-  properties: {
+
+  static get properties() {
+    return {
       checked: Boolean,
+    };
   }
-});
+}
+
+customElements.define(HaIconCheck.is, HaIconCheck);
 </script>

src/components/ha-labeled-slider.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'>
 <link rel='import' href='../../bower_components/paper-slider/paper-slider.html'>
 
@@ -40,10 +40,11 @@
 </dom-module>
 
 <script>
-Polymer({
+class HaLabeledSlider extends Polymer.Element {
-  is: 'ha-labeled-slider',
+  static get is() { return 'ha-labeled-slider'; }
 
-  properties: {
+  static get properties() {
+    return {
       caption: {
         type: String,
       },
@@ -64,6 +65,9 @@ Polymer({
         type: Number,
         notify: true,
       },
-  },
+    };
-});
+  }
+}
+
+customElements.define(HaLabeledSlider.is, HaLabeledSlider);
 </script>

src/components/ha-menu-button.html

@@ -1,6 +1,8 @@
-<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-icon-button/paper-icon-button.html'>
 
+<link rel='import' href='../../src/util/hass-mixins.html'>
+
 <dom-module id='ha-menu-button'>
   <template>
     <style>
@@ -17,10 +19,11 @@
 </dom-module>
 
 <script>
-Polymer({
+class HaMenuButton extends window.hassMixins.EventsMixin(Polymer.Element) {
-  is: 'ha-menu-button',
+  static get is() { return 'ha-menu-button'; }
 
-  properties: {
+  static get properties() {
+    return {
       narrow: {
         type: Boolean,
         value: false,
@@ -30,15 +33,18 @@ Polymer({
         type: Boolean,
         value: false,
       },
-  },
+    };
+  }
 
-  computeMenuButtonClass: function (narrow, showMenu) {
+  computeMenuButtonClass(narrow, showMenu) {
     return !narrow && showMenu ? 'invisible' : '';
-  },
+  }
 
-  toggleMenu: function (ev) {
+  toggleMenu(ev) {
     ev.stopPropagation();
     this.fire('hass-open-menu');
-  },
+  }
-});
+}
+
+customElements.define(HaMenuButton.is, HaMenuButton);
 </script>

src/components/ha-push-notifications-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">
 
 <dom-module id='ha-push-notifications-toggle'>
@@ -13,9 +13,11 @@
 </dom-module>
 
 <script>
-Polymer({
+class HaPushNotificationsToggle extends Polymer.Element {
-  is: 'ha-push-notifications-toggle',
+  static get is() { return 'ha-push-notifications-toggle'; }
-  properties: {
+
+  static get properties() {
+    return {
       hass: { type: Object, value: null },
       pushSupported: {
         type: Boolean,
@@ -36,8 +38,11 @@ Polymer({
         type: Boolean,
         value: true,
       }
-  },
+    };
-  attached: function () {
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
     if (!this.pushSupported) return;
 
     var el = this;
@@ -54,15 +59,15 @@ Polymer({
         el._setPushSupported(false);
       }
     );
-  },
+  }
-  handlePushChange: function (ev) {
+  handlePushChange(ev) {
     if (ev.target.checked) {
       this.subscribePushNotifications();
     } else {
       this.unsubscribePushNotifications();
     }
-  },
+  }
-  subscribePushNotifications: function () {
+  subscribePushNotifications() {
     var el = this;
 
     navigator.serviceWorker.ready
@@ -101,8 +106,8 @@ Polymer({
           el.pushActive = false;
         }
       );
-  },
+  }
-  unsubscribePushNotifications: function () {
+  unsubscribePushNotifications() {
     var el = this;
 
     navigator.serviceWorker.ready
@@ -131,5 +136,7 @@ Polymer({
         });
       });
   }
-});
+}
+
+customElements.define(HaPushNotificationsToggle.is, HaPushNotificationsToggle);
 </script>

src/components/ha-relative-time.html

@@ -1,10 +1,11 @@
-<link rel="import" href="../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../bower_components/polymer/polymer-element.html">
 
 <script>
-Polymer({
+class HaRelativeTime extends Polymer.Element {
-  is: 'ha-relative-time',
+  static get is() { return 'ha-relative-time'; }
 
-  properties: {
+  static get properties() {
+    return {
       datetime: {
         type: String,
         observer: 'datetimeChanged',
@@ -18,37 +19,43 @@ Polymer({
       parsedDateTime: {
         type: Object,
       },
-  },
+    };
+  }
 
-  created: function () {
+  constructor() {
+    super();
     this.updateRelative = this.updateRelative.bind(this);
-  },
+  }
 
-  attached: function () {
+  connectedCallback() {
+    super.connectedCallback();
     // update every 60 seconds
     this.updateInterval = setInterval(this.updateRelative, 60000);
-  },
+  }
 
-  detached: function () {
+  disconnectedCallback() {
+    super.disconnectedCallback();
     clearInterval(this.updateInterval);
-  },
+  }
 
-  datetimeChanged: function (newVal) {
+  datetimeChanged(newVal) {
     this.parsedDateTime = newVal ? new Date(newVal) : null;
 
     this.updateRelative();
-  },
+  }
 
-  datetimeObjChanged: function (newVal) {
+  datetimeObjChanged(newVal) {
     this.parsedDateTime = newVal;
 
     this.updateRelative();
-  },
+  }
 
-  updateRelative: function () {
+  updateRelative() {
     var root = Polymer.dom(this);
     root.innerHTML = this.parsedDateTime ?
       window.hassUtil.relativeTime(this.parsedDateTime) : 'never';
-  },
+  }
-});
+}
+
+customElements.define(HaRelativeTime.is, HaRelativeTime);
 </script>

src/components/ha-service-description.html

@@ -1,4 +1,4 @@
-<link rel="import" href="../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../bower_components/polymer/polymer-element.html">
 
 <dom-module id='ha-service-description'>
   <template>
@@ -7,21 +7,25 @@
 </dom-module>
 
 <script>
-Polymer({
+class HaServiceDescription extends Polymer.Element {
-  is: 'ha-service-description',
+  static get is() { return 'ha-service-description'; }
 
-  properties: {
+  static get properties() {
+    return {
       hass: Object,
       domain: String,
       service: String,
-  },
+    };
+  }
 
-  _getDescription: function (hass, domain, service) {
+  _getDescription(hass, domain, service) {
     var domainServices = hass.config.services[domain];
     if (!domainServices) return '';
     var serviceObject = domainServices[service];
     if (!serviceObject) return '';
     return serviceObject.description;
-  },
+  }
-});
+}
+
+customElements.define(HaServiceDescription.is, HaServiceDescription);
 </script>

src/components/ha-start-voice-button.html

@@ -1,6 +1,8 @@
-<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-icon-button/paper-icon-button.html">
 
+<link rel='import' href='../../src/util/hass-mixins.html'>
+
 <dom-module id='ha-start-voice-button'>
   <template>
     <paper-icon-button
@@ -12,10 +14,11 @@
 </dom-module>
 
 <script>
-Polymer({
+class HaStartVoiceButton extends window.hassMixins.EventsMixin(Polymer.Element) {
-  is: 'ha-start-voice-button',
+  static get is() { return 'ha-start-voice-button'; }
 
-  properties: {
+  static get properties() {
+    return {
       hass: {
         type: Object,
         value: null,
@@ -25,15 +28,18 @@ Polymer({
         type: Boolean,
         computed: 'computeCanListen(hass)',
       },
-  },
+    };
+  }
 
-  computeCanListen: function (hass) {
+  computeCanListen(hass) {
     return ('webkitSpeechRecognition' in window &&
             window.hassUtil.isComponentLoaded(hass, 'conversation'));
-  },
+  }
 
-  handleListenClick: function () {
+  handleListenClick() {
     this.fire('hass-start-voice');
-  },
+  }
-});
+}
+
+customElements.define(HaStartVoiceButton.is, HaStartVoiceButton);
 </script>

src/components/state-history-chart-line.html

@@ -2,9 +2,7 @@
 <link rel="import" href="../../bower_components/iron-resizable-behavior/iron-resizable-behavior.html">
 
 <script>
-(function () {
+{
-  'use strict';
-
   function range(start, end) {
     var result = [];
     var i;
@@ -58,7 +56,7 @@
       this._isAttached = true;
       this.drawChart();
       this.addEventListener('iron-resize', () => {
-        this.async(this.drawChart, 10);
+        setTimeout(() => this.drawChart(), 10);
       });
     }
 
@@ -244,5 +242,5 @@
     }
   }
   customElements.define(StateHistoryChartLine.is, StateHistoryChartLine);
-}());
+}
 </script>

src/components/state-history-chart-timeline.html

@@ -24,7 +24,7 @@ class StateHistoryChartTimeline extends
     this._isAttached = true;
     this.drawChart();
     this.addEventListener('iron-resize', () => {
-      this.async(this.drawChart, 10);
+      setTimeout(() => this.drawChart(), 10);
     });
   }
 

src/dialogs/ha-voice-command-dialog.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-dialog/paper-dialog.html">
 
@@ -133,10 +133,11 @@
 </dom-module>
 
 <script>
-Polymer({
+class HaVoiceCommandDialog extends Polymer.Element {
-  is: 'ha-voice-command-dialog',
+  static get is() { return 'ha-voice-command-dialog'; }
 
-  properties: {
+  static get properties() {
+    return {
       hass: {
         type: Object,
       },
@@ -160,9 +161,10 @@ Polymer({
         },
         observer: '_scrollMessagesBottom',
       }
-  },
+    };
+  }
 
-  initRecognition: function () {
+  initRecognition() {
     /* eslint-disable new-cap */
     this.recognition = new webkitSpeechRecognition();
     /* eslint-enable new-cap */
@@ -217,9 +219,9 @@ Polymer({
         final: oldResults.final + finalTranscript,
       };
     }.bind(this);
-  },
+  }
 
-  startListening: function () {
+  startListening() {
     if (!this.recognition) {
       this.initRecognition();
     }
@@ -229,28 +231,30 @@ Polymer({
       final: '',
     };
     this.recognition.start();
-  },
+  }
 
-  _scrollMessagesBottom: function () {
+  _scrollMessagesBottom() {
-    this.async(function () {
+    setTimeout(() => {
       this.$.messages.scrollTop = this.$.messages.scrollHeight;
 
       if (this.$.messages.scrollTop !== 0) {
         this.$.dialog.fire('iron-resize');
       }
-    }.bind(this), 10);
+    }, 10);
-  },
+  }
 
-  dialogOpenChanged: function (newVal) {
+  dialogOpenChanged(newVal) {
     if (newVal) {
       this.startListening();
     } else if (!newVal && this.results) {
       this.recognition.abort();
     }
-  },
+  }
 
-  _computeMessageClasses: function (message) {
+  _computeMessageClasses(message) {
     return 'message ' + message.who + (message.error ? ' error' : '');
   }
-});
+}
+
+customElements.define(HaVoiceCommandDialog.is, HaVoiceCommandDialog);
 </script>

src/layouts/hass-error-screen.html

@@ -1,3 +1,4 @@
+<link rel="import" href="../../bower_components/polymer/polymer-element.html">
 <link rel='import' href='../../bower_components/paper-button/paper-button.html'>
 
 <link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
@@ -34,10 +35,11 @@
 </dom-module>
 
 <script>
-Polymer({
+class HassErrorScreen extends Polymer.Element {
-  is: 'hass-error-screen',
+  static get is() { return 'hass-error-screen'; }
 
-  properties: {
+  static get properties() {
+    return {
       title: {
         type: String,
         value: 'Home Assistant',
@@ -47,10 +49,13 @@ Polymer({
         type: String,
         value: 'Oops! It looks like something went wrong.'
       },
-  },
+    };
+  }
 
-  backTapped: function () {
+  backTapped() {
     history.back();
-  },
+  }
-});
+}
+
+customElements.define(HassErrorScreen.is, HassErrorScreen);
 </script>

src/layouts/hass-loading-screen.html

@@ -1,3 +1,4 @@
+<link rel="import" href="../../bower_components/polymer/polymer-element.html">
 <link rel='import' href='../../bower_components/paper-spinner/paper-spinner.html'>
 
 <link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
@@ -29,10 +30,11 @@
 </dom-module>
 
 <script>
-Polymer({
+class HassLoadingScreen extends Polymer.Element {
-  is: 'hass-loading-screen',
+  static get is() { return 'hass-loading-screen'; }
 
-  properties: {
+  static get properties() {
+    return {
       narrow: {
         type: Boolean,
         value: false,
@@ -47,6 +49,9 @@ Polymer({
         type: String,
         value: '',
       },
-  },
+    };
-});
+  }
+}
+
+customElements.define(HassLoadingScreen.is, HassLoadingScreen);
 </script>

src/layouts/home-assistant-main.html

@@ -87,7 +87,7 @@
 </dom-module>
 
 <script>
-(function () {
+{
   const NON_SWIPABLE_PANELS = ['kiosk', 'map'];
 
   class HomeAssistantMain extends window.hassMixins.EventsMixin(Polymer.Element) {
@@ -147,7 +147,8 @@
       }
     }
 
-    attached() {
+    connectedCallback() {
+      super.connectedCallback();
       window.removeInitMsg();
       if (document.location.pathname === '/') {
         history.replaceState(null, null, '/states');
@@ -172,5 +173,5 @@
   }
 
   customElements.define(HomeAssistantMain.is, HomeAssistantMain);
-}());
+}
 </script>

src/layouts/login-form.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-flex-layout/iron-flex-layout-classes.html">
 
@@ -70,10 +70,11 @@
 </dom-module>
 
 <script>
-Polymer({
+class LoginForm extends Polymer.Element {
-  is: 'login-form',
+  static get is() { return 'login-form'; }
 
-  properties: {
+  static get properties() {
+    return {
       hass: {
         type: Object,
       },
@@ -109,35 +110,38 @@ Polymer({
         type: String,
         value: '',
       },
-  },
+    };
+  }
 
-  listeners: {
+  ready() {
-    keydown: 'passwordKeyDown',
+    super.ready();
-  },
+    this.addEventListener('keydown', ev => this.passwordKeyDown(ev));
+  }
 
-  attached: function () {
+  connectedCallback() {
+    super.connectedCallback();
     window.removeInitMsg();
-  },
+  }
 
-  computeLoadingMsg: function (isValidating) {
+  computeLoadingMsg(isValidating) {
     return isValidating ? 'Connecting' : 'Loading data';
-  },
+  }
 
-  computeShowSpinner: function (forceShowLoading, isValidating) {
+  computeShowSpinner(forceShowLoading, isValidating) {
     return forceShowLoading || isValidating;
-  },
+  }
 
-  isValidatingChanged: function (newVal) {
+  isValidatingChanged(newVal) {
     if (!newVal) {
-      this.async(function () {
+      setTimeout(() => {
         if (this.$.passwordInput.inputElement.inputElement) {
           this.$.passwordInput.inputElement.inputElement.focus();
         }
-      }.bind(this), 10);
+      }, 10);
+    }
   }
-  },
 
-  passwordKeyDown: function (ev) {
+  passwordKeyDown(ev) {
     // validate on enter
     if (ev.keyCode === 13) {
       this.validatePassword();
@@ -146,9 +150,9 @@ Polymer({
     } else if (this.errorMessage) {
       this.errorMessage = '';
     }
-  },
+  }
 
-  validatePassword: function () {
+  validatePassword() {
     var auth = this.password;
     this.$.hideKeyboardOnFocus.focus();
     this.connectionPromise = window.createHassConnection(auth);
@@ -158,9 +162,9 @@ Polymer({
         localStorage.authToken = auth;
       });
     }
-  },
+  }
 
-  handleConnectionPromiseChanged: function (newVal) {
+  handleConnectionPromiseChanged(newVal) {
     if (!newVal) return;
 
     var el = this;
@@ -184,5 +188,7 @@ Polymer({
       }
     );
   }
-});
+}
+
+customElements.define(LoginForm.is, LoginForm);
 </script>

src/layouts/partial-cards.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-flex-layout/iron-flex-layout-classes.html">
 <link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
@@ -13,6 +13,8 @@
 <link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">
 <link rel='import' href='../../bower_components/app-route/app-route.html'>
 
+<link rel='import' href='../../src/util/hass-mixins.html'>
+
 <link rel="import" href="../components/ha-menu-button.html">
 <link rel="import" href="../components/ha-start-voice-button.html">
 <link rel="import" href="../components/ha-cards.html">
@@ -132,13 +134,16 @@
 </dom-module>
 
 <script>
-Polymer({
+{
-  DEFAULT_VIEW_ENTITY_ID: 'group.default_view',
+  const DEFAULT_VIEW_ENTITY_ID = 'group.default_view';
-  ALWAYS_SHOW_DOMAIN: ['persistent_notification', 'configurator'],
+  const ALWAYS_SHOW_DOMAIN = ['persistent_notification', 'configurator'];
 
-  is: 'partial-cards',
+  class PartialCards extends window.hassMixins.EventsMixin(Polymer.Element) {
+    static get is() { return 'partial-cards'; }
+
+    static get properties() {
+      return {
 
-  properties: {
         hass: {
           type: Object,
           value: null,
@@ -207,34 +212,37 @@ Polymer({
           type: Boolean,
           value: false,
         },
-  },
+      };
+    }
 
-  created: function () {
+    constructor() {
+      super();
       this.handleWindowChange = this.handleWindowChange.bind(this);
       this.mqls = [300, 600, 900, 1200].map(function (width) {
         var mql = window.matchMedia('(min-width: ' + width + 'px)');
         mql.addListener(this.handleWindowChange);
         return mql;
       }.bind(this));
-  },
+    }
 
-  detached: function () {
+    disconnectedCallback() {
+      super.disconnectedCallback();
       this.mqls.forEach(function (mql) {
         mql.removeListener(this.handleWindowChange);
       });
-  },
+    }
 
-  handleWindowChange: function () {
+    handleWindowChange() {
       var matchColumns = this.mqls.reduce(function (cols, mql) {
         return cols + mql.matches;
       }, 0);
       // Do -1 column if the menu is docked and open
       this._columns = Math.max(1, matchColumns - (!this.narrow && this.showMenu));
-  },
+    }
 
-  areTabsHidden: function (views, showTabs) {
+    areTabsHidden(views, showTabs) {
       return !views || !views.length || !showTabs;
-  },
+    }
 
     /**
      * Scroll to a specific y coordinate.
@@ -245,7 +253,7 @@ Polymer({
      * @param {number} top The coordinate to scroll to, along the y-axis.
      * @param {boolean} smooth true if the scroll position should be smoothly adjusted.
      */
-  scrollToTop: function () {
+    scrollToTop() {
       // the scroll event will trigger _updateScrollState directly,
       // However, _updateScrollState relies on the previous `scrollTop` to update the states.
       // Calling _updateScrollState will ensure that the states are synced correctly.
@@ -273,9 +281,9 @@ Polymer({
           requestAnimationFrame(updateFrame.bind(this));
         }
       }).call(this);
-  },
+    }
 
-  handleViewSelected: function (ev) {
+    handleViewSelected(ev) {
       var view = ev.detail.item.getAttribute('data-entity') || null;
       var current = this.currentView;
 
@@ -287,22 +295,22 @@ Polymer({
         history.pushState(null, null, path);
         this.fire('location-changed');
       }
-  },
+    }
 
-  _computeCurrentView: function (routeMatch, routeData) {
+    _computeCurrentView(routeMatch, routeData) {
       return routeMatch ? routeData.view : '';
-  },
+    }
 
-  computeTitle: function (views, locationName) {
+    computeTitle(views, locationName) {
       return views && views.length > 0 ? 'Home Assistant' : locationName;
-  },
+    }
 
-  computeShowIntroduction: function (currentView, introductionLoaded, states) {
+    computeShowIntroduction(currentView, introductionLoaded, states) {
       return currentView === '' && (introductionLoaded || Object.keys(states).length === 0);
-  },
+    }
 
-  computeStateName: function (stateObj) {
+    computeStateName(stateObj) {
-    if (stateObj.entity_id === this.DEFAULT_VIEW_ENTITY_ID) {
+      if (stateObj.entity_id === DEFAULT_VIEW_ENTITY_ID) {
         if (stateObj.attributes.friendly_name &&
             stateObj.attributes.friendly_name !== 'default_view') {
           return stateObj.attributes.friendly_name;
@@ -310,39 +318,39 @@ Polymer({
         return this.computeLocationName(this.hass);
       }
       return window.hassUtil.computeStateName(stateObj);
-  },
+    }
 
-  computeLocationName: function (hass) {
+    computeLocationName(hass) {
       return window.hassUtil.computeLocationName(hass);
-  },
+    }
 
-  computeIntroductionLoaded: function (hass) {
+    computeIntroductionLoaded(hass) {
       return window.hassUtil.isComponentLoaded(hass, 'introduction');
-  },
+    }
 
-  hassChanged: function (hass) {
+    hassChanged(hass) {
       if (!hass) return;
       var views = window.HAWS.extractViews(hass.states);
       // If default view present, it's in first index.
-    if (views.length > 0 && views[0].entity_id === this.DEFAULT_VIEW_ENTITY_ID) {
+      if (views.length > 0 && views[0].entity_id === DEFAULT_VIEW_ENTITY_ID) {
         this.defaultView = views.shift();
       } else {
         this.defaultView = null;
       }
 
       this.views = views;
-  },
+    }
 
-  isView: function (currentView, defaultView) {
+    isView(currentView, defaultView) {
       return currentView || defaultView;
-  },
+    }
 
     /*
       Compute the states to show for current view.
 
       Will make sure we always show entities from ALWAYS_SHOW_DOMAINS domains.
     */
-  computeViewStates: function (currentView, hass, defaultView) {
+    computeViewStates(currentView, hass, defaultView) {
       var i;
       var entityId;
       var state;
@@ -368,7 +376,7 @@ Polymer({
       if (currentView) {
         states = window.HAWS.getViewEntities(hass.states, hass.states[currentView]);
       } else {
-      states = window.HAWS.getViewEntities(hass.states, hass.states[this.DEFAULT_VIEW_ENTITY_ID]);
+        states = window.HAWS.getViewEntities(hass.states, hass.states[DEFAULT_VIEW_ENTITY_ID]);
       }
 
       // Make sure certain domains are always shown.
@@ -376,30 +384,33 @@ Polymer({
         entityId = entityIds[i];
         state = hass.states[entityId];
 
-      if (this.ALWAYS_SHOW_DOMAIN.indexOf(window.hassUtil.computeDomain(state)) !== -1) {
+        if (ALWAYS_SHOW_DOMAIN.indexOf(window.hassUtil.computeDomain(state)) !== -1) {
           states[entityId] = state;
         }
       }
 
       return states;
-  },
+    }
 
     /*
       Compute the ordered list of groups for this view
     */
-  computeOrderedGroups: function (currentView, hass, defaultView) {
+    computeOrderedGroups(currentView, hass, defaultView) {
       if (!this.isView(currentView, defaultView)) {
         return null;
       }
 
       var orderedGroups = {};
-    var entitiesList = hass.states[currentView || this.DEFAULT_VIEW_ENTITY_ID].attributes.entity_id;
+      var entitiesList = hass.states[currentView || DEFAULT_VIEW_ENTITY_ID].attributes.entity_id;
 
       for (var i = 0; i < entitiesList.length; i++) {
         orderedGroups[entitiesList[i]] = i;
       }
 
       return orderedGroups;
-  },
+    }
-});
+  }
+
+  customElements.define(PartialCards.is, PartialCards);
+}
 </script>

src/layouts/partial-panel-resolver.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/app-route/app-route.html'>
 
 <link rel="import" href="./hass-loading-screen.html">
@@ -29,10 +29,11 @@
 </dom-module>
 
 <script>
-Polymer({
+class PartialPanelResolver extends Polymer.Element {
-  is: 'partial-panel-resolver',
+  static get is() { return 'partial-panel-resolver'; }
 
-  properties: {
+  static get properties() {
+    return {
       hass: {
         type: Object,
         observer: 'updateAttributes',
@@ -74,13 +75,14 @@ Polymer({
         computed: 'computeCurrentPanel(hass, routeData)',
         observer: 'panelChanged',
       },
-  },
+    };
+  }
 
-  computeCurrentPanel: function (hass, routeData) {
+  computeCurrentPanel(hass, routeData) {
     return routeData ? hass.config.panels[routeData.panel] : null;
-  },
+  }
 
-  panelChanged: function (panel) {
+  panelChanged(panel) {
     if (!panel) {
       if (this.$.panel.lastChild) {
         this.$.panel.removeChild(this.$.panel.lastChild);
@@ -91,10 +93,10 @@ Polymer({
     this.resolved = false;
     this.errorLoading = false;
 
-    this.importHref(
+    Polymer.importHref(
       panel.url,
 
-      function success() {
+      () => {
         window.hassUtil.dynamicContentUpdater(this.$.panel, 'ha-panel-' + panel.component_name, {
           hass: this.hass,
           narrow: this.narrow,
@@ -103,23 +105,25 @@ Polymer({
           panel: panel,
         });
         this.resolved = true;
-      }.bind(this),
+      },
 
-      function error() {
+      () => {
         this.errorLoading = true;
-      }.bind(this),
+      },
 
       true /* async */
     );
-  },
+  }
 
-  updateAttributes: function () {
+  updateAttributes() {
     var customEl = Polymer.dom(this.$.panel).lastChild;
     if (!customEl) return;
     customEl.hass = this.hass;
     customEl.narrow = this.narrow;
     customEl.showMenu = this.showMenu;
     customEl.route = this.routeTail;
-  },
+  }
-});
+}
+
+customElements.define(PartialPanelResolver.is, PartialPanelResolver);
 </script>

src/managers/notification-manager.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-toast/paper-toast.html">
 
@@ -25,10 +25,11 @@
 </dom-module>
 
 <script>
-Polymer({
+class NotificationManager extends Polymer.Element {
-  is: 'notification-manager',
+  static get is() { return 'notification-manager'; }
 
-  properties: {
+  static get properties() {
+    return {
       hass: {
         type: Object,
       },
@@ -52,34 +53,40 @@ Polymer({
         type: String,
         value: '',
       },
-  },
+    };
+  }
 
-  computeIsStreaming: function (hass) {
+  computeIsStreaming(hass) {
     return !hass || hass.connected;
-  },
+  }
 
-  created: function () {
+  constructor() {
+    super();
     this.handleWindowChange = this.handleWindowChange.bind(this);
     this._mediaq = window.matchMedia('(max-width: 599px)');
     this._mediaq.addListener(this.handleWindowChange);
-  },
+  }
 
-  attached: function () {
+  connectedCallback() {
+    super.connectedCallback();
     this.handleWindowChange(this._mediaq);
-  },
+  }
 
-  detached: function () {
+  disconnectedCallback() {
+    super.disconnectedCallback();
     this._mediaq.removeListener(this.handleWindowChange);
-  },
+  }
 
-  handleWindowChange: function (ev) {
+  handleWindowChange(ev) {
     this.$.toast.classList.toggle('fit-bottom', ev.matches);
     this.$.connToast.classList.toggle('fit-bottom', ev.matches);
-  },
+  }
 
-  showNotification: function (message) {
+  showNotification(message) {
     this._set_text(message);
     this.$.toast.show();
-  },
+  }
-});
+}
+
+customElements.define(NotificationManager.is, NotificationManager);
 </script>

src/more-infos/more-info-alarm_control_panel.html

@@ -1,10 +1,12 @@
-<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-flex-layout/iron-flex-layout-classes.html">
 
 <link rel='import' href='../../bower_components/paper-button/paper-button.html'>
 <link rel='import' href='../../bower_components/paper-input/paper-input.html'>
 
+<link rel='import' href='../../src/util/hass-mixins.html'>
+
 <dom-module id='more-info-alarm_control_panel'>
   <template>
     <style is="custom-style" include="iron-flex"></style>
@@ -38,10 +40,11 @@
 </dom-module>
 
 <script>
-Polymer({
+class MoreInfoAlarmControlPanel extends window.hassMixins.EventsMixin(Polymer.Element) {
-  is: 'more-info-alarm_control_panel',
+  static get is() { return 'more-info-alarm_control_panel'; }
 
-  properties: {
+  static get properties() {
+    return {
       hass: {
         type: Object,
       },
@@ -82,17 +85,18 @@ Polymer({
         type: Boolean,
         computed: 'validateCode(enteredCode, codeFormat)',
       },
-  },
+    };
+  }
 
-  validateCode: function (code, format) {
+  validateCode(code, format) {
     var re = new RegExp(format);
     if (format === null) {
       return true;
     }
     return re.test(code);
-  },
+  }
 
-  stateObjChanged: function (newVal, oldVal) {
+  stateObjChanged(newVal, oldVal) {
     if (newVal) {
       this.codeFormat = newVal.attributes.code_format;
       this.codeInputVisible = this.codeFormat !== null;
@@ -111,31 +115,33 @@ Polymer({
       this.armAwayButtonVisible = newVal.state === 'disarmed';
     }
     if (oldVal) {
-      this.async(function () {
+      setTimeout(() => {
         this.fire('iron-resize');
-      }.bind(this), 500);
+      }, 500);
+    }
   }
-  },
 
-  handleDisarmTap: function () {
+  handleDisarmTap() {
     this.callService('alarm_disarm', { code: this.enteredCode });
-  },
+  }
 
-  handleHomeTap: function () {
+  handleHomeTap() {
     this.callService('alarm_arm_home', { code: this.enteredCode });
-  },
+  }
 
-  handleAwayTap: function () {
+  handleAwayTap() {
     this.callService('alarm_arm_away', { code: this.enteredCode });
-  },
+  }
 
-  callService: function (service, data) {
+  callService(service, data) {
     var serviceData = data || {};
     serviceData.entity_id = this.stateObj.entity_id;
     this.hass.callService('alarm_control_panel', service, serviceData)
       .then(function () {
         this.enteredCode = '';
       }.bind(this));
-  },
+  }
-});
+}
+
+customElements.define(MoreInfoAlarmControlPanel.is, MoreInfoAlarmControlPanel);
 </script>

src/more-infos/more-info-automation.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-flex-layout/iron-flex-layout-classes.html">
 
@@ -28,10 +28,11 @@
 </dom-module>
 
 <script>
-Polymer({
+class MoreInfoAutomation extends Polymer.Element {
-  is: 'more-info-automation',
+  static get is() { return 'more-info-automation'; }
 
-  properties: {
+  static get properties() {
+    return {
       hass: {
         type: Object,
       },
@@ -39,12 +40,15 @@ Polymer({
       stateObj: {
         type: Object,
       },
-  },
+    };
+  }
 
-  handleTriggerTapped: function () {
+  handleTriggerTapped() {
     this.hass.callService('automation', 'trigger', {
       entity_id: this.stateObj.entity_id,
     });
-  },
+  }
-});
+}
+
+customElements.define(MoreInfoAutomation.is, MoreInfoAutomation);
 </script>

src/more-infos/more-info-camera.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'>
 
 <dom-module id='more-info-camera'>
   <template>
@@ -18,10 +20,11 @@
 </dom-module>
 
 <script>
-Polymer({
+class MoreInfoCamera extends window.hassMixins.EventsMixin(Polymer.Element) {
-  is: 'more-info-camera',
+  static get is() { return 'more-info-camera'; }
 
-  properties: {
+  static get properties() {
+    return {
       hass: {
         type: Object,
       },
@@ -34,17 +37,18 @@ Polymer({
         type: Boolean,
         value: true,
       },
-  },
+    };
+  }
 
-  imageLoaded: function () {
+  imageLoaded() {
     this.fire('iron-resize');
-  },
+  }
 
-  computeStateName: function (stateObj) {
+  computeStateName(stateObj) {
     return window.hassUtil.computeStateName(stateObj);
-  },
+  }
 
-  computeCameraImageUrl: function (hass, stateObj, isVisible) {
+  computeCameraImageUrl(hass, stateObj, isVisible) {
     if (hass.demo) {
       return '/demo/webcam.jpg';
     } else if (stateObj && isVisible) {
@@ -53,6 +57,8 @@ Polymer({
     }
     // Return an empty image if no stateObj (= dialog not open) or in cleanup mode.
     return 'data:image/gif;base64,R0lGODlhAQABAAAAACw=';
-  },
+  }
-});
+}
+
+customElements.define(MoreInfoCamera.is, MoreInfoCamera);
 </script>

src/more-infos/more-info-climate.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-flex-layout/iron-flex-layout-classes.html">
 
@@ -8,6 +8,8 @@
 <link rel='import' href='../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html'>
 <link rel='import' href='../../bower_components/paper-toggle-button/paper-toggle-button.html'>
 
+<link rel='import' href='../../src/util/hass-mixins.html'>
+
 <link rel="import" href='../components/ha-climate-control.html'>
 
 <dom-module id='more-info-climate'>
@@ -179,10 +181,11 @@
 </dom-module>
 
 <script>
-Polymer({
+class MoreInfoClimate extends window.hassMixins.EventsMixin(Polymer.Element) {
-  is: 'more-info-climate',
+  static get is() { return 'more-info-climate'; }
 
-  properties: {
+  static get properties() {
+    return {
       hass: {
         type: Object,
       },
@@ -217,9 +220,10 @@ Polymer({
       auxToggleChecked: {
         type: Boolean,
       },
-  },
+    };
+  }
 
-  stateObjChanged: function (newVal, oldVal) {
+  stateObjChanged(newVal, oldVal) {
     this.awayToggleChecked = newVal.attributes.away_mode === 'on';
     this.auxToggleChecked = newVal.attributes.aux_heat === 'on';
 
@@ -243,52 +247,52 @@ Polymer({
     }
 
     if (oldVal) {
-      this.async(function () {
+      setTimeout(() => {
         this.fire('iron-resize');
-      }.bind(this), 500);
+      }, 500);
+    }
   }
-  },
 
-  computeTemperatureStepSize: function (stateObj) {
+  computeTemperatureStepSize(stateObj) {
     if (stateObj.attributes.target_temp_step) {
       return stateObj.attributes.target_temp_step;
     } else if (stateObj.attributes.unit_of_measurement.indexOf('F') !== -1) {
       return 1;
     }
     return 0.5;
-  },
+  }
 
-  computeTargetTempHidden: function (stateObj) {
+  computeTargetTempHidden(stateObj) {
     return !stateObj.attributes.temperature &&
         !stateObj.attributes.target_temp_low &&
         !stateObj.attributes.target_temp_high;
-  },
+  }
 
-  computeHideTempRangeSlider: function (stateObj) {
+  computeHideTempRangeSlider(stateObj) {
     return !stateObj.attributes.target_temp_low &&
         !stateObj.attributes.target_temp_high;
-  },
+  }
 
-  computeHideTempSlider: function (stateObj) {
+  computeHideTempSlider(stateObj) {
     return !stateObj.attributes.temperature;
-  },
+  }
 
-  computeClassNames: function (stateObj) {
+  computeClassNames(stateObj) {
     return 'more-info-climate ' + window.hassUtil.attributeClassNames(stateObj, [
       'away_mode', 'aux_heat', 'temperature', 'humidity', 'operation_list',
       'fan_list', 'swing_list',
     ]);
-  },
+  }
 
-  targetTemperatureChanged: function (ev) {
+  targetTemperatureChanged(ev) {
     var temperature = ev.target.value;
 
     if (temperature === this.stateObj.attributes.temperature) return;
 
     this.callServiceHelper('set_temperature', { temperature: temperature });
-  },
+  }
 
-  targetTemperatureRangeSliderChanged: function (ev) {
+  targetTemperatureRangeSliderChanged(ev) {
     var targetTempLow = ev.currentTarget.valueMin;
     var targetTempHigh = ev.currentTarget.valueMax;
 
@@ -298,35 +302,35 @@ Polymer({
       target_temp_low: targetTempLow,
       target_temp_high: targetTempHigh,
     });
-  },
+  }
 
-  targetHumiditySliderChanged: function (ev) {
+  targetHumiditySliderChanged(ev) {
     var humidity = ev.target.value;
 
     if (humidity === this.stateObj.attributes.humidity) return;
 
     this.callServiceHelper('set_humidity', { humidity: humidity });
-  },
+  }
 
-  awayToggleChanged: function (ev) {
+  awayToggleChanged(ev) {
     var oldVal = this.stateObj.attributes.away_mode === 'on';
     var newVal = ev.target.checked;
 
     if (oldVal === newVal) return;
 
     this.callServiceHelper('set_away_mode', { away_mode: newVal });
-  },
+  }
 
-  auxToggleChanged: function (ev) {
+  auxToggleChanged(ev) {
     var oldVal = this.stateObj.attributes.aux_heat === 'on';
     var newVal = ev.target.checked;
 
     if (oldVal === newVal) return;
 
     this.callServiceHelper('set_aux_heat', { aux_heat: newVal });
-  },
+  }
 
-  handleFanmodeChanged: function (fanIndex) {
+  handleFanmodeChanged(fanIndex) {
     var fanInput;
     // Selected Option will transition to '' before transitioning to new value
     if (fanIndex === '' || fanIndex === -1) return;
@@ -335,9 +339,9 @@ Polymer({
     if (fanInput === this.stateObj.attributes.fan_mode) return;
 
     this.callServiceHelper('set_fan_mode', { fan_mode: fanInput });
-  },
+  }
 
-  handleOperationmodeChanged: function (operationIndex) {
+  handleOperationmodeChanged(operationIndex) {
     var operationInput;
     // Selected Option will transition to '' before transitioning to new value
     if (operationIndex === '' || operationIndex === -1) return;
@@ -346,9 +350,9 @@ Polymer({
     if (operationInput === this.stateObj.attributes.operation_mode) return;
 
     this.callServiceHelper('set_operation_mode', { operation_mode: operationInput });
-  },
+  }
 
-  handleSwingmodeChanged: function (swingIndex) {
+  handleSwingmodeChanged(swingIndex) {
     var swingInput;
     // Selected Option will transition to '' before transitioning to new value
     if (swingIndex === '' || swingIndex === -1) return;
@@ -357,9 +361,9 @@ Polymer({
     if (swingInput === this.stateObj.attributes.swing_mode) return;
 
     this.callServiceHelper('set_swing_mode', { swing_mode: swingInput });
-  },
+  }
 
-  callServiceHelper: function (service, data) {
+  callServiceHelper(service, data) {
     // We call stateChanged after a successful call to re-sync the inputs
     // 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,
@@ -371,6 +375,8 @@ Polymer({
       .then(function () {
         this.stateObjChanged(this.stateObj);
       }.bind(this));
-  },
+  }
-});
+}
+
+customElements.define(MoreInfoClimate.is, MoreInfoClimate);
 </script>

src/more-infos/more-info-configurator.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-flex-layout/iron-flex-layout-classes.html">
 <link rel='import' href='../../bower_components/iron-input/iron-input.html'>
 <link rel='import' href='../../bower_components/paper-spinner/paper-spinner.html'>
@@ -94,10 +94,11 @@
 </dom-module>
 
 <script>
-Polymer({
+class MoreInfoConfigurator extends Polymer.Element {
-  is: 'more-info-configurator',
+  static get is() { return 'more-info-configurator'; }
 
-  properties: {
+  static get properties() {
+    return {
       stateObj: {
         type: Object,
       },
@@ -121,18 +122,19 @@ Polymer({
         type: Object,
         value: function () { return {}; },
       },
-  },
+    };
+  }
 
-  computeIsConfigurable: function (stateObj) {
+  computeIsConfigurable(stateObj) {
     return stateObj.state === 'configure';
-  },
+  }
 
-  fieldChanged: function (ev) {
+  fieldChanged(ev) {
     var el = ev.target;
     this.fieldInput[el.name] = el.value;
-  },
+  }
 
-  submitClicked: function () {
+  submitClicked() {
     var data = {
       configure_id: this.stateObj.attributes.configure_id,
       fields: this.fieldInput,
@@ -148,6 +150,8 @@ Polymer({
         this.isConfiguring = false;
       }.bind(this)
     );
-  },
+  }
-});
+}
+
+customElements.define(MoreInfoConfigurator.is, MoreInfoConfigurator);
 </script>

src/more-infos/more-info-content.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='more-info-alarm_control_panel.html'>
 <link rel='import' href='more-info-automation.html'>
@@ -20,10 +20,11 @@
 <link rel='import' href='more-info-input_datetime.html'>
 
 <script>
-Polymer({
+class MoreInfoContent extends Polymer.Element {
-  is: 'more-info-content',
+  static get is() { return 'more-info-content'; }
 
-  properties: {
+  static get properties() {
+    return {
       hass: {
         type: Object,
       },
@@ -32,13 +33,15 @@ Polymer({
         type: Object,
         observer: 'stateObjChanged',
       },
-  },
+    };
+  }
 
-  created: function () {
+  constructor() {
+    super();
     this.style.display = 'block';
-  },
+  }
 
-  stateObjChanged: function (stateObj) {
+  stateObjChanged(stateObj) {
     var rootEl;
     if (!stateObj) {
       // If root has lastChild, set 'isVisible' attribute of that child to false.
@@ -52,6 +55,8 @@ Polymer({
         { hass: this.hass, stateObj: stateObj, isVisible: true }
       );
     }
-  },
+  }
-});
+}
+
+customElements.define(MoreInfoContent.is, MoreInfoContent);
 </script>

src/more-infos/more-info-cover.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-flex-layout/iron-flex-layout-classes.html">
 <link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
@@ -56,10 +56,15 @@
 </dom-module>
 
 <script>
-Polymer({
+{
-  is: 'more-info-cover',
+  const FEATURE_CLASS_NAMES = {
+    128: 'has-set_tilt_position',
+  };
+  class MoreInfoCover extends Polymer.Element {
+    static get is() { return 'more-info-cover'; }
 
-  properties: {
+    static get properties() {
+      return {
         hass: {
           type: Object,
         },
@@ -82,36 +87,35 @@ Polymer({
           type: Number,
         },
 
-  },
+      };
+    }
 
-  computeEntityObj: function (hass, stateObj) {
+    computeEntityObj(hass, stateObj) {
       return new window.CoverEntity(hass, stateObj);
-  },
+    }
 
-  stateObjChanged: function (newVal) {
+    stateObjChanged(newVal) {
       this.coverPositionSliderValue = newVal.attributes.current_position;
       this.coverTiltPositionSliderValue = newVal.attributes.current_tilt_position;
-  },
+    }
 
-  featureClassNames: {
+    computeClassNames(stateObj) {
-    128: 'has-set_tilt_position',
-  },
-
-  computeClassNames: function (stateObj) {
       var classes = [
         window.hassUtil.attributeClassNames(stateObj, ['current_position', 'current_tilt_position']),
-      window.hassUtil.featureClassNames(stateObj, this.featureClassNames),
+        window.hassUtil.featureClassNames(stateObj, FEATURE_CLASS_NAMES),
       ];
       return classes.join(' ');
-  },
+    }
 
-  coverPositionSliderChanged: function (ev) {
+    coverPositionSliderChanged(ev) {
       this.entityObj.setCoverPosition(ev.target.value);
-  },
+    }
 
-  coverTiltPositionSliderChanged: function (ev) {
+    coverTiltPositionSliderChanged(ev) {
       this.entityObj.setCoverTiltPosition(ev.target.value);
-  },
+    }
+  }
 
-});
+  customElements.define(MoreInfoCover.is, MoreInfoCover);
+}
 </script>

src/more-infos/more-info-default.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="../components/ha-attributes.html">
 
@@ -9,13 +9,17 @@
 </dom-module>
 
 <script>
-Polymer({
+class MoreInfoDefault extends Polymer.Element {
-  is: 'more-info-default',
+  static get is() { return 'more-info-default'; }
 
-  properties: {
+  static get properties() {
+    return {
       stateObj: {
         type: Object,
       },
-  },
+    };
-});
+  }
+}
+
+customElements.define(MoreInfoDefault.is, MoreInfoDefault);
 </script>