From 324f0bb8a29e62b96203d1c93b376068a7a01c88 Mon Sep 17 00:00:00 2001
From: Ian Richardson <iantrich@gmail.com>
Date: Sun, 24 Mar 2019 01:10:55 -0500
Subject: [PATCH] warning-element (#3006)

* warning-element

* add warning-element to picture-glance

* add glance-card
---
 src/panels/lovelace/cards/hui-glance-card.ts  | 10 +++---
 .../lovelace/cards/hui-picture-glance-card.ts | 12 ++++++-
 .../components/hui-warning-element.ts         | 36 +++++++++++++++++++
 .../elements/hui-state-badge-element.ts       | 10 +++---
 .../elements/hui-state-icon-element.ts        | 10 +++---
 .../elements/hui-state-label-element.ts       | 10 +++---
 6 files changed, 67 insertions(+), 21 deletions(-)
 create mode 100644 src/panels/lovelace/components/hui-warning-element.ts

diff --git a/src/panels/lovelace/cards/hui-glance-card.ts b/src/panels/lovelace/cards/hui-glance-card.ts
index 35a643ba01..8ec574c234 100644
--- a/src/panels/lovelace/cards/hui-glance-card.ts
+++ b/src/panels/lovelace/cards/hui-glance-card.ts
@@ -25,7 +25,7 @@ import applyThemesOnElement from "../../../common/dom/apply_themes_on_element";
 import "../../../components/entity/state-badge";
 import "../../../components/ha-card";
 import "../../../components/ha-icon";
-import "../components/hui-warning";
+import "../components/hui-warning-element";
 
 export interface ConfigEntity extends EntityConfig {
   tap_action?: ActionConfig;
@@ -184,13 +184,13 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard {
 
     if (!stateObj) {
       return html`
-        <hui-warning
-          >${this.hass!.localize(
+        <hui-warning-element
+          label=${this.hass!.localize(
             "ui.panel.lovelace.warning.entity_not_found",
             "entity",
             entityConf.entity
-          )}</hui-warning
-        >
+          )}
+        ></hui-warning-element>
       `;
     }
 
diff --git a/src/panels/lovelace/cards/hui-picture-glance-card.ts b/src/panels/lovelace/cards/hui-picture-glance-card.ts
index 17c13ed494..5306a9c4a7 100644
--- a/src/panels/lovelace/cards/hui-picture-glance-card.ts
+++ b/src/panels/lovelace/cards/hui-picture-glance-card.ts
@@ -24,6 +24,8 @@ import stateIcon from "../../../common/entity/state_icon";
 import "../../../components/ha-card";
 import "../../../components/ha-icon";
 import "../components/hui-image";
+import "../components/hui-warning-element";
+
 import { handleClick } from "../common/handle-click";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { toggleEntity } from "../common/entity/toggle-entity";
@@ -138,7 +140,15 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard {
     const stateObj = this.hass!.states[entityConf.entity];
 
     if (!stateObj) {
-      return html``;
+      return html`
+        <hui-warning-element
+          label=${this.hass!.localize(
+            "ui.panel.lovelace.warning.entity_not_found",
+            "entity",
+            entityConf.entity
+          )}
+        ></hui-warning-element>
+      `;
     }
 
     return html`
diff --git a/src/panels/lovelace/components/hui-warning-element.ts b/src/panels/lovelace/components/hui-warning-element.ts
new file mode 100644
index 0000000000..b6495ec0fc
--- /dev/null
+++ b/src/panels/lovelace/components/hui-warning-element.ts
@@ -0,0 +1,36 @@
+import {
+  html,
+  LitElement,
+  TemplateResult,
+  CSSResult,
+  css,
+  customElement,
+  property,
+} from "lit-element";
+
+import "../../../components/ha-icon";
+
+@customElement("hui-warning-element")
+export class HuiWarningElement extends LitElement {
+  @property() public label?: string;
+
+  protected render(): TemplateResult | void {
+    return html`
+      <ha-icon icon="hass:alert" .title="${this.label}"></ha-icon>
+    `;
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      ha-icon {
+        color: #fce588;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-warning-element": HuiWarningElement;
+  }
+}
diff --git a/src/panels/lovelace/elements/hui-state-badge-element.ts b/src/panels/lovelace/elements/hui-state-badge-element.ts
index 6d452a1928..3a73c9e0c6 100644
--- a/src/panels/lovelace/elements/hui-state-badge-element.ts
+++ b/src/panels/lovelace/elements/hui-state-badge-element.ts
@@ -7,7 +7,7 @@ import {
 } from "lit-element";
 
 import "../../../components/entity/ha-state-label-badge";
-import "../components/hui-warning";
+import "../components/hui-warning-element";
 
 import computeStateName from "../../../common/entity/compute_state_name";
 import { LovelaceElement, LovelaceElementConfig } from "./types";
@@ -40,13 +40,13 @@ export class HuiStateBadgeElement extends LitElement
 
     if (!stateObj) {
       return html`
-        <hui-warning
-          >${this.hass.localize(
+        <hui-warning-element
+          label="${this.hass.localize(
             "ui.panel.lovelace.warning.entity_not_found",
             "entity",
             this._config.entity
-          )}</hui-warning
-        >
+          )}"
+        ></hui-warning-element>
       `;
     }
 
diff --git a/src/panels/lovelace/elements/hui-state-icon-element.ts b/src/panels/lovelace/elements/hui-state-icon-element.ts
index df9ddac572..bd7fd773ff 100644
--- a/src/panels/lovelace/elements/hui-state-icon-element.ts
+++ b/src/panels/lovelace/elements/hui-state-icon-element.ts
@@ -9,7 +9,7 @@ import {
 } from "lit-element";
 
 import "../../../components/entity/state-badge";
-import "../components/hui-warning";
+import "../components/hui-warning-element";
 
 import { computeTooltip } from "../common/compute-tooltip";
 import { handleClick } from "../common/handle-click";
@@ -46,13 +46,13 @@ export class HuiStateIconElement extends LitElement implements LovelaceElement {
 
     if (!stateObj) {
       return html`
-        <hui-warning
-          >${this.hass.localize(
+        <hui-warning-element
+          label=${this.hass.localize(
             "ui.panel.lovelace.warning.entity_not_found",
             "entity",
             this._config.entity
-          )}</hui-warning
-        >
+          )}
+        ></hui-warning-element>
       `;
     }
 
diff --git a/src/panels/lovelace/elements/hui-state-label-element.ts b/src/panels/lovelace/elements/hui-state-label-element.ts
index 5decd2d415..3cbf939a75 100644
--- a/src/panels/lovelace/elements/hui-state-label-element.ts
+++ b/src/panels/lovelace/elements/hui-state-label-element.ts
@@ -9,7 +9,7 @@ import {
 } from "lit-element";
 
 import "../../../components/entity/ha-state-label-badge";
-import "../components/hui-warning";
+import "../components/hui-warning-element";
 
 import computeStateDisplay from "../../../common/entity/compute_state_display";
 import { computeTooltip } from "../common/compute-tooltip";
@@ -49,13 +49,13 @@ class HuiStateLabelElement extends LitElement implements LovelaceElement {
 
     if (!stateObj) {
       return html`
-        <hui-warning
-          >${this.hass.localize(
+        <hui-warning-element
+          label=${this.hass.localize(
             "ui.panel.lovelace.warning.entity_not_found",
             "entity",
             this._config.entity
-          )}</hui-warning
-        >
+          )}
+        ></hui-warning-element>
       `;
     }