warning-element (#3006)

* warning-element

* add warning-element to picture-glance

* add glance-card

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>
       `;
     }
 

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`

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;
+  }
+}

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>
       `;
     }
 

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>
       `;
     }
 

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>
       `;
     }