cleanup rows (#2863)

src/panels/lovelace/entity-rows/hui-climate-entity-row.ts

@@ -5,6 +5,7 @@ import {
   property,
   css,
   CSSResult,
+  customElement,
 } from "lit-element";
 
 import "../../../components/ha-climate-state";
@@ -14,8 +15,10 @@ import "../components/hui-warning";
 import { HomeAssistant } from "../../../types";
 import { EntityRow, EntityConfig } from "./types";
 
+@customElement("hui-climate-entity-row")
 class HuiClimateEntityRow extends LitElement implements EntityRow {
   @property() public hass?: HomeAssistant;
+
   @property() private _config?: EntityConfig;
 
   public setConfig(config: EntityConfig): void {
@@ -69,5 +72,3 @@ declare global {
     "hui-climate-entity-row": HuiClimateEntityRow;
   }
 }
-
-customElements.define("hui-climate-entity-row", HuiClimateEntityRow);

src/panels/lovelace/entity-rows/hui-cover-entity-row.ts

@@ -5,6 +5,7 @@ import {
   property,
   css,
   CSSResult,
+  customElement,
 } from "lit-element";
 
 import "../components/hui-generic-entity-row";
@@ -16,8 +17,10 @@ import { isTiltOnly } from "../../../util/cover-model";
 import { HomeAssistant } from "../../../types";
 import { EntityRow, EntityConfig } from "./types";
 
+@customElement("hui-cover-entity-row")
 class HuiCoverEntityRow extends LitElement implements EntityRow {
   @property() public hass?: HomeAssistant;
+
   @property() private _config?: EntityConfig;
 
   public setConfig(config: EntityConfig): void {
@@ -80,5 +83,3 @@ declare global {
     "hui-cover-entity-row": HuiCoverEntityRow;
   }
 }
-
-customElements.define("hui-cover-entity-row", HuiCoverEntityRow);

src/panels/lovelace/entity-rows/hui-group-entity-row.ts

@@ -1,4 +1,10 @@
-import { html, LitElement, TemplateResult, property } from "lit-element";
+import {
+  html,
+  LitElement,
+  TemplateResult,
+  property,
+  customElement,
+} from "lit-element";
 
 import "../components/hui-generic-entity-row";
 import "../../../components/entity/ha-entity-toggle";
@@ -9,8 +15,10 @@ import { DOMAINS_TOGGLE } from "../../../common/const";
 import { HomeAssistant } from "../../../types";
 import { EntityRow, EntityConfig } from "./types";
 
+@customElement("hui-group-entity-row")
 class HuiGroupEntityRow extends LitElement implements EntityRow {
   @property() public hass?: HomeAssistant;
+
   @property() private _config?: EntityConfig;
 
   public setConfig(config: EntityConfig): void {
@@ -73,5 +81,3 @@ declare global {
     "hui-group-entity-row": HuiGroupEntityRow;
   }
 }
-
-customElements.define("hui-group-entity-row", HuiGroupEntityRow);

src/panels/lovelace/entity-rows/hui-input-number-entity-row.ts

@@ -20,8 +20,11 @@ import { setValue } from "../../../data/input_text";
 @customElement("hui-input-number-entity-row")
 class HuiInputNumberEntityRow extends LitElement implements EntityRow {
   @property() public hass?: HomeAssistant;
+
   @property() private _config?: EntityConfig;
+
   private _loaded?: boolean;
+
   private _updated?: boolean;
 
   public setConfig(config: EntityConfig): void {

src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts

@@ -5,6 +5,7 @@ import {
   property,
   css,
   CSSResult,
+  customElement,
 } from "lit-element";
 import { repeat } from "lit-html/directives/repeat";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
@@ -19,8 +20,10 @@ import { HomeAssistant } from "../../../types";
 import { EntityRow, EntityConfig } from "./types";
 import { setOption } from "../../../data/input-select";
 
+@customElement("hui-input-select-entity-row")
 class HuiInputSelectEntityRow extends LitElement implements EntityRow {
   @property() public hass?: HomeAssistant;
+
   @property() private _config?: EntityConfig;
 
   public setConfig(config: EntityConfig): void {
@@ -106,5 +109,3 @@ declare global {
     "hui-input-select-entity-row": HuiInputSelectEntityRow;
   }
 }
-
-customElements.define("hui-input-select-entity-row", HuiInputSelectEntityRow);

src/panels/lovelace/entity-rows/hui-input-text-entity-row.ts

@@ -1,4 +1,10 @@
-import { html, LitElement, TemplateResult, property } from "lit-element";
+import {
+  html,
+  LitElement,
+  TemplateResult,
+  property,
+  customElement,
+} from "lit-element";
 import { PaperInputElement } from "@polymer/paper-input/paper-input";
 
 import "../components/hui-generic-entity-row";
@@ -8,8 +14,10 @@ import { HomeAssistant } from "../../../types";
 import { EntityRow, EntityConfig } from "./types";
 import { setValue } from "../../../data/input_text";
 
+@customElement("hui-input-text-entity-row")
 class HuiInputTextEntityRow extends LitElement implements EntityRow {
   @property() public hass?: HomeAssistant;
+
   @property() private _config?: EntityConfig;
 
   public setConfig(config: EntityConfig): void {
@@ -76,5 +84,3 @@ declare global {
     "hui-input-text-entity-row": HuiInputTextEntityRow;
   }
 }
-
-customElements.define("hui-input-text-entity-row", HuiInputTextEntityRow);

src/panels/lovelace/entity-rows/hui-lock-entity-row.ts

@@ -5,6 +5,7 @@ import {
   property,
   css,
   CSSResult,
+  customElement,
 } from "lit-element";
 
 import "../components/hui-generic-entity-row";
@@ -13,8 +14,10 @@ import "../components/hui-warning";
 import { HomeAssistant } from "../../../types";
 import { EntityRow, EntityConfig } from "./types";
 
+@customElement("hui-lock-entity-row")
 class HuiLockEntityRow extends LitElement implements EntityRow {
   @property() public hass?: HomeAssistant;
+
   @property() private _config?: EntityConfig;
 
   public setConfig(config: EntityConfig): void {
@@ -78,5 +81,3 @@ declare global {
     "hui-lock-entity-row": HuiLockEntityRow;
   }
 }
-
-customElements.define("hui-lock-entity-row", HuiLockEntityRow);

src/panels/lovelace/entity-rows/hui-media-player-entity-row.ts

@@ -5,6 +5,7 @@ import {
   css,
   CSSResult,
   property,
+  customElement,
 } from "lit-element";
 import "@polymer/paper-icon-button/paper-icon-button";
 
@@ -22,8 +23,10 @@ import {
   SUPPORT_PAUSE,
 } from "../../../data/media-player";
 
+@customElement("hui-media-player-entity-row")
 class HuiMediaPlayerEntityRow extends LitElement implements EntityRow {
   @property() public hass?: HomeAssistant;
+
   @property() private _config?: EntityConfig;
 
   public setConfig(config: EntityConfig): void {
@@ -156,5 +159,3 @@ declare global {
     "hui-media-player-entity-row": HuiMediaPlayerEntityRow;
   }
 }
-
-customElements.define("hui-media-player-entity-row", HuiMediaPlayerEntityRow);

src/panels/lovelace/entity-rows/hui-scene-entity-row.ts

@@ -5,6 +5,7 @@ import {
   CSSResult,
   css,
   property,
+  customElement,
 } from "lit-element";
 
 import "../components/hui-generic-entity-row";
@@ -14,8 +15,10 @@ import "../components/hui-warning";
 import { HomeAssistant } from "../../../types";
 import { EntityRow, EntityConfig } from "./types";
 
+@customElement("hui-scene-entity-row")
 class HuiSceneEntityRow extends LitElement implements EntityRow {
   @property() public hass?: HomeAssistant;
+
   @property() private _config?: EntityConfig;
 
   public setConfig(config: EntityConfig): void {
@@ -83,5 +86,3 @@ declare global {
     "hui-scene-entity-row": HuiSceneEntityRow;
   }
 }
-
-customElements.define("hui-scene-entity-row", HuiSceneEntityRow);

src/panels/lovelace/entity-rows/hui-script-entity-row.ts

@@ -5,6 +5,7 @@ import {
   property,
   CSSResult,
   css,
+  customElement,
 } from "lit-element";
 
 import "../components/hui-generic-entity-row";
@@ -14,8 +15,10 @@ import "../components/hui-warning";
 import { HomeAssistant } from "../../../types";
 import { EntityRow, EntityConfig } from "./types";
 
+@customElement("hui-script-entity-row")
 class HuiScriptEntityRow extends LitElement implements EntityRow {
   @property() public hass?: HomeAssistant;
+
   @property() private _config?: EntityConfig;
 
   public setConfig(config: EntityConfig): void {
@@ -83,5 +86,3 @@ declare global {
     "hui-script-entity-row": HuiScriptEntityRow;
   }
 }
-
-customElements.define("hui-script-entity-row", HuiScriptEntityRow);

src/panels/lovelace/entity-rows/hui-sensor-entity-row.ts

@@ -5,6 +5,7 @@ import {
   property,
   CSSResult,
   css,
+  customElement,
 } from "lit-element";
 
 import "../components/hui-generic-entity-row";
@@ -20,8 +21,10 @@ interface SensorEntityConfig extends EntityConfig {
   format?: "relative" | "date" | "time" | "datetime";
 }
 
+@customElement("hui-sensor-entity-row")
 class HuiSensorEntityRow extends LitElement implements EntityRow {
   @property() public hass?: HomeAssistant;
+
   @property() private _config?: SensorEntityConfig;
 
   public setConfig(config: SensorEntityConfig): void {
@@ -85,5 +88,3 @@ declare global {
     "hui-sensor-entity-row": HuiSensorEntityRow;
   }
 }
-
-customElements.define("hui-sensor-entity-row", HuiSensorEntityRow);

src/panels/lovelace/entity-rows/hui-text-entity-row.ts

@@ -5,6 +5,7 @@ import {
   property,
   CSSResult,
   css,
+  customElement,
 } from "lit-element";
 
 import "../components/hui-generic-entity-row";
@@ -14,8 +15,10 @@ import computeStateDisplay from "../../../common/entity/compute_state_display";
 import { HomeAssistant } from "../../../types";
 import { EntityRow, EntityConfig } from "./types";
 
+@customElement("hui-text-entity-row")
 class HuiTextEntityRow extends LitElement implements EntityRow {
   @property() public hass?: HomeAssistant;
+
   @property() private _config?: EntityConfig;
 
   public setConfig(config: EntityConfig): void {
@@ -71,5 +74,3 @@ declare global {
     "hui-text-entity-row": HuiTextEntityRow;
   }
 }
-
-customElements.define("hui-text-entity-row", HuiTextEntityRow);

src/panels/lovelace/entity-rows/hui-timer-entity-row.ts

@@ -4,6 +4,7 @@ import {
   TemplateResult,
   property,
   PropertyValues,
+  customElement,
 } from "lit-element";
 
 import "../components/hui-generic-entity-row";
@@ -15,10 +16,14 @@ import { HomeAssistant } from "../../../types";
 import { EntityConfig } from "./types";
 import { HassEntity } from "home-assistant-js-websocket";
 
+@customElement("hui-timer-entity-row")
 class HuiTimerEntityRow extends LitElement {
   @property() public hass?: HomeAssistant;
+
   @property() private _config?: EntityConfig;
+
   @property() private _timeRemaining?: number;
+
   private _interval?: number;
 
   public setConfig(config: EntityConfig): void {
@@ -124,5 +129,3 @@ declare global {
     "hui-timer-entity-row": HuiTimerEntityRow;
   }
 }
-
-customElements.define("hui-timer-entity-row", HuiTimerEntityRow);

src/panels/lovelace/entity-rows/hui-toggle-entity-row.ts

@@ -1,8 +1,9 @@
 import {
   html,
   LitElement,
-  PropertyDeclarations,
   TemplateResult,
+  customElement,
+  property,
 } from "lit-element";
 
 import "../components/hui-generic-entity-row";
@@ -10,19 +11,15 @@ import "../../../components/entity/ha-entity-toggle";
 import "../components/hui-warning";
 
 import computeStateDisplay from "../../../common/entity/compute_state_display";
+
 import { HomeAssistant } from "../../../types";
 import { EntityRow, EntityConfig } from "./types";
 
+@customElement("hui-toggle-entity-row")
 class HuiToggleEntityRow extends LitElement implements EntityRow {
-  public hass?: HomeAssistant;
+  @property() public hass?: HomeAssistant;
-  private _config?: EntityConfig;
 
-  static get properties(): PropertyDeclarations {
+  @property() private _config?: EntityConfig;
-    return {
-      hass: {},
-      _config: {},
-    };
-  }
 
   public setConfig(config: EntityConfig): void {
     if (!config) {
@@ -78,5 +75,3 @@ declare global {
     "hui-toggle-entity-row": HuiToggleEntityRow;
   }
 }
-
-customElements.define("hui-toggle-entity-row", HuiToggleEntityRow);

src/panels/lovelace/special-rows/hui-call-service-row.ts

@@ -1,4 +1,12 @@
-import { html, LitElement, TemplateResult } from "lit-element";
+import {
+  html,
+  LitElement,
+  TemplateResult,
+  customElement,
+  property,
+  css,
+  CSSResult,
+} from "lit-element";
 import "@material/mwc-button";
 
 import "../../../components/ha-icon";
@@ -7,16 +15,11 @@ import { callService } from "../common/call-service";
 import { EntityRow, CallServiceConfig } from "../entity-rows/types";
 import { HomeAssistant } from "../../../types";
 
+@customElement("hui-call-service-row")
 class HuiCallServiceRow extends LitElement implements EntityRow {
-  public hass?: HomeAssistant;
+  @property() public hass?: HomeAssistant;
-  private _config?: CallServiceConfig;
 
-  static get properties() {
+  @property() private _config?: CallServiceConfig;
-    return {
-      hass: {},
-      _config: {},
-    };
-  }
 
   public setConfig(config: CallServiceConfig): void {
     if (!config || !config.name || !config.service) {
@@ -32,7 +35,6 @@ class HuiCallServiceRow extends LitElement implements EntityRow {
     }
 
     return html`
-      ${this.renderStyle()}
       <ha-icon .icon="${this._config.icon}"></ha-icon>
       <div class="flex">
         <div>${this._config.name}</div>
@@ -43,34 +45,32 @@ class HuiCallServiceRow extends LitElement implements EntityRow {
     `;
   }
 
-  private renderStyle(): TemplateResult {
+  static get styles(): CSSResult {
-    return html`
+    return css`
-      <style>
+      :host {
-        :host {
+        display: flex;
-          display: flex;
+        align-items: center;
-          align-items: center;
+      }
-        }
+      ha-icon {
-        ha-icon {
+        padding: 8px;
-          padding: 8px;
+        color: var(--paper-item-icon-color);
-          color: var(--paper-item-icon-color);
+      }
-        }
+      .flex {
-        .flex {
+        flex: 1;
-          flex: 1;
+        overflow: hidden;
-          overflow: hidden;
+        margin-left: 16px;
-          margin-left: 16px;
+        display: flex;
-          display: flex;
+        justify-content: space-between;
-          justify-content: space-between;
+        align-items: center;
-          align-items: center;
+      }
-        }
+      .flex div {
-        .flex div {
+        white-space: nowrap;
-          white-space: nowrap;
+        overflow: hidden;
-          overflow: hidden;
+        text-overflow: ellipsis;
-          text-overflow: ellipsis;
+      }
-        }
+      mwc-button {
-        mwc-button {
+        margin-right: -0.57em;
-          margin-right: -0.57em;
+      }
-        }
-      </style>
     `;
   }
 
@@ -84,5 +84,3 @@ declare global {
     "hui-call-service-row": HuiCallServiceRow;
   }
 }
-
-customElements.define("hui-call-service-row", HuiCallServiceRow);

src/panels/lovelace/special-rows/hui-divider-row.ts

@@ -1,16 +1,19 @@
-import { html, LitElement, TemplateResult } from "lit-element";
+import {
+  html,
+  LitElement,
+  TemplateResult,
+  customElement,
+  property,
+} from "lit-element";
+
 import { EntityRow, DividerConfig } from "../entity-rows/types";
 import { HomeAssistant } from "../../../types";
 
+@customElement("hui-divider-row")
 class HuiDividerRow extends LitElement implements EntityRow {
   public hass?: HomeAssistant;
-  private _config?: DividerConfig;
 
-  static get properties() {
+  @property() private _config?: DividerConfig;
-    return {
-      _config: {},
-    };
-  }
 
   public setConfig(config): void {
     if (!config) {
@@ -48,5 +51,3 @@ declare global {
     "hui-divider-row": HuiDividerRow;
   }
 }
-
-customElements.define("hui-divider-row", HuiDividerRow);

src/panels/lovelace/special-rows/hui-section-row.ts

@@ -1,18 +1,23 @@
-import { html, LitElement, TemplateResult } from "lit-element";
+import {
+  html,
+  LitElement,
+  TemplateResult,
+  customElement,
+  property,
+  css,
+  CSSResult,
+} from "lit-element";
+
 import { EntityRow, SectionConfig } from "../entity-rows/types";
 import { HomeAssistant } from "../../../types";
 
 import "../../../components/ha-icon";
 
+@customElement("hui-section-row")
 class HuiSectionRow extends LitElement implements EntityRow {
   public hass?: HomeAssistant;
-  private _config?: SectionConfig;
 
-  static get properties() {
+  @property() private _config?: SectionConfig;
-    return {
-      _config: {},
-    };
-  }
 
   public setConfig(config: SectionConfig): void {
     if (!config) {
@@ -28,7 +33,6 @@ class HuiSectionRow extends LitElement implements EntityRow {
     }
 
     return html`
-      ${this.renderStyle()}
       <div class="divider"></div>
       ${this._config.label
         ? html`
@@ -38,24 +42,22 @@ class HuiSectionRow extends LitElement implements EntityRow {
     `;
   }
 
-  private renderStyle(): TemplateResult {
+  static get styles(): CSSResult {
-    return html`
+    return css`
-      <style>
+      .label {
-        .label {
+        color: var(--primary-color);
-          color: var(--primary-color);
+        margin-left: 8px;
-          margin-left: 8px;
+        margin-bottom: 16px;
-          margin-bottom: 16px;
+        margin-top: 16px;
-          margin-top: 16px;
+      }
-        }
+      .divider {
-        .divider {
+        height: 1px;
-          height: 1px;
+        background-color: var(--secondary-text-color);
-          background-color: var(--secondary-text-color);
+        opacity: 0.25;
-          opacity: 0.25;
+        margin-left: -16px;
-          margin-left: -16px;
+        margin-right: -16px;
-          margin-right: -16px;
+        margin-top: 8px;
-          margin-top: 8px;
+      }
-        }
-      </style>
     `;
   }
 }
@@ -65,5 +67,3 @@ declare global {
     "hui-section-row": HuiSectionRow;
   }
 }
-
-customElements.define("hui-section-row", HuiSectionRow);

src/panels/lovelace/special-rows/hui-weblink-row.ts

@@ -1,18 +1,23 @@
-import { html, LitElement, TemplateResult } from "lit-element";
+import {
+  html,
+  LitElement,
+  TemplateResult,
+  customElement,
+  property,
+  css,
+  CSSResult,
+} from "lit-element";
+
 import { EntityRow, WeblinkConfig } from "../entity-rows/types";
 import { HomeAssistant } from "../../../types";
 
 import "../../../components/ha-icon";
 
+@customElement("hui-webline-row")
 class HuiWeblinkRow extends LitElement implements EntityRow {
   public hass?: HomeAssistant;
-  private _config?: WeblinkConfig;
 
-  static get properties() {
+  @property() private _config?: WeblinkConfig;
-    return {
-      _config: {},
-    };
-  }
 
   public setConfig(config: WeblinkConfig): void {
     if (!config || !config.url) {
@@ -32,7 +37,6 @@ class HuiWeblinkRow extends LitElement implements EntityRow {
     }
 
     return html`
-      ${this.renderStyle()}
       <a href="${this._config.url}" target="_blank">
         <ha-icon .icon="${this._config.icon}"></ha-icon>
         <div>${this._config.name}</div>
@@ -40,26 +44,24 @@ class HuiWeblinkRow extends LitElement implements EntityRow {
     `;
   }
 
-  private renderStyle(): TemplateResult {
+  static get styles(): CSSResult {
-    return html`
+    return css`
-      <style>
+      a {
-        a {
+        display: flex;
-          display: flex;
+        align-items: center;
-          align-items: center;
+        color: var(--primary-color);
-          color: var(--primary-color);
+      }
-        }
+      ha-icon {
-        ha-icon {
+        padding: 8px;
-          padding: 8px;
+        color: var(--paper-item-icon-color);
-          color: var(--paper-item-icon-color);
+      }
-        }
+      div {
-        div {
+        flex: 1;
-          flex: 1;
+        white-space: nowrap;
-          white-space: nowrap;
+        overflow: hidden;
-          overflow: hidden;
+        text-overflow: ellipsis;
-          text-overflow: ellipsis;
+        margin-left: 16px;
-          margin-left: 16px;
+      }
-        }
-      </style>
     `;
   }
 }