Format html (#2006)

* Upgrade prettier

* Format files with prettier

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

@@ -18,120 +18,126 @@ class HaChartBase extends mixinBehaviors(
 ) {
   static get template() {
     return html`
-  <style>
-    :host {
-      display: block;
-    }
-    .chartHeader {
-      padding: 6px 0 0 0;
-      width: 100%;
-      display: flex;
-      flex-direction: row;
-    }
-    .chartHeader > div {
-      vertical-align: top;
-      padding: 0 8px;
-    }
-    .chartHeader > div.chartTitle {
-      padding-top: 8px;
-      flex: 0 0 0;
-      max-width: 30%;
-    }
-    .chartHeader > div.chartLegend {
-      flex: 1 1;
-      min-width: 70%;
-    }
-    :root{
-      user-select: none;
-      -moz-user-select: none;
-      -webkit-user-select: none;
-      -ms-user-select: none;
-    }
-    .chartTooltip {
-      font-size: 90%;
-      opacity: 1;
-      position: absolute;
-      background: rgba(80, 80, 80, .9);
-      color: white;
-      border-radius: 3px;
-      pointer-events: none;
-      transform: translate(-50%, 12px);
-      z-index: 1000;
-      width: 200px;
-      transition: opacity 0.15s ease-in-out;
-    }
-    .chartLegend ul,
-    .chartTooltip ul {
-      display: inline-block;
-      padding: 0 0px;
-      margin: 5px 0 0 0;
-      width: 100%
-    }
-    .chartTooltip li {
-      display: block;
-      white-space: pre-line;
-    }
-    .chartTooltip .title {
-      text-align: center;
-      font-weight: 500;
-    }
-    .chartLegend li {
-      display: inline-block;
-      padding: 0 6px;
-      max-width: 49%;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      overflow: hidden;
-      box-sizing: border-box;
-    }
-    .chartLegend li:nth-child(odd):last-of-type {
-      /* Make last item take full width if it is odd-numbered. */
-      max-width: 100%;
-    }
-    .chartLegend li[data-hidden] {
-      text-decoration: line-through;
-    }
-    .chartLegend em,
-    .chartTooltip em {
-      border-radius: 5px;
-      display: inline-block;
-      height: 10px;
-      margin-right: 4px;
-      width: 10px;
-    }
-    paper-icon-button {
-      color: var(--secondary-text-color);
-    }
-  </style>
-  <template is="dom-if" if="[[unit]]">
-    <div class="chartHeader">
-      <div class="chartTitle">[[unit]]</div>
-      <div class="chartLegend">
-        <ul>
-          <template is="dom-repeat" items="[[metas]]">
-            <li on-click="_legendClick" data-hidden$="[[item.hidden]]">
-              <em style$="background-color:[[item.bgColor]]"></em>
-              [[item.label]]
-            </li>
-          </template>
-        </ul>
+      <style>
+        :host {
+          display: block;
+        }
+        .chartHeader {
+          padding: 6px 0 0 0;
+          width: 100%;
+          display: flex;
+          flex-direction: row;
+        }
+        .chartHeader > div {
+          vertical-align: top;
+          padding: 0 8px;
+        }
+        .chartHeader > div.chartTitle {
+          padding-top: 8px;
+          flex: 0 0 0;
+          max-width: 30%;
+        }
+        .chartHeader > div.chartLegend {
+          flex: 1 1;
+          min-width: 70%;
+        }
+        :root {
+          user-select: none;
+          -moz-user-select: none;
+          -webkit-user-select: none;
+          -ms-user-select: none;
+        }
+        .chartTooltip {
+          font-size: 90%;
+          opacity: 1;
+          position: absolute;
+          background: rgba(80, 80, 80, 0.9);
+          color: white;
+          border-radius: 3px;
+          pointer-events: none;
+          transform: translate(-50%, 12px);
+          z-index: 1000;
+          width: 200px;
+          transition: opacity 0.15s ease-in-out;
+        }
+        .chartLegend ul,
+        .chartTooltip ul {
+          display: inline-block;
+          padding: 0 0px;
+          margin: 5px 0 0 0;
+          width: 100%;
+        }
+        .chartTooltip li {
+          display: block;
+          white-space: pre-line;
+        }
+        .chartTooltip .title {
+          text-align: center;
+          font-weight: 500;
+        }
+        .chartLegend li {
+          display: inline-block;
+          padding: 0 6px;
+          max-width: 49%;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          overflow: hidden;
+          box-sizing: border-box;
+        }
+        .chartLegend li:nth-child(odd):last-of-type {
+          /* Make last item take full width if it is odd-numbered. */
+          max-width: 100%;
+        }
+        .chartLegend li[data-hidden] {
+          text-decoration: line-through;
+        }
+        .chartLegend em,
+        .chartTooltip em {
+          border-radius: 5px;
+          display: inline-block;
+          height: 10px;
+          margin-right: 4px;
+          width: 10px;
+        }
+        paper-icon-button {
+          color: var(--secondary-text-color);
+        }
+      </style>
+      <template is="dom-if" if="[[unit]]">
+        <div class="chartHeader">
+          <div class="chartTitle">[[unit]]</div>
+          <div class="chartLegend">
+            <ul>
+              <template is="dom-repeat" items="[[metas]]">
+                <li on-click="_legendClick" data-hidden$="[[item.hidden]]">
+                  <em style$="background-color:[[item.bgColor]]"></em>
+                  [[item.label]]
+                </li>
+              </template>
+            </ul>
+          </div>
+        </div>
+      </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="title">[[tooltip.title]]</div>
+          <div>
+            <ul>
+              <template is="dom-repeat" items="[[tooltip.lines]]">
+                <li>
+                  <em style$="background-color:[[item.bgColor]]"></em
+                  >[[item.text]]
+                </li>
+              </template>
+            </ul>
+          </div>
+        </div>
       </div>
-    </div>
-  </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="title">[[tooltip.title]]</div>
-      <div>
-        <ul>
-          <template is="dom-repeat" items="[[tooltip.lines]]">
-            <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

@@ -18,56 +18,70 @@ import EventsMixin from "../../mixins/events-mixin";
 class HaEntityPicker extends EventsMixin(LocalizeMixin(PolymerElement)) {
   static get template() {
     return html`
-    <style>
-      paper-input > paper-icon-button {
-        width: 24px;
-        height: 24px;
-        padding: 2px;
-        color: var(--secondary-text-color);
-      }
-      [hidden] {
-        display: none;
-      }
-    </style>
-    <vaadin-combo-box-light
-      items="[[_states]]"
-      item-value-path="entity_id"
-      item-label-path="entity_id"
-      value="{{value}}"
-      opened="{{opened}}"
-      allow-custom-value="[[allowCustomEntity]]"
-      on-change='_fireChanged'
-    >
-      <paper-input
-        autofocus="[[autofocus]]"
-        label="[[_computeLabel(label, localize)]]"
-        class="input"
-        autocapitalize='none'
-        autocomplete='off'
-        autocorrect='off'
-        spellcheck='false'
-        value="[[value]]"
-        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-input>
-      <template>
-        <style>
-          paper-icon-item {
-            margin: -10px;
-            padding: 0;
-          }
-        </style>
-        <paper-icon-item>
-          <state-badge state-obj="[[item]]" slot="item-icon"></state-badge>
-          <paper-item-body two-line="">
-            <div>[[_computeStateName(item)]]</div>
-            <div secondary="">[[item.entity_id]]</div>
-          </paper-item-body>
-        </paper-icon-item>
-      </template>
-    </vaadin-combo-box-light>
-`;
+      <style>
+        paper-input > paper-icon-button {
+          width: 24px;
+          height: 24px;
+          padding: 2px;
+          color: var(--secondary-text-color);
+        }
+        [hidden] {
+          display: none;
+        }
+      </style>
+      <vaadin-combo-box-light
+        items="[[_states]]"
+        item-value-path="entity_id"
+        item-label-path="entity_id"
+        value="{{value}}"
+        opened="{{opened}}"
+        allow-custom-value="[[allowCustomEntity]]"
+        on-change="_fireChanged"
+      >
+        <paper-input
+          autofocus="[[autofocus]]"
+          label="[[_computeLabel(label, localize)]]"
+          class="input"
+          autocapitalize="none"
+          autocomplete="off"
+          autocorrect="off"
+          spellcheck="false"
+          value="[[value]]"
+          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-input>
+        <template>
+          <style>
+            paper-icon-item {
+              margin: -10px;
+              padding: 0;
+            }
+          </style>
+          <paper-icon-item>
+            <state-badge state-obj="[[item]]" slot="item-icon"></state-badge>
+            <paper-item-body two-line="">
+              <div>[[_computeStateName(item)]]</div>
+              <div secondary="">[[item.entity_id]]</div>
+            </paper-item-body>
+          </paper-icon-item>
+        </template>
+      </vaadin-combo-box-light>
+    `;
   }
 
   static get properties() {

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

@@ -9,34 +9,48 @@ import computeStateDomain from "../../common/entity/compute_state_domain";
 class HaEntityToggle extends PolymerElement {
   static get template() {
     return html`
-    <style>
-      :host {
-        white-space: nowrap;
-        min-width: 38px;
-      }
-      paper-icon-button {
-        color: var(--paper-icon-button-inactive-color, var(--primary-text-color));
-        transition: color .5s;
-      }
-      paper-icon-button[state-active] {
-        color: var(--paper-icon-button-active-color, var(--primary-color));
-      }
-      paper-toggle-button {
-        cursor: pointer;
-        --paper-toggle-button-label-spacing: 0;
-        padding: 13px 5px;
-        margin: -4px -5px;
-      }
-    </style>
+      <style>
+        :host {
+          white-space: nowrap;
+          min-width: 38px;
+        }
+        paper-icon-button {
+          color: var(
+            --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));
+        }
+        paper-toggle-button {
+          cursor: pointer;
+          --paper-toggle-button-label-spacing: 0;
+          padding: 13px 5px;
+          margin: -4px -5px;
+        }
+      </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 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>
-    </template>
-`;
+      <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
+          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>
+      </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

@@ -21,46 +21,56 @@ import LocalizeMixin from "../../mixins/localize-mixin";
 class HaStateLabelBadge extends LocalizeMixin(EventsMixin(PolymerElement)) {
   static get template() {
     return html`
-    <style>
-      :host {
-        cursor: pointer;
-      }
+      <style>
+        :host {
+          cursor: pointer;
+        }
 
-      ha-label-badge {
-        --ha-label-badge-color: var(--label-badge-red, #DF4C1E);
-      }
-      ha-label-badge.has-unit_of_measurement {
-        --ha-label-badge-label-text-transform: none;
-      }
+        ha-label-badge {
+          --ha-label-badge-color: var(--label-badge-red, #df4c1e);
+        }
+        ha-label-badge.has-unit_of_measurement {
+          --ha-label-badge-label-text-transform: none;
+        }
 
-      ha-label-badge.binary_sensor,
-      ha-label-badge.updater {
-        --ha-label-badge-color: var(--label-badge-blue, #039be5);
-      }
+        ha-label-badge.binary_sensor,
+        ha-label-badge.updater {
+          --ha-label-badge-color: var(--label-badge-blue, #039be5);
+        }
 
-      .red {
-        --ha-label-badge-color: var(--label-badge-red, #DF4C1E);
-      }
+        .red {
+          --ha-label-badge-color: var(--label-badge-red, #df4c1e);
+        }
 
-      .blue {
-        --ha-label-badge-color: var(--label-badge-blue, #039be5);
-      }
+        .blue {
+          --ha-label-badge-color: var(--label-badge-blue, #039be5);
+        }
 
-      .green {
-        --ha-label-badge-color: var(--label-badge-green, #0DA035);
-      }
+        .green {
+          --ha-label-badge-color: var(--label-badge-green, #0da035);
+        }
 
-      .yellow {
-        --ha-label-badge-color: var(--label-badge-yellow, #f4b400);
-      }
+        .yellow {
+          --ha-label-badge-color: var(--label-badge-yellow, #f4b400);
+        }
 
-      .grey {
-        --ha-label-badge-color: var(--label-badge-grey, var(--paper-grey-500));
-      }
-    </style>
+        .grey {
+          --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

@@ -8,45 +8,45 @@ import stateIcon from "../../common/entity/state_icon";
 class StateBadge extends PolymerElement {
   static get template() {
     return html`
-    <style>
-    :host {
-      position: relative;
-      display: inline-block;
-      width: 40px;
-      color: var(--paper-item-icon-color, #44739e);
-      border-radius: 50%;
-      height: 40px;
-      text-align: center;
-      background-size: cover;
-      line-height: 40px;
-    }
+      <style>
+        :host {
+          position: relative;
+          display: inline-block;
+          width: 40px;
+          color: var(--paper-item-icon-color, #44739e);
+          border-radius: 50%;
+          height: 40px;
+          text-align: center;
+          background-size: cover;
+          line-height: 40px;
+        }
 
-    ha-icon {
-      transition: color .3s ease-in-out, filter .3s ease-in-out;
-    }
+        ha-icon {
+          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=switch][data-state=on],
-    ha-icon[data-domain=binary_sensor][data-state=on],
-    ha-icon[data-domain=fan][data-state=on],
-    ha-icon[data-domain=sun][data-state=above_horizon] {
-      color: var(--paper-item-icon-active-color, #FDD835);
-    }
+        /* Color the icon if light or sun is on */
+        ha-icon[data-domain="light"][data-state="on"],
+        ha-icon[data-domain="switch"][data-state="on"],
+        ha-icon[data-domain="binary_sensor"][data-state="on"],
+        ha-icon[data-domain="fan"][data-state="on"],
+        ha-icon[data-domain="sun"][data-state="above_horizon"] {
+          color: var(--paper-item-icon-active-color, #fdd835);
+        }
 
-    /* Color the icon if unavailable */
-    ha-icon[data-state=unavailable] {
-      color: var(--state-icon-unavailable-color);
-    }
-    </style>
+        /* Color the icon if unavailable */
+        ha-icon[data-state="unavailable"] {
+          color: var(--state-icon-unavailable-color);
+        }
+      </style>
 
-    <ha-icon
-      id="icon"
-      data-domain$="[[_computeDomain(stateObj)]]"
-      data-state$="[[stateObj.state]]"
-      icon="[[_computeIcon(stateObj)]]"
-    ></ha-icon>
-`;
+      <ha-icon
+        id="icon"
+        data-domain$="[[_computeDomain(stateObj)]]"
+        data-state$="[[stateObj.state]]"
+        icon="[[_computeIcon(stateObj)]]"
+      ></ha-icon>
+    `;
   }
 
   static get properties() {

src/components/entity/state-info.js

@@ -8,70 +8,74 @@ import computeStateName from "../../common/entity/compute_state_name";
 class StateInfo extends PolymerElement {
   static get template() {
     return html`
-    ${this.styleTemplate}
-    ${this.stateBadgeTemplate}
-    ${this.infoTemplate}
-`;
+      ${this.styleTemplate} ${this.stateBadgeTemplate} ${this.infoTemplate}
+    `;
   }
 
   static get styleTemplate() {
     return html`
-    <style>
-    :host {
-      @apply --paper-font-body1;
-      min-width: 120px;
-      white-space: nowrap;
-    }
+      <style>
+        :host {
+          @apply --paper-font-body1;
+          min-width: 120px;
+          white-space: nowrap;
+        }
 
-    state-badge {
-      float: left;
-    }
+        state-badge {
+          float: left;
+        }
 
-    .info {
-      margin-left: 56px;
-    }
+        .info {
+          margin-left: 56px;
+        }
 
-    .name {
-      @apply --paper-font-common-nowrap;
-      color: var(--primary-text-color);
-      line-height: 40px;
-    }
+        .name {
+          @apply --paper-font-common-nowrap;
+          color: var(--primary-text-color);
+          line-height: 40px;
+        }
 
-    .name[in-dialog], :host([secondary-line]) .name {
-      line-height: 20px;
-    }
+        .name[in-dialog],
+        :host([secondary-line]) .name {
+          line-height: 20px;
+        }
 
-    .time-ago, .extra-info, .extra-info > * {
-      @apply --paper-font-common-nowrap;
-      color: var(--secondary-text-color);
-    }
-    </style>
-`;
+        .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>
-`;
+      <state-badge state-obj="[[stateObj]]"></state-badge>
+    `;
   }
 
   static get infoTemplate() {
     return html`
-    <div class="info">
-      <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>
+      <div class="info">
+        <div class="name" in-dialog$="[[inDialog]]">
+          [[computeStateName(stateObj)]]
         </div>
-      </template>
-      <template is="dom-if" if="[[!inDialog]]">
-        <div class="extra-info">
-          <slot>
-        </slot></div>
-      </template>
-    </div>
-`;
+
+        <template is="dom-if" if="[[inDialog]]">
+          <div class="time-ago">
+            <ha-relative-time
+              hass="[[hass]]"
+              datetime="[[stateObj.last_changed]]"
+            ></ha-relative-time>
+          </div>
+        </template>
+        <template is="dom-if" if="[[!inDialog]]">
+          <div class="extra-info"><slot> </slot></div>
+        </template>
+      </div>
+    `;
   }
 
   static get properties() {