Format html (#2006)

* Upgrade prettier

* Format files with prettier

gallery/src/components/demo-card.js

@@ -38,9 +38,9 @@ class DemoCard extends PolymerElement {
         }
       </style>
       <h2>[[config.heading]]</h2>
-      <div class='root'>
+      <div class="root">
         <div id="card"></div>
-        <template is='dom-if' if='[[showConfig]]'>
+        <template is="dom-if" if="[[showConfig]]">
           <pre>[[_trim(config.config)]]</pre>
         </template>
       </div>

gallery/src/components/demo-cards.js

@@ -25,18 +25,18 @@ class DemoCards extends PolymerElement {
         }
       </style>
       <app-toolbar>
-        <div class='filters'>
+        <div class="filters">
-          <paper-toggle-button
+          <paper-toggle-button checked="{{_showConfig}}"
-            checked='{{_showConfig}}'
+            >Show config</paper-toggle-button
-          >Show config</paper-toggle-button>
+          >
         </div>
       </app-toolbar>
-      <div class='cards'>
+      <div class="cards">
-        <template is='dom-repeat' items='[[configs]]'>
+        <template is="dom-repeat" items="[[configs]]">
           <demo-card
-            config='[[item]]'
+            config="[[item]]"
-            show-config='[[_showConfig]]'
+            show-config="[[_showConfig]]"
-            hass='[[hass]]'
+            hass="[[hass]]"
           ></demo-card>
         </template>
       </div>

gallery/src/components/demo-more-info.js

@@ -50,11 +50,11 @@ class DemoMoreInfo extends PolymerElement {
         ></state-card-content>
 
         <more-info-content
-            hass='[[hass]]'
+          hass="[[hass]]"
-            state-obj='[[_stateObj]]'
+          state-obj="[[_stateObj]]"
         ></more-info-content>
       </ha-card>
-        <template is='dom-if' if='[[showConfig]]'>
+      <template is="dom-if" if="[[showConfig]]">
         <pre>[[_jsonEntity(_stateObj)]]</pre>
       </template>
     `;

gallery/src/components/demo-more-infos.js

@@ -25,18 +25,18 @@ class DemoMoreInfos extends PolymerElement {
         }
       </style>
       <app-toolbar>
-        <div class='filters'>
+        <div class="filters">
-          <paper-toggle-button
+          <paper-toggle-button checked="{{_showConfig}}"
-            checked='{{_showConfig}}'
+            >Show entity</paper-toggle-button
-          >Show entity</paper-toggle-button>
+          >
         </div>
       </app-toolbar>
-      <div class='cards'>
+      <div class="cards">
-        <template is='dom-repeat' items='[[entities]]'>
+        <template is="dom-repeat" items="[[entities]]">
           <demo-more-info
-            entity-id='[[item]]'
+            entity-id="[[item]]"
-            show-config='[[_showConfig]]'
+            show-config="[[_showConfig]]"
-            hass='[[hass]]'
+            hass="[[hass]]"
           ></demo-more-info>
         </template>
       </div>

gallery/src/demos/demo-hui-alarm-panel-card.js

@@ -51,7 +51,11 @@ const CONFIGS = [
 class DemoAlarmPanelEntity extends PolymerElement {
   static get template() {
     return html`
-      <demo-cards id='demos' hass='[[hass]]' configs="[[_configs]]"></demo-cards>
+      <demo-cards
+        id="demos"
+        hass="[[hass]]"
+        configs="[[_configs]]"
+      ></demo-cards>
     `;
   }
 

gallery/src/demos/demo-hui-conditional-card.js

@@ -57,8 +57,8 @@ class DemoConditional extends PolymerElement {
   static get template() {
     return html`
       <demo-cards
-        id='demos'
+        id="demos"
-        hass='[[hass]]'
+        hass="[[hass]]"
         configs="[[_configs]]"
       ></demo-cards>
     `;

gallery/src/demos/demo-hui-entities-card.js

@@ -175,10 +175,7 @@ const CONFIGS = [
 class DemoEntities extends PolymerElement {
   static get template() {
     return html`
-      <demo-cards
+      <demo-cards id="demos" configs="[[_configs]]"></demo-cards>
-        id='demos'
-        configs="[[_configs]]"
-      ></demo-cards>
     `;
   }
 

gallery/src/demos/demo-hui-entity-button-card.js

@@ -71,7 +71,11 @@ const CONFIGS = [
 class DemoEntityButtonEntity extends PolymerElement {
   static get template() {
     return html`
-      <demo-cards id='demos' hass='[[hass]]' configs="[[_configs]]"></demo-cards>
+      <demo-cards
+        id="demos"
+        hass="[[hass]]"
+        configs="[[_configs]]"
+      ></demo-cards>
     `;
   }
 

gallery/src/demos/demo-hui-entity-filter-card.js

@@ -92,10 +92,7 @@ const CONFIGS = [
 class DemoFilter extends PolymerElement {
   static get template() {
     return html`
-      <demo-cards
+      <demo-cards id="demos" configs="[[_configs]]"></demo-cards>
-        id='demos'
-        configs="[[_configs]]"
-      ></demo-cards>
     `;
   }
 

gallery/src/demos/demo-hui-glance-card.js

@@ -217,10 +217,7 @@ const CONFIGS = [
 class DemoPicEntity extends PolymerElement {
   static get template() {
     return html`
-      <demo-cards
+      <demo-cards id="demos" configs="[[_configs]]"></demo-cards>
-        id='demos'
-        configs="[[_configs]]"
-      ></demo-cards>
     `;
   }
 

gallery/src/demos/demo-hui-light-card.js

@@ -25,7 +25,7 @@ const CONFIGS = [
 class DemoLightEntity extends PolymerElement {
   static get template() {
     return html`
-      <demo-cards id='demos' configs="[[_configs]]"></demo-cards>
+      <demo-cards id="demos" configs="[[_configs]]"></demo-cards>
     `;
   }
 

gallery/src/demos/demo-hui-media-player-rows.js

@@ -78,8 +78,8 @@ class DemoHuiMediaPlayerRows extends PolymerElement {
   static get template() {
     return html`
       <demo-cards
-        id='demos'
+        id="demos"
-        hass='[[hass]]'
+        hass="[[hass]]"
         configs="[[_configs]]"
       ></demo-cards>
     `;

gallery/src/demos/demo-hui-picture-elements-card.js

@@ -80,10 +80,7 @@ const CONFIGS = [
 class DemoPicElements extends PolymerElement {
   static get template() {
     return html`
-      <demo-cards
+      <demo-cards id="demos" configs="[[_configs]]"></demo-cards>
-        id='demos'
-        configs="[[_configs]]"
-      ></demo-cards>
     `;
   }
 

gallery/src/demos/demo-hui-shopping-list-card.js

@@ -23,10 +23,7 @@ const CONFIGS = [
 class DemoShoppingListEntity extends PolymerElement {
   static get template() {
     return html`
-      <demo-cards
+      <demo-cards id="demos" configs="[[_configs]]"></demo-cards>
-        id='demos'
-        configs="[[_configs]]"
-      ></demo-cards>
     `;
   }
 

gallery/src/demos/demo-hui-stack-card.js

@@ -91,10 +91,7 @@ const CONFIGS = [
 class DemoStack extends PolymerElement {
   static get template() {
     return html`
-      <demo-cards
+      <demo-cards id="demos" configs="[[_configs]]"></demo-cards>
-        id='demos'
-        configs="[[_configs]]"
-      ></demo-cards>
     `;
   }
 

gallery/src/demos/demo-hui-thermostat-card.js

@@ -62,10 +62,7 @@ const CONFIGS = [
 class DemoThermostatEntity extends PolymerElement {
   static get template() {
     return html`
-      <demo-cards
+      <demo-cards id="demos" configs="[[_configs]]"></demo-cards>
-        id='demos'
-        configs="[[_configs]]"
-      ></demo-cards>
     `;
   }
 

gallery/src/demos/demo-more-info-light.js

@@ -34,8 +34,8 @@ class DemoMoreInfoLight extends PolymerElement {
   static get template() {
     return html`
       <demo-more-infos
-        hass='[[hass]]'
+        hass="[[hass]]"
-        entities='[[_entities]]'
+        entities="[[_entities]]"
       ></demo-more-infos>
     `;
   }

hassio/src/addon-store/hassio-addon-repository.js

@@ -24,19 +24,33 @@ class HassioAddonRepository extends NavigateMixin(PolymerElement) {
             [[repo.name]]
             <div class="description">
               Maintained by [[repo.maintainer]]
-            <a class="repo" href="[[repo.url]]" target="_blank">[[repo.url]]</a>
+              <a class="repo" href="[[repo.url]]" target="_blank"
+                >[[repo.url]]</a
+              >
             </div>
           </div>
-        <template is="dom-repeat" items="[[addons]]" as="addon" sort="sortAddons">
+          <template
+            is="dom-repeat"
+            items="[[addons]]"
+            as="addon"
+            sort="sortAddons"
+          >
             <paper-card on-click="addonTapped">
               <div class="card-content">
-              <hassio-card-content hass="[[hass]]" title="[[addon.name]]" description="[[addon.description]]" icon="[[computeIcon(addon)]]" icon-title="[[computeIconTitle(addon)]]" icon-class="[[computeIconClass(addon)]]"></hassio-card-content>
+                <hassio-card-content
+                  hass="[[hass]]"
+                  title="[[addon.name]]"
+                  description="[[addon.description]]"
+                  icon="[[computeIcon(addon)]]"
+                  icon-title="[[computeIconTitle(addon)]]"
+                  icon-class="[[computeIconClass(addon)]]"
+                ></hassio-card-content>
               </div>
             </paper-card>
           </template>
         </div>
       </template>
-`;
+    `;
   }
 
   static get properties() {

hassio/src/addon-store/hassio-addon-store.js

@@ -12,12 +12,19 @@ class HassioAddonStore extends PolymerElement {
           margin-top: 24px;
         }
       </style>
-    <hassio-repositories-editor hass="[[hass]]" repos="[[repos]]"></hassio-repositories-editor>
+      <hassio-repositories-editor
+        hass="[[hass]]"
+        repos="[[repos]]"
+      ></hassio-repositories-editor>
 
       <template is="dom-repeat" items="[[repos]]" as="repo" sort="sortRepos">
-      <hassio-addon-repository hass="[[hass]]" repo="[[repo]]" addons="[[computeAddons(repo.slug)]]"></hassio-addon-repository>
+        <hassio-addon-repository
+          hass="[[hass]]"
+          repo="[[repo]]"
+          addons="[[computeAddons(repo.slug)]]"
+        ></hassio-addon-repository>
       </template>
-`;
+    `;
   }
 
   static get properties() {

hassio/src/addon-store/hassio-repositories-editor.js

@@ -32,27 +32,52 @@ class HassioRepositoriesEditor extends PolymerElement {
             Configure which add-on repositories to fetch data from:
           </div>
         </div>
-      <template id="list" is="dom-repeat" items="[[repoList]]" as="repo" sort="sortRepos">
+        <template
+          id="list"
+          is="dom-repeat"
+          items="[[repoList]]"
+          as="repo"
+          sort="sortRepos"
+        >
           <paper-card>
             <div class="card-content">
-            <hassio-card-content hass="[[hass]]" title="[[repo.name]]" description="[[repo.url]]" icon="hassio:github-circle"></hassio-card-content>
+              <hassio-card-content
+                hass="[[hass]]"
+                title="[[repo.name]]"
+                description="[[repo.url]]"
+                icon="hassio:github-circle"
+              ></hassio-card-content>
             </div>
             <div class="card-actions">
-            <ha-call-api-button hass="[[hass]]" path="hassio/supervisor/options" data="[[computeRemoveRepoData(repoList, repo.url)]]" class="warning">Remove</ha-call-api-button>
+              <ha-call-api-button
+                hass="[[hass]]"
+                path="hassio/supervisor/options"
+                data="[[computeRemoveRepoData(repoList, repo.url)]]"
+                class="warning"
+                >Remove</ha-call-api-button
+              >
             </div>
           </paper-card>
         </template>
         <paper-card>
           <div class="card-content add">
             <iron-icon icon="hassio:github-circle"></iron-icon>
-          <paper-input label="Add new repository by URL" value="{{repoUrl}}"></paper-input>
+            <paper-input
+              label="Add new repository by URL"
+              value="{{repoUrl}}"
+            ></paper-input>
           </div>
           <div class="card-actions">
-          <ha-call-api-button hass="[[hass]]" path="hassio/supervisor/options" data="[[computeAddRepoData(repoList, repoUrl)]]">Add</ha-call-api-button>
+            <ha-call-api-button
+              hass="[[hass]]"
+              path="hassio/supervisor/options"
+              data="[[computeAddRepoData(repoList, repoUrl)]]"
+              >Add</ha-call-api-button
+            >
           </div>
         </paper-card>
       </div>
-`;
+    `;
   }
 
   static get properties() {

hassio/src/addon-view/hassio-addon-audio.js

@@ -38,16 +38,28 @@ class HassioAddonAudio extends EventsMixin(PolymerElement) {
           </template>
 
           <paper-dropdown-menu label="Input">
-          <paper-listbox slot="dropdown-content" attr-for-selected="device" selected="{{selectedInput}}">
+            <paper-listbox
+              slot="dropdown-content"
+              attr-for-selected="device"
+              selected="{{selectedInput}}"
+            >
               <template is="dom-repeat" items="[[inputDevices]]">
-              <paper-item device\$="[[item.device]]">[[item.name]]</paper-item>
+                <paper-item device\$="[[item.device]]"
+                  >[[item.name]]</paper-item
+                >
               </template>
             </paper-listbox>
           </paper-dropdown-menu>
           <paper-dropdown-menu label="Output">
-          <paper-listbox slot="dropdown-content" attr-for-selected="device" selected="{{selectedOutput}}">
+            <paper-listbox
+              slot="dropdown-content"
+              attr-for-selected="device"
+              selected="{{selectedOutput}}"
+            >
               <template is="dom-repeat" items="[[outputDevices]]">
-              <paper-item device\$="[[item.device]]">[[item.name]]</paper-item>
+                <paper-item device\$="[[item.device]]"
+                  >[[item.name]]</paper-item
+                >
               </template>
             </paper-listbox>
           </paper-dropdown-menu>
@@ -56,7 +68,7 @@ class HassioAddonAudio extends EventsMixin(PolymerElement) {
           <paper-button on-click="_saveSettings">Save</paper-button>
         </div>
       </paper-card>
-`;
+    `;
   }
 
   static get properties() {

hassio/src/addon-view/hassio-addon-config.js

@@ -37,14 +37,25 @@ class HassioAddonConfig extends PolymerElement {
           <template is="dom-if" if="[[error]]">
             <div class="errors">[[error]]</div>
           </template>
-        <iron-autogrow-textarea id="config" value="{{config}}"></iron-autogrow-textarea>
+          <iron-autogrow-textarea
+            id="config"
+            value="{{config}}"
+          ></iron-autogrow-textarea>
         </div>
         <div class="card-actions">
-        <ha-call-api-button class="warning" hass="[[hass]]" path="hassio/addons/[[addonSlug]]/options" data="[[resetData]]">Reset to defaults</ha-call-api-button>
+          <ha-call-api-button
-        <paper-button on-click="saveTapped" disabled="[[!configParsed]]">Save</paper-button>
+            class="warning"
+            hass="[[hass]]"
+            path="hassio/addons/[[addonSlug]]/options"
+            data="[[resetData]]"
+            >Reset to defaults</ha-call-api-button
+          >
+          <paper-button on-click="saveTapped" disabled="[[!configParsed]]"
+            >Save</paper-button
+          >
         </div>
       </paper-card>
-`;
+    `;
   }
 
   static get properties() {

hassio/src/addon-view/hassio-addon-info.js

@@ -42,7 +42,7 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
           margin: 16px 0;
           display: block;
         }
-      .state div{
+        .state div {
           width: 150px;
           display: inline-block;
         }
@@ -69,10 +69,20 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
       <template is="dom-if" if="[[computeUpdateAvailable(addon)]]">
         <paper-card heading="Update available! 🎉">
           <div class="card-content">
-          <hassio-card-content hass="[[hass]]" title="[[addon.name]] [[addon.last_version]] is available" description="You are currently running version [[addon.version]]" icon="hassio:arrow-up-bold-circle" icon-class="update"></hassio-card-content>
+            <hassio-card-content
+              hass="[[hass]]"
+              title="[[addon.name]] [[addon.last_version]] is available"
+              description="You are currently running version [[addon.version]]"
+              icon="hassio:arrow-up-bold-circle"
+              icon-class="update"
+            ></hassio-card-content>
           </div>
           <div class="card-actions">
-          <ha-call-api-button hass="[[hass]]" path="hassio/addons/[[addonSlug]]/update">Update</ha-call-api-button>
+            <ha-call-api-button
+              hass="[[hass]]"
+              path="hassio/addons/[[addonSlug]]/update"
+              >Update</ha-call-api-button
+            >
             <template is="dom-if" if="[[addon.changelog]]">
               <paper-button on-click="openChangelog">Changelog</paper-button>
             </template>
@@ -82,15 +92,24 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
 
       <paper-card>
         <div class="card-content">
-        <div class="addon-header">[[addon.name]]
+          <div class="addon-header">
+            [[addon.name]]
             <div class="addon-version light-color">
               <template is="dom-if" if="[[addon.version]]">
                 [[addon.version]]
                 <template is="dom-if" if="[[isRunning]]">
-                <iron-icon title="Add-on is running" class="running" icon="hassio:circle"></iron-icon>
+                  <iron-icon
+                    title="Add-on is running"
+                    class="running"
+                    icon="hassio:circle"
+                  ></iron-icon>
                 </template>
                 <template is="dom-if" if="[[!isRunning]]">
-                <iron-icon title="Add-on is stopped" class="stopped" icon="hassio:circle"></iron-icon>
+                  <iron-icon
+                    title="Add-on is stopped"
+                    class="stopped"
+                    icon="hassio:circle"
+                  ></iron-icon>
                 </template>
               </template>
               <template is="dom-if" if="[[!addon.version]]">
@@ -99,44 +118,86 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
             </div>
           </div>
           <div class="description light-color">
-          [[addon.description]].<br>
+            [[addon.description]].<br />
-          Visit <a href="[[addon.url]]" target="_blank">[[addon.name]] page</a> for details.
+            Visit
+            <a href="[[addon.url]]" target="_blank">[[addon.name]] page</a> for
+            details.
           </div>
           <template is="dom-if" if="[[addon.logo]]">
             <a href="[[addon.url]]" target="_blank" class="logo">
-            <img src="/api/hassio/addons/[[addonSlug]]/logo">
+              <img src="/api/hassio/addons/[[addonSlug]]/logo" />
             </a>
           </template>
           <template is="dom-if" if="[[addon.version]]">
             <div class="state">
               <div>Start on boot</div>
-            <paper-toggle-button on-change="startOnBootToggled" checked="[[computeStartOnBoot(addon.boot)]]"></paper-toggle-button>
+              <paper-toggle-button
+                on-change="startOnBootToggled"
+                checked="[[computeStartOnBoot(addon.boot)]]"
+              ></paper-toggle-button>
             </div>
             <div class="state">
               <div>Auto update</div>
-            <paper-toggle-button on-change="autoUpdateToggled" checked="[[addon.auto_update]]"></paper-toggle-button>
+              <paper-toggle-button
+                on-change="autoUpdateToggled"
+                checked="[[addon.auto_update]]"
+              ></paper-toggle-button>
             </div>
           </template>
         </div>
         <div class="card-actions">
           <template is="dom-if" if="[[addon.version]]">
-          <paper-button class="warning" on-click="_unistallClicked">Uninstall</paper-button>
+            <paper-button class="warning" on-click="_unistallClicked"
+              >Uninstall</paper-button
+            >
             <template is="dom-if" if="[[addon.build]]">
-            <ha-call-api-button class="warning" hass="[[hass]]" path="hassio/addons/[[addonSlug]]/rebuild">Rebuild</ha-call-api-button>
+              <ha-call-api-button
+                class="warning"
+                hass="[[hass]]"
+                path="hassio/addons/[[addonSlug]]/rebuild"
+                >Rebuild</ha-call-api-button
+              >
             </template>
             <template is="dom-if" if="[[isRunning]]">
-            <ha-call-api-button class="warning" hass="[[hass]]" path="hassio/addons/[[addonSlug]]/restart">Restart</ha-call-api-button>
+              <ha-call-api-button
-            <ha-call-api-button class="warning" hass="[[hass]]" path="hassio/addons/[[addonSlug]]/stop">Stop</ha-call-api-button>
+                class="warning"
+                hass="[[hass]]"
+                path="hassio/addons/[[addonSlug]]/restart"
+                >Restart</ha-call-api-button
+              >
+              <ha-call-api-button
+                class="warning"
+                hass="[[hass]]"
+                path="hassio/addons/[[addonSlug]]/stop"
+                >Stop</ha-call-api-button
+              >
             </template>
             <template is="dom-if" if="[[!isRunning]]">
-            <ha-call-api-button hass="[[hass]]" path="hassio/addons/[[addonSlug]]/start">Start</ha-call-api-button>
+              <ha-call-api-button
+                hass="[[hass]]"
+                path="hassio/addons/[[addonSlug]]/start"
+                >Start</ha-call-api-button
+              >
             </template>
-          <template is="dom-if" if="[[computeShowWebUI(addon.webui, isRunning)]]">
+            <template
-            <a href="[[pathWebui(addon.webui)]]" tabindex="-1" target="_blank" class="right"><paper-button>Open web UI</paper-button></a>
+              is="dom-if"
+              if="[[computeShowWebUI(addon.webui, isRunning)]]"
+            >
+              <a
+                href="[[pathWebui(addon.webui)]]"
+                tabindex="-1"
+                target="_blank"
+                class="right"
+                ><paper-button>Open web UI</paper-button></a
+              >
             </template>
           </template>
           <template is="dom-if" if="[[!addon.version]]">
-          <ha-call-api-button hass="[[hass]]" path="hassio/addons/[[addonSlug]]/install">Install</ha-call-api-button>
+            <ha-call-api-button
+              hass="[[hass]]"
+              path="hassio/addons/[[addonSlug]]/install"
+              >Install</ha-call-api-button
+            >
           </template>
         </div>
       </paper-card>
@@ -147,7 +208,7 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
           </div>
         </paper-card>
       </template>
-`;
+    `;
   }
 
   static get properties() {

hassio/src/addon-view/hassio-addon-logs.js

@@ -18,14 +18,12 @@ class HassioAddonLogs extends PolymerElement {
         }
       </style>
       <paper-card heading="Log">
-      <div class="card-content">
+        <div class="card-content"><pre>[[log]]</pre></div>
-        <pre>[[log]]</pre>
-      </div>
         <div class="card-actions">
           <paper-button on-click="refresh">Refresh</paper-button>
         </div>
       </paper-card>
-`;
+    `;
   }
 
   static get properties() {

hassio/src/addon-view/hassio-addon-network.js

@@ -33,28 +33,37 @@ class HassioAddonNetwork extends EventsMixin(PolymerElement) {
           </template>
 
           <table>
-          <tbody><tr>
+            <tbody>
+              <tr>
                 <th>Container</th>
                 <th>Host</th>
               </tr>
               <template is="dom-repeat" items="[[config]]">
                 <tr>
+                  <td>[[item.container]]</td>
                   <td>
-                [[item.container]]
+                    <paper-input
-              </td>
+                      value="{{item.host}}"
-              <td>
+                      no-label-float=""
-                <paper-input value="{{item.host}}" no-label-float=""></paper-input>
+                    ></paper-input>
                   </td>
                 </tr>
               </template>
-        </tbody></table>
+            </tbody>
+          </table>
         </div>
         <div class="card-actions">
-        <ha-call-api-button class="warning" hass="[[hass]]" path="hassio/addons/[[addonSlug]]/options" data="[[resetData]]">Reset to defaults</ha-call-api-button>
+          <ha-call-api-button
+            class="warning"
+            hass="[[hass]]"
+            path="hassio/addons/[[addonSlug]]/options"
+            data="[[resetData]]"
+            >Reset to defaults</ha-call-api-button
+          >
           <paper-button on-click="saveTapped">Save</paper-button>
         </div>
       </paper-card>
-`;
+    `;
   }
 
   static get properties() {

hassio/src/addon-view/hassio-addon-view.js

@@ -51,36 +51,69 @@ class HassioAddonView extends PolymerElement {
           }
         }
       </style>
-    <app-route route="[[route]]" pattern="/addon/:slug" data="{{routeData}}" active="{{routeMatches}}"></app-route>
+      <app-route
+        route="[[route]]"
+        pattern="/addon/:slug"
+        data="{{routeData}}"
+        active="{{routeMatches}}"
+      ></app-route>
       <app-header-layout has-scrolling-region="">
         <app-header fixed="" slot="header">
           <app-toolbar>
-          <ha-menu-button hassio narrow="[[narrow]]" show-menu="[[showMenu]]"></ha-menu-button>
+            <ha-menu-button
-          <paper-icon-button icon="hassio:arrow-left" on-click="backTapped"></paper-icon-button>
+              hassio
+              narrow="[[narrow]]"
+              show-menu="[[showMenu]]"
+            ></ha-menu-button>
+            <paper-icon-button
+              icon="hassio:arrow-left"
+              on-click="backTapped"
+            ></paper-icon-button>
             <div main-title="">Hass.io: add-on details</div>
           </app-toolbar>
         </app-header>
         <div class="content">
-        <hassio-addon-info hass="[[hass]]" addon="[[addon]]" addon-slug="[[routeData.slug]]"></hassio-addon-info>
+          <hassio-addon-info
+            hass="[[hass]]"
+            addon="[[addon]]"
+            addon-slug="[[routeData.slug]]"
+          ></hassio-addon-info>
 
           <template is="dom-if" if="[[addon.version]]">
-          <hassio-addon-config hass="[[hass]]" addon="[[addon]]" addon-slug="[[routeData.slug]]"></hassio-addon-config>
+            <hassio-addon-config
+              hass="[[hass]]"
+              addon="[[addon]]"
+              addon-slug="[[routeData.slug]]"
+            ></hassio-addon-config>
 
             <template is="dom-if" if="[[addon.audio]]">
-            <hassio-addon-audio hass="[[hass]]" addon="[[addon]]"></hassio-addon-audio>
+              <hassio-addon-audio
+                hass="[[hass]]"
+                addon="[[addon]]"
+              ></hassio-addon-audio>
             </template>
 
             <template is="dom-if" if="[[addon.network]]">
-            <hassio-addon-network hass="[[hass]]" addon="[[addon]]" addon-slug="[[routeData.slug]]"></hassio-addon-network>
+              <hassio-addon-network
+                hass="[[hass]]"
+                addon="[[addon]]"
+                addon-slug="[[routeData.slug]]"
+              ></hassio-addon-network>
             </template>
 
-          <hassio-addon-logs hass="[[hass]]" addon-slug="[[routeData.slug]]"></hassio-addon-logs>
+            <hassio-addon-logs
+              hass="[[hass]]"
+              addon-slug="[[routeData.slug]]"
+            ></hassio-addon-logs>
           </template>
         </div>
       </app-header-layout>
 
-    <hassio-markdown-dialog title="[[markdownTitle]]" content="[[markdownContent]]"></hassio-markdown-dialog>
+      <hassio-markdown-dialog
-`;
+        title="[[markdownTitle]]"
+        content="[[markdownContent]]"
+      ></hassio-markdown-dialog>
+    `;
   }
 
   static get properties() {

hassio/src/components/hassio-card-content.js

@@ -42,7 +42,11 @@ class HassioCardContent extends PolymerElement {
           display: block;
         }
       </style>
-    <iron-icon icon="[[icon]]" class\$="[[iconClass]]" title="[[iconTitle]]"></iron-icon>
+      <iron-icon
+        icon="[[icon]]"
+        class\$="[[iconClass]]"
+        title="[[iconTitle]]"
+      ></iron-icon>
       <div>
         <div class="title">[[title]]</div>
         <div class="addition">
@@ -50,11 +54,15 @@ class HassioCardContent extends PolymerElement {
             [[description]]
           </template>
           <template is="dom-if" if="[[datetime]]">
-          <ha-relative-time hass="[[hass]]" class="addition" datetime="[[datetime]]"></ha-relative-time>
+            <ha-relative-time
+              hass="[[hass]]"
+              class="addition"
+              datetime="[[datetime]]"
+            ></ha-relative-time>
           </template>
         </div>
       </div>
-`;
+    `;
   }
 
   static get properties() {

hassio/src/dashboard/hassio-addons.js

@@ -19,19 +19,33 @@ class HassioAddons extends NavigateMixin(PolymerElement) {
         <template is="dom-if" if="[[!addons.length]]">
           <paper-card>
             <div class="card-content">
-            You don't have any add-ons installed yet. Head over to <a href="#" on-click="openStore">the add-on store</a> to get started!
+              You don't have any add-ons installed yet. Head over to
+              <a href="#" on-click="openStore">the add-on store</a> to get
+              started!
             </div>
           </paper-card>
         </template>
-      <template is="dom-repeat" items="[[addons]]" as="addon" sort="sortAddons">
+        <template
+          is="dom-repeat"
+          items="[[addons]]"
+          as="addon"
+          sort="sortAddons"
+        >
           <paper-card on-click="addonTapped">
             <div class="card-content">
-            <hassio-card-content hass="[[hass]]" title="[[addon.name]]" description="[[addon.description]]" icon="[[computeIcon(addon)]]" icon-title="[[computeIconTitle(addon)]]" icon-class="[[computeIconClass(addon)]]"></hassio-card-content>
+              <hassio-card-content
+                hass="[[hass]]"
+                title="[[addon.name]]"
+                description="[[addon.description]]"
+                icon="[[computeIcon(addon)]]"
+                icon-title="[[computeIconTitle(addon)]]"
+                icon-class="[[computeIconClass(addon)]]"
+              ></hassio-card-content>
             </div>
           </paper-card>
         </template>
       </div>
-`;
+    `;
   }
 
   static get properties() {

hassio/src/dashboard/hassio-dashboard.js

@@ -14,10 +14,16 @@ class HassioDashboard extends EventsMixin(PolymerElement) {
         }
       </style>
       <div class="content">
-      <hassio-hass-update hass="[[hass]]" hass-info="[[hassInfo]]"></hassio-hass-update>
+        <hassio-hass-update
-      <hassio-addons hass="[[hass]]" addons="[[supervisorInfo.addons]]"></hassio-addons>
+          hass="[[hass]]"
+          hass-info="[[hassInfo]]"
+        ></hassio-hass-update>
+        <hassio-addons
+          hass="[[hass]]"
+          addons="[[supervisorInfo.addons]]"
+        ></hassio-addons>
       </div>
-`;
+    `;
   }
 
   static get properties() {

hassio/src/dashboard/hassio-hass-update.js

@@ -29,21 +29,41 @@ class HassioHassUpdate extends PolymerElement {
             <div class="title">Update available! 🎉</div>
             <paper-card>
               <div class="card-content">
-              <hassio-card-content hass="[[hass]]" title="Home Assistant [[hassInfo.last_version]] is available" description="You are currently running version [[hassInfo.version]]" icon="hassio:home-assistant" icon-class="hassupdate"></hassio-card-content>
+                <hassio-card-content
+                  hass="[[hass]]"
+                  title="Home Assistant [[hassInfo.last_version]] is available"
+                  description="You are currently running version [[hassInfo.version]]"
+                  icon="hassio:home-assistant"
+                  icon-class="hassupdate"
+                ></hassio-card-content>
                 <template is="dom-if" if="[[error]]">
                   <div class="error">Error: [[error]]</div>
                 </template>
-              <p><a href='https://www.home-assistant.io/latest-release-notes/' target='_blank'>Read the release notes</a></p>
+                <p>
+                  <a
+                    href="https://www.home-assistant.io/latest-release-notes/"
+                    target="_blank"
+                    >Read the release notes</a
+                  >
+                </p>
               </div>
               <div class="card-actions">
-              <ha-call-api-button hass="[[hass]]" path="hassio/homeassistant/update">Update</ha-call-api-button>
+                <ha-call-api-button
-              <a href="https://github.com/home-assistant/home-assistant/releases" target="_blank"><paper-button>Release notes</paper-button></a>
+                  hass="[[hass]]"
+                  path="hassio/homeassistant/update"
+                  >Update</ha-call-api-button
+                >
+                <a
+                  href="https://github.com/home-assistant/home-assistant/releases"
+                  target="_blank"
+                  ><paper-button>Release notes</paper-button></a
+                >
               </div>
             </paper-card>
           </div>
         </div>
       </template>
-`;
+    `;
   }
 
   static get properties() {

hassio/src/hassio-app.js

@@ -8,9 +8,14 @@ class HassioApp extends PolymerElement {
   static get template() {
     return html`
       <template is="dom-if" if="[[hass]]">
-      <hassio-main hass="[[hass]]" narrow="[[narrow]]" show-menu="[[showMenu]]" route="[[route]]"></hassio-main>
+        <hassio-main
+          hass="[[hass]]"
+          narrow="[[narrow]]"
+          show-menu="[[showMenu]]"
+          route="[[route]]"
+        ></hassio-main>
       </template>
-`;
+    `;
   }
 
   static get properties() {

hassio/src/hassio-main.js

@@ -14,22 +14,48 @@ import NavigateMixin from "../../src/mixins/navigate-mixin";
 class HassioMain extends EventsMixin(NavigateMixin(PolymerElement)) {
   static get template() {
     return html`
-    <app-route route="[[route]]" pattern="/:page" data="{{routeData}}"></app-route>
+      <app-route
-    <hassio-data id="data" hass="[[hass]]" supervisor="{{supervisorInfo}}" homeassistant="{{hassInfo}}" host="{{hostInfo}}"></hassio-data>
+        route="[[route]]"
+        pattern="/:page"
+        data="{{routeData}}"
+      ></app-route>
+      <hassio-data
+        id="data"
+        hass="[[hass]]"
+        supervisor="{{supervisorInfo}}"
+        homeassistant="{{hassInfo}}"
+        host="{{hostInfo}}"
+      ></hassio-data>
 
       <template is="dom-if" if="[[!loaded]]">
-      <hass-loading-screen narrow="[[narrow]]" show-menu="[[showMenu]]"></hass-loading-screen>
+        <hass-loading-screen
+          narrow="[[narrow]]"
+          show-menu="[[showMenu]]"
+        ></hass-loading-screen>
       </template>
 
       <template is="dom-if" if="[[loaded]]">
         <template is="dom-if" if="[[!equalsAddon(routeData.page)]]">
-        <hassio-pages-with-tabs hass="[[hass]]" narrow="[[narrow]]" show-menu="[[showMenu]]" page="[[routeData.page]]" supervisor-info="[[supervisorInfo]]" hass-info="[[hassInfo]]" host-info="[[hostInfo]]"></hassio-pages-with-tabs>
+          <hassio-pages-with-tabs
+            hass="[[hass]]"
+            narrow="[[narrow]]"
+            show-menu="[[showMenu]]"
+            page="[[routeData.page]]"
+            supervisor-info="[[supervisorInfo]]"
+            hass-info="[[hassInfo]]"
+            host-info="[[hostInfo]]"
+          ></hassio-pages-with-tabs>
         </template>
         <template is="dom-if" if="[[equalsAddon(routeData.page)]]">
-        <hassio-addon-view hass="[[hass]]" narrow="[[narrow]]" show-menu="[[showMenu]]" route="[[route]]"></hassio-addon-view>
+          <hassio-addon-view
+            hass="[[hass]]"
+            narrow="[[narrow]]"
+            show-menu="[[showMenu]]"
+            route="[[route]]"
+          ></hassio-addon-view>
         </template>
       </template>
-`;
+    `;
   }
 
   static get properties() {

hassio/src/hassio-markdown-dialog.js

@@ -52,14 +52,17 @@ class HassioMarkdownDialog extends PolymerElement {
       </style>
       <paper-dialog id="dialog" with-backdrop="">
         <app-toolbar>
-        <paper-icon-button icon="hassio:close" dialog-dismiss=""></paper-icon-button>
+          <paper-icon-button
+            icon="hassio:close"
+            dialog-dismiss=""
+          ></paper-icon-button>
           <div main-title="">[[title]]</div>
         </app-toolbar>
         <paper-dialog-scrollable>
           <ha-markdown content="[[content]]"></ha-markdown>
         </paper-dialog-scrollable>
       </paper-dialog>
-`;
+    `;
   }
 
   static get properties() {

hassio/src/hassio-pages-with-tabs.js

@@ -30,20 +30,32 @@ class HassioPagesWithTabs extends NavigateMixin(PolymerElement) {
         }
         paper-tabs {
           margin-left: 12px;
-        --paper-tabs-selection-bar-color: #FFF;
+          --paper-tabs-selection-bar-color: #fff;
           text-transform: uppercase;
         }
       </style>
       <app-header-layout id="layout" has-scrolling-region>
         <app-header fixed slot="header">
           <app-toolbar>
-          <ha-menu-button hassio narrow="[[narrow]]" show-menu="[[showMenu]]"></ha-menu-button>
+            <ha-menu-button
+              hassio
+              narrow="[[narrow]]"
+              show-menu="[[showMenu]]"
+            ></ha-menu-button>
             <div main-title>Hass.io</div>
             <template is="dom-if" if="[[showRefreshButton(page)]]">
-            <paper-icon-button icon="hassio:refresh" on-click="refreshClicked"></paper-icon-button>
+              <paper-icon-button
+                icon="hassio:refresh"
+                on-click="refreshClicked"
+              ></paper-icon-button>
             </template>
           </app-toolbar>
-        <paper-tabs scrollable="" selected="[[page]]" attr-for-selected="page-name" on-iron-activate="handlePageSelected">
+          <paper-tabs
+            scrollable=""
+            selected="[[page]]"
+            attr-for-selected="page-name"
+            on-iron-activate="handlePageSelected"
+          >
             <paper-tab page-name="dashboard">Dashboard</paper-tab>
             <paper-tab page-name="snapshots">Snapshots</paper-tab>
             <paper-tab page-name="store">Add-on store</paper-tab>
@@ -51,25 +63,45 @@ class HassioPagesWithTabs extends NavigateMixin(PolymerElement) {
           </paper-tabs>
         </app-header>
         <template is="dom-if" if="[[equals(page, &quot;dashboard&quot;)]]">
-        <hassio-dashboard hass="[[hass]]" supervisor-info="[[supervisorInfo]]" hass-info="[[hassInfo]]"></hassio-dashboard>
+          <hassio-dashboard
+            hass="[[hass]]"
+            supervisor-info="[[supervisorInfo]]"
+            hass-info="[[hassInfo]]"
+          ></hassio-dashboard>
         </template>
         <template is="dom-if" if="[[equals(page, &quot;snapshots&quot;)]]">
-        <hassio-snapshots hass="[[hass]]" installed-addons="[[supervisorInfo.addons]]" snapshot-slug="{{snapshotSlug}}" snapshot-deleted="{{snapshotDeleted}}"></hassio-snapshots>
+          <hassio-snapshots
+            hass="[[hass]]"
+            installed-addons="[[supervisorInfo.addons]]"
+            snapshot-slug="{{snapshotSlug}}"
+            snapshot-deleted="{{snapshotDeleted}}"
+          ></hassio-snapshots>
         </template>
         <template is="dom-if" if="[[equals(page, &quot;store&quot;)]]">
           <hassio-addon-store hass="[[hass]]"></hassio-addon-store>
         </template>
         <template is="dom-if" if="[[equals(page, &quot;system&quot;)]]">
-        <hassio-system hass="[[hass]]" supervisor-info="[[supervisorInfo]]" host-info="[[hostInfo]]"></hassio-system>
+          <hassio-system
+            hass="[[hass]]"
+            supervisor-info="[[supervisorInfo]]"
+            host-info="[[hostInfo]]"
+          ></hassio-system>
         </template>
       </app-header-layout>
 
-    <hassio-markdown-dialog title="[[markdownTitle]]" content="[[markdownContent]]"></hassio-markdown-dialog>
+      <hassio-markdown-dialog
+        title="[[markdownTitle]]"
+        content="[[markdownContent]]"
+      ></hassio-markdown-dialog>
 
       <template is="dom-if" if="[[equals(page, &quot;snapshots&quot;)]]">
-      <hassio-snapshot hass="[[hass]]" snapshot-slug="{{snapshotSlug}}" snapshot-deleted="{{snapshotDeleted}}"></hassio-snapshot>
+        <hassio-snapshot
+          hass="[[hass]]"
+          snapshot-slug="{{snapshotSlug}}"
+          snapshot-deleted="{{snapshotDeleted}}"
+        ></hassio-snapshot>
       </template>
-`;
+    `;
   }
 
   static get properties() {

hassio/src/snapshots/hassio-snapshot.js

@@ -56,13 +56,20 @@ class HassioSnapshot extends PolymerElement {
           color: var(--google-red-500);
         }
       </style>
-    <paper-dialog id="dialog" with-backdrop="" on-iron-overlay-closed="_dialogClosed">
+      <paper-dialog
+        id="dialog"
+        with-backdrop=""
+        on-iron-overlay-closed="_dialogClosed"
+      >
         <app-toolbar>
-        <paper-icon-button icon="hassio:close" dialog-dismiss=""></paper-icon-button>
+          <paper-icon-button
+            icon="hassio:close"
+            dialog-dismiss=""
+          ></paper-icon-button>
           <div main-title="">[[_computeName(snapshot)]]</div>
         </app-toolbar>
         <div class="details">
-        [[_computeType(snapshot.type)]] ([[_computeSize(snapshot.size)]])<br>
+          [[_computeType(snapshot.type)]] ([[_computeSize(snapshot.size)]])<br />
           [[_formatDatetime(snapshot.date)]]
         </div>
         <div>Home Assistant:</div>
@@ -80,32 +87,56 @@ class HassioSnapshot extends PolymerElement {
         <template is="dom-if" if="[[snapshot.addons.length]]">
           <div>Add-ons:</div>
           <paper-dialog-scrollable>
-          <template is="dom-repeat" items="[[snapshot.addons]]" sort="_sortAddons">
+            <template
+              is="dom-repeat"
+              items="[[snapshot.addons]]"
+              sort="_sortAddons"
+            >
               <paper-checkbox checked="{{item.checked}}">
-              [[item.name]]
+                [[item.name]] <span class="details">([[item.version]])</span>
-              <span class="details">([[item.version]])</span>
               </paper-checkbox>
             </template>
           </paper-dialog-scrollable>
         </template>
         <template is="dom-if" if="[[snapshot.protected]]">
-        <paper-input autofocus="" label="Password" type="password" value="{{snapshotPassword}}"></paper-input>
+          <paper-input
+            autofocus=""
+            label="Password"
+            type="password"
+            value="{{snapshotPassword}}"
+          ></paper-input>
         </template>
         <template is="dom-if" if="[[error]]">
           <p class="error">Error: [[error]]</p>
         </template>
         <div class="buttons">
-        <paper-icon-button icon="hassio:delete" on-click="_deleteClicked" class="warning" title="Delete snapshot"></paper-icon-button>
+          <paper-icon-button
-        <a href="[[_computeDownloadUrl(snapshotSlug)]]" download="[[_computeDownloadName(snapshot)]]">
+            icon="hassio:delete"
-          <paper-icon-button icon="hassio:download" class="download" title="Download snapshot"></paper-icon-button>
+            on-click="_deleteClicked"
+            class="warning"
+            title="Delete snapshot"
+          ></paper-icon-button>
+          <a
+            href="[[_computeDownloadUrl(snapshotSlug)]]"
+            download="[[_computeDownloadName(snapshot)]]"
+          >
+            <paper-icon-button
+              icon="hassio:download"
+              class="download"
+              title="Download snapshot"
+            ></paper-icon-button>
           </a>
-        <paper-button on-click="_partialRestoreClicked">Restore selected</paper-button>
+          <paper-button on-click="_partialRestoreClicked"
+            >Restore selected</paper-button
+          >
           <template is="dom-if" if="[[_isFullSnapshot(snapshot.type)]]">
-          <paper-button on-click="_fullRestoreClicked">Wipe &amp; restore</paper-button>
+            <paper-button on-click="_fullRestoreClicked"
+              >Wipe &amp; restore</paper-button
+            >
           </template>
         </div>
       </paper-dialog>
-`;
+    `;
   }
 
   static get properties() {

hassio/src/snapshots/hassio-snapshots.js

@@ -36,13 +36,17 @@ class HassioSnapshots extends EventsMixin(PolymerElement) {
           <div class="title">
             Create snapshot
             <div class="description">
-            Snapshots allow you to easily backup and
+              Snapshots allow you to easily backup and restore all data of your
-            restore all data of your Hass.io instance.
+              Hass.io instance.
             </div>
           </div>
           <paper-card>
             <div class="card-content">
-            <paper-input autofocus="" label="Name" value="{{snapshotName}}"></paper-input>
+              <paper-input
+                autofocus=""
+                label="Name"
+                value="{{snapshotName}}"
+              ></paper-input>
               Type:
               <paper-radio-group selected="{{snapshotType}}">
                 <paper-radio-button name="full">
@@ -60,23 +64,37 @@ class HassioSnapshots extends EventsMixin(PolymerElement) {
                   </paper-checkbox>
                 </template>
                 Add-ons:
-              <template is="dom-repeat" items="[[addonList]]" sort="_sortAddons">
+                <template
+                  is="dom-repeat"
+                  items="[[addonList]]"
+                  sort="_sortAddons"
+                >
                   <paper-checkbox checked="{{item.checked}}">
                     [[item.name]]
                   </paper-checkbox>
                 </template>
               </template>
               Security:
-            <paper-checkbox checked="{{snapshotHasPassword}}">Password protection</paper-checkbox>
+              <paper-checkbox checked="{{snapshotHasPassword}}"
+                >Password protection</paper-checkbox
+              >
               <template is="dom-if" if="[[snapshotHasPassword]]">
-              <paper-input label="Password" type="password" value="{{snapshotPassword}}"></paper-input>
+                <paper-input
+                  label="Password"
+                  type="password"
+                  value="{{snapshotPassword}}"
+                ></paper-input>
               </template>
               <template is="dom-if" if="[[error]]">
                 <p class="error">[[error]]</p>
               </template>
             </div>
             <div class="card-actions">
-            <paper-button disabled="[[creatingSnapshot]]" on-click="_createSnapshot">Create</paper-button>
+              <paper-button
+                disabled="[[creatingSnapshot]]"
+                on-click="_createSnapshot"
+                >Create</paper-button
+              >
             </div>
           </paper-card>
         </div>
@@ -88,16 +106,28 @@ class HassioSnapshots extends EventsMixin(PolymerElement) {
               <div class="card-content">You don't have any snapshots yet.</div>
             </paper-card>
           </template>
-        <template is="dom-repeat" items="[[snapshots]]" as="snapshot" sort="_sortSnapshots">
+          <template
+            is="dom-repeat"
+            items="[[snapshots]]"
+            as="snapshot"
+            sort="_sortSnapshots"
+          >
             <paper-card class="pointer" on-click="_snapshotClicked">
               <div class="card-content">
-              <hassio-card-content hass="[[hass]]" title="[[_computeName(snapshot)]]" description="[[_computeDetails(snapshot)]]" datetime="[[snapshot.date]]" icon="[[_computeIcon(snapshot.type)]]" icon-class="snapshot"></hassio-card-content>
+                <hassio-card-content
+                  hass="[[hass]]"
+                  title="[[_computeName(snapshot)]]"
+                  description="[[_computeDetails(snapshot)]]"
+                  datetime="[[snapshot.date]]"
+                  icon="[[_computeIcon(snapshot.type)]]"
+                  icon-class="snapshot"
+                ></hassio-card-content>
               </div>
             </paper-card>
           </template>
         </div>
       </div>
-`;
+    `;
   }
 
   static get properties() {

hassio/src/system/hassio-host-info.js

@@ -50,7 +50,8 @@ class HassioHostInfo extends EventsMixin(PolymerElement) {
         <div class="card-content">
           <h2>Host system</h2>
           <table class="info">
-          <tbody><tr>
+            <tbody>
+              <tr>
                 <td>Hostname</td>
                 <td>[[data.hostname]]</td>
               </tr>
@@ -64,7 +65,8 @@ class HassioHostInfo extends EventsMixin(PolymerElement) {
                   <td>[[data.deployment]]</td>
                 </tr>
               </template>
-        </tbody></table>
+            </tbody>
+          </table>
           <paper-button raised on-click="_showHardware" class="info">
             Hardware
           </paper-button>
@@ -79,20 +81,38 @@ class HassioHostInfo extends EventsMixin(PolymerElement) {
         </div>
         <div class="card-actions">
           <template is="dom-if" if="[[_featureAvailable(data, 'reboot')]]">
-          <ha-call-api-button class="warning" hass="[[hass]]" path="hassio/host/reboot">Reboot</ha-call-api-button>
+            <ha-call-api-button
+              class="warning"
+              hass="[[hass]]"
+              path="hassio/host/reboot"
+              >Reboot</ha-call-api-button
+            >
           </template>
           <template is="dom-if" if="[[_featureAvailable(data, 'shutdown')]]">
-          <ha-call-api-button class="warning" hass="[[hass]]" path="hassio/host/shutdown">Shutdown</ha-call-api-button>
+            <ha-call-api-button
+              class="warning"
+              hass="[[hass]]"
+              path="hassio/host/shutdown"
+              >Shutdown</ha-call-api-button
+            >
           </template>
           <template is="dom-if" if="[[_featureAvailable(data, 'hassos')]]">
-          <ha-call-api-button class="warning" hass="[[hass]]" path="hassio/hassos/config/sync" title="Load HassOS configs or updates from USB">Import from USB</ha-call-api-button>
+            <ha-call-api-button
+              class="warning"
+              hass="[[hass]]"
+              path="hassio/hassos/config/sync"
+              title="Load HassOS configs or updates from USB"
+              >Import from USB</ha-call-api-button
+            >
           </template>
           <template is="dom-if" if="[[_computeUpdateAvailable(_hassOs)]]">
-          <ha-call-api-button hass="[[hass]]" path="hassio/hassos/update">Update</ha-call-api-button>
+            <ha-call-api-button hass="[[hass]]" path="hassio/hassos/update"
+              >Update</ha-call-api-button
+            >
           </template>
         </div>
       </paper-card>
-`;
+    `;
   }
 
   static get properties() {

hassio/src/system/hassio-supervisor-info.js

@@ -41,41 +41,64 @@ class HassioSupervisorInfo extends EventsMixin(PolymerElement) {
         <div class="card-content">
           <h2>Hass.io supervisor</h2>
           <table class="info">
-          <tbody><tr>
+            <tbody>
+              <tr>
                 <td>Version</td>
-            <td>
+                <td>[[data.version]]</td>
-              [[data.version]]
-            </td>
               </tr>
               <tr>
                 <td>Latest version</td>
                 <td>[[data.last_version]]</td>
               </tr>
-          <template is="dom-if" if="[[!_equals(data.channel, &quot;stable&quot;)]]">
+              <template
+                is="dom-if"
+                if="[[!_equals(data.channel, &quot;stable&quot;)]]"
+              >
                 <tr>
                   <td>Channel</td>
                   <td>[[data.channel]]</td>
                 </tr>
               </template>
-        </tbody></table>
+            </tbody>
+          </table>
           <template is="dom-if" if="[[errors]]">
             <div class="errors">Error: [[errors]]</div>
           </template>
         </div>
         <div class="card-actions">
-        <ha-call-api-button hass="[[hass]]" path="hassio/supervisor/reload">Reload</ha-call-api-button>
+          <ha-call-api-button hass="[[hass]]" path="hassio/supervisor/reload"
+            >Reload</ha-call-api-button
+          >
           <template is="dom-if" if="[[computeUpdateAvailable(data)]]">
-          <ha-call-api-button hass="[[hass]]" path="hassio/supervisor/update">Update</ha-call-api-button>
+            <ha-call-api-button hass="[[hass]]" path="hassio/supervisor/update"
+              >Update</ha-call-api-button
+            >
           </template>
-        <template is="dom-if" if="[[_equals(data.channel, &quot;beta&quot;)]]">
+          <template
-          <ha-call-api-button hass="[[hass]]" path="hassio/supervisor/options" data="[[leaveBeta]]">Leave beta channel</ha-call-api-button>
+            is="dom-if"
+            if="[[_equals(data.channel, &quot;beta&quot;)]]"
+          >
+            <ha-call-api-button
+              hass="[[hass]]"
+              path="hassio/supervisor/options"
+              data="[[leaveBeta]]"
+              >Leave beta channel</ha-call-api-button
+            >
           </template>
-        <template is="dom-if" if="[[_equals(data.channel, &quot;stable&quot;)]]">
+          <template
-          <paper-button on-click="_joinBeta" class="warning" title="Get beta updates for Home Assistant (RCs), supervisor and host">Join beta channel</paper-button>
+            is="dom-if"
+            if="[[_equals(data.channel, &quot;stable&quot;)]]"
+          >
+            <paper-button
+              on-click="_joinBeta"
+              class="warning"
+              title="Get beta updates for Home Assistant (RCs), supervisor and host"
+              >Join beta channel</paper-button
+            >
           </template>
         </div>
       </paper-card>
-`;
+    `;
   }
 
   static get properties() {

hassio/src/system/hassio-supervisor-log.js

@@ -15,14 +15,12 @@ class HassioSupervisorLog extends PolymerElement {
         }
       </style>
       <paper-card>
-      <div class="card-content">
+        <div class="card-content"><pre>[[log]]</pre></div>
-        <pre>[[log]]</pre>
-      </div>
         <div class="card-actions">
           <paper-button on-click="refreshTapped">Refresh</paper-button>
         </div>
       </paper-card>
-`;
+    `;
   }
 
   static get properties() {

hassio/src/system/hassio-system.js

@@ -23,12 +23,18 @@ class HassioSystem extends PolymerElement {
       </style>
       <div class="content">
         <div class="title">Information</div>
-      <hassio-supervisor-info hass="[[hass]]" data="[[supervisorInfo]]"></hassio-supervisor-info>
+        <hassio-supervisor-info
-      <hassio-host-info hass="[[hass]]" data="[[hostInfo]]"></hassio-host-info>
+          hass="[[hass]]"
+          data="[[supervisorInfo]]"
+        ></hassio-supervisor-info>
+        <hassio-host-info
+          hass="[[hass]]"
+          data="[[hostInfo]]"
+        ></hassio-host-info>
         <div class="title">System log</div>
         <hassio-supervisor-log hass="[[hass]]"></hassio-supervisor-log>
       </div>
-`;
+    `;
   }
 
   static get properties() {

src/auth/ha-auth-flow.js

@@ -25,17 +25,25 @@ class HaAuthFlow extends LocalizeLiteMixin(PolymerElement) {
           [[localize('ui.panel.page-authorize.form.working')]]:
         </template>
         <template is="dom-if" if="[[_equals(_state, &quot;error&quot;)]]">
-      <div class='error'>Error: [[_errorMsg]]</div>
+          <div class="error">Error: [[_errorMsg]]</div>
         </template>
         <template is="dom-if" if="[[_equals(_state, &quot;step&quot;)]]">
           <template is="dom-if" if="[[_equals(_step.type, &quot;abort&quot;)]]">
             [[localize('ui.panel.page-authorize.abort_intro')]]:
-          <ha-markdown content="[[_computeStepAbortedReason(localize, _step)]]"></ha-markdown>
+            <ha-markdown
+              content="[[_computeStepAbortedReason(localize, _step)]]"
+            ></ha-markdown>
           </template>
 
           <template is="dom-if" if="[[_equals(_step.type, &quot;form&quot;)]]">
-          <template is="dom-if" if="[[_computeStepDescription(localize, _step)]]">
+            <template
-            <ha-markdown content="[[_computeStepDescription(localize, _step)]]" allow-svg></ha-markdown>
+              is="dom-if"
+              if="[[_computeStepDescription(localize, _step)]]"
+            >
+              <ha-markdown
+                content="[[_computeStepDescription(localize, _step)]]"
+                allow-svg
+              ></ha-markdown>
             </template>
 
             <ha-form
@@ -46,15 +54,14 @@ class HaAuthFlow extends LocalizeLiteMixin(PolymerElement) {
               compute-error="[[_computeErrorCallback(localize, _step)]]"
             ></ha-form>
           </template>
-        <div class='action'>
+          <div class="action">
-          <paper-button
+            <paper-button raised on-click="_handleSubmit"
-            raised
+              >[[_computeSubmitCaption(_step.type)]]</paper-button
-            on-click='_handleSubmit'
+            >
-          >[[_computeSubmitCaption(_step.type)]]</paper-button>
           </div>
         </template>
       </form>
-`;
+    `;
   }
 
   static get properties() {

src/auth/ha-authorize.js

@@ -20,7 +20,7 @@ class HaAuthorize extends LocalizeLiteMixin(PolymerElement) {
         ha-markdown a {
           color: var(--primary-color);
         }
-      ha-markdown p:last-child{
+        ha-markdown p:last-child {
           margin-bottom: 0;
         }
         ha-pick-auth-provider {
@@ -34,7 +34,9 @@ class HaAuthorize extends LocalizeLiteMixin(PolymerElement) {
       </template>
 
       <template is="dom-if" if="[[_authProviders]]">
-      <ha-markdown content='[[_computeIntro(localize, clientId, _authProvider)]]'></ha-markdown>
+        <ha-markdown
+          content="[[_computeIntro(localize, clientId, _authProvider)]]"
+        ></ha-markdown>
 
         <ha-auth-flow
           resources="[[resources]]"
@@ -54,7 +56,7 @@ class HaAuthorize extends LocalizeLiteMixin(PolymerElement) {
           ></ha-pick-auth-provider>
         </template>
       </template>
-`;
+    `;
   }
 
   static get properties() {

src/auth/ha-pick-auth-provider.js

@@ -29,7 +29,7 @@ class HaPickAuthProvider extends EventsMixin(
           <iron-icon icon="hass:chevron-right"></iron-icon>
         </paper-item>
       </template>
-`;
+    `;
   }
 
   static get properties() {

src/cards/ha-badges-card.js

@@ -13,9 +13,12 @@ class HaBadgesCard extends PolymerElement {
         }
       </style>
       <template is="dom-repeat" items="[[states]]">
-      <ha-state-label-badge hass="[[hass]]" state="[[item]]"></ha-state-label-badge>
+        <ha-state-label-badge
+          hass="[[hass]]"
+          state="[[item]]"
+        ></ha-state-label-badge>
       </template>
-`;
+    `;
   }
 
   static get properties() {

src/cards/ha-camera-card.js

@@ -50,7 +50,11 @@ class HaCameraCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
       </style>
 
       <template is="dom-if" if="[[cameraFeedSrc]]">
-    <img src="[[cameraFeedSrc]]" class="camera-feed" alt="[[_computeStateName(stateObj)]]">
+        <img
+          src="[[cameraFeedSrc]]"
+          class="camera-feed"
+          alt="[[_computeStateName(stateObj)]]"
+        />
       </template>
       <div class="caption">
         [[_computeStateName(stateObj)]]
@@ -58,7 +62,7 @@ class HaCameraCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
           ([[localize('ui.card.camera.not_available')]])
         </template>
       </div>
-`;
+    `;
   }
 
   static get properties() {

src/cards/ha-entities-card.js

@@ -48,22 +48,36 @@ class HaEntitiesCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
 
       <ha-card>
         <template is="dom-if" if="[[title]]">
-        <div class$="[[computeTitleClass(groupEntity)]]" on-click="entityTapped">
+          <div
+            class$="[[computeTitleClass(groupEntity)]]"
+            on-click="entityTapped"
+          >
             <div class="flex name">[[title]]</div>
             <template is="dom-if" if="[[showGroupToggle(groupEntity, states)]]">
-            <ha-entity-toggle hass="[[hass]]" state-obj="[[groupEntity]]"></ha-entity-toggle>
+              <ha-entity-toggle
+                hass="[[hass]]"
+                state-obj="[[groupEntity]]"
+              ></ha-entity-toggle>
             </template>
           </div>
         </template>
         <div class="states">
-        <template is="dom-repeat" items="[[states]]" on-dom-change="addTapEvents">
+          <template
+            is="dom-repeat"
+            items="[[states]]"
+            on-dom-change="addTapEvents"
+          >
             <div class$="[[computeStateClass(item)]]">
-            <state-card-content hass="[[hass]]" class="state-card" state-obj="[[item]]"></state-card-content>
+              <state-card-content
+                hass="[[hass]]"
+                class="state-card"
+                state-obj="[[item]]"
+              ></state-card-content>
             </div>
           </template>
         </div>
       </ha-card>
-`;
+    `;
   }
 
   static get properties() {

src/cards/ha-history_graph-card.js

@@ -38,15 +38,32 @@ class HaHistoryGraphCard extends EventsMixin(PolymerElement) {
           display: none;
         }
       </style>
-    <ha-state-history-data hass="[[hass]]" filter-type="recent-entity" entity-id="[[computeHistoryEntities(stateObj)]]" data="{{stateHistory}}" is-loading="{{stateHistoryLoading}}" cache-config="[[cacheConfig]]"></ha-state-history-data>
+      <ha-state-history-data
-    <paper-card dialog$="[[inDialog]]" on-click="cardTapped" elevation="[[computeElevation(inDialog)]]">
+        hass="[[hass]]"
+        filter-type="recent-entity"
+        entity-id="[[computeHistoryEntities(stateObj)]]"
+        data="{{stateHistory}}"
+        is-loading="{{stateHistoryLoading}}"
+        cache-config="[[cacheConfig]]"
+      ></ha-state-history-data>
+      <paper-card
+        dialog$="[[inDialog]]"
+        on-click="cardTapped"
+        elevation="[[computeElevation(inDialog)]]"
+      >
         <div class="header">[[computeTitle(stateObj)]]</div>
         <div class="content">
-         <state-history-charts hass="[[hass]]" history-data="[[stateHistory]]" is-loading-data="[[stateHistoryLoading]]" up-to-now no-single>
+          <state-history-charts
+            hass="[[hass]]"
+            history-data="[[stateHistory]]"
+            is-loading-data="[[stateHistoryLoading]]"
+            up-to-now
+            no-single
+          >
           </state-history-charts>
         </div>
       </paper-card>
-`;
+    `;
   }
 
   static get properties() {

src/cards/ha-media_player-card.js

@@ -18,7 +18,9 @@ import LocalizeMixin from "../mixins/localize-mixin";
 class HaMediaPlayerCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
   static get template() {
     return html`
-    <style include="paper-material-styles iron-flex iron-flex-alignment iron-positioning">
+      <style
+        include="paper-material-styles iron-flex iron-flex-alignment iron-positioning"
+      >
         :host {
           @apply --paper-material-elevation-1;
           display: block;
@@ -40,7 +42,7 @@ class HaMediaPlayerCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
           width: 100%;
           /* removed .25% from 16:9 ratio to fix YT black bars */
           padding-top: 56%;
-        transition: padding-top .8s;
+          transition: padding-top 0.8s;
         }
 
         .banner.no-cover {
@@ -70,7 +72,7 @@ class HaMediaPlayerCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
 
           background-position: center center;
           background-size: cover;
-        transition: opacity .8s;
+          transition: opacity 0.8s;
           opacity: 1;
         }
 
@@ -94,7 +96,7 @@ class HaMediaPlayerCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
           font-weight: 500;
           color: white;
 
-        transition: background-color .5s;
+          transition: background-color 0.5s;
         }
 
         .banner.is-off > .caption {
@@ -110,9 +112,9 @@ class HaMediaPlayerCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
         .progress {
           width: 100%;
           height: var(--paper-progress-height, 4px);
-        margin-top: calc(-1*var(--paper-progress-height, 4px));
+          margin-top: calc(-1 * var(--paper-progress-height, 4px));
           --paper-progress-active-color: var(--accent-color);
-        --paper-progress-container-color: rgba(200,200,200,0.5);
+          --paper-progress-container-color: rgba(200, 200, 200, 0.5);
         }
 
         .controls {
@@ -144,7 +146,7 @@ class HaMediaPlayerCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
           color: white;
           border-radius: 50%;
           padding: 8px;
-        transition: background-color .5s;
+          transition: background-color 0.5s;
         }
 
         paper-icon-button.primary[disabled] {
@@ -162,25 +164,54 @@ class HaMediaPlayerCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
         <div class="caption">
           [[_computeStateName(stateObj)]]
           <div class="title">[[computePrimaryText(localize, playerObj)]]</div>
-        [[playerObj.secondaryTitle]]<br>
+          [[playerObj.secondaryTitle]]<br />
         </div>
       </div>
 
-    <paper-progress max="[[stateObj.attributes.media_duration]]" value="[[playbackPosition]]" hidden$="[[computeHideProgress(playerObj)]]" class="progress"></paper-progress>
+      <paper-progress
+        max="[[stateObj.attributes.media_duration]]"
+        value="[[playbackPosition]]"
+        hidden$="[[computeHideProgress(playerObj)]]"
+        class="progress"
+      ></paper-progress>
 
       <div class="controls layout horizontal justified">
-      <paper-icon-button icon="hass:power" on-click="handleTogglePower" invisible$="[[computeHidePowerButton(playerObj)]]" class="self-center secondary"></paper-icon-button>
+        <paper-icon-button
+          icon="hass:power"
+          on-click="handleTogglePower"
+          invisible$="[[computeHidePowerButton(playerObj)]]"
+          class="self-center secondary"
+        ></paper-icon-button>
 
         <div>
-        <paper-icon-button icon="hass:skip-previous" invisible$="[[!playerObj.supportsPreviousTrack]]" disabled="[[playerObj.isOff]]" on-click="handlePrevious"></paper-icon-button>
+          <paper-icon-button
-        <paper-icon-button class="primary" icon="[[computePlaybackControlIcon(playerObj)]]" invisible$="[[!computePlaybackControlIcon(playerObj)]]" disabled="[[playerObj.isOff]]" on-click="handlePlaybackControl"></paper-icon-button>
+            icon="hass:skip-previous"
-        <paper-icon-button icon="hass:skip-next" invisible$="[[!playerObj.supportsNextTrack]]" disabled="[[playerObj.isOff]]" on-click="handleNext"></paper-icon-button>
+            invisible$="[[!playerObj.supportsPreviousTrack]]"
+            disabled="[[playerObj.isOff]]"
+            on-click="handlePrevious"
+          ></paper-icon-button>
+          <paper-icon-button
+            class="primary"
+            icon="[[computePlaybackControlIcon(playerObj)]]"
+            invisible$="[[!computePlaybackControlIcon(playerObj)]]"
+            disabled="[[playerObj.isOff]]"
+            on-click="handlePlaybackControl"
+          ></paper-icon-button>
+          <paper-icon-button
+            icon="hass:skip-next"
+            invisible$="[[!playerObj.supportsNextTrack]]"
+            disabled="[[playerObj.isOff]]"
+            on-click="handleNext"
+          ></paper-icon-button>
         </div>
 
-      <paper-icon-button icon="hass:dots-vertical" on-click="handleOpenMoreInfo" class="self-center secondary"></paper-icon-button>
+        <paper-icon-button
-
+          icon="hass:dots-vertical"
+          on-click="handleOpenMoreInfo"
+          class="self-center secondary"
+        ></paper-icon-button>
       </div>
-`;
+    `;
   }
 
   static get properties() {

src/cards/ha-persistent_notification-card.js

@@ -46,9 +46,11 @@ class HaPersistentNotificationCard extends LocalizeMixin(PolymerElement) {
 
       <ha-card header="[[computeTitle(stateObj)]]">
         <ha-markdown content="[[stateObj.attributes.message]]"></ha-markdown>
-      <paper-button on-click="dismissTap">[[localize('ui.card.persistent_notification.dismiss')]]</paper-button>
+        <paper-button on-click="dismissTap"
+          >[[localize('ui.card.persistent_notification.dismiss')]]</paper-button
+        >
       </ha-card>
-`;
+    `;
   }
 
   static get properties() {

src/cards/ha-plant-card.js

@@ -34,7 +34,7 @@ class HaPlantCard extends EventsMixin(PolymerElement) {
           padding: 16px;
           color: white;
           width: 100%;
-        background:rgba(0, 0, 0, var(--dark-secondary-opacity));
+          background: rgba(0, 0, 0, var(--dark-secondary-opacity));
         }
         .content {
           display: flex;
@@ -63,23 +63,40 @@ class HaPlantCard extends EventsMixin(PolymerElement) {
         }
       </style>
 
-    <ha-card class$="[[computeImageClass(stateObj.attributes.entity_picture)]]">
+      <ha-card
-      <div class="banner" style="background-image:url([[stateObj.attributes.entity_picture]])">
+        class$="[[computeImageClass(stateObj.attributes.entity_picture)]]"
+      >
+        <div
+          class="banner"
+          style="background-image:url([[stateObj.attributes.entity_picture]])"
+        >
           <div class="header">[[computeTitle(stateObj)]]</div>
         </div>
         <div class="content">
-        <template is="dom-repeat" items="[[computeAttributes(stateObj.attributes)]]">
+          <template
+            is="dom-repeat"
+            items="[[computeAttributes(stateObj.attributes)]]"
+          >
             <div class="attributes" on-click="attributeClicked">
-            <div><ha-icon icon="[[computeIcon(item, stateObj.attributes.battery)]]"></ha-icon></div>
+              <div>
-            <div class$="[[computeAttributeClass(stateObj.attributes.problem, item)]]">
+                <ha-icon
+                  icon="[[computeIcon(item, stateObj.attributes.battery)]]"
+                ></ha-icon>
+              </div>
+              <div
+                class$="[[computeAttributeClass(stateObj.attributes.problem, item)]]"
+              >
                 [[computeValue(stateObj.attributes, item)]]
               </div>
-            <div class="uom">[[computeUom(stateObj.attributes.unit_of_measurement_dict, item)]]</div>
+              <div class="uom">
+                [[computeUom(stateObj.attributes.unit_of_measurement_dict,
+                item)]]
+              </div>
             </div>
           </template>
         </div>
       </ha-card>
-`;
+    `;
   }
 
   static get properties() {

src/cards/ha-weather-card.js

@@ -106,9 +106,7 @@ class HaWeatherCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
       <ha-card>
         <div class="header">
           [[computeState(stateObj.state, localize)]]
-          <div class="name">
+          <div class="name">[[stateObj.attributes.friendly_name]]</div>
-            [[stateObj.attributes.friendly_name]]
-          </div>
         </div>
         <div class="content">
           <div class="now">
@@ -117,26 +115,38 @@ class HaWeatherCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
                 <ha-icon icon="[[getWeatherIcon(stateObj.state)]]"></ha-icon>
               </template>
               <div class="temp">
-                [[stateObj.attributes.temperature]]<span>[[getUnit('temperature')]]</span>
+                [[stateObj.attributes.temperature]]<span
+                  >[[getUnit('temperature')]]</span
+                >
               </div>
             </div>
             <div class="attributes">
-              <template is="dom-if" if="[[_showValue(stateObj.attributes.pressure)]]">
+              <template
+                is="dom-if"
+                if="[[_showValue(stateObj.attributes.pressure)]]"
+              >
                 <div>
                   [[localize('ui.card.weather.attributes.air_pressure')]]:
                   [[stateObj.attributes.pressure]] [[getUnit('air_pressure')]]
                 </div>
               </template>
-              <template is="dom-if" if="[[_showValue(stateObj.attributes.humidity)]]">
+              <template
+                is="dom-if"
+                if="[[_showValue(stateObj.attributes.humidity)]]"
+              >
                 <div>
                   [[localize('ui.card.weather.attributes.humidity')]]:
                   [[stateObj.attributes.humidity]] %
                 </div>
               </template>
-              <template is="dom-if" if="[[_showValue(stateObj.attributes.wind_speed)]]">
+              <template
+                is="dom-if"
+                if="[[_showValue(stateObj.attributes.wind_speed)]]"
+              >
                 <div>
                   [[localize('ui.card.weather.attributes.wind_speed')]]:
-                  [[getWind(stateObj.attributes.wind_speed, stateObj.attributes.wind_bearing, localize)]]
+                  [[getWind(stateObj.attributes.wind_speed,
+                  stateObj.attributes.wind_bearing, localize)]]
                 </div>
               </template>
             </div>
@@ -145,22 +155,31 @@ class HaWeatherCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
             <div class="forecast">
               <template is="dom-repeat" items="[[forecast]]">
                 <div>
-                  <div class="weekday">[[computeDate(item.datetime)]]<br>
+                  <div class="weekday">
+                    [[computeDate(item.datetime)]]<br />
                     <template is="dom-if" if="[[!_showValue(item.templow)]]">
                       [[computeTime(item.datetime)]]
                     </template>
                   </div>
                   <template is="dom-if" if="[[_showValue(item.condition)]]">
                     <div class="icon">
-                      <ha-icon icon="[[getWeatherIcon(item.condition)]]"></ha-icon>
+                      <ha-icon
+                        icon="[[getWeatherIcon(item.condition)]]"
+                      ></ha-icon>
                     </div>
                   </template>
-                  <div class="temp">[[item.temperature]] [[getUnit('temperature')]]</div>
+                  <div class="temp">
+                    [[item.temperature]] [[getUnit('temperature')]]
+                  </div>
                   <template is="dom-if" if="[[_showValue(item.templow)]]">
-                    <div class="templow">[[item.templow]] [[getUnit('temperature')]]</div>
+                    <div class="templow">
+                      [[item.templow]] [[getUnit('temperature')]]
+                    </div>
                   </template>
                   <template is="dom-if" if="[[_showValue(item.precipitation)]]">
-                    <div class="precipitation">[[item.precipitation]] [[getUnit('precipitation')]]</div>
+                    <div class="precipitation">
+                      [[item.precipitation]] [[getUnit('precipitation')]]
+                    </div>
                   </template>
                 </div>
               </template>

src/common/entity/attribute_class_names.ts

@@ -8,8 +8,7 @@ export default function attributeClassNames(
     return "";
   }
   return attributes
-    .map(
+    .map((attribute) =>
-      (attribute) =>
       attribute in stateObj.attributes ? "has-" + attribute : ""
     )
     .filter((attr) => attr !== "")

src/common/entity/feature_class_names.ts

@@ -12,8 +12,7 @@ export default function featureClassNames(
   const features = stateObj.attributes.supported_features;
 
   return Object.keys(classNames)
-    .map(
+    .map((feature) =>
-      (feature) =>
       // tslint:disable-next-line
       (features & Number(feature)) !== 0 ? classNames[feature] : ""
     )

src/components/buttons/ha-call-api-button.js

@@ -10,7 +10,8 @@ class HaCallApiButton extends LitElement {
         .progress="${this.progress}"
         @click="${this._buttonTapped}"
         ?disabled="${this.disabled}"
-      ><slot></slot></ha-progress-button>
+        ><slot></slot
+      ></ha-progress-button>
     `;
   }
 

src/components/buttons/ha-call-service-button.js

@@ -10,8 +10,13 @@ import EventsMixin from "../../mixins/events-mixin";
 class HaCallServiceButton extends EventsMixin(PolymerElement) {
   static get template() {
     return html`
-    <ha-progress-button id="progress" progress="[[progress]]" on-click="buttonTapped"><slot></slot></ha-progress-button>
+      <ha-progress-button
-`;
+        id="progress"
+        progress="[[progress]]"
+        on-click="buttonTapped"
+        ><slot></slot
+      ></ha-progress-button>
+    `;
   }
 
   static get properties() {

src/components/buttons/ha-progress-button.js

@@ -43,16 +43,18 @@ class HaProgressButton extends PolymerElement {
         }
       </style>
       <div class="container" id="container">
-      <paper-button id="button" disabled="[[computeDisabled(disabled, progress)]]" on-click="buttonTapped">
+        <paper-button
+          id="button"
+          disabled="[[computeDisabled(disabled, progress)]]"
+          on-click="buttonTapped"
+        >
           <slot></slot>
         </paper-button>
         <template is="dom-if" if="[[progress]]">
-        <div class="progress">
+          <div class="progress"><paper-spinner active=""></paper-spinner></div>
-          <paper-spinner active=""></paper-spinner>
-        </div>
         </template>
       </div>
-`;
+    `;
   }
 
   static get properties() {

src/components/entity/ha-chart-base.js

@@ -41,7 +41,7 @@ class HaChartBase extends mixinBehaviors(
           flex: 1 1;
           min-width: 70%;
         }
-    :root{
+        :root {
           user-select: none;
           -moz-user-select: none;
           -webkit-user-select: none;
@@ -51,7 +51,7 @@ class HaChartBase extends mixinBehaviors(
           font-size: 90%;
           opacity: 1;
           position: absolute;
-      background: rgba(80, 80, 80, .9);
+          background: rgba(80, 80, 80, 0.9);
           color: white;
           border-radius: 3px;
           pointer-events: none;
@@ -65,7 +65,7 @@ class HaChartBase extends mixinBehaviors(
           display: inline-block;
           padding: 0 0px;
           margin: 5px 0 0 0;
-      width: 100%
+          width: 100%;
         }
         .chartTooltip li {
           display: block;
@@ -120,18 +120,24 @@ class HaChartBase extends mixinBehaviors(
       </template>
       <div id="chartTarget" style="height:40px; width:100%">
         <canvas id="chartCanvas"></canvas>
-    <div class$="chartTooltip [[tooltip.yAlign]]" style$="opacity:[[tooltip.opacity]]; top:[[tooltip.top]]; left:[[tooltip.left]]; padding:[[tooltip.yPadding]]px [[tooltip.xPadding]]px">
+        <div
+          class$="chartTooltip [[tooltip.yAlign]]"
+          style$="opacity:[[tooltip.opacity]]; top:[[tooltip.top]]; left:[[tooltip.left]]; padding:[[tooltip.yPadding]]px [[tooltip.xPadding]]px"
+        >
           <div class="title">[[tooltip.title]]</div>
           <div>
             <ul>
               <template is="dom-repeat" items="[[tooltip.lines]]">
-            <li><em style$="background-color:[[item.bgColor]]"></em>[[item.text]]</li>
+                <li>
+                  <em style$="background-color:[[item.bgColor]]"></em
+                  >[[item.text]]
+                </li>
               </template>
             </ul>
           </div>
         </div>
       </div>
-`;
+    `;
   }
 
   get chart() {

src/components/entity/ha-entity-picker.js

@@ -36,20 +36,34 @@ class HaEntityPicker extends EventsMixin(LocalizeMixin(PolymerElement)) {
         value="{{value}}"
         opened="{{opened}}"
         allow-custom-value="[[allowCustomEntity]]"
-      on-change='_fireChanged'
+        on-change="_fireChanged"
       >
         <paper-input
           autofocus="[[autofocus]]"
           label="[[_computeLabel(label, localize)]]"
           class="input"
-        autocapitalize='none'
+          autocapitalize="none"
-        autocomplete='off'
+          autocomplete="off"
-        autocorrect='off'
+          autocorrect="off"
-        spellcheck='false'
+          spellcheck="false"
           value="[[value]]"
-        disabled="[[disabled]]">
+          disabled="[[disabled]]"
-        <paper-icon-button slot="suffix" class="clear-button" icon="hass:close" no-ripple="" hidden$="[[!value]]">Clear</paper-icon-button>
+        >
-        <paper-icon-button slot="suffix" class="toggle-button" icon="[[_computeToggleIcon(opened)]]" hidden="[[!_states.length]]">Toggle</paper-icon-button>
+          <paper-icon-button
+            slot="suffix"
+            class="clear-button"
+            icon="hass:close"
+            no-ripple=""
+            hidden$="[[!value]]"
+            >Clear</paper-icon-button
+          >
+          <paper-icon-button
+            slot="suffix"
+            class="toggle-button"
+            icon="[[_computeToggleIcon(opened)]]"
+            hidden="[[!_states.length]]"
+            >Toggle</paper-icon-button
+          >
         </paper-input>
         <template>
           <style>
@@ -67,7 +81,7 @@ class HaEntityPicker extends EventsMixin(LocalizeMixin(PolymerElement)) {
           </paper-icon-item>
         </template>
       </vaadin-combo-box-light>
-`;
+    `;
   }
 
   static get properties() {

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

@@ -15,8 +15,11 @@ class HaEntityToggle extends PolymerElement {
           min-width: 38px;
         }
         paper-icon-button {
-        color: var(--paper-icon-button-inactive-color, var(--primary-text-color));
+          color: var(
-        transition: color .5s;
+            --paper-icon-button-inactive-color,
+            var(--primary-text-color)
+          );
+          transition: color 0.5s;
         }
         paper-icon-button[state-active] {
           color: var(--paper-icon-button-active-color, var(--primary-color));
@@ -30,13 +33,24 @@ class HaEntityToggle extends PolymerElement {
       </style>
 
       <template is="dom-if" if="[[stateObj.attributes.assumed_state]]">
-      <paper-icon-button icon="hass:flash-off" on-click="turnOff" state-active$="[[!isOn]]"></paper-icon-button>
+        <paper-icon-button
-      <paper-icon-button icon="hass:flash" on-click="turnOn" state-active$="[[isOn]]"></paper-icon-button>
+          icon="hass:flash-off"
+          on-click="turnOff"
+          state-active$="[[!isOn]]"
+        ></paper-icon-button>
+        <paper-icon-button
+          icon="hass:flash"
+          on-click="turnOn"
+          state-active$="[[isOn]]"
+        ></paper-icon-button>
       </template>
       <template is="dom-if" if="[[!stateObj.attributes.assumed_state]]">
-      <paper-toggle-button checked="[[toggleChecked]]" on-change="toggleChanged"></paper-toggle-button>
+        <paper-toggle-button
+          checked="[[toggleChecked]]"
+          on-change="toggleChanged"
+        ></paper-toggle-button>
       </template>
-`;
+    `;
   }
 
   static get properties() {

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

@@ -6,7 +6,9 @@ import stateIcon from "../../common/entity/state_icon";
 
 class HaStateIcon extends PolymerElement {
   static get template() {
-    return html`<ha-icon icon="[[computeIcon(stateObj)]]"></ha-icon>`;
+    return html`
+      <ha-icon icon="[[computeIcon(stateObj)]]"></ha-icon>
+    `;
   }
 
   static get properties() {

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

@@ -27,7 +27,7 @@ class HaStateLabelBadge extends LocalizeMixin(EventsMixin(PolymerElement)) {
         }
 
         ha-label-badge {
-        --ha-label-badge-color: var(--label-badge-red, #DF4C1E);
+          --ha-label-badge-color: var(--label-badge-red, #df4c1e);
         }
         ha-label-badge.has-unit_of_measurement {
           --ha-label-badge-label-text-transform: none;
@@ -39,7 +39,7 @@ class HaStateLabelBadge extends LocalizeMixin(EventsMixin(PolymerElement)) {
         }
 
         .red {
-        --ha-label-badge-color: var(--label-badge-red, #DF4C1E);
+          --ha-label-badge-color: var(--label-badge-red, #df4c1e);
         }
 
         .blue {
@@ -47,7 +47,7 @@ class HaStateLabelBadge extends LocalizeMixin(EventsMixin(PolymerElement)) {
         }
 
         .green {
-        --ha-label-badge-color: var(--label-badge-green, #0DA035);
+          --ha-label-badge-color: var(--label-badge-green, #0da035);
         }
 
         .yellow {
@@ -55,12 +55,22 @@ class HaStateLabelBadge extends LocalizeMixin(EventsMixin(PolymerElement)) {
         }
 
         .grey {
-        --ha-label-badge-color: var(--label-badge-grey, var(--paper-grey-500));
+          --ha-label-badge-color: var(
+            --label-badge-grey,
+            var(--paper-grey-500)
+          );
         }
       </style>
 
-    <ha-label-badge class$="[[computeClassNames(state)]]" value="[[computeValue(localize, state)]]" icon="[[computeIcon(state)]]" image="[[computeImage(state)]]" label="[[computeLabel(localize, state, _timerTimeRemaining)]]" description="[[computeDescription(state)]]"></ha-label-badge>
+      <ha-label-badge
-`;
+        class$="[[computeClassNames(state)]]"
+        value="[[computeValue(localize, state)]]"
+        icon="[[computeIcon(state)]]"
+        image="[[computeImage(state)]]"
+        label="[[computeLabel(localize, state, _timerTimeRemaining)]]"
+        description="[[computeDescription(state)]]"
+      ></ha-label-badge>
+    `;
   }
 
   static get properties() {

src/components/entity/state-badge.js

@@ -22,20 +22,20 @@ class StateBadge extends PolymerElement {
         }
 
         ha-icon {
-      transition: color .3s ease-in-out, filter .3s ease-in-out;
+          transition: color 0.3s ease-in-out, filter 0.3s ease-in-out;
         }
 
         /* Color the icon if light or sun is on */
-    ha-icon[data-domain=light][data-state=on],
+        ha-icon[data-domain="light"][data-state="on"],
-    ha-icon[data-domain=switch][data-state=on],
+        ha-icon[data-domain="switch"][data-state="on"],
-    ha-icon[data-domain=binary_sensor][data-state=on],
+        ha-icon[data-domain="binary_sensor"][data-state="on"],
-    ha-icon[data-domain=fan][data-state=on],
+        ha-icon[data-domain="fan"][data-state="on"],
-    ha-icon[data-domain=sun][data-state=above_horizon] {
+        ha-icon[data-domain="sun"][data-state="above_horizon"] {
-      color: var(--paper-item-icon-active-color, #FDD835);
+          color: var(--paper-item-icon-active-color, #fdd835);
         }
 
         /* Color the icon if unavailable */
-    ha-icon[data-state=unavailable] {
+        ha-icon[data-state="unavailable"] {
           color: var(--state-icon-unavailable-color);
         }
       </style>
@@ -46,7 +46,7 @@ class StateBadge extends PolymerElement {
         data-state$="[[stateObj.state]]"
         icon="[[_computeIcon(stateObj)]]"
       ></ha-icon>
-`;
+    `;
   }
 
   static get properties() {

src/components/entity/state-info.js

@@ -8,10 +8,8 @@ import computeStateName from "../../common/entity/compute_state_name";
 class StateInfo extends PolymerElement {
   static get template() {
     return html`
-    ${this.styleTemplate}
+      ${this.styleTemplate} ${this.stateBadgeTemplate} ${this.infoTemplate}
-    ${this.stateBadgeTemplate}
+    `;
-    ${this.infoTemplate}
-`;
   }
 
   static get styleTemplate() {
@@ -37,41 +35,47 @@ class StateInfo extends PolymerElement {
           line-height: 40px;
         }
 
-    .name[in-dialog], :host([secondary-line]) .name {
+        .name[in-dialog],
+        :host([secondary-line]) .name {
           line-height: 20px;
         }
 
-    .time-ago, .extra-info, .extra-info > * {
+        .time-ago,
+        .extra-info,
+        .extra-info > * {
           @apply --paper-font-common-nowrap;
           color: var(--secondary-text-color);
         }
       </style>
-`;
+    `;
   }
 
   static get stateBadgeTemplate() {
     return html`
       <state-badge state-obj="[[stateObj]]"></state-badge>
-`;
+    `;
   }
 
   static get infoTemplate() {
     return html`
       <div class="info">
-      <div class="name" in-dialog$="[[inDialog]]">[[computeStateName(stateObj)]]</div>
+        <div class="name" in-dialog$="[[inDialog]]">
+          [[computeStateName(stateObj)]]
+        </div>
 
         <template is="dom-if" if="[[inDialog]]">
           <div class="time-ago">
-          <ha-relative-time hass="[[hass]]" datetime="[[stateObj.last_changed]]"></ha-relative-time>
+            <ha-relative-time
+              hass="[[hass]]"
+              datetime="[[stateObj.last_changed]]"
+            ></ha-relative-time>
           </div>
         </template>
         <template is="dom-if" if="[[!inDialog]]">
-        <div class="extra-info">
+          <div class="extra-info"><slot> </slot></div>
-          <slot>
-        </slot></div>
         </template>
       </div>
-`;
+    `;
   }
 
   static get properties() {

src/components/ha-attributes.js

@@ -19,15 +19,23 @@ class HaAttributes extends PolymerElement {
       </style>
 
       <div class="layout vertical">
-      <template is="dom-repeat" items="[[computeDisplayAttributes(stateObj, filtersArray)]]" as="attribute">
+        <template
+          is="dom-repeat"
+          items="[[computeDisplayAttributes(stateObj, filtersArray)]]"
+          as="attribute"
+        >
           <div class="data-entry layout justified horizontal">
             <div class="key">[[formatAttribute(attribute)]]</div>
-          <div class="value">[[formatAttributeValue(stateObj, attribute)]]</div>
+            <div class="value">
+              [[formatAttributeValue(stateObj, attribute)]]
+            </div>
           </div>
         </template>
-      <div class="attribution" hidden$="[[!computeAttribution(stateObj)]]">[[computeAttribution(stateObj)]]</div>
+        <div class="attribution" hidden$="[[!computeAttribution(stateObj)]]">
+          [[computeAttribution(stateObj)]]
         </div>
-`;
+      </div>
+    `;
   }
 
   static get properties() {

src/components/ha-card.js

@@ -10,7 +10,7 @@ class HaCard extends PolymerElement {
           @apply --paper-material-elevation-1;
           display: block;
           border-radius: 2px;
-        transition: all 0.30s ease-out;
+          transition: all 0.3s ease-out;
           background-color: var(--paper-card-background-color, white);
         }
         .header {
@@ -25,7 +25,7 @@ class HaCard extends PolymerElement {
         <div class="header">[[header]]</div>
       </template>
       <slot></slot>
-`;
+    `;
   }
 
   static get properties() {

src/components/ha-cards.js

@@ -129,7 +129,10 @@ class HaCards extends PolymerElement {
               <ha-demo-badge></ha-demo-badge>
             </template>
 
-        <ha-badges-card states="[[cards.badges]]" hass="[[hass]]"></ha-badges-card>
+            <ha-badges-card
+              states="[[cards.badges]]"
+              hass="[[hass]]"
+            ></ha-badges-card>
           </div>
         </template>
 
@@ -142,8 +145,8 @@ class HaCards extends PolymerElement {
             </div>
           </template>
         </div>
-</div>
+      </div>
-`;
+    `;
   }
 
   static get properties() {

src/components/ha-climate-control.js

@@ -37,18 +37,22 @@ class HaClimateControl extends EventsMixin(PolymerElement) {
       </style>
 
       <!-- local DOM goes here -->
-    <div id="target_temperature">
+      <div id="target_temperature">[[value]] [[units]]</div>
-      [[value]] [[units]]
-    </div>
       <div class="control-buttons">
         <div>
-        <paper-icon-button icon="hass:chevron-up" on-click="incrementValue"></paper-icon-button>
+          <paper-icon-button
+            icon="hass:chevron-up"
+            on-click="incrementValue"
+          ></paper-icon-button>
         </div>
         <div>
-        <paper-icon-button icon="hass:chevron-down" on-click="decrementValue"></paper-icon-button>
+          <paper-icon-button
+            icon="hass:chevron-down"
+            on-click="decrementValue"
+          ></paper-icon-button>
         </div>
       </div>
-`;
+    `;
   }
 
   static get properties() {

src/components/ha-climate-state.js

@@ -33,9 +33,7 @@ class HaClimateState extends LocalizeMixin(PolymerElement) {
 
       <div class="target">
         <template is="dom-if" if="[[_hasKnownState(stateObj.state)]]">
-        <span class="state-label">
+          <span class="state-label"> [[_localizeState(stateObj.state)]] </span>
-          [[_localizeState(stateObj.state)]]
-        </span>
         </template>
         [[computeTarget(hass, stateObj)]]
       </div>
@@ -45,7 +43,7 @@ class HaClimateState extends LocalizeMixin(PolymerElement) {
           [[localize('ui.card.climate.currently')]]: [[currentStatus]]
         </div>
       </template>
-`;
+    `;
   }
 
   static get properties() {

src/components/ha-color-picker.js

@@ -38,14 +38,17 @@ class HaColorPicker extends EventsMixin(PolymerElement) {
           overflow: visible;
           --wheel-bordercolor: var(--ha-color-picker-wheel-bordercolor, white);
           --wheel-borderwidth: var(--ha-color-picker-wheel-borderwidth, 3);
-        --wheel-shadow: var(--ha-color-picker-wheel-shadow, rgb(15, 15, 15) 10px 5px 5px 0px);
+          --wheel-shadow: var(
+            --ha-color-picker-wheel-shadow,
+            rgb(15, 15, 15) 10px 5px 5px 0px
+          );
         }
 
         #marker {
           fill: currentColor;
           stroke: var(--ha-color-picker-marker-bordercolor, white);
           stroke-width: var(--ha-color-picker-marker-borderwidth, 3);
-        filter: url(#marker-shadow)
+          filter: url(#marker-shadow);
         }
         .dragging #marker {
         }
@@ -60,24 +63,43 @@ class HaColorPicker extends EventsMixin(PolymerElement) {
         .touch.dragging #colorTooltip {
           display: inherit;
         }
-
       </style>
       <div id="canvas">
         <svg id="interactionLayer">
           <defs>
-          <filter id="marker-shadow" x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox">
+            <filter
-             <feOffset result="offOut" in="SourceAlpha" dx="2" dy="2"></feOffset>
+              id="marker-shadow"
-             <feGaussianBlur result="blurOut" in="offOut" stdDeviation="2"></feGaussianBlur>
+              x="-50%"
+              y="-50%"
+              width="200%"
+              height="200%"
+              filterUnits="objectBoundingBox"
+            >
+              <feOffset
+                result="offOut"
+                in="SourceAlpha"
+                dx="2"
+                dy="2"
+              ></feOffset>
+              <feGaussianBlur
+                result="blurOut"
+                in="offOut"
+                stdDeviation="2"
+              ></feGaussianBlur>
               <feComponentTransfer in="blurOut" result="alphaOut">
                 <feFuncA type="linear" slope="0.3"></feFuncA>
               </feComponentTransfer>
-             <feBlend in="SourceGraphic" in2="alphaOut" mode="normal"></feBlend>
+              <feBlend
+                in="SourceGraphic"
+                in2="alphaOut"
+                mode="normal"
+              ></feBlend>
             </filter>
           </defs>
         </svg>
         <canvas id="backgroundLayer"></canvas>
       </div>
-`;
+    `;
   }
 
   static get properties() {

src/components/ha-combo-box.js

@@ -28,11 +28,28 @@ class HaComboBox extends EventsMixin(PolymerElement) {
         value="{{value}}"
         opened="{{opened}}"
         allow-custom-value="[[allowCustomValue]]"
-      on-change='_fireChanged'
+        on-change="_fireChanged"
+      >
+        <paper-input
+          autofocus="[[autofocus]]"
+          label="[[label]]"
+          class="input"
+          value="[[value]]"
+        >
+          <paper-icon-button
+            slot="suffix"
+            class="clear-button"
+            icon="hass:close"
+            hidden$="[[!value]]"
+            >Clear</paper-icon-button
+          >
+          <paper-icon-button
+            slot="suffix"
+            class="toggle-button"
+            icon="[[_computeToggleIcon(opened)]]"
+            hidden$="[[!items.length]]"
+            >Toggle</paper-icon-button
           >
-      <paper-input autofocus="[[autofocus]]" label="[[label]]" class="input" value="[[value]]">
-        <paper-icon-button slot="suffix" class="clear-button" icon="hass:close" hidden$="[[!value]]">Clear</paper-icon-button>
-        <paper-icon-button slot="suffix" class="toggle-button" icon="[[_computeToggleIcon(opened)]]" hidden$="[[!items.length]]">Toggle</paper-icon-button>
         </paper-input>
         <template>
           <style>
@@ -44,7 +61,7 @@ class HaComboBox extends EventsMixin(PolymerElement) {
           <paper-item>[[_computeItemLabel(item, itemLabelPath)]]</paper-item>
         </template>
       </vaadin-combo-box-light>
-`;
+    `;
   }
 
   static get properties() {

src/components/ha-cover-controls.js

@@ -17,11 +17,25 @@ class HaCoverControls extends PolymerElement {
       </style>
 
       <div class="state">
-      <paper-icon-button icon="hass:arrow-up" on-click="onOpenTap" invisible$="[[!entityObj.supportsOpen]]" disabled="[[computeOpenDisabled(stateObj, entityObj)]]"></paper-icon-button>
+        <paper-icon-button
-      <paper-icon-button icon="hass:stop" on-click="onStopTap" invisible$="[[!entityObj.supportsStop]]"></paper-icon-button>
+          icon="hass:arrow-up"
-      <paper-icon-button icon="hass:arrow-down" on-click="onCloseTap" invisible$="[[!entityObj.supportsClose]]" disabled="[[computeClosedDisabled(stateObj, entityObj)]]"></paper-icon-button>
+          on-click="onOpenTap"
+          invisible$="[[!entityObj.supportsOpen]]"
+          disabled="[[computeOpenDisabled(stateObj, entityObj)]]"
+        ></paper-icon-button>
+        <paper-icon-button
+          icon="hass:stop"
+          on-click="onStopTap"
+          invisible$="[[!entityObj.supportsStop]]"
+        ></paper-icon-button>
+        <paper-icon-button
+          icon="hass:arrow-down"
+          on-click="onCloseTap"
+          invisible$="[[!entityObj.supportsClose]]"
+          disabled="[[computeClosedDisabled(stateObj, entityObj)]]"
+        ></paper-icon-button>
       </div>
-`;
+    `;
   }
 
   static get properties() {

src/components/ha-cover-tilt-controls.js

@@ -17,10 +17,27 @@ class HaCoverTiltControls extends PolymerElement {
           visibility: hidden !important;
         }
       </style>
-    <paper-icon-button icon="hass:arrow-top-right" on-click="onOpenTiltTap" title="Open tilt" invisible$="[[!entityObj.supportsOpenTilt]]" disabled="[[computeOpenDisabled(stateObj, entityObj)]]"></paper-icon-button>
+      <paper-icon-button
-    <paper-icon-button icon="hass:stop" on-click="onStopTiltTap" invisible$="[[!entityObj.supportsStopTilt]]" title="Stop tilt"></paper-icon-button>
+        icon="hass:arrow-top-right"
-    <paper-icon-button icon="hass:arrow-bottom-left" on-click="onCloseTiltTap" title="Close tilt" invisible$="[[!entityObj.supportsCloseTilt]]" disabled="[[computeClosedDisabled(stateObj, entityObj)]]"></paper-icon-button>
+        on-click="onOpenTiltTap"
-`;
+        title="Open tilt"
+        invisible$="[[!entityObj.supportsOpenTilt]]"
+        disabled="[[computeOpenDisabled(stateObj, entityObj)]]"
+      ></paper-icon-button>
+      <paper-icon-button
+        icon="hass:stop"
+        on-click="onStopTiltTap"
+        invisible$="[[!entityObj.supportsStopTilt]]"
+        title="Stop tilt"
+      ></paper-icon-button>
+      <paper-icon-button
+        icon="hass:arrow-bottom-left"
+        on-click="onCloseTiltTap"
+        title="Close tilt"
+        invisible$="[[!entityObj.supportsCloseTilt]]"
+        disabled="[[computeClosedDisabled(stateObj, entityObj)]]"
+      ></paper-icon-button>
+    `;
   }
 
   static get properties() {

src/components/ha-demo-badge.js

@@ -12,8 +12,12 @@ class HaDemoBadge extends PolymerElement {
         }
       </style>
 
-    <ha-label-badge icon="hass:emoticon" label="Demo" description=""></ha-label-badge>
+      <ha-label-badge
-`;
+        icon="hass:emoticon"
+        label="Demo"
+        description=""
+      ></ha-label-badge>
+    `;
   }
 }
 

src/components/ha-form.js

@@ -27,11 +27,18 @@ class HaForm extends EventsMixin(PolymerElement) {
       </style>
       <template is="dom-if" if="[[_isArray(schema)]]" restamp="">
         <template is="dom-if" if="[[error.base]]">
-          <div class='error'>[[computeError(error.base, schema)]]</div>
+          <div class="error">[[computeError(error.base, schema)]]</div>
         </template>
 
         <template is="dom-repeat" items="[[schema]]">
-        <ha-form data="[[_getValue(data, item)]]" schema="[[item]]" error="[[_getValue(error, item)]]" on-data-changed="_valueChanged" compute-label="[[computeLabel]]" compute-error="[[computeError]]"></ha-form>
+          <ha-form
+            data="[[_getValue(data, item)]]"
+            schema="[[item]]"
+            error="[[_getValue(error, item)]]"
+            on-data-changed="_valueChanged"
+            compute-label="[[computeLabel]]"
+            compute-error="[[computeError]]"
+          ></ha-form>
         </template>
       </template>
       <template is="dom-if" if="[[!_isArray(schema)]]" restamp="">
@@ -39,41 +46,64 @@ class HaForm extends EventsMixin(PolymerElement) {
           <div class="error">[[computeError(error, schema)]]</div>
         </template>
 
-      <template is="dom-if" if="[[_equals(schema.type, &quot;string&quot;)]]" restamp="">
+        <template
-        <template is="dom-if" if="[[_includes(schema.name, &quot;password&quot;)]]" restamp="">
+          is="dom-if"
+          if="[[_equals(schema.type, &quot;string&quot;)]]"
+          restamp=""
+        >
+          <template
+            is="dom-if"
+            if="[[_includes(schema.name, &quot;password&quot;)]]"
+            restamp=""
+          >
             <paper-input
               type="[[_passwordFieldType(unmaskedPassword)]]"
               label="[[computeLabel(schema)]]"
               value="{{data}}"
               required="[[schema.required]]"
               auto-validate="[[schema.required]]"
-            error-message='Required'
+              error-message="Required"
             >
-            <paper-icon-button toggles
+              <paper-icon-button
+                toggles
                 active="{{unmaskedPassword}}"
                 slot="suffix"
                 icon="[[_passwordFieldIcon(unmaskedPassword)]]"
                 id="iconButton"
-              title="Click to toggle between masked and clear password">
+                title="Click to toggle between masked and clear password"
+              >
               </paper-icon-button>
             </paper-input>
           </template>
-        <template is="dom-if" if="[[!_includes(schema.name, &quot;password&quot;)]]" restamp="">
+          <template
+            is="dom-if"
+            if="[[!_includes(schema.name, &quot;password&quot;)]]"
+            restamp=""
+          >
             <paper-input
               label="[[computeLabel(schema)]]"
               value="{{data}}"
               required="[[schema.required]]"
               auto-validate="[[schema.required]]"
-            error-message='Required'
+              error-message="Required"
             ></paper-input>
           </template>
         </template>
 
-      <template is="dom-if" if="[[_equals(schema.type, &quot;integer&quot;)]]" restamp="">
+        <template
+          is="dom-if"
+          if="[[_equals(schema.type, &quot;integer&quot;)]]"
+          restamp=""
+        >
           <template is="dom-if" if="[[_isRange(schema)]]" restamp="">
             <div>
               [[computeLabel(schema)]]
-            <ha-paper-slider pin="" value="{{data}}" min="[[schema.valueMin]]" max="[[schema.valueMax]]"></ha-paper-slider>
+              <ha-paper-slider
+                pin=""
+                value="{{data}}"
+                min="[[schema.valueMin]]"
+                max="[[schema.valueMax]]"
+              ></ha-paper-slider>
             </div>
           </template>
           <template is="dom-if" if="[[!_isRange(schema)]]" restamp="">
@@ -83,40 +113,59 @@ class HaForm extends EventsMixin(PolymerElement) {
               type="number"
               required="[[schema.required]]"
               auto-validate="[[schema.required]]"
-            error-message='Required'
+              error-message="Required"
             ></paper-input>
           </template>
         </template>
 
-      <template is="dom-if" if="[[_equals(schema.type, &quot;float&quot;)]]" restamp="">
+        <template
-        <!--TODO-->
+          is="dom-if"
+          if="[[_equals(schema.type, &quot;float&quot;)]]"
+          restamp=""
+        >
+          <!-- TODO -->
           <paper-input
             label="[[computeLabel(schema)]]"
             value="{{data}}"
             required="[[schema.required]]"
             auto-validate="[[schema.required]]"
-          error-message='Required'
+            error-message="Required"
           ></paper-input>
         </template>
 
-      <template is="dom-if" if="[[_equals(schema.type, &quot;boolean&quot;)]]" restamp="">
+        <template
+          is="dom-if"
+          if="[[_equals(schema.type, &quot;boolean&quot;)]]"
+          restamp=""
+        >
           <div>
-          <paper-checkbox checked="{{data}}">[[computeLabel(schema)]]</paper-checkbox>
+            <paper-checkbox checked="{{data}}"
+              >[[computeLabel(schema)]]</paper-checkbox
+            >
           </div>
         </template>
 
-      <template is="dom-if" if="[[_equals(schema.type, &quot;select&quot;)]]" restamp="">
+        <template
+          is="dom-if"
+          if="[[_equals(schema.type, &quot;select&quot;)]]"
+          restamp=""
+        >
           <paper-dropdown-menu label="[[computeLabel(schema)]]">
-          <paper-listbox slot="dropdown-content" attr-for-selected="item-name" selected="{{data}}">
+            <paper-listbox
+              slot="dropdown-content"
+              attr-for-selected="item-name"
+              selected="{{data}}"
+            >
               <template is="dom-repeat" items="[[schema.options]]">
-              <paper-item item-name$="[[_optionValue(item)]]">[[_optionLabel(item)]]</paper-item>
+                <paper-item item-name$="[[_optionValue(item)]]"
+                  >[[_optionLabel(item)]]</paper-item
+                >
               </template>
             </paper-listbox>
           </paper-dropdown-menu>
         </template>
-
       </template>
-`;
+    `;
   }
 
   static get properties() {

src/components/ha-label-badge.js

@@ -27,7 +27,7 @@ class HaLabelBadge extends PolymerElement {
           white-space: nowrap;
           background-color: var(--label-badge-background-color, white);
           background-size: cover;
-      transition: border .3s ease-in-out;
+          transition: border 0.3s ease-in-out;
         }
         .label-badge .value {
           font-size: 90%;
@@ -58,7 +58,7 @@ class HaLabelBadge extends PolymerElement {
           overflow: hidden;
           text-transform: uppercase;
           text-overflow: ellipsis;
-      transition: background-color .3s ease-in-out;
+          transition: background-color 0.3s ease-in-out;
           text-transform: var(--ha-label-badge-label-text-transform, uppercase);
         }
         .label-badge .label.big span {
@@ -67,7 +67,7 @@ class HaLabelBadge extends PolymerElement {
         }
         .badge-container .title {
           margin-top: 1em;
-      font-size: var(--ha-label-badge-title-font-size, .9em);
+          font-size: var(--ha-label-badge-title-font-size, 0.9em);
           width: var(--ha-label-badge-title-width, 5em);
           font-weight: var(--ha-label-badge-title-font-weight, 400);
           overflow: hidden;
@@ -83,16 +83,22 @@ class HaLabelBadge extends PolymerElement {
       <div class="badge-container">
         <div class="label-badge" id="badge">
           <div class$="[[computeValueClasses(value)]]">
-          <ha-icon icon="[[icon]]" hidden$="[[computeHideIcon(icon, value, image)]]"></ha-icon>
+            <ha-icon
+              icon="[[icon]]"
+              hidden$="[[computeHideIcon(icon, value, image)]]"
+            ></ha-icon>
             <span hidden$="[[computeHideValue(value, image)]]">[[value]]</span>
           </div>
-        <div hidden$="[[computeHideLabel(label)]]" class$="[[computeLabelClasses(label)]]">
+          <div
+            hidden$="[[computeHideLabel(label)]]"
+            class$="[[computeLabelClasses(label)]]"
+          >
             <span>[[label]]</span>
           </div>
         </div>
         <div class="title" hidden$="[[!description]]">[[description]]</div>
       </div>
-`;
+    `;
   }
 
   static get properties() {

src/components/ha-labeled-slider.js

@@ -29,18 +29,20 @@ class HaLabeledSlider extends PolymerElement {
       </style>
 
       <div class="title">[[caption]]</div>
-    <div class="extra-container">
+      <div class="extra-container"><slot name="extra"></slot></div>
-      <slot name="extra"></slot>
-    </div>
       <div class="slider-container">
         <ha-icon icon="[[icon]]" hidden$="[[!icon]]"></ha-icon>
         <ha-paper-slider
-        min="[[min]]" max="[[max]]" step="[[step]]"
+          min="[[min]]"
-        pin="[[pin]]" disabled="[[disabled]]" disabled="[[disabled]]"
+          max="[[max]]"
+          step="[[step]]"
+          pin="[[pin]]"
+          disabled="[[disabled]]"
+          disabled="[[disabled]]"
           value="{{value}}"
         ></ha-paper-slider>
       </div>
-`;
+    `;
   }
 
   static get properties() {

src/components/ha-menu-button.js

@@ -14,7 +14,7 @@ class HaMenuButton extends EventsMixin(PolymerElement) {
         icon="[[_getIcon(hassio)]]"
         on-click="toggleMenu"
       ></paper-icon-button>
-`;
+    `;
   }
 
   static get properties() {

src/components/ha-push-notifications-toggle.js

@@ -21,7 +21,7 @@ class HaPushNotificationsToggle extends EventsMixin(PolymerElement) {
         disabled="[[_compDisabled(disabled, loading)]]"
         checked="{{pushChecked}}"
       ></paper-toggle-button>
-`;
+    `;
   }
 
   static get properties() {

src/components/ha-service-description.js

@@ -5,7 +5,7 @@ class HaServiceDescription extends PolymerElement {
   static get template() {
     return html`
       [[_getDescription(hass, domain, service)]]
-`;
+    `;
   }
 
   static get properties() {

src/components/ha-service-picker.js

@@ -11,8 +11,13 @@ import LocalizeMixin from "../mixins/localize-mixin";
 class HaServicePicker extends LocalizeMixin(PolymerElement) {
   static get template() {
     return html`
-    <ha-combo-box label="[[localize('ui.components.service-picker.service')]]" items="[[_services]]" value="{{value}}" allow-custom-value=""></ha-combo-box>
+      <ha-combo-box
-`;
+        label="[[localize('ui.components.service-picker.service')]]"
+        items="[[_services]]"
+        value="{{value}}"
+        allow-custom-value=""
+      ></ha-combo-box>
+    `;
   }
 
   static get properties() {

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

@@ -12,8 +12,12 @@ import isComponentLoaded from "../common/config/is_component_loaded";
 class HaStartVoiceButton extends EventsMixin(PolymerElement) {
   static get template() {
     return html`
-    <paper-icon-button icon="hass:microphone" hidden$="[[!canListen]]" on-click="handleListenClick"></paper-icon-button>
+      <paper-icon-button
-`;
+        icon="hass:microphone"
+        hidden$="[[!canListen]]"
+        on-click="handleListenClick"
+      ></paper-icon-button>
+    `;
   }
 
   static get properties() {

src/components/ha-textarea.js

@@ -21,10 +21,7 @@ class HaTextarea extends PolymerElement {
           display: block;
         }
       </style>
-      <paper-textarea
+      <paper-textarea label="[[label]]" value="{{value}}"></paper-textarea>
-        label='[[label]]'
-        value='{{value}}'
-      ></paper-textarea>
     `;
   }
 

src/components/ha-vacuum-state.js

@@ -43,7 +43,7 @@ class HaVacuumState extends LocalizeMixin(PolymerElement) {
           font-weight: 500;
           top: 3px;
           height: 37px;
-          margin-right: -.57em;
+          margin-right: -0.57em;
         }
         paper-button[disabled] {
           background-color: transparent;
@@ -51,10 +51,9 @@ class HaVacuumState extends LocalizeMixin(PolymerElement) {
         }
       </style>
 
-      <paper-button
+      <paper-button on-click="_callService" disabled="[[!_interceptable]]"
-        on-click="_callService"
+        >[[_computeLabel(stateObj.state, _interceptable)]]</paper-button
-        disabled="[[!_interceptable]]"
+      >
-      >[[_computeLabel(stateObj.state, _interceptable)]]</paper-button>
     `;
   }
 

src/components/ha-water_heater-control.js

@@ -37,18 +37,22 @@ class HaWaterHeaterControl extends EventsMixin(PolymerElement) {
       </style>
 
       <!-- local DOM goes here -->
-    <div id="target_temperature">
+      <div id="target_temperature">[[value]] [[units]]</div>
-      [[value]] [[units]]
-    </div>
       <div class="control-buttons">
         <div>
-        <paper-icon-button icon="hass:chevron-up" on-click="incrementValue"></paper-icon-button>
+          <paper-icon-button
+            icon="hass:chevron-up"
+            on-click="incrementValue"
+          ></paper-icon-button>
         </div>
         <div>
-        <paper-icon-button icon="hass:chevron-down" on-click="decrementValue"></paper-icon-button>
+          <paper-icon-button
+            icon="hass:chevron-down"
+            on-click="decrementValue"
+          ></paper-icon-button>
         </div>
       </div>
-`;
+    `;
   }
 
   static get properties() {

src/components/ha-water_heater-state.js

@@ -32,9 +32,7 @@ class HaWaterHeaterState extends LocalizeMixin(PolymerElement) {
       </style>
 
       <div class="target">
-      <span class="state-label">
+        <span class="state-label"> [[_localizeState(stateObj.state)]] </span>
-        [[_localizeState(stateObj.state)]]
-      </span>
         [[computeTarget(hass, stateObj)]]
       </div>
 
@@ -43,7 +41,7 @@ class HaWaterHeaterState extends LocalizeMixin(PolymerElement) {
           [[localize('ui.card.water_heater.currently')]]: [[currentStatus]]
         </div>
       </template>
-`;
+    `;
   }
 
   static get properties() {

src/components/paper-time-input.js

@@ -43,13 +43,11 @@ class PaperTimeInput extends PolymerElement {
             -moz-appearance: textfield;
             @apply --paper-time-input-cotnainer;
           }
-          ;
           --paper-input-container-input-webkit-spinner: {
             -webkit-appearance: none;
             margin: 0;
             display: none;
           }
-          ;
         }
 
         paper-dropdown-menu {
@@ -57,20 +55,23 @@ class PaperTimeInput extends PolymerElement {
           padding: 0;
           /* Force ripple to use the whole container */
           --paper-dropdown-menu-ripple: {
-            color: var(--paper-time-input-dropdown-ripple-color, var(--primary-color));
+            color: var(
-          };
+              --paper-time-input-dropdown-ripple-color,
+              var(--primary-color)
+            );
+          }
           --paper-input-container-input: {
             @apply --paper-font-button;
             text-align: center;
             padding-left: 5px;
             @apply --paper-time-dropdown-input-cotnainer;
-          };
+          }
           --paper-input-container-underline: {
             border-color: transparent;
           }
           --paper-input-container-underline-focus: {
             border-color: transparent;
-          };
+          }
         }
 
         paper-item {
@@ -99,27 +100,58 @@ class PaperTimeInput extends PolymerElement {
 
       <label hidden$="[[hideLabel]]">[[label]]</label>
       <div class="time-input-wrap">
-
         <!-- Hour Input -->
-        <paper-input id="hour" type="number" value="{{hour}}" on-change="_shouldFormatHour" required="" auto-validate="[[autoValidate]]"
+        <paper-input
-          prevent-invalid-input="" maxlength="2" max="[[_computeHourMax(format)]]" min="0" no-label-float="" disabled="[[disabled]]">
+          id="hour"
+          type="number"
+          value="{{hour}}"
+          on-change="_shouldFormatHour"
+          required=""
+          auto-validate="[[autoValidate]]"
+          prevent-invalid-input=""
+          maxlength="2"
+          max="[[_computeHourMax(format)]]"
+          min="0"
+          no-label-float=""
+          disabled="[[disabled]]"
+        >
           <span suffix="" slot="suffix">:</span>
         </paper-input>
 
         <!-- Min Input -->
-        <paper-input id="min" type="number" value="{{min}}" on-change="_formatMin" required="" auto-validate="[[autoValidate]]" prevent-invalid-input=""
+        <paper-input
-          maxlength="2" max="59" min="0" no-label-float="" disabled="[[disabled]]">
+          id="min"
+          type="number"
+          value="{{min}}"
+          on-change="_formatMin"
+          required=""
+          auto-validate="[[autoValidate]]"
+          prevent-invalid-input=""
+          maxlength="2"
+          max="59"
+          min="0"
+          no-label-float=""
+          disabled="[[disabled]]"
+        >
         </paper-input>
 
         <!-- Dropdown Menu -->
-        <paper-dropdown-menu id="dropdown" required="" hidden$="[[_equal(format, 24)]]" no-label-float="" disabled="[[disabled]]">
+        <paper-dropdown-menu
-
+          id="dropdown"
-          <paper-listbox attr-for-selected="name" selected="{{amPm}}" slot="dropdown-content">
+          required=""
+          hidden$="[[_equal(format, 24)]]"
+          no-label-float=""
+          disabled="[[disabled]]"
+        >
+          <paper-listbox
+            attr-for-selected="name"
+            selected="{{amPm}}"
+            slot="dropdown-content"
+          >
             <paper-item name="AM">AM</paper-item>
             <paper-item name="PM">PM</paper-item>
           </paper-listbox>
         </paper-dropdown-menu>
-
       </div>
     `;
   }

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

@@ -18,8 +18,13 @@ class StateHistoryChartLine extends LocalizeMixin(PolymerElement) {
           transition: height 0.3s ease-in-out;
         }
       </style>
-      <ha-chart-base id="chart" data="[[chartData]]" identifier="[[identifier]]" rendered="{{rendered}}"></ha-chart-base>
+      <ha-chart-base
-`;
+        id="chart"
+        data="[[chartData]]"
+        identifier="[[identifier]]"
+        rendered="{{rendered}}"
+      ></ha-chart-base>
+    `;
   }
 
   static get properties() {

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

@@ -20,10 +20,12 @@ class StateHistoryChartTimeline extends LocalizeMixin(PolymerElement) {
         :host([rendered]) {
           opacity: 1;
         }
-
       </style>
-    <ha-chart-base data="[[chartData]]" rendered="{{rendered}}"></ha-chart-base>
+      <ha-chart-base
-`;
+        data="[[chartData]]"
+        rendered="{{rendered}}"
+      ></ha-chart-base>
+    `;
   }
 
   static get properties() {

src/components/state-history-charts.js

@@ -22,17 +22,29 @@ class StateHistoryCharts extends LocalizeMixin(PolymerElement) {
           color: var(--secondary-text-color);
         }
       </style>
-    <template is="dom-if" class="info" if="[[_computeIsLoading(isLoadingData)]]">
+      <template
-      <div class="info">[[localize('ui.components.history_charts.loading_history')]]</div>
+        is="dom-if"
+        class="info"
+        if="[[_computeIsLoading(isLoadingData)]]"
+      >
+        <div class="info">
+          [[localize('ui.components.history_charts.loading_history')]]
+        </div>
       </template>
 
-    <template is="dom-if" class="info" if="[[_computeIsEmpty(isLoadingData, historyData)]]">
+      <template
-      <div class="info">[[localize('ui.components.history_charts.no_history_found')]]</div>
+        is="dom-if"
+        class="info"
+        if="[[_computeIsEmpty(isLoadingData, historyData)]]"
+      >
+        <div class="info">
+          [[localize('ui.components.history_charts.no_history_found')]]
+        </div>
       </template>
 
       <template is="dom-if" if="[[historyData.timeline.length]]">
         <state-history-chart-timeline
-        hass='[[hass]]'
+          hass="[[hass]]"
           data="[[historyData.timeline]]"
           end-time="[[_computeEndTime(endTime, upToNow, historyData)]]"
           no-single="[[noSingle]]"
@@ -42,7 +54,7 @@ class StateHistoryCharts extends LocalizeMixin(PolymerElement) {
 
       <template is="dom-repeat" items="[[historyData.line]]">
         <state-history-chart-line
-        hass='[[hass]]'
+          hass="[[hass]]"
           unit="[[item.unit]]"
           data="[[item.data]]"
           identifier="[[item.identifier]]"
@@ -51,7 +63,7 @@ class StateHistoryCharts extends LocalizeMixin(PolymerElement) {
           names="[[names]]"
         ></state-history-chart-line>
       </template>
-`;
+    `;
   }
 
   static get properties() {

src/dialogs/ha-more-info-dialog.js

@@ -26,7 +26,8 @@ class HaMoreInfoDialog extends DialogMixin(PolymerElement) {
           border-radius: 2px;
         }
 
-      more-info-controls, more-info-settings {
+        more-info-controls,
+        more-info-settings {
           --more-info-header-background: var(--secondary-background-color);
           --more-info-header-color: var(--primary-text-color);
           --ha-more-info-app-toolbar-title: {
@@ -45,7 +46,8 @@ class HaMoreInfoDialog extends DialogMixin(PolymerElement) {
 
         /* overrule the ha-style-dialog max-height on small screens */
         @media all and (max-width: 450px), all and (max-height: 500px) {
-        more-info-controls, more-info-settings {
+          more-info-controls,
+          more-info-settings {
             --more-info-header-background: var(--primary-color);
             --more-info-header-color: var(--text-primary-color);
           }
@@ -64,22 +66,35 @@ class HaMoreInfoDialog extends DialogMixin(PolymerElement) {
           }
         }
 
-      :host([data-domain=camera]) {
+        :host([data-domain="camera"]) {
           width: auto;
         }
 
-      :host([data-domain=history_graph]), :host([large]) {
+        :host([data-domain="history_graph"]),
+        :host([large]) {
           width: 90%;
         }
       </style>
 
       <template is="dom-if" if="[[!_page]]">
-      <more-info-controls class="no-padding" hass="[[hass]]" state-obj="[[stateObj]]" dialog-element="[[_dialogElement]]" can-configure="[[_registryInfo]]" large="{{large}}"></more-info-controls>
+        <more-info-controls
+          class="no-padding"
+          hass="[[hass]]"
+          state-obj="[[stateObj]]"
+          dialog-element="[[_dialogElement]]"
+          can-configure="[[_registryInfo]]"
+          large="{{large}}"
+        ></more-info-controls>
       </template>
       <template is="dom-if" if="[[_equals(_page, &quot;settings&quot;)]]">
-      <more-info-settings class="no-padding" hass="[[hass]]" state-obj="[[stateObj]]" registry-info="{{_registryInfo}}"></more-info-settings>
+        <more-info-settings
+          class="no-padding"
+          hass="[[hass]]"
+          state-obj="[[stateObj]]"
+          registry-info="{{_registryInfo}}"
+        ></more-info-settings>
       </template>
-`;
+    `;
   }
 
   static get properties() {

src/dialogs/ha-store-auth-card.js

@@ -10,7 +10,7 @@ import "../resources/ha-style";
 class HaStoreAuth extends LocalizeMixin(PolymerElement) {
   static get template() {
     return html`
-      <style include='ha-style'>
+      <style include="ha-style">
         paper-card {
           position: fixed;
           padding: 8px 0;
@@ -31,12 +31,14 @@ class HaStoreAuth extends LocalizeMixin(PolymerElement) {
         }
       </style>
       <paper-card elevation="4">
-        <div class='card-content'>
+        <div class="card-content">[[localize('ui.auth_store.ask')]]</div>
-          [[localize('ui.auth_store.ask')]]
+        <div class="card-actions">
-        </div>
+          <paper-button on-click="_done"
-        <div class='card-actions'>
+            >[[localize('ui.auth_store.decline')]]</paper-button
-          <paper-button on-click='_done'>[[localize('ui.auth_store.decline')]]</paper-button>
+          >
-          <paper-button primary on-click='_save'>[[localize('ui.auth_store.confirm')]]</paper-button>
+          <paper-button primary on-click="_save"
+            >[[localize('ui.auth_store.confirm')]]</paper-button
+          >
         </div>
       </paper-card>
     `;

src/dialogs/ha-voice-command-dialog.js

@@ -113,23 +113,27 @@ class HaVoiceCommandDialog extends DialogMixin(PolymerElement) {
       <div class="content">
         <div class="messages" id="messages">
           <template is="dom-repeat" items="[[_conversation]]" as="message">
-          <div class$="[[_computeMessageClasses(message)]]">[[message.text]]</div>
+            <div class$="[[_computeMessageClasses(message)]]">
+              [[message.text]]
+            </div>
           </template>
         </div>
         <template is="dom-if" if="[[results]]">
           <div class="messages">
             <div class="message user">
               <span>{{results.final}}</span>
-            <span class="interimTranscript">[[results.interim]]</span>
+              <span class="interimTranscript">[[results.interim]]</span> …
-            …
             </div>
           </div>
         </template>
         <div class="icon" hidden$="[[results]]">
-        <paper-icon-button icon="hass:text-to-speech" on-click="startListening"></paper-icon-button>
+          <paper-icon-button
+            icon="hass:text-to-speech"
+            on-click="startListening"
+          ></paper-icon-button>
         </div>
       </div>
-`;
+    `;
   }
 
   static get properties() {

src/dialogs/more-info/controls/more-info-alarm_control_panel.js

@@ -51,21 +51,85 @@ class MoreInfoAlarmControlPanel extends LocalizeMixin(
         <template is="dom-if" if="[[_isNumber(_codeFormat)]]">
           <div class="pad">
             <div>
-              <paper-button on-click='_digitClicked' disabled='[[!_inputEnabled]]' data-digit="1" raised>1</paper-button>
+              <paper-button
-              <paper-button on-click='_digitClicked' disabled='[[!_inputEnabled]]' data-digit="4" raised>4</paper-button>
+                on-click="_digitClicked"
-              <paper-button on-click='_digitClicked' disabled='[[!_inputEnabled]]' data-digit="7" raised>7</paper-button>
+                disabled="[[!_inputEnabled]]"
+                data-digit="1"
+                raised
+                >1</paper-button
+              >
+              <paper-button
+                on-click="_digitClicked"
+                disabled="[[!_inputEnabled]]"
+                data-digit="4"
+                raised
+                >4</paper-button
+              >
+              <paper-button
+                on-click="_digitClicked"
+                disabled="[[!_inputEnabled]]"
+                data-digit="7"
+                raised
+                >7</paper-button
+              >
             </div>
             <div>
-              <paper-button on-click='_digitClicked' disabled='[[!_inputEnabled]]' data-digit="2" raised>2</paper-button>
+              <paper-button
-              <paper-button on-click='_digitClicked' disabled='[[!_inputEnabled]]' data-digit="5" raised>5</paper-button>
+                on-click="_digitClicked"
-              <paper-button on-click='_digitClicked' disabled='[[!_inputEnabled]]' data-digit="8" raised>8</paper-button>
+                disabled="[[!_inputEnabled]]"
-              <paper-button on-click='_digitClicked' disabled='[[!_inputEnabled]]' data-digit="0" raised>0</paper-button>
+                data-digit="2"
+                raised
+                >2</paper-button
+              >
+              <paper-button
+                on-click="_digitClicked"
+                disabled="[[!_inputEnabled]]"
+                data-digit="5"
+                raised
+                >5</paper-button
+              >
+              <paper-button
+                on-click="_digitClicked"
+                disabled="[[!_inputEnabled]]"
+                data-digit="8"
+                raised
+                >8</paper-button
+              >
+              <paper-button
+                on-click="_digitClicked"
+                disabled="[[!_inputEnabled]]"
+                data-digit="0"
+                raised
+                >0</paper-button
+              >
             </div>
             <div>
-              <paper-button on-click='_digitClicked' disabled='[[!_inputEnabled]]' data-digit="3" raised>3</paper-button>
+              <paper-button
-              <paper-button on-click='_digitClicked' disabled='[[!_inputEnabled]]' data-digit="6" raised>6</paper-button>
+                on-click="_digitClicked"
-              <paper-button on-click='_digitClicked' disabled='[[!_inputEnabled]]' data-digit="9" raised>9</paper-button>
+                disabled="[[!_inputEnabled]]"
-              <paper-button on-click='_clearEnteredCode' disabled='[[!_inputEnabled]]' raised>
+                data-digit="3"
+                raised
+                >3</paper-button
+              >
+              <paper-button
+                on-click="_digitClicked"
+                disabled="[[!_inputEnabled]]"
+                data-digit="6"
+                raised
+                >6</paper-button
+              >
+              <paper-button
+                on-click="_digitClicked"
+                disabled="[[!_inputEnabled]]"
+                data-digit="9"
+                raised
+                >9</paper-button
+              >
+              <paper-button
+                on-click="_clearEnteredCode"
+                disabled="[[!_inputEnabled]]"
+                raised
+              >
                 [[localize('ui.card.alarm_control_panel.clear_code')]]
               </paper-button>
             </div>
@@ -75,15 +139,31 @@ class MoreInfoAlarmControlPanel extends LocalizeMixin(
 
       <div class="layout horizontal center-justified actions">
         <template is="dom-if" if="[[_disarmVisible]]">
-          <paper-button raised class="disarm" on-click="_callService" data-service="alarm_disarm" disabled="[[!_codeValid]]">
+          <paper-button
+            raised
+            class="disarm"
+            on-click="_callService"
+            data-service="alarm_disarm"
+            disabled="[[!_codeValid]]"
+          >
             [[localize('ui.card.alarm_control_panel.disarm')]]
           </paper-button>
         </template>
         <template is="dom-if" if="[[_armVisible]]">
-          <paper-button raised on-click="_callService" data-service="alarm_arm_home" disabled="[[!_codeValid]]">
+          <paper-button
+            raised
+            on-click="_callService"
+            data-service="alarm_arm_home"
+            disabled="[[!_codeValid]]"
+          >
             [[localize('ui.card.alarm_control_panel.arm_home')]]
           </paper-button>
-          <paper-button raised on-click="_callService" data-service="alarm_arm_away" disabled="[[!_codeValid]]">
+          <paper-button
+            raised
+            on-click="_callService"
+            data-service="alarm_arm_away"
+            disabled="[[!_codeValid]]"
+          >
             [[localize('ui.card.alarm_control_panel.arm_away')]]
           </paper-button>
         </template>

src/dialogs/more-info/controls/more-info-automation.js

@@ -25,10 +25,11 @@ class MoreInfoAutomation extends LocalizeMixin(PolymerElement) {
       </style>
 
       <div class="flex">
-        <div>
+        <div>[[localize('ui.card.automation.last_triggered')]]:</div>
-          [[localize('ui.card.automation.last_triggered')]]:
+        <ha-relative-time
-        </div>
+          hass="[[hass]]"
-        <ha-relative-time hass="[[hass]]" datetime="[[stateObj.attributes.last_triggered]]"></ha-relative-time>
+          datetime="[[stateObj.attributes.last_triggered]]"
+        ></ha-relative-time>
       </div>
 
       <div class="actions">

src/dialogs/more-info/controls/more-info-camera.js

@@ -13,7 +13,7 @@ class MoreInfoCamera extends EventsMixin(PolymerElement) {
     return html`
       <style>
         :host {
-        max-width:640px;
+          max-width: 640px;
         }
 
         .camera-image {
@@ -21,8 +21,13 @@ class MoreInfoCamera extends EventsMixin(PolymerElement) {
         }
       </style>
 
-    <img class="camera-image" src="[[computeCameraImageUrl(hass, stateObj, isVisible)]]" on-load="imageLoaded" alt="[[_computeStateName(stateObj)]]">
+      <img
-`;
+        class="camera-image"
+        src="[[computeCameraImageUrl(hass, stateObj, isVisible)]]"
+        on-load="imageLoaded"
+        alt="[[_computeStateName(stateObj)]]"
+      />
+    `;
   }
 
   static get properties() {

src/dialogs/more-info/controls/more-info-climate.js

@@ -109,12 +109,14 @@ class MoreInfoClimate extends LocalizeMixin(EventsMixin(PolymerElement)) {
       </style>
 
       <div class$="[[computeClassNames(stateObj)]]">
-
         <template is="dom-if" if="[[supportsOn(stateObj)]]">
           <div class="container-on">
             <div class="center horizontal layout single-row">
               <div class="flex">[[localize('ui.card.climate.on_off')]]</div>
-            <paper-toggle-button checked="[[onToggleChecked]]" on-change="onToggleChanged">
+              <paper-toggle-button
+                checked="[[onToggleChecked]]"
+                on-change="onToggleChanged"
+              >
               </paper-toggle-button>
             </div>
           </div>
@@ -122,15 +124,40 @@ class MoreInfoClimate extends LocalizeMixin(EventsMixin(PolymerElement)) {
 
         <div class="container-temperature">
           <div class$="[[stateObj.attributes.operation_mode]]">
-          <div hidden$="[[!supportsTemperatureControls(stateObj)]]">[[localize('ui.card.climate.target_temperature')]]</div>
+            <div hidden$="[[!supportsTemperatureControls(stateObj)]]">
+              [[localize('ui.card.climate.target_temperature')]]
+            </div>
             <template is="dom-if" if="[[supportsTemperature(stateObj)]]">
-            <ha-climate-control value="[[stateObj.attributes.temperature]]" units="[[hass.config.unit_system.temperature]]" step="[[computeTemperatureStepSize(hass, stateObj)]]" min="[[stateObj.attributes.min_temp]]" max="[[stateObj.attributes.max_temp]]" on-change="targetTemperatureChanged">
+              <ha-climate-control
+                value="[[stateObj.attributes.temperature]]"
+                units="[[hass.config.unit_system.temperature]]"
+                step="[[computeTemperatureStepSize(hass, stateObj)]]"
+                min="[[stateObj.attributes.min_temp]]"
+                max="[[stateObj.attributes.max_temp]]"
+                on-change="targetTemperatureChanged"
+              >
               </ha-climate-control>
             </template>
             <template is="dom-if" if="[[supportsTemperatureRange(stateObj)]]">
-            <ha-climate-control value="[[stateObj.attributes.target_temp_low]]" units="[[hass.config.unit_system.temperature]]" step="[[computeTemperatureStepSize(hass, stateObj)]]" min="[[stateObj.attributes.min_temp]]" max="[[stateObj.attributes.target_temp_high]]" class="range-control-left" on-change="targetTemperatureLowChanged">
+              <ha-climate-control
+                value="[[stateObj.attributes.target_temp_low]]"
+                units="[[hass.config.unit_system.temperature]]"
+                step="[[computeTemperatureStepSize(hass, stateObj)]]"
+                min="[[stateObj.attributes.min_temp]]"
+                max="[[stateObj.attributes.target_temp_high]]"
+                class="range-control-left"
+                on-change="targetTemperatureLowChanged"
+              >
               </ha-climate-control>
-            <ha-climate-control value="[[stateObj.attributes.target_temp_high]]" units="[[hass.config.unit_system.temperature]]" step="[[computeTemperatureStepSize(hass, stateObj)]]" min="[[stateObj.attributes.target_temp_low]]" max="[[stateObj.attributes.max_temp]]" class="range-control-right" on-change="targetTemperatureHighChanged">
+              <ha-climate-control
+                value="[[stateObj.attributes.target_temp_high]]"
+                units="[[hass.config.unit_system.temperature]]"
+                step="[[computeTemperatureStepSize(hass, stateObj)]]"
+                min="[[stateObj.attributes.target_temp_low]]"
+                max="[[stateObj.attributes.max_temp]]"
+                class="range-control-right"
+                on-change="targetTemperatureHighChanged"
+              >
               </ha-climate-control>
             </template>
           </div>
@@ -140,8 +167,20 @@ class MoreInfoClimate extends LocalizeMixin(EventsMixin(PolymerElement)) {
           <div class="container-humidity">
             <div>[[localize('ui.card.climate.target_humidity')]]</div>
             <div class="single-row">
-              <div class="target-humidity">[[stateObj.attributes.humidity]] %</div>
+              <div class="target-humidity">
-              <ha-paper-slider class="humidity" min="[[stateObj.attributes.min_humidity]]" max="[[stateObj.attributes.max_humidity]]" secondary-progress="[[stateObj.attributes.max_humidity]]" step="1" pin="" value="[[stateObj.attributes.humidity]]" on-change="targetHumiditySliderChanged" ignore-bar-touch="">
+                [[stateObj.attributes.humidity]] %
+              </div>
+              <ha-paper-slider
+                class="humidity"
+                min="[[stateObj.attributes.min_humidity]]"
+                max="[[stateObj.attributes.max_humidity]]"
+                secondary-progress="[[stateObj.attributes.max_humidity]]"
+                step="1"
+                pin=""
+                value="[[stateObj.attributes.humidity]]"
+                on-change="targetHumiditySliderChanged"
+                ignore-bar-touch=""
+              >
               </ha-paper-slider>
             </div>
           </div>
@@ -150,10 +189,23 @@ class MoreInfoClimate extends LocalizeMixin(EventsMixin(PolymerElement)) {
         <template is="dom-if" if="[[supportsOperationMode(stateObj)]]">
           <div class="container-operation_list">
             <div class="controls">
-            <paper-dropdown-menu label-float="" dynamic-align="" label="[[localize('ui.card.climate.operation')]]">
+              <paper-dropdown-menu
-              <paper-listbox slot="dropdown-content" selected="{{operationIndex}}">
+                label-float=""
-                <template is="dom-repeat" items="[[stateObj.attributes.operation_list]]" on-dom-change="handleOperationListUpdate">
+                dynamic-align=""
-                  <paper-item>[[_localizeOperationMode(localize, item)]]</paper-item>
+                label="[[localize('ui.card.climate.operation')]]"
+              >
+                <paper-listbox
+                  slot="dropdown-content"
+                  selected="{{operationIndex}}"
+                >
+                  <template
+                    is="dom-repeat"
+                    items="[[stateObj.attributes.operation_list]]"
+                    on-dom-change="handleOperationListUpdate"
+                  >
+                    <paper-item
+                      >[[_localizeOperationMode(localize, item)]]</paper-item
+                    >
                   </template>
                 </paper-listbox>
               </paper-dropdown-menu>
@@ -163,9 +215,17 @@ class MoreInfoClimate extends LocalizeMixin(EventsMixin(PolymerElement)) {
 
         <template is="dom-if" if="[[supportsFanMode(stateObj)]]">
           <div class="container-fan_list">
-          <paper-dropdown-menu label-float="" dynamic-align="" label="[[localize('ui.card.climate.fan_mode')]]">
+            <paper-dropdown-menu
+              label-float=""
+              dynamic-align=""
+              label="[[localize('ui.card.climate.fan_mode')]]"
+            >
               <paper-listbox slot="dropdown-content" selected="{{fanIndex}}">
-              <template is="dom-repeat" items="[[stateObj.attributes.fan_list]]" on-dom-change="handleFanListUpdate">
+                <template
+                  is="dom-repeat"
+                  items="[[stateObj.attributes.fan_list]]"
+                  on-dom-change="handleFanListUpdate"
+                >
                   <paper-item>[[item]]</paper-item>
                 </template>
               </paper-listbox>
@@ -175,9 +235,17 @@ class MoreInfoClimate extends LocalizeMixin(EventsMixin(PolymerElement)) {
 
         <template is="dom-if" if="[[supportsSwingMode(stateObj)]]">
           <div class="container-swing_list">
-          <paper-dropdown-menu label-float="" dynamic-align="" label="[[localize('ui.card.climate.swing_mode')]]">
+            <paper-dropdown-menu
+              label-float=""
+              dynamic-align=""
+              label="[[localize('ui.card.climate.swing_mode')]]"
+            >
               <paper-listbox slot="dropdown-content" selected="{{swingIndex}}">
-              <template is="dom-repeat" items="[[stateObj.attributes.swing_list]]" on-dom-change="handleSwingListUpdate">
+                <template
+                  is="dom-repeat"
+                  items="[[stateObj.attributes.swing_list]]"
+                  on-dom-change="handleSwingListUpdate"
+                >
                   <paper-item>[[item]]</paper-item>
                 </template>
               </paper-listbox>
@@ -189,7 +257,10 @@ class MoreInfoClimate extends LocalizeMixin(EventsMixin(PolymerElement)) {
           <div class="container-away_mode">
             <div class="center horizontal layout single-row">
               <div class="flex">[[localize('ui.card.climate.away_mode')]]</div>
-            <paper-toggle-button checked="[[awayToggleChecked]]" on-change="awayToggleChanged">
+              <paper-toggle-button
+                checked="[[awayToggleChecked]]"
+                on-change="awayToggleChanged"
+              >
               </paper-toggle-button>
             </div>
           </div>
@@ -199,13 +270,16 @@ class MoreInfoClimate extends LocalizeMixin(EventsMixin(PolymerElement)) {
           <div class="container-aux_heat">
             <div class="center horizontal layout single-row">
               <div class="flex">[[localize('ui.card.climate.aux_heat')]]</div>
-            <paper-toggle-button checked="[[auxToggleChecked]]" on-change="auxToggleChanged">
+              <paper-toggle-button
+                checked="[[auxToggleChecked]]"
+                on-change="auxToggleChanged"
+              >
               </paper-toggle-button>
             </div>
           </div>
         </template>
       </div>
-`;
+    `;
   }
 
   static get properties() {

src/dialogs/more-info/controls/more-info-configurator.js

@@ -30,7 +30,7 @@ class MoreInfoConfigurator extends PolymerElement {
         }
 
         p.error {
-        color: #C62828;
+          color: #c62828;
         }
 
         p.submit {
@@ -51,27 +51,40 @@ class MoreInfoConfigurator extends PolymerElement {
 
       <div class="layout vertical">
         <template is="dom-if" if="[[isConfigurable]]">
-        <ha-markdown content="[[stateObj.attributes.description]]"></ha-markdown>
+          <ha-markdown
+            content="[[stateObj.attributes.description]]"
+          ></ha-markdown>
 
           <p class="error" hidden$="[[!stateObj.attributes.errors]]">
             [[stateObj.attributes.errors]]
           </p>
 
           <template is="dom-repeat" items="[[stateObj.attributes.fields]]">
-          <paper-input label="[[item.name]]" name="[[item.id]]" type="[[item.type]]" on-change="fieldChanged"></paper-input>
+            <paper-input
+              label="[[item.name]]"
+              name="[[item.id]]"
+              type="[[item.type]]"
+              on-change="fieldChanged"
+            ></paper-input>
           </template>
 
           <p class="submit" hidden$="[[!stateObj.attributes.submit_caption]]">
-          <paper-button raised="" disabled="[[isConfiguring]]" on-click="submitClicked">
+            <paper-button
-            <paper-spinner active="[[isConfiguring]]" hidden="[[!isConfiguring]]" alt="Configuring"></paper-spinner>
+              raised=""
+              disabled="[[isConfiguring]]"
+              on-click="submitClicked"
+            >
+              <paper-spinner
+                active="[[isConfiguring]]"
+                hidden="[[!isConfiguring]]"
+                alt="Configuring"
+              ></paper-spinner>
               [[stateObj.attributes.submit_caption]]
             </paper-button>
-
           </p>
-
         </template>
       </div>
-`;
+    `;
   }
 
   static get properties() {

src/dialogs/more-info/controls/more-info-cover.js

@@ -20,15 +20,15 @@ class MoreInfoCover extends LocalizeMixin(PolymerElement) {
     return html`
       <style include="iron-flex"></style>
       <style>
-    .current_position, .tilt {
+        .current_position,
+        .tilt {
           max-height: 0px;
           overflow: hidden;
         }
 
         .has-current_position .current_position,
         .has-set_tilt_position .tilt,
-    .has-current_tilt_position .tilt
+        .has-current_tilt_position .tilt {
-    {
           max-height: 208px;
         }
 
@@ -37,10 +37,10 @@ class MoreInfoCover extends LocalizeMixin(PolymerElement) {
         }
       </style>
       <div class$="[[computeClassNames(stateObj)]]">
-
         <div class="current_position">
           <ha-labeled-slider
-        caption="[[localize('ui.card.cover.position')]]" pin=""
+            caption="[[localize('ui.card.cover.position')]]"
+            pin=""
             value="{{coverPositionSliderValue}}"
             disabled="[[!entityObj.supportsSetPosition]]"
             on-change="coverPositionSliderChanged"
@@ -49,21 +49,23 @@ class MoreInfoCover extends LocalizeMixin(PolymerElement) {
 
         <div class="tilt">
           <ha-labeled-slider
-        caption="[[localize('ui.card.cover.tilt_position')]]" pin="" extra=""
+            caption="[[localize('ui.card.cover.tilt_position')]]"
+            pin=""
+            extra=""
             value="{{coverTiltPositionSliderValue}}"
             disabled="[[!entityObj.supportsSetTiltPosition]]"
-        on-change="coverTiltPositionSliderChanged">
+            on-change="coverTiltPositionSliderChanged"
-
+          >
             <ha-cover-tilt-controls
-          slot="extra" hidden$="[[entityObj.isTiltOnly]]"
+              slot="extra"
-          hass="[[hass]]" state-obj="[[stateObj]]"
+              hidden$="[[entityObj.isTiltOnly]]"
+              hass="[[hass]]"
+              state-obj="[[stateObj]]"
             ></ha-cover-tilt-controls>
-
           </ha-labeled-slider>
         </div>
-
       </div>
-`;
+    `;
   }
 
   static get properties() {

src/dialogs/more-info/controls/more-info-default.js

@@ -7,7 +7,7 @@ class MoreInfoDefault extends PolymerElement {
   static get template() {
     return html`
       <ha-attributes state-obj="[[stateObj]]"></ha-attributes>
-`;
+    `;
   }
 
   static get properties() {

src/dialogs/more-info/controls/more-info-fan.js

@@ -43,11 +43,17 @@ class MoreInfoFan extends LocalizeMixin(EventsMixin(PolymerElement)) {
       </style>
 
       <div class$="[[computeClassNames(stateObj)]]">
-
         <div class="container-speed_list">
-        <paper-dropdown-menu label-float="" dynamic-align="" label="[[localize('ui.card.fan.speed')]]">
+          <paper-dropdown-menu
+            label-float=""
+            dynamic-align=""
+            label="[[localize('ui.card.fan.speed')]]"
+          >
             <paper-listbox slot="dropdown-content" selected="{{speedIndex}}">
-            <template is="dom-repeat" items="[[stateObj.attributes.speed_list]]">
+              <template
+                is="dom-repeat"
+                items="[[stateObj.attributes.speed_list]]"
+              >
                 <paper-item>[[item]]</paper-item>
               </template>
             </paper-listbox>
@@ -57,7 +63,10 @@ class MoreInfoFan extends LocalizeMixin(EventsMixin(PolymerElement)) {
         <div class="container-oscillating">
           <div class="center horizontal layout single-row">
             <div class="flex">[[localize('ui.card.fan.oscillate')]]</div>
-          <paper-toggle-button checked="[[oscillationToggleChecked]]" on-change="oscillationToggleChanged">
+            <paper-toggle-button
+              checked="[[oscillationToggleChecked]]"
+              on-change="oscillationToggleChanged"
+            >
             </paper-toggle-button>
           </div>
         </div>
@@ -65,14 +74,27 @@ class MoreInfoFan extends LocalizeMixin(EventsMixin(PolymerElement)) {
         <div class="container-direction">
           <div class="direction">
             <div>[[localize('ui.card.fan.direction')]]</div>
-          <paper-icon-button icon="hass:rotate-left" on-click="onDirectionLeft" title="Left" disabled="[[computeIsRotatingLeft(stateObj)]]"></paper-icon-button>
+            <paper-icon-button
-          <paper-icon-button icon="hass:rotate-right" on-click="onDirectionRight" title="Right" disabled="[[computeIsRotatingRight(stateObj)]]"></paper-icon-button>
+              icon="hass:rotate-left"
+              on-click="onDirectionLeft"
+              title="Left"
+              disabled="[[computeIsRotatingLeft(stateObj)]]"
+            ></paper-icon-button>
+            <paper-icon-button
+              icon="hass:rotate-right"
+              on-click="onDirectionRight"
+              title="Right"
+              disabled="[[computeIsRotatingRight(stateObj)]]"
+            ></paper-icon-button>
           </div>
         </div>
       </div>
 
-    <ha-attributes state-obj="[[stateObj]]" extra-filters="speed,speed_list,oscillating,direction"></ha-attributes>
+      <ha-attributes
-`;
+        state-obj="[[stateObj]]"
+        extra-filters="speed,speed_list,oscillating,direction"
+      ></ha-attributes>
+    `;
   }
 
   static get properties() {