warning when light unavilable (#2771)

* error-card when light unavilable

* single warning element for all

* address review comments

* address review comments

src/panels/lovelace/cards/hui-alarm-panel-card.ts

@@ -19,10 +19,7 @@ import {
 
 import "../../../components/ha-card";
 import "../../../components/ha-label-badge";
-import {
+import "../components/hui-warning";
-  createErrorCardConfig,
-  createErrorCardElement,
-} from "./hui-error-card";
 
 const ICONS = {
   armed_away: "hass:shield-lock",
@@ -107,11 +104,14 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
     const stateObj = this.hass.states[this._config.entity];
 
     if (!stateObj) {
-      const element = createErrorCardElement(
-        createErrorCardConfig("Entity not Found!", this._config)
-      );
       return html`
-        ${element}
+        <hui-warning
+          >${this.hass.localize(
+            "ui.panel.lovelace.warning.entity_not_found",
+            "entity",
+            this._config.entity
+          )}</hui-warning
+        >
       `;
     }
 

src/panels/lovelace/cards/hui-gauge-card.ts

@@ -1,27 +1,27 @@
 import {
   html,
   LitElement,
-  PropertyDeclarations,
   PropertyValues,
   TemplateResult,
+  css,
+  CSSResult,
+  property,
 } from "lit-element";
 import { styleMap } from "lit-html/directives/style-map";
 
 import "../../../components/ha-card";
+import "../components/hui-warning";
+
 import { LovelaceCardConfig } from "../../../data/lovelace";
 import { HomeAssistant } from "../../../types";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { hasConfigOrEntityChanged } from "../common/has-changed";
+import { LovelaceCard, LovelaceCardEditor } from "../types";
+
 import isValidEntityId from "../../../common/entity/valid_entity_id";
 import applyThemesOnElement from "../../../common/dom/apply_themes_on_element";
 import computeStateName from "../../../common/entity/compute_state_name";
 
-import { LovelaceCard, LovelaceCardEditor } from "../types";
-import {
-  createErrorCardConfig,
-  createErrorCardElement,
-} from "./hui-error-card";
-
 export interface SeverityConfig {
   green?: number;
   yellow?: number;
@@ -54,17 +54,10 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
     return {};
   }
 
-  public hass?: HomeAssistant;
+  @property() public hass?: HomeAssistant;
-  private _config?: Config;
+  @property() private _config?: Config;
   private _updated?: boolean;
 
-  static get properties(): PropertyDeclarations {
-    return {
-      hass: {},
-      _config: {},
-    };
-  }
-
   public getCardSize(): number {
     return 2;
   }
@@ -88,34 +81,37 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
     if (!this._config || !this.hass) {
       return html``;
     }
+
     const stateObj = this.hass.states[this._config.entity];
-    let state;
-    let error;
 
     if (!stateObj) {
-      error = "Entity not available: " + this._config.entity;
+      return html`
-    } else {
+        <hui-warning
-      state = Number(stateObj.state);
+          >${this.hass.localize(
+            "ui.panel.lovelace.warning.entity_not_found",
+            "entity",
+            this._config.entity
+          )}</hui-warning
+        >
+      `;
+    }
+
+    const state = Number(stateObj.state);
 
     if (isNaN(state)) {
-        error = "Entity is non-numeric: " + this._config.entity;
-      }
-    }
-
-    if (error) {
       return html`
-        ${createErrorCardElement(createErrorCardConfig(error, this._config))}
+        <hui-warning
+          >${this.hass.localize(
+            "ui.panel.lovelace.warning.entity_non_numeric",
+            "entity",
+            this._config.entity
+          )}</hui-warning
+        >
       `;
     }
 
     return html`
-      ${this.renderStyle()}
       <ha-card @click="${this._handleClick}">
-        ${error
-          ? html`
-              <div class="not-found">${error}</div>
-            `
-          : html`
         <div class="container">
           <div class="gauge-a"></div>
           <div class="gauge-b"></div>
@@ -138,7 +134,6 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
             </div>
           </div>
         </div>
-            `}
       </ha-card>
     `;
   }
@@ -225,9 +220,8 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
     fireEvent(this, "hass-more-info", { entityId: this._config!.entity });
   }
 
