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,80 +110,84 @@
 </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() {
-    hass: {
+    return {
-      type: Object,
+      hass: {
-    },
+        type: Object,
+      },
 
-    narrow: {
+      narrow: {
-      type: Boolean,
+        type: Boolean,
-    },
+      },
 
-    showMenu: {
+      showMenu: {
-      type: Boolean,
+        type: Boolean,
-      value: false,
+        value: false,
-    },
+      },
 
-    errors: {
+      errors: {
-      type: Object,
+        type: Object,
-      value: null,
+        value: null,
-    },
+      },
 
-    dirty: {
+      dirty: {
-      type: Boolean,
+        type: Boolean,
-      value: false,
+        value: false,
-    },
+      },
 
-    config: {
+      config: {
-      type: Object,
+        type: Object,
-      value: null,
+        value: null,
-    },
+      },
 
-    automation: {
+      automation: {
-      type: Object,
+        type: Object,
-      observer: 'automationChanged',
+        observer: 'automationChanged',
-    },
+      },
 
-    creatingNew: {
+      creatingNew: {
-      type: Boolean,
+        type: Boolean,
-      observer: 'creatingNewChanged',
+        observer: 'creatingNewChanged',
-    },
+      },
 
-    name: {
+      name: {
-      type: String,
+        type: String,
-      computed: 'computeName(automation)'
+        computed: 'computeName(automation)'
-    },
+      },
 
-    isWide: {
+      isWide: {
-      type: Boolean,
+        type: Boolean,
-      observer: 'isWideChanged',
+        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,54 +94,58 @@
 </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() {
-    hass: {
+    return {
-      type: Object,
+      hass: {
-    },
+        type: Object,
+      },
 
-    narrow: {
+      narrow: {
-      type: Boolean,
+        type: Boolean,
-    },
+      },
 
-    showMenu: {
+      showMenu: {
-      type: Boolean,
+        type: Boolean,
-      value: false,
+        value: false,
-    },
+      },
 
-    automations: {
+      automations: {
-      type: Array,
+        type: Array,
-    },
+      },
 
-    isWide: {
+      isWide: {
-      type: Boolean,
+        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,37 +45,39 @@
 </dom-module>
 
 <script>
-Polymer({
+class HaConfigAutomation extends Polymer.Element {
-  is: 'ha-config-automation',
+  static get is() { return 'ha-config-automation'; }
 
-  properties: {
+  static get properties() {
-    hass: Object,
+    return {
-    narrow: Boolean,
+      hass: Object,
-    showMenu: Boolean,
+      narrow: Boolean,
-    route: Object,
+      showMenu: Boolean,
-    isWide: Boolean,
+      route: Object,
-    _routeData: Object,
+      isWide: Boolean,
-    _routeMatches: Boolean,
+      _routeData: Object,
-    _creatingNew: Boolean,
+      _routeMatches: Boolean,
-    _edittingAutomation: Boolean,
+      _creatingNew: Boolean,
+      _edittingAutomation: Boolean,
 
-    automations: {
+      automations: {
-      type: Array,
+        type: Array,
-      computed: 'computeAutomations(hass)',
+        computed: 'computeAutomations(hass)',
-    },
+      },
 
-    automation: {
+      automation: {
-      type: Object,
+        type: Object,
-      computed: 'computeAutomation(automations, _edittingAutomation, _routeData)',
+        computed: 'computeAutomation(automations, _edittingAutomation, _routeData)',
-    },
+      },
 
-    showEditor: {
+      showEditor: {
-      type: Boolean,
+        type: Boolean,
-      computed: 'computeShowEditor(_edittingAutomation, _creatingNew)',
+        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,63 +33,67 @@
 </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() {
-    hass: {
+    return {
-      type: Object,
+      hass: {
-    },
+        type: Object,
+      },
 
-    pages: {
+      pages: {
-      type: Array,
+        type: Array,
-      value: [
+        value: [
-        {
+          {
-          domain: 'core',
+            domain: 'core',
-          caption: 'General',
+            caption: 'General',
-          description: 'Validate your configuration file and control the server.',
+            description: 'Validate your configuration file and control the server.',
-          loaded: true,
+            loaded: true,
-        },
+          },
-        {
+          {
-          domain: 'customize',
+            domain: 'customize',
-          caption: 'Customization',
+            caption: 'Customization',
-          description: 'Customize your entities.',
+            description: 'Customize your entities.',
-          loaded: true,
+            loaded: true,
-        },
+          },
-        {
+          {
-          domain: 'automation',
+            domain: 'automation',
-          caption: 'Automation',
+            caption: 'Automation',
-          description: 'Create and edit automations.',
+            description: 'Create and edit automations.',
-        },
+          },
-        {
+          {
-          domain: 'script',
+            domain: 'script',
-          caption: 'Script',
+            caption: 'Script',
-          description: 'Create and edit scripts.',
+            description: 'Create and edit scripts.',
-        },
+          },
-        {
+          {
-          domain: 'zwave',
+            domain: 'zwave',
-          caption: 'Z-Wave',
+            caption: 'Z-Wave',
-          description: 'Manage your Z-Wave network.',
+            description: 'Manage your Z-Wave network.',
-        }
+          }
-      ],
+        ],
-    }
+      }
-  },
+    };
+  }
 
-  _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,39 +67,43 @@
 </dom-module>
 
 <script>
-Polymer({
+class HaConfigSection extends Polymer.Element {
-  is: 'ha-config-section',
+  static get is() { return 'ha-config-section'; }
 
-  properties: {
+  static get properties() {
-    hass: {
+    return {
-      type: Object,
+      hass: {
-    },
+        type: Object,
+      },
 
-    narrow: {
+      narrow: {
-      type: Boolean,
+        type: Boolean,
-    },
+      },
 
-    showMenu: {
+      showMenu: {
-      type: Boolean,
+        type: Boolean,
-      value: false,
+        value: false,
-    },
+      },
 
-    isWide: {
+      isWide: {
-      type: Boolean,
+        type: Boolean,
-      value: false,
+        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,83 +81,86 @@
 </dom-module>
 
 <script>
-Polymer({
+class HaEntityConfig extends Polymer.Element {
-  is: 'ha-entity-config',
+  static get is() { return 'ha-entity-config'; }
 
-  properties: {
+  static get properties() {
-    hass: {
+    return {
-      type: Object,
+      hass: {
-      observer: 'hassChanged',
+        type: Object,
-    },
+        observer: 'hassChanged',
+      },
 
-    label: {
+      label: {
-      type: String,
+        type: String,
-      value: 'Device',
+        value: 'Device',
-    },
+      },
 
-    entities: {
+      entities: {
-      type: Array,
+        type: Array,
-      observer: 'entitiesChanged',
+        observer: 'entitiesChanged',
-    },
+      },
 
-    allowDelete: {
+      allowDelete: {
-      type: Boolean,
+        type: Boolean,
-      value: false,
+        value: false,
-    },
+      },
 
-    selectedEntity: {
+      selectedEntity: {
-      type: Number,
+        type: Number,
-      value: -1,
+        value: -1,
-      observer: 'entityChanged',
+        observer: 'entityChanged',
-    },
+      },
 
-    formState: {
+      formState: {
-      type: String,
+        type: String,
-      // no-devices, loading, saving, editing
+        // no-devices, loading, saving, editing
-      value: 'no-devices',
+        value: 'no-devices',
-    },
+      },
 
-    config: {
+      config: {
-      type: Object,
+        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,37 +45,39 @@
 </dom-module>
 
 <script>
-Polymer({
+class HaConfigScript extends Polymer.Element {
-  is: 'ha-config-script',
+  static get is() { return 'ha-config-script'; }
 
-  properties: {
+  static get properties() {
-    hass: Object,
+    return {
-    narrow: Boolean,
+      hass: Object,
-    showMenu: Boolean,
+      narrow: Boolean,
-    route: Object,
+      showMenu: Boolean,
-    isWide: Boolean,
+      route: Object,
-    _routeData: Object,
+      isWide: Boolean,
-    _routeMatches: Boolean,
+      _routeData: Object,
-    _creatingNew: Boolean,
+      _routeMatches: Boolean,
-    _edittingScript: Boolean,
+      _creatingNew: Boolean,
+      _edittingScript: Boolean,
 
-    scripts: {
+      scripts: {
-      type: Array,
+        type: Array,
-      computed: 'computeScripts(hass)',
+        computed: 'computeScripts(hass)',
-    },
+      },
 
-    script: {
+      script: {
-      type: Object,
+        type: Object,
-      computed: 'computeScript(scripts, _edittingScript, _routeData)',
+        computed: 'computeScript(scripts, _edittingScript, _routeData)',
-    },
+      },
 
-    showEditor: {
+      showEditor: {
-      type: Boolean,
+        type: Boolean,
-      computed: 'computeShowEditor(_edittingScript, _creatingNew)',
+        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,80 +110,84 @@
 </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() {
-    hass: {
+    return {
-      type: Object,
+      hass: {
-    },
+        type: Object,
+      },
 
-    narrow: {
+      narrow: {
-      type: Boolean,
+        type: Boolean,
-    },
+      },
 
-    showMenu: {
+      showMenu: {
-      type: Boolean,
+        type: Boolean,
-      value: false,
+        value: false,
-    },
+      },
 
-    errors: {
+      errors: {
-      type: Object,
+        type: Object,
-      value: null,
+        value: null,
-    },
+      },
 
-    dirty: {
+      dirty: {
-      type: Boolean,
+        type: Boolean,
-      value: false,
+        value: false,
-    },
+      },
 
-    config: {
+      config: {
-      type: Object,
+        type: Object,
-      value: null,
+        value: null,
-    },
+      },
 
-    script: {
+      script: {
-      type: Object,
+        type: Object,
-      observer: 'scriptChanged',
+        observer: 'scriptChanged',
-    },
+      },
 
-    creatingNew: {
+      creatingNew: {
-      type: Boolean,
+        type: Boolean,
-      observer: 'creatingNewChanged',
+        observer: 'creatingNewChanged',
-    },
+      },
 
-    name: {
+      name: {
-      type: String,
+        type: String,
-      computed: 'computeName(script)'
+        computed: 'computeName(script)'
-    },
+      },
 
-    isWide: {
+      isWide: {
-      type: Boolean,
+        type: Boolean,
-      observer: 'isWideChanged',
+        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,54 +90,58 @@
 </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() {
-    hass: {
+    return {
-      type: Object,
+      hass: {
-    },
+        type: Object,
+      },
 
-    narrow: {
+      narrow: {
-      type: Boolean,
+        type: Boolean,
-    },
+      },
 
-    showMenu: {
+      showMenu: {
-      type: Boolean,
+        type: Boolean,
-      value: false,
+        value: false,
-    },
+      },
 
-    scripts: {
+      scripts: {
-      type: Array,
+        type: Array,
-    },
+      },
 
-    isWide: {
+      isWide: {
-      type: Boolean,
+        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,101 +319,104 @@
 </dom-module>
 
 <script>
-Polymer({
+class HaConfigZwave extends Polymer.Element {
-  is: 'ha-config-zwave',
+  static get is() { return 'ha-config-zwave'; }
 
-  properties: {
+  static get properties() {
-    hass: Object,
+    return {
-    isWide: Boolean,
+      hass: Object,
+      isWide: Boolean,
 
-    nodes: {
+      nodes: {
-      type: Array,
+        type: Array,
-      computed: 'computeNodes(hass)'
+        computed: 'computeNodes(hass)'
-    },
-
-    selectedNode: {
-      type: Number,
-      value: -1,
-      observer: 'selectedNodeChanged'
-    },
-
-    config: {
-      type: Array,
-      value: function () {
-        return [];
-      }
-    },
-
-    entities: {
-      type: Array,
-      computed: 'computeEntities(selectedNode)',
-    },
-
-    entityInfoActive: {
-      type: Boolean,
-    },
-
-    selectedEntity: {
-      type: Number,
-      value: -1,
-      observer: 'selectedEntityChanged',
-    },
-
-    selectedEntityAttrs: {
-      type: Array,
-      computed: 'computeSelectedEntityAttrs(selectedEntity)'
-    },
-
-    values: {
-      type: Array,
-    },
-
-    groups: {
-      type: Array,
-    },
-
-    newNodeNameInput: {
-      type: String,
-    },
-
-    userCodes: {
-      type: Array,
-      value: function () {
-        return [];
       },
-    },
 
-    hasNodeUserCodes: {
+      selectedNode: {
-      type: Boolean,
+        type: Number,
-      value: false,
+        value: -1,
-    },
+        observer: 'selectedNodeChanged'
+      },
 
-    showHelp: {
+      config: {
-      type: Boolean,
+        type: Array,
-      value: false,
+        value: function () {
-    },
+          return [];
+        }
+      },
 
-    entityIgnored: {
+      entities: {
-      type: Boolean,
+        type: Array,
-    },
+        computed: 'computeEntities(selectedNode)',
+      },
 
-    entityPollingIntensity: {
+      entityInfoActive: {
-      type: Number,
+        type: Boolean,
-    },
+      },
-  },
 
-  listeners: {
+      selectedEntity: {
-    'hass-service-called': 'serviceCalled',
+        type: Number,
-  },
+        value: -1,
+        observer: 'selectedEntityChanged',
+      },
 
-  serviceCalled: function (ev) {
+      selectedEntityAttrs: {
+        type: Array,
+        computed: 'computeSelectedEntityAttrs(selectedEntity)'
+      },
+
+      values: {
+        type: Array,
+      },
+
+      groups: {
+        type: Array,
+      },
+
+      newNodeNameInput: {
+        type: String,
+      },
+
+      userCodes: {
+        type: Array,
+        value: function () {
+          return [];
+        },
+      },
+
+      hasNodeUserCodes: {
+        type: Boolean,
+        value: false,
+      },
+
+      showHelp: {
+        type: Boolean,
+        value: false,
+      },
+
+      entityIgnored: {
+        type: Boolean,
+      },
+
+      entityPollingIntensity: {
+        type: Number,
+      },
+    };
+  }
+
+  ready() {
+    super.ready();
+    this.addEventListener('hass-service-called', ev => this.serviceCalled(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,82 +96,85 @@
 </dom-module>
 
 <script>
-Polymer({
+class ZwaveGroups extends Polymer.Element {
-  is: 'zwave-groups',
+  static get is() { return 'zwave-groups'; }
 
-  properties: {
+  static get properties() {
-    hass: {
+    return {
-      type: Object,
+      hass: {
-    },
+        type: Object,
+      },
 
-    nodes: {
+      nodes: {
-      type: Array,
+        type: Array,
-    },
+      },
 
-    groups: {
+      groups: {
-      type: Array,
+        type: Array,
-    },
+      },
 
-    selectedNode: {
+      selectedNode: {
-      type: Number,
+        type: Number,
-    },
+      },
 
-    selectedTargetNode: {
+      selectedTargetNode: {
-      type: Number,
+        type: Number,
-      value: -1
+        value: -1
-    },
+      },
 
-    selectedGroup: {
+      selectedGroup: {
-      type: Number,
+        type: Number,
-      value: -1,
+        value: -1,
-      observer: 'selectedGroupChanged'
+        observer: 'selectedGroupChanged'
-    },
+      },
 
-    otherGroupNodes: {
+      otherGroupNodes: {
-      type: Array,
+        type: Array,
-      value: -1,
+        value: -1,
-      computed: 'computeOtherGroupNodes(selectedGroup)'
+        computed: 'computeOtherGroupNodes(selectedGroup)'
-    },
+      },
 
-    maxAssociations: {
+      maxAssociations: {
-      type: String,
+        type: String,
-      value: '',
+        value: '',
-      computed: 'computeMaxAssociations(selectedGroup)'
+        computed: 'computeMaxAssociations(selectedGroup)'
-    },
+      },
 
-    noAssociationsLeft: {
+      noAssociationsLeft: {
-      type: Boolean,
+        type: Boolean,
-      value: true,
+        value: true,
-      computed: 'computeAssociationsLeft(selectedGroup)'
+        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,31 +32,35 @@
 </dom-module>
 <script>
 
-Polymer({
+class OzwLog extends Polymer.Element {
-  is: 'ozw-log',
+  static get is() { return 'ozw-log'; }
 
-  properties: {
+  static get properties() {
-    hass: {
+    return {
-      type: Object,
+      hass: {
-    },
+        type: Object,
+      },
 
-    isWide: {
+      isWide: {
-      type: Boolean,
+        type: Boolean,
-      value: false,
+        value: false,
-    },
+      },
 
-    ozwLogs: {
+      ozwLogs: {
-      type: String,
+        type: String,
-      value: 'Refresh to pull log'
+        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,27 +169,31 @@
 </dom-module>
 <script>
 
-Polymer({
+class ZwaveNetwork extends Polymer.Element {
-  is: 'zwave-network',
+  static get is() { return 'zwave-network'; }
 
-  properties: {
+  static get properties() {
-    hass: {
+    return {
-      type: Object,
+      hass: {
-    },
+        type: Object,
+      },
 
-    isWide: {
+      isWide: {
-      type: Boolean,
+        type: Boolean,
-      value: false,
+        value: false,
-    },
+      },
 
-    showDescription: {
+      showDescription: {
-      type: Boolean,
+        type: Boolean,
-      value: false,
+        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,106 +120,109 @@
 </dom-module>
 
 <script>
-Polymer({
+class ZwaveNodeConfig extends Polymer.Element {
-  is: 'zwave-node-config',
+  static get is() { return 'zwave-node-config'; }
 
-  properties: {
+  static get properties() {
-    hass: {
+    return {
-      type: Object,
+      hass: {
-    },
+        type: Object,
+      },
 
-    nodes: {
+      nodes: {
-      type: Array,
+        type: Array,
-      observer: 'nodesChanged'
+        observer: 'nodesChanged'
-    },
+      },
 
-    selectedNode: {
+      selectedNode: {
-      type: Number,
+        type: Number,
-      value: -1,
+        value: -1,
-      observer: 'nodesChanged'
+        observer: 'nodesChanged'
-    },
+      },
 
-    config: {
+      config: {
-      type: Array,
+        type: Array,
-      value: function () {
+        value: function () {
-        return [];
+          return [];
-      }
+        }
-    },
+      },
 
-    selectedConfigParameter: {
+      selectedConfigParameter: {
-      type: Number,
+        type: Number,
-      value: -1,
+        value: -1,
-      observer: 'selectedConfigParameterChanged'
+        observer: 'selectedConfigParameterChanged'
-    },
+      },
 
-    configParameterMax: {
+      configParameterMax: {
-      type: Number,
+        type: Number,
-      value: -1
+        value: -1
-    },
+      },
 
-    configParameterMin: {
+      configParameterMin: {
-      type: Number,
+        type: Number,
-      value: -1
+        value: -1
-    },
+      },
 
-    configValueHelpText: {
+      configValueHelpText: {
-      type: String,
+        type: String,
-      value: '',
+        value: '',
-      computed: 'computeConfigValueHelp(selectedConfigParameter)'
+        computed: 'computeConfigValueHelp(selectedConfigParameter)'
-    },
+      },
 
-    selectedConfigParameterType: {
+      selectedConfigParameterType: {
-      type: String,
+        type: String,
-      value: ''
+        value: ''
-    },
+      },
 
-    selectedConfigValue: {
+      selectedConfigValue: {
-      type: Number,
+        type: Number,
-      value: -1,
+        value: -1,
-      observer: 'computeSetConfigParameterServiceData'
+        observer: 'computeSetConfigParameterServiceData'
-    },
+      },
 
-    selectedConfigParameterValues: {
+      selectedConfigParameterValues: {
-      type: Array,
+        type: Array,
-      value: function () {
+        value: function () {
-        return [];
+          return [];
-      }
+        }
-    },
+      },
 
-    selectedConfigParameterNumValues: {
+      selectedConfigParameterNumValues: {
-      type: String,
+        type: String,
-      value: ''
+        value: ''
-    },
+      },
 
-    loadedConfigValue: {
+      loadedConfigValue: {
-      type: Number,
+        type: Number,
-      value: -1
+        value: -1
-    },
+      },
 
-    wakeupInput: {
+      wakeupInput: {
-      type: Number,
+        type: Number,
-    },
+      },
 
-    wakeupNode: {
+      wakeupNode: {
-      type: Boolean,
+        type: Boolean,
-      value: false,
+        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,31 +43,33 @@
 </dom-module>
 <script>
 
-Polymer({
+class ZwaveNodeInformation extends Polymer.Element {
-  is: 'zwave-node-information',
+  static get is() { return 'zwave-node-information'; }
 
-  properties: {
+  static get properties() {
-    nodes: {
+    return {
-      type: Array,
+      nodes: {
-      observer: 'nodeChanged'
+        type: Array,
-    },
+        observer: 'nodeChanged'
+      },
 
-    selectedNode: {
+      selectedNode: {
-      type: Number,
+        type: Number,
-      value: -1,
+        value: -1,
-      observer: 'nodeChanged'
+        observer: 'nodeChanged'
-    },
+      },
 
-    selectedNodeAttrs: {
+      selectedNodeAttrs: {
-      type: Array,
+        type: Array,
-    },
+      },
 
-    nodeInfoActive: {
+      nodeInfoActive: {
-      type: Boolean,
+        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,37 +32,39 @@
 </dom-module>
 
 <script>
-Polymer({
+class ZwaveNodeOptions extends Polymer.Element {
-  is: 'zwave-node-options',
+  static get is() { return 'zwave-node-options'; }
 
-  properties: {
+  static get properties() {
-    hass: {
+    return {
-      type: Object,
+      hass: {
-    },
+        type: Object,
+      },
 
-    isWide: {
+      isWide: {
-      type: Boolean,
+        type: Boolean,
-      value: false,
+        value: false,
-    },
+      },
 
-    entities: {
+      entities: {
-      type: Array,
+        type: Array,
-      computed: 'computeEntities(hass)',
+        computed: 'computeEntities(hass)',
-    },
+      },
 
-    entityConfig: {
+      entityConfig: {
-      type: Object,
+        type: Object,
-      value: {
+        value: {
-        component: 'ha-form-zwave-device',
+          component: 'ha-form-zwave-device',
-        computeSelectCaption: function (stateObj) {
+          computeSelectCaption: function (stateObj) {
-          return window.hassUtil.computeStateName(stateObj) +
+            return window.hassUtil.computeStateName(stateObj) +
-            ' (' + window.hassUtil.computeDomain(stateObj) + ')';
+              ' (' + window.hassUtil.computeDomain(stateObj) + ')';
-        },
+          },
+        }
       }
-    }
+    };
-  },
+  }
 
-  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,73 +73,77 @@
 </dom-module>
 <script>
 
-Polymer({
+class ZwaveUsercodes extends Polymer.Element {
-  is: 'zwave-usercodes',
+  static get is() { return 'zwave-usercodes'; }
 
-  properties: {
+  static get properties() {
-    hass: {
+    return {
-      type: Object,
+      hass: {
-    },
+        type: Object,
+      },
 
-    nodes: {
+      nodes: {
-      type: Array,
+        type: Array,
-    },
+      },
 
-    selectedNode: {
+      selectedNode: {
-      type: Number,
+        type: Number,
-    },
+      },
 
-    userCodes: {
+      userCodes: {
-      type: Object,
+        type: Object,
-    },
+      },
 
-    userCodeMaxLen: {
+      userCodeMaxLen: {
-      type: Number,
+        type: Number,
-      value: 4
+        value: 4
-    },
+      },
 
-    selectedUserCode: {
+      selectedUserCode: {
-      type: Number,
+        type: Number,
-      value: -1,
+        value: -1,
-      observer: 'selectedUserCodeChanged'
+        observer: 'selectedUserCodeChanged'
-    },
+      },
 
-    selectedUserCodeValue: {
+      selectedUserCodeValue: {
-      type: Number,
+        type: Number,
-      value: -1
+        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,59 +68,62 @@
 </dom-module>
 
 <script>
-Polymer({
+class ZwaveValues extends Polymer.Element {
-  is: 'zwave-values',
+  static get is() { return 'zwave-values'; }
 
-  properties: {
+  static get properties() {
-    hass: {
+    return {
-      type: Object,
+      hass: {
-    },
+        type: Object,
+      },
 
-    nodes: {
+      nodes: {
-      type: Array,
+        type: Array,
-    },
+      },
 
-    values: {
+      values: {
-      type: Array,
+        type: Array,
-    },
+      },
 
-    selectedNode: {
+      selectedNode: {
-      type: Number,
+        type: Number,
-    },
+      },
 
-    selectedValue: {
+      selectedValue: {
-      type: Number,
+        type: Number,
-      value: -1,
+        value: -1,
-      observer: 'selectedValueChanged'
+        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() {
-      this.hass.callApi('GET', 'events').then(function (events) {
+    super.connectedCallback();
-        this.events = events;
+    this.hass.callApi('GET', 'events').then(function (events) {
-      }.bind(this));
+      this.events = events;
-    },
+    }.bind(this));
+  }
 
-    eventSelected: function (ev) {
+  eventSelected(ev) {
-      ev.preventDefault();
+    ev.preventDefault();
-      this.fire('event-selected', { eventType: ev.model.event.event });
+    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,40 +72,42 @@
 </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() {
-    hass: {
+    return {
-      type: Object,
+      hass: {
-    },
+        type: Object,
+      },
 
-    narrow: {
+      narrow: {
-      type: Boolean,
+        type: Boolean,
-      value: false,
+        value: false,
-    },
+      },
 
-    showMenu: {
+      showMenu: {
-      type: Boolean,
+        type: Boolean,
-      value: false,
+        value: false,
-    },
+      },
 
-    eventType: {
+      eventType: {
-      type: String,
+        type: String,
-      value: '',
+        value: '',
-    },
+      },
 
-    eventData: {
+      eventData: {
-      type: String,
+        type: String,
-      value: '',
+        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,40 +103,43 @@
 </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() {
-    hass: {
+    return {
-      type: Object,
+      hass: {
-    },
+        type: Object,
+      },
 
-    narrow: {
+      narrow: {
-      type: Boolean,
+        type: Boolean,
-      value: false,
+        value: false,
-    },
+      },
 
-    showMenu: {
+      showMenu: {
-      type: Boolean,
+        type: Boolean,
-      value: false,
+        value: false,
-    },
+      },
 
-    polymerVersion: {
+      polymerVersion: {
-      type: String,
+        type: String,
-      value: Polymer.version,
+        value: Polymer.version,
-    },
+      },
 
-    errorLog: {
+      errorLog: {
-      type: String,
+        type: String,
-      value: '',
+        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() {
-    hass: Object,
+    return {
-    narrow: Boolean,
+      hass: Object,
-    showMenu: Boolean,
+      narrow: Boolean,
-    topic: String,
+      showMenu: Boolean,
-    payload: String,
+      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,62 +147,64 @@
 </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() {
-    hass: {
+    return {
-      type: Object,
+      hass: {
-    },
+        type: Object,
+      },
 
-    narrow: {
+      narrow: {
-      type: Boolean,
+        type: Boolean,
-      value: false,
+        value: false,
-    },
+      },
 
-    showMenu: {
+      showMenu: {
-      type: Boolean,
+        type: Boolean,
-      value: false,
+        value: false,
-    },
+      },
 
-    domain: {
+      domain: {
-      type: String,
+        type: String,
-      value: '',
+        value: '',
-      observer: 'domainChanged',
+        observer: 'domainChanged',
-    },
+      },
 
-    service: {
+      service: {
-      type: String,
+        type: String,
-      value: '',
+        value: '',
-      observer: 'serviceChanged',
+        observer: 'serviceChanged',
-    },
+      },
 
-    serviceData: {
+      serviceData: {
-      type: String,
+        type: String,
-      value: '',
+        value: '',
-    },
+      },
 
-    _attributes: {
+      _attributes: {
-      type: Array,
+        type: Array,
-      computed: 'computeAttributesArray(serviceDomains, domain, service)',
+        computed: 'computeAttributesArray(serviceDomains, domain, service)',
-    },
+      },
 
-    _description: {
+      _description: {
-      type: String,
+        type: String,
-      computed: 'computeDescription(serviceDomains, domain, service)',
+        computed: 'computeDescription(serviceDomains, domain, service)',
-    },
+      },
 
-    serviceDomains: {
+      serviceDomains: {
-      type: Object,
+        type: Object,
-      computed: 'computeServiceDomains(hass)',
+        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,59 +98,61 @@
 </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() {
-    hass: {
+    return {
-      type: Object,
+      hass: {
-    },
+        type: Object,
+      },
 
-    narrow: {
+      narrow: {
-      type: Boolean,
+        type: Boolean,
-      value: false,
+        value: false,
-    },
+      },
 
-    showMenu: {
+      showMenu: {
-      type: Boolean,
+        type: Boolean,
-      value: false,
+        value: false,
-    },
+      },
 
-    _entityId: {
+      _entityId: {
-      type: String,
+        type: String,
-      value: '',
+        value: '',
-    },
+      },
 
-    _state: {
+      _state: {
-      type: String,
+        type: String,
-      value: '',
+        value: '',
-    },
+      },
 
-    _stateAttributes: {
+      _stateAttributes: {
-      type: String,
+        type: String,
-      value: '',
+        value: '',
-    },
+      },
 
-    _showAttributes: {
+      _showAttributes: {
-      type: Boolean,
+        type: Boolean,
-      value: true,
+        value: true,
-    },
+      },
 
-    _entities: {
+      _entities: {
-      type: Array,
+        type: Array,
-      computed: 'computeEntities(hass)',
+        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,89 +89,95 @@
 </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() {
-    hass: {
+    return {
-      type: Object,
+      hass: {
-    },
+        type: Object,
+      },
 
-    narrow: {
+      narrow: {
-      type: Boolean,
+        type: Boolean,
-      value: false,
+        value: false,
-    },
+      },
 
-    showMenu: {
+      showMenu: {
-      type: Boolean,
+        type: Boolean,
-      value: false,
+        value: false,
-    },
+      },
 
-    error: {
+      error: {
-      type: Boolean,
+        type: Boolean,
-      value: false,
+        value: false,
-    },
+      },
 
-    rendering: {
+      rendering: {
-      type: Boolean,
+        type: Boolean,
-      value: false,
+        value: false,
-    },
+      },
 
-    template: {
+      template: {
-      type: String,
+        type: String,
-      /* eslint-disable max-len */
+        /* eslint-disable max-len */
-      value: 'Imitate available variables:\n' +
+        value: 'Imitate available variables:\n' +
-             '{% set my_test_json = {\n' +
+               '{% set my_test_json = {\n' +
-             '  "temperature": 25,\n' +
+               '  "temperature": 25,\n' +
-             '  "unit": "°C"\n' +
+               '  "unit": "°C"\n' +
-             '} %}\n' +
+               '} %}\n' +
-             '\n' +
+               '\n' +
-             'The temperature is {{ my_test_json.temperature }} {{ my_test_json.unit }}. \n' +
+               'The temperature is {{ my_test_json.temperature }} {{ my_test_json.unit }}. \n' +
-             '\n' +
+               '\n' +
-             '{% if is_state("device_tracker.paulus", "home") and \n' +
+               '{% if is_state("device_tracker.paulus", "home") and \n' +
-             '       is_state("device_tracker.anne_therese", "home") -%}\n' +
+               '       is_state("device_tracker.anne_therese", "home") -%}\n' +
-             '\n' +
+               '\n' +
-             '  You are both home, you silly\n' +
+               '  You are both home, you silly\n' +
-             '\n' +
+               '\n' +
-             '{%- else -%}\n' +
+               '{%- else -%}\n' +
-             '\n' +
+               '\n' +
-             '  Anne Therese is at {{ states("device_tracker.anne_therese") }} and ' +
+               '  Anne Therese is at {{ states("device_tracker.anne_therese") }} and ' +
-             'Paulus is at {{ states("device_tracker.paulus") }}\n' +
+               'Paulus is at {{ states("device_tracker.paulus") }}\n' +
-             '\n' +
+               '\n' +
-             '{%- endif %}\n' +
+               '{%- endif %}\n' +
-             '\n' +
+               '\n' +
-             'For loop example:\n' +
+               'For loop example:\n' +
-             '{% for state in states.sensor -%}\n' +
+               '{% for state in states.sensor -%}\n' +
-             '  {%- if loop.first %}The {% elif loop.last %} and the {% else %}, the {% endif -%}\n' +
+               '  {%- if loop.first %}The {% elif loop.last %} and the {% else %}, the {% endif -%}\n' +
-             '  {{ state.name | lower }} is {{state.state_with_unit}}\n' +
+               '  {{ state.name | lower }} is {{state.state_with_unit}}\n' +
-             '{%- endfor -%}.',
+               '{%- endfor -%}.',
-      /* eslint-enable max-len */
+        /* eslint-enable max-len */
-      observer: 'templateChanged',
+        observer: 'templateChanged',
-    },
+      },
 
-    processed: {
+      processed: {
-      type: String,
+        type: String,
-      value: '',
+        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,35 +43,39 @@
 </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() {
-    repo: {
+    return {
-      type: Object,
+      repo: {
-    },
+        type: Object,
+      },
 
-    addons: {
+      addons: {
-      type: Array,
+        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,46 +58,50 @@
 </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() {
-    hass: {
+    return {
-      type: Object,
+      hass: {
-    },
+        type: Object,
+      },
 
-    selectedAddon: {
+      selectedAddon: {
-      type: String,
+        type: String,
-      value: null,
+        value: null,
-      notify: true,
+        notify: true,
-    },
+      },
 
-    addons: {
+      addons: {
-      type: Array,
+        type: Array,
-      value: [],
+        value: [],
-    },
+      },
 
-    repos: {
+      repos: {
-      type: Array,
+        type: Array,
-    },
+      },
 
-    supervisorInfo: {
+      supervisorInfo: {
-      type: Object,
+        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,50 +91,55 @@
 </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() {
-    hass: {
+    return {
-      type: Object,
+      hass: {
-    },
+        type: Object,
+      },
 
-    selectedAddon: {
+      selectedAddon: {
-      type: String,
+        type: String,
-      value: null,
+        value: null,
-      notify: true,
+        notify: true,
-    },
+      },
 
-    addon: {
+      addon: {
-      type: Object,
+        type: Object,
-    },
+      },
 
-    repo: {
+      repo: {
-      type: Object,
+        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,61 +39,64 @@
 </dom-module>
 
 <script>
-Polymer({
+class HassioAddonStore extends Polymer.Element {
-  is: 'hassio-addon-store',
+  static get is() { return 'hassio-addon-store'; }
 
-  properties: {
+  static get properties() {
-    hass: {
+    return {
-      type: Object,
+      hass: {
-    },
+        type: Object,
+      },
 
-    visible: {
+      visible: {
-      type: Boolean,
+        type: Boolean,
-      observer: '_visibleChanged',
+        observer: '_visibleChanged',
-    },
+      },
 
-    route: Object,
+      route: Object,
-    _routeData: Object,
+      _routeData: Object,
-    _routeMatches: Boolean,
+      _routeMatches: Boolean,
 
-    selectedAddonObject: {
+      selectedAddonObject: {
-      type: Object,
+        type: Object,
-      computed: 'computeActiveAddon(addons, _routeData.addon)',
+        computed: 'computeActiveAddon(addons, _routeData.addon)',
-    },
+      },
 
-    addons: {
+      addons: {
-      type: Array,
+        type: Array,
-      value: [],
+        value: [],
-    },
+      },
 
-    repos: {
+      repos: {
-      type: Array,
+        type: Array,
-      value: []
+        value: []
-    },
+      },
 
-    supervisorInfo: {
+      supervisorInfo: {
-      type: Object,
+        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,39 +34,43 @@
 </dom-module>
 
 <script>
-Polymer({
+class HassioRepositoriesEditor extends Polymer.Element {
-  is: 'hassio-repositories-editor',
+  static get is() { return 'hassio-repositories-editor'; }
 
-  properties: {
+  static get properties() {
-    hass: {
+    return {
-      type: Object,
+      hass: {
-    },
+        type: Object,
+      },
 
-    options: {
+      options: {
-      type: String,
+        type: String,
-      value: '',
+        value: '',
-    },
+      },
 
-    repos: {
+      repos: {
-      type: Array,
+        type: Array,
-      observer: 'reposChanged',
+        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,66 +172,70 @@
 </dom-module>
 
 <script>
-Polymer({
+class HassioAddonInfo extends Polymer.Element {
-  is: 'hassio-addon-info',
+  static get is() { return 'hassio-addon-info'; }
 
-  properties: {
+  static get properties() {
-    hass: Object,
+    return {
-    addonInfo: Object,
+      hass: Object,
-    addonState: Object,
+      addonInfo: Object,
+      addonState: Object,
 
-    _isRunning: {
+      _isRunning: {
-      type: Boolean,
+        type: Boolean,
-      computed: '_computeIsRunning(addonState)',
+        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,39 +22,43 @@
 </dom-module>
 
 <script>
-Polymer({
+class HassioAddonLogs extends Polymer.Element {
-  is: 'hassio-addon-logs',
+  static get is() { return 'hassio-addon-logs'; }
 
-  properties: {
+  static get properties() {
-    hass: {
+    return {
-      type: Object,
+      hass: {
-    },
+        type: Object,
+      },
 
-    addon: {
+      addon: {
-      type: String,
+        type: String,
-      observer: 'addonChanged',
+        observer: 'addonChanged',
-    },
+      },
 
-    addonLogs: {
+      addonLogs: {
-      type: String,
+        type: String,
-      value: '',
+        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,36 +69,38 @@
 </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() {
-    hass: Object,
+    return {
-    addon: String,
+      hass: Object,
-    errors: {
+      addon: String,
-      type: String,
+      errors: {
-      value: null,
+        type: String,
-    },
+        value: null,
-
-    _data: {
-      type: Object,
-      value: [],
-    },
-
-    addonState: {
-      type: Object,
-      observer: '_addonStateChanged',
-    },
-
-    _resetData: {
-      type: Object,
-      value: {
-        network: null,
       },
-    },
-  },
 
-  _addonStateChanged: function (addonState) {
+      _data: {
+        type: Object,
+        value: [],
+      },
+
+      addonState: {
+        type: Object,
+        observer: '_addonStateChanged',
+      },
+
+      _resetData: {
+        type: Object,
+        value: {
+          network: null,
+        },
+      },
+    };
+  }
+
+  _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,58 +51,60 @@
 </dom-module>
 
 <script>
-Polymer({
+class HassioAddonOptions extends Polymer.Element {
-  is: 'hassio-addon-options',
+  static get is() { return 'hassio-addon-options'; }
 
-  properties: {
+  static get properties() {
-    hass: {
+    return {
-      type: Object,
+      hass: {
-    },
+        type: Object,
+      },
 
-    addon: {
+      addon: {
-      type: String,
+        type: String,
-    },
+      },
 
-    options: {
+      options: {
-      type: String,
+        type: String,
-      value: '',
+        value: '',
-    },
+      },
 
-    optionsParsed: {
+      optionsParsed: {
-      type: Object,
+        type: Object,
-      computed: 'parseOptions(options)',
+        computed: 'parseOptions(options)',
-    },
+      },
 
-    errors: {
+      errors: {
-      type: String,
+        type: String,
-      value: null,
+        value: null,
-    },
+      },
 
-    addonState: {
+      addonState: {
-      type: Object,
+        type: Object,
-      value: null,
+        value: null,
-      observer: 'addonStateChanged',
+        observer: 'addonStateChanged',
-    },
+      },
 
-    _resetOptionsData: {
+      _resetOptionsData: {
-      type: Object,
+        type: Object,
-      value: { options: {} },
+        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,45 +70,48 @@
 </dom-module>
 
 <script>
-Polymer({
+class HassioAddonView extends Polymer.Element {
-  is: 'hassio-addon-view',
+  static get is() { return 'hassio-addon-view'; }
 
-  properties: {
+  static get properties() {
-    hass: {
+    return {
-      type: Object,
+      hass: {
-    },
+        type: Object,
+      },
 
-    route: Object,
+      route: Object,
-    _routeData: {
+      _routeData: {
-      type: Object,
+        type: Object,
-      observer: '_routeDataChanged',
+        observer: '_routeDataChanged',
-    },
+      },
 
-    supervisorInfo: {
+      supervisorInfo: {
-      type: Object,
+        type: Object,
-    },
+      },
 
-    addonInfo: {
+      addonInfo: {
-      type: Object,
+        type: Object,
-      computed: 'computeAddonInfo(supervisorInfo, _routeData.addon)',
+        computed: 'computeAddonInfo(supervisorInfo, _routeData.addon)',
-    },
+      },
 
-    addonState: {
+      addonState: {
-      type: Object,
+        type: Object,
-      value: null,
+        value: null,
-    },
+      },
 
-    addonLogs: {
+      addonLogs: {
-      type: String,
+        type: String,
-      value: '',
+        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,32 +67,36 @@
 </dom-module>
 
 <script>
-Polymer({
+class HassioAdvanced extends Polymer.Element {
-  is: 'hassio-advanced',
+  static get is() { return 'hassio-advanced'; }
 
-  properties: {
+  static get properties() {
-    hass: {
+    return {
-      type: Object,
+      hass: {
-    },
+        type: Object,
+      },
 
-    supervisorInfo: {
+      supervisorInfo: {
-      type: Object,
+        type: Object,
-      value: {},
+        value: {},
-    },
+      },
 
-    hostInfo: {
+      hostInfo: {
-      type: Object,
+        type: Object,
-      value: {},
+        value: {},
-    },
+      },
 
-    hassInfo: {
+      hassInfo: {
-      type: Object,
+        type: Object,
-      value: {},
+        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,25 +57,28 @@
 </dom-module>
 
 <script>
-Polymer({
+class HassioHassInfo extends Polymer.Element {
-  is: 'hassio-hass-info',
+  static get is() { return 'hassio-hass-info'; }
 
-  properties: {
+  static get properties() {
-    hass: {
+    return {
-      type: Object,
+      hass: {
-    },
+        type: Object,
+      },
 
-    data: {
+      data: {
-      type: Object,
+        type: Object,
-      value: {},
+        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,27 +76,30 @@
 </dom-module>
 
 <script>
-Polymer({
+class HassioHostInfo extends Polymer.Element {
-  is: 'hassio-host-info',
+  static get is() { return 'hassio-host-info'; }
 
-  properties: {
+  static get properties() {
-    hass: {
+    return {
-      type: Object,
+      hass: {
-    },
+        type: Object,
+      },
 
-    data: {
+      data: {
-      type: Object,
+        type: Object,
-      value: {},
+        value: {},
-    },
+      },
 
-    errors: String,
+      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,27 +61,30 @@
 </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() {
-    hass: {
+    return {
-      type: Object,
+      hass: {
-    },
+        type: Object,
+      },
 
-    data: {
+      data: {
-      type: Object,
+        type: Object,
-      value: {},
+        value: {},
-    },
+      },
 
-    errors: String,
+      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,39 +38,43 @@
 </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() {
-    hass: {
+    return {
-      type: Object,
+      hass: {
-    },
+        type: Object,
+      },
 
-    narrow: {
+      narrow: {
-      type: Boolean,
+        type: Boolean,
-    },
+      },
 
-    showMenu: {
+      showMenu: {
-      type: Boolean,
+        type: Boolean,
-      value: false,
+        value: false,
-    },
+      },
 
-    data: {
+      data: {
-      type: Object,
+        type: Object,
-      value: [],
+        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,58 +87,62 @@
 </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() {
-    hass: {
+    return {
-      type: Object,
+      hass: {
-    },
+        type: Object,
+      },
 
-    narrow: {
+      narrow: {
-      type: Boolean,
+        type: Boolean,
-    },
+      },
 
-    showMenu: {
+      showMenu: {
-      type: Boolean,
+        type: Boolean,
-      value: false,
+        value: false,
-    },
+      },
 
-    supervisorInfo: {
+      supervisorInfo: {
-      type: Object,
+        type: Object,
-      value: {},
+        value: {},
-    },
+      },
 
-    hassInfo: {
+      hassInfo: {
-      type: Object,
+        type: Object,
-      value: {},
+        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() {
-    hass: Object,
+    return {
-    data: Object,
+      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,28 +19,33 @@
 </dom-module>
 
 <script>
-Polymer({
+class HaPanelHassio extends Polymer.Element {
-  is: 'ha-panel-hassio',
+  static get is() { return 'ha-panel-hassio'; }
 
-  properties: {
+  static get properties() {
-    hass: Object,
+    return {
-    narrow: Boolean,
+      hass: Object,
-    showMenu: Boolean,
+      narrow: Boolean,
-    route: Object,
+      showMenu: Boolean,
+      route: Object,
 
-    loaded: {
+      loaded: {
-      type: Boolean,
+        type: Boolean,
-      value: false,
+        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,60 +1,65 @@
-<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() {
-    supervisor: {
+    return {
-      type: Object,
+      supervisor: {
-      value: {},
+        type: Object,
-      notify: true,
+        value: {},
-    },
+        notify: true,
+      },
 
-    host: {
+      host: {
-      type: Object,
+        type: Object,
-      value: {},
+        value: {},
-      notify: true,
+        notify: true,
-    },
+      },
 
-    homeassistant: {
+      homeassistant: {
-      type: Object,
+        type: Object,
-      value: {},
+        value: {},
-      notify: true,
+        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,61 +103,65 @@
 </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() {
-    hass: Object,
+    return {
-    narrow: Boolean,
+      hass: Object,
-    showMenu: Boolean,
+      narrow: Boolean,
-    route: {
+      showMenu: Boolean,
-      type: Object,
+      route: {
-      // Fake route object
+        type: Object,
-      value: {
+        // Fake route object
-        prefix: '/hassio',
+        value: {
-        path: '/dashboard',
+          prefix: '/hassio',
-        __queryParams: {}
+          path: '/dashboard',
+          __queryParams: {}
+        },
+        observer: '_routeChanged',
       },
-      observer: '_routeChanged',
+      _routeData: Object,
-    },
+      _routeTail: Object,
-    _routeData: Object,
-    _routeTail: Object,
 
-    addon: {
+      addon: {
-      type: String,
+        type: String,
-      value: '',
+        value: '',
-    },
+      },
 
-    supervisorInfo: {
+      supervisorInfo: {
-      type: Object,
+        type: Object,
-      value: null,
+        value: null,
-    },
+      },
 
-    hostInfo: {
+      hostInfo: {
-      type: Object,
+        type: Object,
-      value: null,
+        value: null,
-    },
+      },
 
-    hassInfo: {
+      hassInfo: {
-      type: Object,
+        type: Object,
-      value: null,
+        value: null,
-    },
+      },
 
-    loaded: {
+      loaded: {
-      type: Boolean,
+        type: Boolean,
-      computed: '_computeIsLoaded(supervisorInfo, hostInfo, hassInfo)',
+        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,50 +100,53 @@
 </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() {
-    hass: Object,
+    return {
-    visible: {
+      hass: Object,
-      type: Boolean,
+      visible: {
-      observer: '_visibleChanged',
+        type: Boolean,
-    },
+        observer: '_visibleChanged',
-    _snapshotName: String,
+      },
-    _creatingSnapshot: Boolean,
+      _snapshotName: String,
-    _error: Object,
+      _creatingSnapshot: Boolean,
-    _data: {
+      _error: Object,
-      type: Array,
+      _data: {
-      value: [],
+        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,46 +36,50 @@
 </dom-module>
 
 <script>
-Polymer({
+class HassioSupervisor extends Polymer.Element {
-  is: 'hassio-supervisor',
+  static get is() { return 'hassio-supervisor'; }
 
-  properties: {
+  static get properties() {
-    hass: {
+    return {
-      type: Object,
+      hass: {
-    },
+        type: Object,
+      },
 
-    visible: {
+      visible: {
-      type: Boolean,
+        type: Boolean,
-      observer: '_visibleChanged',
+        observer: '_visibleChanged',
-    },
+      },
 
-    logs: {
+      logs: {
-      type: String,
+        type: String,
-      value: '',
+        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,70 +91,73 @@
 </dom-module>
 
 <script>
-Polymer({
+class HaPanelHistory extends Polymer.Element {
-  is: 'ha-panel-history',
+  static get is() { return 'ha-panel-history'; }
 
-  properties: {
+  static get properties() {
-    hass: {
+    return {
-      type: Object,
+      hass: {
-    },
+        type: Object,
-
-    narrow: {
-      type: Boolean,
-    },
-
-    showMenu: {
-      type: Boolean,
-      value: false,
-    },
-
-    stateHistoryInput: {
-      type: Object,
-      value: null,
-      observer: 'stateHistoryObserver'
-    },
-
-    stateHistoryOutput: {
-      type: Object,
-      value: null,
-    },
-
-    _periodIndex: {
-      type: Number,
-      value: 0,
-    },
-
-    isLoadingData: {
-      type: Boolean,
-      value: false,
-    },
-
-    endTime: {
-      type: Object,
-      computed: '_computeEndTime(_currentDate, _periodIndex)',
-    },
-
-    // ISO8601 formatted date string
-    _currentDate: {
-      type: String,
-      value: function () {
-        var value = new Date();
-        var today = new Date(Date.UTC(value.getFullYear(), value.getMonth(), value.getDate()));
-        return today.toISOString().split('T')[0];
       },
-    },
 
-    _filterType: {
+      narrow: {
-      type: String,
+        type: Boolean,
-      value: 'date',
+      },
-    },
-  },
 
-  datepickerFocus: function () {
+      showMenu: {
+        type: Boolean,
+        value: false,
+      },
+
+      stateHistoryInput: {
+        type: Object,
+        value: null,
+        observer: 'stateHistoryObserver'
+      },
+
+      stateHistoryOutput: {
+        type: Object,
+        value: null,
+      },
+
+      _periodIndex: {
+        type: Number,
+        value: 0,
+      },
+
+      isLoadingData: {
+        type: Boolean,
+        value: false,
+      },
+
+      endTime: {
+        type: Object,
+        computed: '_computeEndTime(_currentDate, _periodIndex)',
+      },
+
+      // ISO8601 formatted date string
+      _currentDate: {
+        type: String,
+        value: function () {
+          var value = new Date();
+          var today = new Date(Date.UTC(value.getFullYear(), value.getMonth(), value.getDate()));
+          return today.toISOString().split('T')[0];
+        },
+      },
+
+      _filterType: {
+        type: String,
+        value: 'date',
+      },
+    };
+  }
+
+  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,21 +28,25 @@
 </dom-module>
 
 <script>
-Polymer({
+class HaPanelIframe extends Polymer.Element {
-  is: 'ha-panel-iframe',
+  static get is() { return 'ha-panel-iframe'; }
 
-  properties: {
+  static get properties() {
-    panel: {
+    return {
-      type: Object,
+      panel: {
-    },
+        type: Object,
+      },
 
-    narrow: {
+      narrow: {
-      type: Boolean,
+        type: Boolean,
-    },
+      },
 
-    showMenu: {
+      showMenu: {
-      type: Boolean,
+        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() {
-    hass: Object,
+    return {
-    route: Object,
+      hass: Object,
-  },
+      route: Object,
-});
+    };
+  }
+}
+
+customElements.define(HaPanelKiosk.is, HaPanelKiosk);
 </script>

panels/logbook/ha-logbook-data.html

@@ -1,45 +1,47 @@
-<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() {
-      hass: {
+      return {
-        type: Object,
+        hass: {
-        observer: 'hassChanged',
+          type: Object,
-      },
+          observer: 'hassChanged',
+        },
 
-      filterDate: {
+        filterDate: {
-        type: String,
+          type: String,
-        observer: 'filterDateChanged',
+          observer: 'filterDateChanged',
-      },
+        },
 
-      isLoading: {
+        isLoading: {
-        type: Boolean,
+          type: Boolean,
-        value: true,
+          value: true,
-        readOnly: true,
+          readOnly: true,
-        notify: true,
+          notify: true,
-      },
+        },
 
-      entries: {
+        entries: {
-        type: Object,
+          type: Object,
-        value: null,
+          value: null,
-        readOnly: true,
+          readOnly: true,
-        notify: 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,27 +62,31 @@
 </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() {
-    hass: {
+    return {
-      type: Object,
+      hass: {
-    },
+        type: Object,
+      },
 
-    entries: {
+      entries: {
-      type: Array,
+        type: Array,
-      value: [],
+        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,48 +78,51 @@
 </dom-module>
 
 <script>
-Polymer({
+class HaPanelLogbook extends Polymer.Element {
-  is: 'ha-panel-logbook',
+  static get is() { return 'ha-panel-logbook'; }
 
-  properties: {
+  static get properties() {
-    hass: {
+    return {
-      type: Object,
+      hass: {
-    },
+        type: Object,
-
-    narrow: {
-      type: Boolean,
-      value: false,
-    },
-
-    showMenu: {
-      type: Boolean,
-      value: false,
-    },
-
-    // ISO8601 formatted date string
-    _currentDate: {
-      type: String,
-      value: function () {
-        var value = new Date();
-        var today = new Date(Date.UTC(value.getFullYear(), value.getMonth(), value.getDate()));
-        return today.toISOString().split('T')[0];
       },
-    },
 
-    isLoading: {
+      narrow: {
-      type: Boolean,
+        type: Boolean,
-    },
+        value: false,
+      },
 
-    entries: {
+      showMenu: {
-      type: Array,
+        type: Boolean,
-    },
+        value: false,
+      },
 
-    datePicker: {
+      // ISO8601 formatted date string
-      type: Object,
+      _currentDate: {
-    },
+        type: String,
-  },
+        value: function () {
+          var value = new Date();
+          var today = new Date(Date.UTC(value.getFullYear(), value.getMonth(), value.getDate()));
+          return today.toISOString().split('T')[0];
+        },
+      },
 
-  attached: function () {
+      isLoading: {
+        type: Boolean,
+      },
+
+      entries: {
+        type: Array,
+      },
+
+      datePicker: {
+        type: Object,
+      },
+    };
+  }
+
+  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,37 +144,41 @@
 </dom-module>
 
 <script>
-Polymer({
+class HaPanelMailbox extends Polymer.Element {
-  is: 'ha-panel-mailbox',
+  static get is() { return 'ha-panel-mailbox'; }
-  properties: {
-    hass: {
-      type: Object,
-    },
 
-    narrow: {
+  static get properties() {
-      type: Boolean,
+    return {
-      value: false,
+      hass: {
-    },
+        type: Object,
+      },
 
-    showMenu: {
+      narrow: {
-      type: Boolean,
+        type: Boolean,
-      value: false,
+        value: false,
-    },
+      },
 
-    platforms: {
+      showMenu: {
-      type: Array,
+        type: Boolean,
-    },
+        value: false,
+      },
 
-    _messages: {
+      platforms: {
-      type: Array,
+        type: Array,
-    },
+      },
 
-    currentMessage: {
+      _messages: {
-      type: Object,
+        type: Array,
-    },
+      },
-  },
 
-  attached: function () {
+      currentMessage: {
+        type: Object,
+      },
+    };
+  }
+
+  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,45 +38,44 @@
 </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,
+      hass: {
-    entityPicture: null,
+        type: Object,
-  },
+      },
 
-  properties: {
+      entityId: {
-    hass: {
+        type: String,
-      type: Object,
+        value: '',
-    },
+      },
 
-    entityId: {
+      entityName: {
-      type: String,
+        type: String,
-      value: '',
+        value: null,
-    },
+      },
 
-    entityName: {
+      entityPicture: {
-      type: String,
+        type: String,
-      value: null,
+        value: null,
-    },
+      }
+    };
+  }
 
-    entityPicture: {
+  ready() {
-      type: String,
+    super.ready();
-      value: null,
+    this.addEventListener('tap', ev => this.badgeTap(ev));
-    }
+  }
-  },
 
-  listeners: {
+  badgeTap(ev) {
-    tap: 'badgeTap',
-  },
-
-  badgeTap: function (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,26 +29,29 @@
 <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() {
-    hass: {
+    return {
-      type: Object,
+      hass: {
-      observer: 'drawEntities',
+        type: Object,
-    },
+        observer: 'drawEntities',
+      },
 
-    narrow: {
+      narrow: {
-      type: Boolean,
+        type: Boolean,
-    },
+      },
 
-    showMenu: {
+      showMenu: {
-      type: Boolean,
+        type: Boolean,
-      value: false,
+        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,55 +138,60 @@
 </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() {
-    hass: Object,
+    return {
-    narrow: Boolean,
+      hass: Object,
-    showMenu: Boolean,
+      narrow: Boolean,
-    items: {
+      showMenu: Boolean,
-      type: Array,
+      items: {
-      value: [],
+        type: Array,
-    },
+        value: [],
-    _editIndex: {
+      },
-      type: Number,
+      _editIndex: {
-      value: -1,
+        type: Number,
-    },
+        value: -1,
-    _editValue: {
+      },
-      type: String,
+      _editValue: {
-      value: '',
+        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,40 +13,42 @@
 </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() {
-    hass: {
+    return {
-      type: Object,
+      hass: {
-    },
+        type: Object,
+      },
 
-    progress: {
+      progress: {
-      type: Boolean,
+        type: Boolean,
-      value: false,
+        value: false,
-    },
+      },
 
-    path: {
+      path: {
-      type: String,
+        type: String,
-    },
+      },
 
-    method: {
+      method: {
-      type: String,
+        type: String,
-      value: 'POST',
+        value: 'POST',
-    },
+      },
 
-    data: {
+      data: {
-      type: Object,
+        type: Object,
-      value: {},
+        value: {},
-    },
+      },
 
-    disabled: {
+      disabled: {
-      type: Boolean,
+        type: Boolean,
-      value: false,
+        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,34 +12,36 @@
 </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() {
-    hass: {
+    return {
-      type: Object,
+      hass: {
-    },
+        type: Object,
+      },
 
-    progress: {
+      progress: {
-      type: Boolean,
+        type: Boolean,
-      value: false,
+        value: false,
-    },
+      },
 
-    domain: {
+      domain: {
-      type: String,
+        type: String,
-    },
+      },
 
-    service: {
+      service: {
-      type: String,
+        type: String,
-    },
+      },
 
-    serviceData: {
+      serviceData: {
-      type: Object,
+        type: Object,
-      value: {},
+        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,51 +58,56 @@
 </dom-module>
 
 <script>
-Polymer({
+class HaProgressButton extends Polymer.Element {
-  is: 'ha-progress-button',
+  static get is() { return 'ha-progress-button'; }
 
-  properties: {
+  static get properties() {
-    hass: {
+    return {
-      type: Object,
+      hass: {
-    },
+        type: Object,
+      },
 
-    progress: {
+      progress: {
-      type: Boolean,
+        type: Boolean,
-      value: false,
+        value: false,
-    },
+      },
 
-    disabled: {
+      disabled: {
-      type: Boolean,
+        type: Boolean,
-      value: false,
+        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,23 +9,27 @@
 </dom-module>
 
 <script>
-Polymer({
+class DomainIcon extends Polymer.Element {
-  is: 'domain-icon',
+  static get is() { return 'domain-icon'; }
 
-  properties: {
+  static get properties() {
-    domain: {
+    return {
-      type: String,
+      domain: {
-      value: '',
+        type: String,
-    },
+        value: '',
+      },
 
-    state: {
+      state: {
-      type: String,
+        type: String,
-      value: '',
+        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,43 +36,43 @@
 </dom-module>
 
 <script>
-Polymer({
+class HaEntityToggle extends Polymer.Element {
-  is: 'ha-entity-toggle',
+  static get is() { return 'ha-entity-toggle'; }
 
-  properties: {
+  static get properties() {
-    hass: {
+    return {
-      type: Object,
+      hass: {
-    },
+        type: Object,
+      },
 
-    stateObj: {
+      stateObj: {
-      type: Object,
+        type: Object,
-    },
+      },
 
-    toggleChecked: {
+      toggleChecked: {
-      type: Boolean,
+        type: Boolean,
-      value: false,
+        value: false,
-    },
+      },
 
-    isOn: {
+      isOn: {
-      type: Boolean,
+        type: Boolean,
-      computed: 'computeIsOn(stateObj)',
+        computed: 'computeIsOn(stateObj)',
-      observer: 'isOnChanged',
+        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() {
-    stateObj: {
+    return {
-      type: Object,
+      stateObj: {
-    },
+        type: Object,
-  },
+      },
+    };
+  }
 
-  computeIcon: function (stateObj) {
+  computeIcon(stateObj) {
     return window.hassUtil.stateIcon(stateObj);
-  },
+  }
-});
+}
+
+customElements.define(HaStateIcon.is, HaStateIcon);
 </script>

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

@@ -1,4 +1,6 @@
-<link rel='import' href='../../../bower_components/polymer/polymer.html'>
+<link rel='import' href='../../../bower_components/polymer/polymer-element.html'>
+
+<link rel='import' href='../../../src/util/hass-mixins.html'>
 
 <link rel='import' href='../ha-label-badge.html'>
 
@@ -45,30 +47,33 @@
 </dom-module>
 
 <script>
-Polymer({
+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() {
-    hass: {
+    return {
-      type: Object,
+      hass: {
-    },
+        type: Object,
+      },
 
-    state: {
+      state: {
-      type: Object,
+        type: Object,
-      observer: 'stateChanged',
+        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,26 +57,30 @@
 </dom-module>
 
 <script>
-Polymer({
+class StateInfo extends Polymer.Element {
-  is: 'state-info',
+  static get is() { return 'state-info'; }
 
-  properties: {
+  static get properties() {
-    detailed: {
+    return {
-      type: Boolean,
+      detailed: {
-      value: false,
+        type: Boolean,
-    },
+        value: false,
+      },
 
-    stateObj: {
+      stateObj: {
-      type: Object,
+        type: Object,
-    },
+      },
 
-    inDialog: {
+      inDialog: {
-      type: Boolean,
+        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(',') : []);
+    return Object.keys(window.hassAttributeUtil.LOGIC_STATE_ATTRIBUTES).concat(extraFilters ? extraFilters.split(',') : []);
-    },
+  }
 
-    computeDisplayAttributes: function (stateObj, filtersArray) {
+  computeDisplayAttributes(stateObj, filtersArray) {
-      if (!stateObj) {
+    if (!stateObj) {
-        return [];
+      return [];
-      }
+    }
-      return Object.keys(stateObj.attributes).filter(function (key) {
+    return Object.keys(stateObj.attributes).filter(function (key) {
-        return filtersArray.indexOf(key) === -1;
+      return filtersArray.indexOf(key) === -1;
-      });
+    });
-    },
+  }
 
-    formatAttribute: function (attribute) {
+  formatAttribute(attribute) {
-      return attribute.replace(/_/g, ' ');
+    return attribute.replace(/_/g, ' ');
-    },
+  }
 
-    formatAttributeValue: function (stateObj, attribute) {
+  formatAttributeValue(stateObj, attribute) {
-      var value = stateObj.attributes[attribute];
+    var value = stateObj.attributes[attribute];
-      if (value === null) return '-';
+    if (value === null) return '-';
-      if (Array.isArray(value)) {
+    if (Array.isArray(value)) {
-        return value.join(', ');
+      return value.join(', ');
-      }
+    }
-      return (value instanceof Object) ? JSON.stringify(value, null, 2) : value;
+    return (value instanceof Object) ? JSON.stringify(value, null, 2) : value;
-    },
+  }
 
-    computeAttribution: function (stateObj) {
+  computeAttribution(stateObj) {
-      return stateObj.attributes.attribution;
+    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,21 +28,25 @@
 </dom-module>
 
 <script>
-Polymer({
+class HaCard extends Polymer.Element {
-  is: 'ha-card',
+  static get is() { return 'ha-card'; }
 
-  properties: {
+  static get properties() {
-    header: {
+    return {
-      type: String,
+      header: {
-    },
+        type: String,
-    /**
+      },
-     * The z-depth of the card, from 0-5.
+      /**
-     */
+       * The z-depth of the card, from 0-5.
-    elevation: {
+       */
-      type: Number,
+      elevation: {
-      value: 1,
+        type: Number,
-      reflectToAttribute: true,
+        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,66 +40,70 @@
       </div>
     </div>
   </template>
-  <script>
-    Polymer({
-      is: 'ha-climate-control',
-      properties: {
-        value: {
-          type: Number,
-          observer: 'valueChanged'
-        },
-        units: {
-          type: String,
-        },
-        min: {
-          type: Number,
-        },
-        max: {
-          type: Number,
-        },
-        step: {
-          type: Number,
-          value: 1,
-        },
-      },
-      incrementValue: function () {
-        var newval = this.value + this.step;
-        this.last_changed = Date.now();
-        if (newval <= this.max) {
-          this.value = newval;
-        } else {
-          this.value = this.max;
-        }
-      },
-      decrementValue: function () {
-        var newval = this.value - this.step;
-        this.last_changed = Date.now();
-        if (newval >= this.min) {
-          this.value = newval;
-        } else {
-          this.value = this.min;
-        }
-      },
-      valueChanged: function () {
-        // when the value is changed, trigger a potential even fire in
-        // the future, as long as last changed is far enough in the
-        // past.
-        //
-        // from a UX perspective it would probably be worth changing
-        // font color on the temperature when it's in the flux state
-        // (like set to red), then animate back to black when the
-        // change event is fired, and the signal sent to home-assistant.
-        if (this.last_changed) {
-          window.setTimeout(function (val) {
-            var now = Date.now();
-            if (now - val.last_changed >= 2000) {
-              val.fire('change');
-              val.last_changed = null;
-            }
-          }, 2010, this);
-        }
-      },
-    });
-  </script>
-
 </dom-module>
+<script>
+class HaClimateControl extends Polymer.Element {
+  static get is() { return 'ha-climate-control'; }
+
+  static get properties() {
+    return {
+      value: {
+        type: Number,
+        observer: 'valueChanged'
+      },
+      units: {
+        type: String,
+      },
+      min: {
+        type: Number,
+      },
+      max: {
+        type: Number,
+      },
+      step: {
+        type: Number,
+        value: 1,
+      },
+    };
+  }
+  incrementValue() {
+    var newval = this.value + this.step;
+    this.last_changed = Date.now();
+    if (newval <= this.max) {
+      this.value = newval;
+    } else {
+      this.value = this.max;
+    }
+  }
+  decrementValue() {
+    var newval = this.value - this.step;
+    this.last_changed = Date.now();
+    if (newval >= this.min) {
+      this.value = newval;
+    } else {
+      this.value = this.min;
+    }
+  }
+  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.
+    //
+    // from a UX perspective it would probably be worth changing
+    // font color on the temperature when it's in the flux state
+    // (like set to red), then animate back to black when the
+    // change event is fired, and the signal sent to home-assistant.
+    if (this.last_changed) {
+      window.setTimeout(function (val) {
+        var now = Date.now();
+        if (now - val.last_changed >= 2000) {
+          val.fire('change');
+          val.last_changed = null;
+        }
+      }, 2010, this);
+    }
+  }
+}
+
+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,67 +22,75 @@
  *
  * 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() {
-    color: {
+    return {
-      type: Object,
+      color: {
-    },
+        type: Object,
+      },
 
-    width: {
+      width: {
-      type: Number,
+        type: Number,
-    },
+      },
 
-    height: {
+      height: {
-      type: Number,
+        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,42 +28,47 @@
 </dom-module>
 
 <script>
-Polymer({
+class HaCoverControls extends Polymer.Element {
-  is: 'ha-cover-controls',
+  static get is() { return 'ha-cover-controls'; }
-  properties: {
+
-    hass: {
+  static get properties() {
-      type: Object,
+    return {
-    },
+      hass: {
-    stateObj: {
+        type: Object,
-      type: Object,
+      },
-    },
+      stateObj: {
-    entityObj: {
+        type: Object,
-      type: Object,
+      },
-      computed: 'computeEntityObj(hass, stateObj)',
+      entityObj: {
-    },
+        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,42 +32,47 @@
 </dom-module>
 
 <script>
-Polymer({
+class HaCoverTiltControls extends Polymer.Element {
-  is: 'ha-cover-tilt-controls',
+  static get is() { return 'ha-cover-tilt-controls'; }
-  properties: {
+
-    hass: {
+  static get properties() {
-      type: Object,
+    return {
-    },
+      hass: {
-    stateObj: {
+        type: Object,
-      type: Object,
+      },
-    },
+      stateObj: {
-    entityObj: {
+        type: Object,
-      type: Object,
+      },
-      computed: 'computeEntityObj(hass, stateObj)',
+      entityObj: {
-    },
+        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: {
+
-    checked: Boolean,
+  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,30 +40,34 @@
 </dom-module>
 
 <script>
-Polymer({
+class HaLabeledSlider extends Polymer.Element {
-  is: 'ha-labeled-slider',
+  static get is() { return 'ha-labeled-slider'; }
 
-  properties: {
+  static get properties() {
-    caption: {
+    return {
-      type: String,
+      caption: {
-    },
+        type: String,
+      },
 
-    icon: {
+      icon: {
-      type: String,
+        type: String,
-    },
+      },
 
-    min: {
+      min: {
-      type: Number,
+        type: Number,
-    },
+      },
 
-    max: {
+      max: {
-      type: Number,
+        type: Number,
-    },
+      },
 
-    value: {
+      value: {
-      type: Number,
+        type: Number,
-      notify: true,
+        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,28 +19,32 @@
 </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() {
-    narrow: {
+    return {
-      type: Boolean,
+      narrow: {
-      value: false,
+        type: Boolean,
-    },
+        value: false,
+      },
 
-    showMenu: {
+      showMenu: {
-      type: Boolean,
+        type: Boolean,
-      value: false,
+        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,31 +13,36 @@
 </dom-module>
 
 <script>
-Polymer({
+class HaPushNotificationsToggle extends Polymer.Element {
-  is: 'ha-push-notifications-toggle',
+  static get is() { return 'ha-push-notifications-toggle'; }
-  properties: {
+
-    hass: { type: Object, value: null },
+  static get properties() {
-    pushSupported: {
+    return {
-      type: Boolean,
+      hass: { type: Object, value: null },
-      readOnly: true,
+      pushSupported: {
-      notify: true,
+        type: Boolean,
-      value: (
+        readOnly: true,
-        'PushManager' in window &&
+        notify: true,
-          (document.location.protocol === 'https:' ||
+        value: (
-            document.location.hostname === 'localhost' ||
+          'PushManager' in window &&
-            document.location.hostname === '127.0.0.1')
+            (document.location.protocol === 'https:' ||
-      )
+              document.location.hostname === 'localhost' ||
-    },
+              document.location.hostname === '127.0.0.1')
-    pushActive: {
+        )
-      type: Boolean,
+      },
-      value: 'Notification' in window && Notification.permission === 'granted'
+      pushActive: {
-    },
+        type: Boolean,
-    loading: {
+        value: 'Notification' in window && Notification.permission === 'granted'
-      type: Boolean,
+      },
-      value: true,
+      loading: {
-    }
+        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,54 +1,61 @@
-<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() {
-    datetime: {
+    return {
-      type: String,
+      datetime: {
-      observer: 'datetimeChanged',
+        type: String,
-    },
+        observer: 'datetimeChanged',
+      },
 
-    datetimeObj: {
+      datetimeObj: {
-      type: Object,
+        type: Object,
-      observer: 'datetimeObjChanged',
+        observer: 'datetimeObjChanged',
-    },
+      },
 
-    parsedDateTime: {
+      parsedDateTime: {
-      type: Object,
+        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() {
-    hass: Object,
+    return {
-    domain: String,
+      hass: Object,
-    service: String,
+      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,28 +14,32 @@
 </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() {
-    hass: {
+    return {
-      type: Object,
+      hass: {
-      value: null,
+        type: Object,
-    },
+        value: null,
+      },
 
-    canListen: {
+      canListen: {
-      type: Boolean,
+        type: Boolean,
-      computed: 'computeCanListen(hass)',
+        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,36 +133,38 @@
 </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() {
-    hass: {
+    return {
-      type: Object,
+      hass: {
-    },
+        type: Object,
-
-    dialogOpen: {
-      type: Boolean,
-      value: false,
-      observer: 'dialogOpenChanged',
-    },
-
-    results: {
-      type: Object,
-      value: null,
-      observer: '_scrollMessagesBottom',
-    },
-
-    _conversation: {
-      type: Array,
-      value: function () {
-        return [{ who: 'hass', text: 'How can I help?' }];
       },
-      observer: '_scrollMessagesBottom',
-    }
-  },
 
-  initRecognition: function () {
+      dialogOpen: {
+        type: Boolean,
+        value: false,
+        observer: 'dialogOpenChanged',
+      },
+
+      results: {
+        type: Object,
+        value: null,
+        observer: '_scrollMessagesBottom',
+      },
+
+      _conversation: {
+        type: Array,
+        value: function () {
+          return [{ who: 'hass', text: 'How can I help?' }];
+        },
+        observer: '_scrollMessagesBottom',
+      }
+    };
+  }
+
+  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,23 +35,27 @@
 </dom-module>
 
 <script>
-Polymer({
+class HassErrorScreen extends Polymer.Element {
-  is: 'hass-error-screen',
+  static get is() { return 'hass-error-screen'; }
 
-  properties: {
+  static get properties() {
-    title: {
+    return {
-      type: String,
+      title: {
-      value: 'Home Assistant',
+        type: String,
-    },
+        value: 'Home Assistant',
+      },
 
-    error: {
+      error: {
-      type: String,
+        type: String,
-      value: 'Oops! It looks like something went wrong.'
+        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,24 +30,28 @@
 </dom-module>
 
 <script>
-Polymer({
+class HassLoadingScreen extends Polymer.Element {
-  is: 'hass-loading-screen',
+  static get is() { return 'hass-loading-screen'; }
 
-  properties: {
+  static get properties() {
-    narrow: {
+    return {
-      type: Boolean,
+      narrow: {
-      value: false,
+        type: Boolean,
-    },
+        value: false,
+      },
 
-    showMenu: {
+      showMenu: {
-      type: Boolean,
+        type: Boolean,
-      value: false,
+        value: false,
-    },
+      },
 
-    title: {
+      title: {
-      type: String,
+        type: String,
-      value: '',
+        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,74 +70,78 @@
 </dom-module>
 
 <script>
-Polymer({
+class LoginForm extends Polymer.Element {
-  is: 'login-form',
+  static get is() { return 'login-form'; }
 
-  properties: {
+  static get properties() {
-    hass: {
+    return {
-      type: Object,
+      hass: {
-    },
+        type: Object,
+      },
 
-    connectionPromise: {
+      connectionPromise: {
-      type: Object,
+        type: Object,
-      notify: true,
+        notify: true,
-      observer: 'handleConnectionPromiseChanged',
+        observer: 'handleConnectionPromiseChanged',
-    },
+      },
 
-    errorMessage: {
+      errorMessage: {
-      type: String,
+        type: String,
-      value: '',
+        value: '',
-    },
+      },
 
-    isValidating: {
+      isValidating: {
-      type: Boolean,
+        type: Boolean,
-      observer: 'isValidatingChanged',
+        observer: 'isValidatingChanged',
-      value: false,
+        value: false,
-    },
+      },
 
-    showLoading: {
+      showLoading: {
-      type: Boolean,
+        type: Boolean,
-      value: false,
+        value: false,
-    },
+      },
 
-    showSpinner: {
+      showSpinner: {
-      type: Boolean,
+        type: Boolean,
-      computed: 'computeShowSpinner(showLoading, isValidating)',
+        computed: 'computeShowSpinner(showLoading, isValidating)',
-    },
+      },
 
-    password: {
+      password: {
-      type: String,
+        type: String,
-      value: '',
+        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,232 +134,257 @@
 </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'; }
 
-  properties: {
+    static get properties() {
-    hass: {
+      return {
-      type: Object,
-      value: null,
-      observer: 'hassChanged'
-    },
 
-    narrow: {
+        hass: {
-      type: Boolean,
+          type: Object,
-      value: false,
+          value: null,
-    },
+          observer: 'hassChanged'
+        },
 
-    showMenu: {
+        narrow: {
-      type: Boolean,
+          type: Boolean,
-      observer: 'handleWindowChange',
+          value: false,
-    },
+        },
 
-    panelVisible: {
+        showMenu: {
-      type: Boolean,
+          type: Boolean,
-      value: false,
+          observer: 'handleWindowChange',
-    },
+        },
 
-    route: Object,
+        panelVisible: {
-    routeData: Object,
+          type: Boolean,
-    routeMatch: Boolean,
+          value: false,
+        },
 
-    _columns: {
+        route: Object,
-      type: Number,
+        routeData: Object,
-      value: 1,
+        routeMatch: Boolean,
-    },
 
-    introductionLoaded: {
+        _columns: {
-      type: Boolean,
+          type: Number,
-      computed: 'computeIntroductionLoaded(hass)',
+          value: 1,
-    },
+        },
 
-    locationName: {
+        introductionLoaded: {
-      type: String,
+          type: Boolean,
-      value: '',
+          computed: 'computeIntroductionLoaded(hass)',
-      computed: 'computeLocationName(hass)',
+        },
-    },
 
-    currentView: {
+        locationName: {
-      type: String,
+          type: String,
-      computed: '_computeCurrentView(routeMatch, routeData)',
+          value: '',
-    },
+          computed: 'computeLocationName(hass)',
+        },
 
-    views: {
+        currentView: {
-      type: Array,
+          type: String,
-    },
+          computed: '_computeCurrentView(routeMatch, routeData)',
+        },
 
-    defaultView: {
+        views: {
-      type: Object,
+          type: Array,
-    },
+        },
 
-    viewStates: {
+        defaultView: {
-      type: Object,
+          type: Object,
-      computed: 'computeViewStates(currentView, hass, defaultView)',
+        },
-    },
 
-    orderedGroups: {
+        viewStates: {
-      type: Array,
+          type: Object,
-      computed: 'computeOrderedGroups(currentView, hass, defaultView)',
+          computed: 'computeViewStates(currentView, hass, defaultView)',
-    },
+        },
 
-    showTabs: {
+        orderedGroups: {
-      type: Boolean,
+          type: Array,
-      value: false,
+          computed: 'computeOrderedGroups(currentView, hass, defaultView)',
-    },
+        },
-  },
 
-  created: function () {
+        showTabs: {
-    this.handleWindowChange = this.handleWindowChange.bind(this);
+          type: Boolean,
-    this.mqls = [300, 600, 900, 1200].map(function (width) {
+          value: false,
-      var mql = window.matchMedia('(min-width: ' + width + 'px)');
+        },
-      mql.addListener(this.handleWindowChange);
+      };
-      return mql;
-    }.bind(this));
-  },
-
-  detached: function () {
-    this.mqls.forEach(function (mql) {
-      mql.removeListener(this.handleWindowChange);
-    });
-  },
-
-  handleWindowChange: function () {
-    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) {
-    return !views || !views.length || !showTabs;
-  },
-
-  /**
-   * Scroll to a specific y coordinate.
-   *
-   * Copied from paper-scroll-header-panel.
-   *
-   * @method scroll
-   * @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 () {
-    // 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.
-    var top = 0;
-    var scroller = this.$.layout.header.scrollTarget;
-    var easingFn = function easeOutQuad(t, b, c, d) {
-      /* eslint-disable no-param-reassign, space-infix-ops, no-mixed-operators */
-      t /= d;
-      return -c * t*(t-2) + b;
-      /* eslint-enable no-param-reassign, space-infix-ops, no-mixed-operators */
-    };
-    var animationId = Math.random();
-    var duration = 200;
-    var startTime = Date.now();
-    var currentScrollTop = scroller.scrollTop;
-    var deltaScrollTop = top - currentScrollTop;
-    this._currentAnimationId = animationId;
-    (function updateFrame() {
-      var now = Date.now();
-      var elapsedTime = now - startTime;
-      if (elapsedTime > duration) {
-        scroller.scrollTop = top;
-      } else if (this._currentAnimationId === animationId) {
-        scroller.scrollTop = easingFn(elapsedTime, currentScrollTop, deltaScrollTop, duration);
-        requestAnimationFrame(updateFrame.bind(this));
-      }
-    }).call(this);
-  },
-
-  handleViewSelected: function (ev) {
-    var view = ev.detail.item.getAttribute('data-entity') || null;
-    var current = this.currentView;
-
-    if (view !== current) {
-      var path = '/states';
-      if (view) {
-        path += '/' + view;
-      }
-      history.pushState(null, null, path);
-      this.fire('location-changed');
-    }
-  },
-
-  _computeCurrentView: function (routeMatch, routeData) {
-    return routeMatch ? routeData.view : '';
-  },
-
-  computeTitle: function (views, locationName) {
-    return views && views.length > 0 ? 'Home Assistant' : locationName;
-  },
-
-  computeShowIntroduction: function (currentView, introductionLoaded, states) {
-    return currentView === '' && (introductionLoaded || Object.keys(states).length === 0);
-  },
-
-  computeStateName: function (stateObj) {
-    if (stateObj.entity_id === this.DEFAULT_VIEW_ENTITY_ID) {
-      if (stateObj.attributes.friendly_name &&
-          stateObj.attributes.friendly_name !== 'default_view') {
-        return stateObj.attributes.friendly_name;
-      }
-      return this.computeLocationName(this.hass);
-    }
-    return window.hassUtil.computeStateName(stateObj);
-  },
-
-  computeLocationName: function (hass) {
-    return window.hassUtil.computeLocationName(hass);
-  },
-
-  computeIntroductionLoaded: function (hass) {
-    return window.hassUtil.isComponentLoaded(hass, 'introduction');
-  },
-
-  hassChanged: function (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) {
-      this.defaultView = views.shift();
-    } else {
-      this.defaultView = null;
     }
 
-    this.views = views;
+    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));
+    }
 
-  isView: function (currentView, defaultView) {
+    disconnectedCallback() {
-    return currentView || defaultView;
+      super.disconnectedCallback();
-  },
+      this.mqls.forEach(function (mql) {
+        mql.removeListener(this.handleWindowChange);
+      });
+    }
 
-  /*
+    handleWindowChange() {
-    Compute the states to show for current view.
+      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));
+    }
 
-    Will make sure we always show entities from ALWAYS_SHOW_DOMAINS domains.
+    areTabsHidden(views, showTabs) {
-  */
+      return !views || !views.length || !showTabs;
-  computeViewStates: function (currentView, hass, defaultView) {
+    }
-    var i;
-    var entityId;
-    var state;
-    var states;
-    var entityIds = Object.keys(hass.states);
 
-    // If we base off all entities, only have to filter out hidden
+    /**
-    if (!this.isView(currentView, defaultView)) {
+     * Scroll to a specific y coordinate.
-      states = {};
+     *
+     * Copied from paper-scroll-header-panel.
+     *
+     * @method scroll
+     * @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() {
+      // 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.
+      var top = 0;
+      var scroller = this.$.layout.header.scrollTarget;
+      var easingFn = function easeOutQuad(t, b, c, d) {
+        /* eslint-disable no-param-reassign, space-infix-ops, no-mixed-operators */
+        t /= d;
+        return -c * t*(t-2) + b;
+        /* eslint-enable no-param-reassign, space-infix-ops, no-mixed-operators */
+      };
+      var animationId = Math.random();
+      var duration = 200;
+      var startTime = Date.now();
+      var currentScrollTop = scroller.scrollTop;
+      var deltaScrollTop = top - currentScrollTop;
+      this._currentAnimationId = animationId;
+      (function updateFrame() {
+        var now = Date.now();
+        var elapsedTime = now - startTime;
+        if (elapsedTime > duration) {
+          scroller.scrollTop = top;
+        } else if (this._currentAnimationId === animationId) {
+          scroller.scrollTop = easingFn(elapsedTime, currentScrollTop, deltaScrollTop, duration);
+          requestAnimationFrame(updateFrame.bind(this));
+        }
+      }).call(this);
+    }
+
+    handleViewSelected(ev) {
+      var view = ev.detail.item.getAttribute('data-entity') || null;
+      var current = this.currentView;
+
+      if (view !== current) {
+        var path = '/states';
+        if (view) {
+          path += '/' + view;
+        }
+        history.pushState(null, null, path);
+        this.fire('location-changed');
+      }
+    }
+
+    _computeCurrentView(routeMatch, routeData) {
+      return routeMatch ? routeData.view : '';
+    }
+
+    computeTitle(views, locationName) {
+      return views && views.length > 0 ? 'Home Assistant' : locationName;
+    }
+
+    computeShowIntroduction(currentView, introductionLoaded, states) {
+      return currentView === '' && (introductionLoaded || Object.keys(states).length === 0);
+    }
+
+    computeStateName(stateObj) {
+      if (stateObj.entity_id === DEFAULT_VIEW_ENTITY_ID) {
+        if (stateObj.attributes.friendly_name &&
+            stateObj.attributes.friendly_name !== 'default_view') {
+          return stateObj.attributes.friendly_name;
+        }
+        return this.computeLocationName(this.hass);
+      }
+      return window.hassUtil.computeStateName(stateObj);
+    }
+
+    computeLocationName(hass) {
+      return window.hassUtil.computeLocationName(hass);
+    }
+
+    computeIntroductionLoaded(hass) {
+      return window.hassUtil.isComponentLoaded(hass, 'introduction');
+    }
+
+    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 === DEFAULT_VIEW_ENTITY_ID) {
+        this.defaultView = views.shift();
+      } else {
+        this.defaultView = null;
+      }
+
+      this.views = views;
+    }
+
+    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(currentView, hass, defaultView) {
+      var i;
+      var entityId;
+      var state;
+      var states;
+      var entityIds = Object.keys(hass.states);
+
+      // If we base off all entities, only have to filter out hidden
+      if (!this.isView(currentView, defaultView)) {
+        states = {};
+        for (i = 0; i < entityIds.length; i++) {
+          entityId = entityIds[i];
+          state = hass.states[entityId];
+
+          // We can filter out hidden and domain at the same time.
+          if (!state.attributes.hidden) {
+            states[entityId] = state;
+          }
+        }
+
+        return states;
+      }
+
+      if (currentView) {
+        states = window.HAWS.getViewEntities(hass.states, hass.states[currentView]);
+      } else {
+        states = window.HAWS.getViewEntities(hass.states, hass.states[DEFAULT_VIEW_ENTITY_ID]);
+      }
+
+      // Make sure certain domains are always shown.
       for (i = 0; i < entityIds.length; i++) {
         entityId = entityIds[i];
         state = hass.states[entityId];
 
-        // We can filter out hidden and domain at the same time.
+        if (ALWAYS_SHOW_DOMAIN.indexOf(window.hassUtil.computeDomain(state)) !== -1) {
-        if (!state.attributes.hidden) {
           states[entityId] = state;
         }
       }
@@ -365,41 +392,25 @@ Polymer({
       return states;
     }
 
-    if (currentView) {
+    /*
-      states = window.HAWS.getViewEntities(hass.states, hass.states[currentView]);
+      Compute the ordered list of groups for this view
-    } else {
+    */
-      states = window.HAWS.getViewEntities(hass.states, hass.states[this.DEFAULT_VIEW_ENTITY_ID]);
+    computeOrderedGroups(currentView, hass, defaultView) {
-    }
+      if (!this.isView(currentView, defaultView)) {
-
+        return null;
-    // Make sure certain domains are always shown.
-    for (i = 0; i < entityIds.length; i++) {
-      entityId = entityIds[i];
-      state = hass.states[entityId];
-
-      if (this.ALWAYS_SHOW_DOMAIN.indexOf(window.hassUtil.computeDomain(state)) !== -1) {
-        states[entityId] = state;
       }
+
+      var orderedGroups = {};
+      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;
     }
+  }
 
-    return states;
+  customElements.define(PartialCards.is, PartialCards);
-  },
+}
-
-  /*
-    Compute the ordered list of groups for this view
-  */
-  computeOrderedGroups: function (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;
-
-    for (var i = 0; i < entitiesList.length; i++) {
-      orderedGroups[entitiesList[i]] = i;
-    }
-
-    return orderedGroups;
-  },
-});
 </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,58 +29,60 @@
 </dom-module>
 
 <script>
-Polymer({
+class PartialPanelResolver extends Polymer.Element {
-  is: 'partial-panel-resolver',
+  static get is() { return 'partial-panel-resolver'; }
 
-  properties: {
+  static get properties() {
-    hass: {
+    return {
-      type: Object,
+      hass: {
-      observer: 'updateAttributes',
+        type: Object,
-    },
+        observer: 'updateAttributes',
+      },
 
-    narrow: {
+      narrow: {
-      type: Boolean,
+        type: Boolean,
-      value: false,
+        value: false,
-      observer: 'updateAttributes',
+        observer: 'updateAttributes',
-    },
+      },
 
-    showMenu: {
+      showMenu: {
-      type: Boolean,
+        type: Boolean,
-      value: false,
+        value: false,
-      observer: 'updateAttributes',
+        observer: 'updateAttributes',
-    },
+      },
 
-    route: Object,
+      route: Object,
 
-    routeData: Object,
+      routeData: Object,
 
-    routeTail: {
+      routeTail: {
-      type: Object,
+        type: Object,
-      observer: 'updateAttributes',
+        observer: 'updateAttributes',
-    },
+      },
 
-    resolved: {
+      resolved: {
-      type: Boolean,
+        type: Boolean,
-      value: false,
+        value: false,
-    },
+      },
 
-    errorLoading: {
+      errorLoading: {
-      type: Boolean,
+        type: Boolean,
-      value: false,
+        value: false,
-    },
+      },
 
-    panel: {
+      panel: {
-      type: Object,
+        type: Object,
-      computed: 'computeCurrentPanel(hass, routeData)',
+        computed: 'computeCurrentPanel(hass, routeData)',
-      observer: 'panelChanged',
+        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,61 +25,68 @@
 </dom-module>
 
 <script>
-Polymer({
+class NotificationManager extends Polymer.Element {
-  is: 'notification-manager',
+  static get is() { return 'notification-manager'; }
 
-  properties: {
+  static get properties() {
-    hass: {
+    return {
-      type: Object,
+      hass: {
-    },
+        type: Object,
+      },
 
-    isStreaming: {
+      isStreaming: {
-      type: Boolean,
+        type: Boolean,
-      computed: 'computeIsStreaming(hass)',
+        computed: 'computeIsStreaming(hass)',
-    },
+      },
 
-    _cancelOnOutsideClick: {
+      _cancelOnOutsideClick: {
-      type: Boolean,
+        type: Boolean,
-      value: false,
+        value: false,
-    },
+      },
 
-    _text: {
+      _text: {
-      type: String,
+        type: String,
-      readOnly: true,
+        readOnly: true,
-    },
+      },
 
-    toastClass: {
+      toastClass: {
-      type: String,
+        type: String,
-      value: '',
+        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,61 +40,63 @@
 </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() {
-    hass: {
+    return {
-      type: Object,
+      hass: {
-    },
+        type: Object,
+      },
 
-    stateObj: {
+      stateObj: {
-      type: Object,
+        type: Object,
-      observer: 'stateObjChanged',
+        observer: 'stateObjChanged',
-    },
+      },
-    enteredCode: {
+      enteredCode: {
-      type: String,
+        type: String,
-      value: '',
+        value: '',
-    },
+      },
-    disarmButtonVisible: {
+      disarmButtonVisible: {
-      type: Boolean,
+        type: Boolean,
-      value: false,
+        value: false,
-    },
+      },
-    armHomeButtonVisible: {
+      armHomeButtonVisible: {
-      type: Boolean,
+        type: Boolean,
-      value: false,
+        value: false,
-    },
+      },
-    armAwayButtonVisible: {
+      armAwayButtonVisible: {
-      type: Boolean,
+        type: Boolean,
-      value: false,
+        value: false,
-    },
+      },
-    codeInputVisible: {
+      codeInputVisible: {
-      type: Boolean,
+        type: Boolean,
-      value: false,
+        value: false,
-    },
+      },
-    codeInputEnabled: {
+      codeInputEnabled: {
-      type: Boolean,
+        type: Boolean,
-      value: false,
+        value: false,
-    },
+      },
-    codeFormat: {
+      codeFormat: {
-      type: String,
+        type: String,
-      value: '',
+        value: '',
-    },
+      },
-    codeValid: {
+      codeValid: {
-      type: Boolean,
+        type: Boolean,
-      computed: 'validateCode(enteredCode, codeFormat)',
+        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,23 +28,27 @@
 </dom-module>
 
 <script>
-Polymer({
+class MoreInfoAutomation extends Polymer.Element {
-  is: 'more-info-automation',
+  static get is() { return 'more-info-automation'; }
 
-  properties: {
+  static get properties() {
-    hass: {
+    return {
-      type: Object,
+      hass: {
-    },
+        type: Object,
+      },
 
-    stateObj: {
+      stateObj: {
-      type: Object,
+        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,33 +20,35 @@
 </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() {
-    hass: {
+    return {
-      type: Object,
+      hass: {
-    },
+        type: Object,
+      },
 
-    stateObj: {
+      stateObj: {
-      type: Object,
+        type: Object,
-    },
+      },
 
-    isVisible: {
+      isVisible: {
-      type: Boolean,
+        type: Boolean,
-      value: true,
+        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,47 +181,49 @@
 </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() {
-    hass: {
+    return {
-      type: Object,
+      hass: {
-    },
+        type: Object,
+      },
 
-    stateObj: {
+      stateObj: {
-      type: Object,
+        type: Object,
-      observer: 'stateObjChanged',
+        observer: 'stateObjChanged',
-    },
+      },
 
-    operationIndex: {
+      operationIndex: {
-      type: Number,
+        type: Number,
-      value: -1,
+        value: -1,
-      observer: 'handleOperationmodeChanged',
+        observer: 'handleOperationmodeChanged',
-    },
+      },
 
-    fanIndex: {
+      fanIndex: {
-      type: Number,
+        type: Number,
-      value: -1,
+        value: -1,
-      observer: 'handleFanmodeChanged',
+        observer: 'handleFanmodeChanged',
-    },
+      },
 
-    swingIndex: {
+      swingIndex: {
-      type: Number,
+        type: Number,
-      value: -1,
+        value: -1,
-      observer: 'handleSwingmodeChanged',
+        observer: 'handleSwingmodeChanged',
-    },
+      },
 
-    awayToggleChecked: {
+      awayToggleChecked: {
-      type: Boolean,
+        type: Boolean,
-    },
+      },
 
-    auxToggleChecked: {
+      auxToggleChecked: {
-      type: Boolean,
+        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,45 +94,47 @@
 </dom-module>
 
 <script>
-Polymer({
+class MoreInfoConfigurator extends Polymer.Element {
-  is: 'more-info-configurator',
+  static get is() { return 'more-info-configurator'; }
 
-  properties: {
+  static get properties() {
-    stateObj: {
+    return {
-      type: Object,
+      stateObj: {
-    },
+        type: Object,
+      },
 
-    action: {
+      action: {
-      type: String,
+        type: String,
-      value: 'display',
+        value: 'display',
-    },
+      },
 
-    isConfigurable: {
+      isConfigurable: {
-      type: Boolean,
+        type: Boolean,
-      computed: 'computeIsConfigurable(stateObj)',
+        computed: 'computeIsConfigurable(stateObj)',
-    },
+      },
 
-    isConfiguring: {
+      isConfiguring: {
-      type: Boolean,
+        type: Boolean,
-      value: false,
+        value: false,
-    },
+      },
 
-    fieldInput: {
+      fieldInput: {
-      type: Object,
+        type: Object,
-      value: function () { return {}; },
+        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,25 +20,28 @@
 <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() {
-    hass: {
+    return {
-      type: Object,
+      hass: {
-    },
+        type: Object,
+      },
 
-    stateObj: {
+      stateObj: {
-      type: Object,
+        type: Object,
-      observer: 'stateObjChanged',
+        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,62 +56,66 @@
 </dom-module>
 
 <script>
-Polymer({
+{
-  is: 'more-info-cover',
+  const FEATURE_CLASS_NAMES = {
-
-  properties: {
-    hass: {
-      type: Object,
-    },
-
-    stateObj: {
-      type: Object,
-      observer: 'stateObjChanged',
-    },
-
-    entityObj: {
-      type: Object,
-      computed: 'computeEntityObj(hass, stateObj)',
-    },
-
-    coverPositionSliderValue: {
-      type: Number,
-    },
-
-    coverTiltPositionSliderValue: {
-      type: Number,
-    },
-
-  },
-
-  computeEntityObj: function (hass, stateObj) {
-    return new window.CoverEntity(hass, stateObj);
-  },
-
-  stateObjChanged: function (newVal) {
-    this.coverPositionSliderValue = newVal.attributes.current_position;
-    this.coverTiltPositionSliderValue = newVal.attributes.current_tilt_position;
-  },
-
-  featureClassNames: {
     128: 'has-set_tilt_position',
-  },
+  };
+  class MoreInfoCover extends Polymer.Element {
+    static get is() { return 'more-info-cover'; }
 
-  computeClassNames: function (stateObj) {
+    static get properties() {
-    var classes = [
+      return {
-      window.hassUtil.attributeClassNames(stateObj, ['current_position', 'current_tilt_position']),
+        hass: {
-      window.hassUtil.featureClassNames(stateObj, this.featureClassNames),
+          type: Object,
-    ];
+        },
-    return classes.join(' ');
-  },
 
-  coverPositionSliderChanged: function (ev) {
+        stateObj: {
-    this.entityObj.setCoverPosition(ev.target.value);
+          type: Object,
-  },
+          observer: 'stateObjChanged',
+        },
 
-  coverTiltPositionSliderChanged: function (ev) {
+        entityObj: {
-    this.entityObj.setCoverTiltPosition(ev.target.value);
+          type: Object,
-  },
+          computed: 'computeEntityObj(hass, stateObj)',
+        },
 
-});
+        coverPositionSliderValue: {
+          type: Number,
+        },
+
+        coverTiltPositionSliderValue: {
+          type: Number,
+        },
+
+      };
+    }
+
+    computeEntityObj(hass, stateObj) {
+      return new window.CoverEntity(hass, stateObj);
+    }
+
+    stateObjChanged(newVal) {
+      this.coverPositionSliderValue = newVal.attributes.current_position;
+      this.coverTiltPositionSliderValue = newVal.attributes.current_tilt_position;
+    }
+
+    computeClassNames(stateObj) {
+      var classes = [
+        window.hassUtil.attributeClassNames(stateObj, ['current_position', 'current_tilt_position']),
+        window.hassUtil.featureClassNames(stateObj, FEATURE_CLASS_NAMES),
+      ];
+      return classes.join(' ');
+    }
+
+    coverPositionSliderChanged(ev) {
+      this.entityObj.setCoverPosition(ev.target.value);
+    }
+
+    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() {
-    stateObj: {
+    return {
-      type: Object,
+      stateObj: {
-    },
+        type: Object,
-  },
+      },
-});
+    };
+  }
+}
+
+customElements.define(MoreInfoDefault.is, MoreInfoDefault);
 </script>