-  private renderStyle(): TemplateResult {
+  static get styles(): CSSResult {
-    return html`
+    return css`
-      <style>
       ha-card {
         --base-unit: 50px;
         height: calc(var(--base-unit) * 3);
@@ -251,8 +245,8 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
         width: calc(var(--base-unit) * 4);
         height: calc(var(--base-unit) * 2);
         top: 0%;
-          border-radius: calc(var(--base-unit) * 2.5)
+        border-radius: calc(var(--base-unit) * 2.5) calc(var(--base-unit) * 2.5)
-            calc(var(--base-unit) * 2.5) 0px 0px;
+          0px 0px;
       }
       .gauge-b {
         z-index: 3;
@@ -263,8 +257,8 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
         top: calc(var(--base-unit) * 0.75);
         margin-left: calc(var(--base-unit) * 0.75);
         margin-right: auto;
-          border-radius: calc(var(--base-unit) * 2.5)
+        border-radius: calc(var(--base-unit) * 2.5) calc(var(--base-unit) * 2.5)
-            calc(var(--base-unit) * 2.5) 0px 0px;
+          0px 0px;
       }
       .gauge-c {
         z-index: 2;
@@ -308,7 +302,6 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
         background-color: yellow;
         padding: 8px;
       }
-      </style>
     `;
   }
 }

src/panels/lovelace/cards/hui-light-card.ts

@@ -22,6 +22,7 @@ import applyThemesOnElement from "../../../common/dom/apply_themes_on_element";
 
 import "../../../components/ha-card";
 import "../../../components/ha-icon";
+import "../components/hui-warning";
 
 const lightConfig = {
   radius: 80,
@@ -78,16 +79,21 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
 
     const stateObj = this.hass.states[this._config!.entity] as LightEntity;
 
+    if (!stateObj) {
+      return html`
+        <hui-warning
+          >${this.hass.localize(
+            "ui.panel.lovelace.warning.entity_not_found",
+            "entity",
+            this._config.entity
+          )}</hui-warning
+        >
+      `;
+    }
+
     return html`
       ${this.renderStyle()}
       <ha-card>
-        ${!stateObj
-          ? html`
-              <div class="not-found">
-                Entity not available: ${this._config.entity}
-              </div>
-            `
-          : html`
         <paper-icon-button
           icon="hass:dots-vertical"
           class="more-info"
@@ -112,7 +118,6 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
             </div>
           </div>
         </div>
-            `}
       </ha-card>
     `;
   }
@@ -272,11 +277,6 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
         .show_brightness {
           opacity: 1;
         }
-        .not-found {
-          flex: 1;
-          background-color: yellow;
-          padding: 8px;
-        }
         .more-info {
           position: absolute;
           cursor: pointer;

src/panels/lovelace/cards/hui-picture-entity-card.ts

@@ -8,6 +8,7 @@ import { classMap } from "lit-html/directives/class-map";
 
 import "../../../components/ha-card";
 import "../components/hui-image";
+import "../components/hui-warning";
 
 import computeDomain from "../../../common/entity/compute_domain";
 import computeStateDisplay from "../../../common/entity/compute_state_display";
@@ -19,10 +20,6 @@ import { LovelaceCardConfig, ActionConfig } from "../../../data/lovelace";
 import { LovelaceCard } from "../types";
 import { handleClick } from "../common/handle-click";
 import { UNAVAILABLE } from "../../../data/entity";
-import {
-  createErrorCardElement,
-  createErrorCardConfig,
-} from "./hui-error-card";
 
 interface Config extends LovelaceCardConfig {
   entity: string;
@@ -76,12 +73,13 @@ class HuiPictureEntityCard extends LitElement implements LovelaceCard {
 
     if (!stateObj) {
       return html`
-        ${createErrorCardElement(
+        <hui-warning
-          createErrorCardConfig(
+          >${this.hass.localize(
-            `Entity not found: ${this._config.entity}`,
+            "ui.panel.lovelace.warning.entity_not_found",
-            this._config
+            "entity",
-          )
+            this._config.entity
-        )}
+          )}</hui-warning
+        >
       `;
     }
 

src/panels/lovelace/cards/hui-thermostat-card.ts

@@ -10,6 +10,7 @@ import "@polymer/paper-icon-button/paper-icon-button";
 
 import "../../../components/ha-card";
 import "../../../components/ha-icon";
+import "../components/hui-warning";
 
 import applyThemesOnElement from "../../../common/dom/apply_themes_on_element";
 import computeStateName from "../../../common/entity/compute_state_name";
@@ -102,16 +103,19 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
       return html``;
     }
     const stateObj = this.hass.states[this._config.entity] as ClimateEntity;
+
     if (!stateObj) {
       return html`
-        ${this.renderStyle()}
+        <hui-warning
-        <ha-card>
+          >${this.hass.localize(
-          <div class="not-found">
+            "ui.panel.lovelace.warning.entity_not_found",
-            Entity not available: ${this._config.entity}
+            "entity",
-          </div>
+            this._config.entity
-        </ha-card>
+          )}</hui-warning
+        >
       `;
     }
+
     const mode = modeIcons[stateObj.attributes.operation_mode || ""]
       ? stateObj.attributes.operation_mode!
       : "unknown-mode";
@@ -387,11 +391,6 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
           --idle-color: #8a8a8a;
           --unknown-color: #bac;
         }
-        .not-found {
-          flex: 1;
-          background-color: yellow;
-          padding: 8px;
-        }
         #root {
           position: relative;
           overflow: hidden;

src/panels/lovelace/components/hui-warning.ts

@@ -0,0 +1,34 @@
+import {
+  html,
+  LitElement,
+  TemplateResult,
+  CSSResult,
+  css,
+  customElement,
+} from "lit-element";
+
+@customElement("hui-warning")
+export class HuiWarning extends LitElement {
+  protected render(): TemplateResult | void {
+    return html`
+      <slot></slot>
+    `;
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      :host {
+        display: block;
+        color: black;
+        background-color: #fce588;
+        padding: 8px;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-warning": HuiWarning;
+  }
+}

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

@@ -1,21 +1,22 @@
-import { html, LitElement, TemplateResult } from "lit-element";
+import {
+  html,
+  LitElement,
+  TemplateResult,
+  property,
+  css,
+  CSSResult,
+} from "lit-element";
 
 import "../../../components/ha-climate-state";
 import "../components/hui-generic-entity-row";
+import "../components/hui-warning";
 
 import { HomeAssistant } from "../../../types";
 import { EntityRow, EntityConfig } from "./types";
 
 class HuiClimateEntityRow extends LitElement implements EntityRow {
-  public hass?: HomeAssistant;
+  @property() public hass?: HomeAssistant;
-  private _config?: EntityConfig;
+  @property() private _config?: EntityConfig;
-
-  static get properties() {
-    return {
-      hass: {},
-      _config: {},
-    };
-  }
 
   public setConfig(config: EntityConfig): void {
     if (!config || !config.entity) {
@@ -34,14 +35,17 @@ class HuiClimateEntityRow extends LitElement implements EntityRow {
 
     if (!stateObj) {
       return html`
-        <hui-error-entity-row
+        <hui-warning
-          .entity="${this._config.entity}"
+          >${this.hass.localize(
-        ></hui-error-entity-row>
+            "ui.panel.lovelace.warning.entity_not_found",
+            "entity",
+            this._config.entity
+          )}</hui-warning
+        >
       `;
     }
 
     return html`
-      ${this.renderStyle()}
       <hui-generic-entity-row .hass="${this.hass}" .config="${this._config}">
         <ha-climate-state
           .hass="${this.hass}"
@@ -51,13 +55,11 @@ class HuiClimateEntityRow extends LitElement implements EntityRow {
     `;
   }
 
-  private renderStyle(): TemplateResult {
+  static get styles(): CSSResult {
-    return html`
+    return css`
-      <style>
       ha-climate-state {
         text-align: right;
       }
-      </style>
     `;
   }
 }

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

@@ -1,29 +1,24 @@
 import {
   html,
   LitElement,
-  PropertyDeclarations,
   TemplateResult,
+  property,
+  css,
+  CSSResult,
 } from "lit-element";
 
 import "../components/hui-generic-entity-row";
 import "../../../components/ha-cover-controls";
 import "../../../components/ha-cover-tilt-controls";
-import "./hui-error-entity-row";
+import "../components/hui-warning";
 
 import { isTiltOnly } from "../../../util/cover-model";
 import { HomeAssistant } from "../../../types";
 import { EntityRow, EntityConfig } from "./types";
 
 class HuiCoverEntityRow extends LitElement implements EntityRow {
-  public hass?: HomeAssistant;
+  @property() public hass?: HomeAssistant;
-  private _config?: EntityConfig;
+  @property() private _config?: EntityConfig;
-
-  static get properties(): PropertyDeclarations {
-    return {
-      hass: {},
-      _config: {},
-    };
-  }
 
   public setConfig(config: EntityConfig): void {
     if (!config) {
@@ -41,14 +36,17 @@ class HuiCoverEntityRow extends LitElement implements EntityRow {
 
     if (!stateObj) {
       return html`
-        <hui-error-entity-row
+        <hui-warning
-          .entity="${this._config.entity}"
+          >${this.hass.localize(
-        ></hui-error-entity-row>
+            "ui.panel.lovelace.warning.entity_not_found",
+            "entity",
+            this._config.entity
+          )}</hui-warning
+        >
       `;
     }
 
     return html`
-      ${this.renderStyle()}
       <hui-generic-entity-row .hass="${this.hass}" .config="${this._config}">
         ${isTiltOnly(stateObj)
           ? html`
@@ -67,14 +65,12 @@ class HuiCoverEntityRow extends LitElement implements EntityRow {
     `;
   }
 
-  private renderStyle(): TemplateResult {
+  static get styles(): CSSResult {
-    return html`
+    return css`
-      <style>
       ha-cover-controls,
       ha-cover-tilt-controls {
         margin-right: -0.57em;
       }
-      </style>
     `;
   }
 }

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

@@ -1,41 +0,0 @@
-import { html, LitElement, TemplateResult } from "lit-element";
-
-class HuiErrorEntityRow extends LitElement {
-  public entity?: string;
-  public error?: string;
-
-  static get properties() {
-    return {
-      error: {},
-      entity: {},
-    };
-  }
-
-  protected render(): TemplateResult | void {
-    return html`
-      ${this.renderStyle()} ${this.error || "Entity not available"}:
-      ${this.entity || ""}
-    `;
-  }
-
-  private renderStyle(): TemplateResult {
-    return html`
-      <style>
-        :host {
-          display: block;
-          color: black;
-          background-color: yellow;
-          padding: 8px;
-        }
-      </style>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hui-error-entity-row": HuiErrorEntityRow;
-  }
-}
-
-customElements.define("hui-error-entity-row", HuiErrorEntityRow);

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

@@ -1,13 +1,8 @@
-import {
+import { html, LitElement, TemplateResult, property } from "lit-element";
-  html,
-  LitElement,
-  PropertyDeclarations,
-  TemplateResult,
-} from "lit-element";
 
 import "../components/hui-generic-entity-row";
 import "../../../components/entity/ha-entity-toggle";
-import "./hui-error-entity-row";
+import "../components/hui-warning";
 
 import computeStateDisplay from "../../../common/entity/compute_state_display";
 import { DOMAINS_TOGGLE } from "../../../common/const";
@@ -15,15 +10,8 @@ import { HomeAssistant } from "../../../types";
 import { EntityRow, EntityConfig } from "./types";
 
 class HuiGroupEntityRow extends LitElement implements EntityRow {
-  public hass?: HomeAssistant;
+  @property() public hass?: HomeAssistant;
-  private _config?: EntityConfig;
+  @property() private _config?: EntityConfig;
-
-  static get properties(): PropertyDeclarations {
-    return {
-      hass: {},
-      _config: {},
-    };
-  }
 
   public setConfig(config: EntityConfig): void {
     if (!config) {
@@ -41,9 +29,13 @@ class HuiGroupEntityRow extends LitElement implements EntityRow {
 
     if (!stateObj) {
       return html`
-        <hui-error-entity-row
+        <hui-warning
-          .entity="${this._config.entity}"
+          >${this.hass.localize(
-        ></hui-error-entity-row>
+            "ui.panel.lovelace.warning.entity_not_found",
+            "entity",
+            this._config.entity
+          )}</hui-warning
+        >
       `;
     }
 

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

@@ -1,8 +1,10 @@
 import {
   html,
   LitElement,
-  PropertyDeclarations,
   TemplateResult,
+  property,
+  css,
+  CSSResult,
 } from "lit-element";
 import { repeat } from "lit-html/directives/repeat";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
@@ -10,7 +12,7 @@ import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
 
 import "../../../components/entity/state-badge";
-import "./hui-error-entity-row";
+import "../components/hui-warning";
 
 import computeStateName from "../../../common/entity/compute_state_name";
 import { HomeAssistant } from "../../../types";
@@ -18,15 +20,8 @@ import { EntityRow, EntityConfig } from "./types";
 import { setOption } from "../../../data/input-select";
 
 class HuiInputSelectEntityRow extends LitElement implements EntityRow {
-  public hass?: HomeAssistant;
+  @property() public hass?: HomeAssistant;
-  private _config?: EntityConfig;
+  @property() private _config?: EntityConfig;
-
-  static get properties(): PropertyDeclarations {
-    return {
-      hass: {},
-      _config: {},
-    };
-  }
 
   public setConfig(config: EntityConfig): void {
     if (!config || !config.entity) {
@@ -45,14 +40,17 @@ class HuiInputSelectEntityRow extends LitElement implements EntityRow {
 
     if (!stateObj) {
       return html`
-        <hui-error-entity-row
+        <hui-warning
-          .entity="${this._config.entity}"
+          >${this.hass.localize(
-        ></hui-error-entity-row>
+            "ui.panel.lovelace.warning.entity_not_found",
+            "entity",
+            this._config.entity
+          )}</hui-warning
+        >
       `;
     }
 
     return html`
-      ${this.renderStyle()}
       <state-badge .stateObj="${stateObj}"></state-badge>
       <paper-dropdown-menu
         selected-item-label="${stateObj.state}"
@@ -75,9 +73,8 @@ class HuiInputSelectEntityRow extends LitElement implements EntityRow {
     `;
   }
 
-  private renderStyle(): TemplateResult {
+  static get styles(): CSSResult {
-    return html`
+    return css`
-      <style>
       :host {
         display: flex;
         align-items: center;
@@ -86,7 +83,6 @@ class HuiInputSelectEntityRow extends LitElement implements EntityRow {
         margin-left: 16px;
         flex: 1;
       }
-      </style>
     `;
   }
 

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

@@ -1,28 +1,16 @@
-import {
+import { html, LitElement, TemplateResult, property } from "lit-element";
-  html,
-  LitElement,
-  PropertyDeclarations,
-  TemplateResult,
-} from "lit-element";
 import { PaperInputElement } from "@polymer/paper-input/paper-input";
 
 import "../components/hui-generic-entity-row";
-import "./hui-error-entity-row";
+import "../components/hui-warning";
 
 import { HomeAssistant } from "../../../types";
 import { EntityRow, EntityConfig } from "./types";
 import { setValue } from "../../../data/input_text";
 
 class HuiInputTextEntityRow extends LitElement implements EntityRow {
-  public hass?: HomeAssistant;
+  @property() public hass?: HomeAssistant;
-  private _config?: EntityConfig;
+  @property() private _config?: EntityConfig;
-
-  static get properties(): PropertyDeclarations {
-    return {
-      hass: {},
-      _config: {},
-    };
-  }
 
   public setConfig(config: EntityConfig): void {
     if (!config) {
@@ -40,9 +28,13 @@ class HuiInputTextEntityRow extends LitElement implements EntityRow {
 
     if (!stateObj) {
       return html`
-        <hui-error-entity-row
+        <hui-warning
-          .entity="${this._config.entity}"
+          >${this.hass.localize(
-        ></hui-error-entity-row>
+            "ui.panel.lovelace.warning.entity_not_found",
+            "entity",
+            this._config.entity
+          )}</hui-warning
+        >
       `;
     }
 

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

@@ -1,26 +1,21 @@
 import {
   html,
   LitElement,
-  PropertyDeclarations,
   TemplateResult,
+  property,
+  css,
+  CSSResult,
 } from "lit-element";
 
 import "../components/hui-generic-entity-row";
-import "./hui-error-entity-row";
+import "../components/hui-warning";
 
 import { HomeAssistant } from "../../../types";
 import { EntityRow, EntityConfig } from "./types";
 
 class HuiLockEntityRow extends LitElement implements EntityRow {
-  public hass?: HomeAssistant;
+  @property() public hass?: HomeAssistant;
-  private _config?: EntityConfig;
+  @property() private _config?: EntityConfig;
-
-  static get properties(): PropertyDeclarations {
-    return {
-      hass: {},
-      _config: {},
-    };
-  }
 
   public setConfig(config: EntityConfig): void {
     if (!config) {
@@ -38,14 +33,17 @@ class HuiLockEntityRow extends LitElement implements EntityRow {
 
     if (!stateObj) {
       return html`
-        <hui-error-entity-row
+        <hui-warning
-          .entity="${this._config.entity}"
+          >${this.hass.localize(
-        ></hui-error-entity-row>
+            "ui.panel.lovelace.warning.entity_not_found",
+            "entity",
+            this._config.entity
+          )}</hui-warning
+        >
       `;
     }
 
     return html`
-      ${this.renderStyle()}
       <hui-generic-entity-row .hass="${this.hass}" .config="${this._config}">
         <mwc-button @click="${this._callService}">
           ${stateObj.state === "locked"
@@ -56,15 +54,11 @@ class HuiLockEntityRow extends LitElement implements EntityRow {
     `;
   }
 
-  protected renderStyle(): TemplateResult {
+  static get styles(): CSSResult {
-    return html`
+    return css`
-      <style>
       mwc-button {
-          color: var(--primary-color);
-          font-weight: 500;
         margin-right: -0.57em;
       }
-      </style>
     `;
   }
 

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

@@ -1,7 +1,15 @@
-import { html, LitElement, TemplateResult } from "lit-element";
+import {
+  html,
+  LitElement,
+  TemplateResult,
+  css,
+  CSSResult,
+  property,
+} from "lit-element";
 import "@polymer/paper-icon-button/paper-icon-button";
 
 import "../components/hui-generic-entity-row";
+import "../components/hui-warning";
 
 import { EntityRow, EntityConfig } from "./types";
 import { HomeAssistant } from "../../../types";
@@ -15,15 +23,8 @@ import {
 } from "../../../data/media-player";
 
 class HuiMediaPlayerEntityRow extends LitElement implements EntityRow {
-  public hass?: HomeAssistant;
+  @property() public hass?: HomeAssistant;
-  private _config?: EntityConfig;
+  @property() private _config?: EntityConfig;
-
-  static get properties() {
-    return {
-      hass: {},
-      _config: {},
-    };
-  }
 
   public setConfig(config: EntityConfig): void {
     if (!config || !config.entity) {
@@ -42,14 +43,17 @@ class HuiMediaPlayerEntityRow extends LitElement implements EntityRow {
 
     if (!stateObj) {
       return html`
-        <hui-error-entity-row
+        <hui-warning
-          .entity="${this._config.entity}"
+          >${this.hass.localize(
-        ></hui-error-entity-row>
+            "ui.panel.lovelace.warning.entity_not_found",
+            "entity",
+            this._config.entity
+          )}</hui-warning
+        >
       `;
     }
 
     return html`
-      ${this.renderStyle()}
       <hui-generic-entity-row
         .hass="${this.hass}"
         .config="${this._config}"
@@ -89,13 +93,11 @@ class HuiMediaPlayerEntityRow extends LitElement implements EntityRow {
     `;
   }
 
-  private renderStyle(): TemplateResult {
+  static get styles(): CSSResult {
-    return html`
+    return css`
-      <style>
       .controls {
         white-space: nowrap;
       }
-      </style>
     `;
   }
 

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

@@ -1,27 +1,22 @@
 import {
   html,
   LitElement,
-  PropertyDeclarations,
   TemplateResult,
+  CSSResult,
+  css,
+  property,
 } from "lit-element";
 
 import "../components/hui-generic-entity-row";
 import "../../../components/entity/ha-entity-toggle";
-import "./hui-error-entity-row";
+import "../components/hui-warning";
 
 import { HomeAssistant } from "../../../types";
 import { EntityRow, EntityConfig } from "./types";
 
 class HuiSceneEntityRow extends LitElement implements EntityRow {
-  public hass?: HomeAssistant;
+  @property() public hass?: HomeAssistant;
-  private _config?: EntityConfig;
+  @property() private _config?: EntityConfig;
-
-  static get properties(): PropertyDeclarations {
-    return {
-      hass: {},
-      _config: {},
-    };
-  }
 
   public setConfig(config: EntityConfig): void {
     if (!config) {
@@ -39,14 +34,17 @@ class HuiSceneEntityRow extends LitElement implements EntityRow {
 
     if (!stateObj) {
       return html`
-        <hui-error-entity-row
+        <hui-warning
-          .entity="${this._config.entity}"
+          >${this.hass.localize(
-        ></hui-error-entity-row>
+            "ui.panel.lovelace.warning.entity_not_found",
+            "entity",
+            this._config.entity
+          )}</hui-warning
+        >
       `;
     }
 
     return html`
-      ${this.renderStyle()}
       <hui-generic-entity-row .hass="${this.hass}" .config="${this._config}">
         ${stateObj.attributes.can_cancel
           ? html`
@@ -64,15 +62,13 @@ class HuiSceneEntityRow extends LitElement implements EntityRow {
     `;
   }
 
-  protected renderStyle(): TemplateResult {
+  static get styles(): CSSResult {
-    return html`
+    return css`
-      <style>
       mwc-button {
         color: var(--primary-color);
         font-weight: 500;
         margin-right: -0.57em;
       }
-      </style>
     `;
   }
 

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

@@ -1,27 +1,22 @@
 import {
   html,
   LitElement,
-  PropertyDeclarations,
   TemplateResult,
+  property,
+  CSSResult,
+  css,
 } from "lit-element";
 
 import "../components/hui-generic-entity-row";
 import "../../../components/entity/ha-entity-toggle";
-import "./hui-error-entity-row";
+import "../components/hui-warning";
 
 import { HomeAssistant } from "../../../types";
 import { EntityRow, EntityConfig } from "./types";
 
 class HuiScriptEntityRow extends LitElement implements EntityRow {
-  public hass?: HomeAssistant;
+  @property() public hass?: HomeAssistant;
-  private _config?: EntityConfig;
+  @property() private _config?: EntityConfig;
-
-  static get properties(): PropertyDeclarations {
-    return {
-      hass: {},
-      _config: {},
-    };
-  }
 
   public setConfig(config: EntityConfig): void {
     if (!config) {
@@ -39,14 +34,17 @@ class HuiScriptEntityRow extends LitElement implements EntityRow {
 
     if (!stateObj) {
       return html`
-        <hui-error-entity-row
+        <hui-warning
-          .entity="${this._config.entity}"
+          >${this.hass.localize(
-        ></hui-error-entity-row>
+            "ui.panel.lovelace.warning.entity_not_found",
+            "entity",
+            this._config.entity
+          )}</hui-warning
+        >
       `;
     }
 
     return html`
-      ${this.renderStyle()}
       <hui-generic-entity-row .hass="${this.hass}" .config="${this._config}">
         ${stateObj.attributes.can_cancel
           ? html`
@@ -64,15 +62,13 @@ class HuiScriptEntityRow extends LitElement implements EntityRow {
     `;
   }
 
-  protected renderStyle(): TemplateResult {
+  static get styles(): CSSResult {
-    return html`
+    return css`
-      <style>
       mwc-button {
         color: var(--primary-color);
         font-weight: 500;
         margin-right: -0.57em;
       }
-      </style>
     `;
   }
 

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

@@ -1,13 +1,15 @@
 import {
   html,
   LitElement,
-  PropertyDeclarations,
   TemplateResult,
+  property,
+  CSSResult,
+  css,
 } from "lit-element";
 
 import "../components/hui-generic-entity-row";
 import "../components/hui-timestamp-display";
-import "./hui-error-entity-row";
+import "../components/hui-warning";
 
 import { HomeAssistant } from "../../../types";
 import { EntityRow, EntityConfig } from "./types";
@@ -19,15 +21,8 @@ interface SensorEntityConfig extends EntityConfig {
 }
 
 class HuiSensorEntityRow extends LitElement implements EntityRow {
-  public hass?: HomeAssistant;
+  @property() public hass?: HomeAssistant;
-  private _config?: SensorEntityConfig;
+  @property() private _config?: SensorEntityConfig;
-
-  static get properties(): PropertyDeclarations {
-    return {
-      hass: {},
-      _config: {},
-    };
-  }
 
   public setConfig(config: SensorEntityConfig): void {
     if (!config) {
@@ -45,14 +40,17 @@ class HuiSensorEntityRow extends LitElement implements EntityRow {
 
     if (!stateObj) {
       return html`
-        <hui-error-entity-row
+        <hui-warning
-          .entity="${this._config.entity}"
+          >${this.hass.localize(
-        ></hui-error-entity-row>
+            "ui.panel.lovelace.warning.entity_not_found",
+            "entity",
+            this._config.entity
+          )}</hui-warning
+        >
       `;
     }
 
     return html`
-      ${this.renderStyle()}
       <hui-generic-entity-row .hass="${this.hass}" .config="${this._config}">
         <div>
           ${stateObj.attributes.device_class === "timestamp"
@@ -73,13 +71,11 @@ class HuiSensorEntityRow extends LitElement implements EntityRow {
     `;
   }
 
-  private renderStyle(): TemplateResult {
+  static get styles(): CSSResult {
-    return html`
+    return css`
-      <style>
       div {
         text-align: right;
       }
-      </style>
     `;
   }
 }

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

@@ -1,27 +1,22 @@
 import {
   html,
   LitElement,
-  PropertyDeclarations,
   TemplateResult,
+  property,
+  CSSResult,
+  css,
 } from "lit-element";
 
 import "../components/hui-generic-entity-row";
-import "./hui-error-entity-row";
+import "../components/hui-warning";
 
 import computeStateDisplay from "../../../common/entity/compute_state_display";
 import { HomeAssistant } from "../../../types";
 import { EntityRow, EntityConfig } from "./types";
 
 class HuiTextEntityRow extends LitElement implements EntityRow {
-  public hass?: HomeAssistant;
+  @property() public hass?: HomeAssistant;
-  private _config?: EntityConfig;
+  @property() private _config?: EntityConfig;
-
-  static get properties(): PropertyDeclarations {
-    return {
-      hass: {},
-      _config: {},
-    };
-  }
 
   public setConfig(config: EntityConfig): void {
     if (!config) {
@@ -39,14 +34,17 @@ class HuiTextEntityRow extends LitElement implements EntityRow {
 
     if (!stateObj) {
       return html`
-        <hui-error-entity-row
+        <hui-warning
-          .entity="${this._config.entity}"
+          >${this.hass.localize(
-        ></hui-error-entity-row>
+            "ui.panel.lovelace.warning.entity_not_found",
+            "entity",
+            this._config.entity
+          )}</hui-warning
+        >
       `;
     }
 
     return html`
-      ${this.renderStyle()}
       <hui-generic-entity-row .hass="${this.hass}" .config="${this._config}">
         <div>
           ${computeStateDisplay(
@@ -59,13 +57,11 @@ class HuiTextEntityRow extends LitElement implements EntityRow {
     `;
   }
 
-  private renderStyle(): TemplateResult {
+  static get styles(): CSSResult {
-    return html`
+    return css`
-      <style>
       div {
         text-align: right;
       }
-      </style>
     `;
   }
 }

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

@@ -7,7 +7,7 @@ import {
 
 import "../components/hui-generic-entity-row";
 import "../../../components/entity/ha-entity-toggle";
-import "./hui-error-entity-row";
+import "../components/hui-warning";
 
 import computeStateDisplay from "../../../common/entity/compute_state_display";
 import { HomeAssistant } from "../../../types";
@@ -40,9 +40,13 @@ class HuiToggleEntityRow extends LitElement implements EntityRow {
 
     if (!stateObj) {
       return html`
-        <hui-error-entity-row
+        <hui-warning
-          .entity="${this._config.entity}"
+          >${this.hass.localize(
-        ></hui-error-entity-row>
+            "ui.panel.lovelace.warning.entity_not_found",
+            "entity",
+            this._config.entity
+          )}</hui-warning
+        >
       `;
     }
 

src/translations/en.json

@@ -899,6 +899,10 @@
             "para_migrate": "Home Assistant can add ID's to all your cards and views automatically for you by pressing the 'Migrate config' button.",
             "migrate": "Migrate config"
           }
+        },
+        "warning": {
+          "entity_not_found": "Entity not available: {entity}",
+          "entity_non_numeric": "Entity is non-numeric: {entity}"
         }
       },
       "mailbox": {