badge warning (#3009)

src/components/entity/ha-state-label-badge.ts

@@ -2,11 +2,17 @@ import {
   LitElement,
   html,
   PropertyValues,
-  PropertyDeclarations,
   TemplateResult,
+  css,
+  CSSResult,
+  customElement,
+  property,
 } from "lit-element";
+
 import { HassEntity } from "home-assistant-js-websocket";
 import { classMap } from "lit-html/directives/class-map";
+import { fireEvent } from "../../common/dom/fire_event";
+import { HomeAssistant } from "../../types";
 
 import computeStateDomain from "../../common/entity/compute_state_domain";
 import computeStateName from "../../common/entity/compute_state_name";
@@ -14,21 +20,20 @@ import domainIcon from "../../common/entity/domain_icon";
 import stateIcon from "../../common/entity/state_icon";
 import timerTimeRemaining from "../../common/entity/timer_time_remaining";
 import secondsToDuration from "../../common/datetime/seconds_to_duration";
-import { fireEvent } from "../../common/dom/fire_event";
-import { HomeAssistant } from "../../types";
 
 import "../ha-label-badge";
 
-/*
- * @appliesMixin LocalizeMixin
- * @appliesMixin EventsMixin
- */
+@customElement("ha-state-label-badge")
 export class HaStateLabelBadge extends LitElement {
-  public hass?: HomeAssistant;
-  public state?: HassEntity;
+  @property() public hass?: HomeAssistant;
+
+  @property() public state?: HassEntity;
+
+  @property() private _timerTimeRemaining?: number;
+
   private _connected?: boolean;
+
   private _updateRemaining?: number;
-  private _timerTimeRemaining?: number;
 
   public connectedCallback(): void {
     super.connectedCallback();
@@ -47,15 +52,20 @@ export class HaStateLabelBadge extends LitElement {
 
     if (!state) {
       return html`
-        ${this.renderStyle()}
-        <ha-label-badge label="not found"></ha-label-badge>
+        <ha-label-badge
+          class="warning"
+          label="${this.hass!.localize("state_badge.default.error")}"
+          icon="hass:alert"
+          description="${this.hass!.localize(
+            "state_badge.default.entity_not_found"
+          )}"
+        ></ha-label-badge>
       `;
     }
 
     const domain = computeStateDomain(state);
 
     return html`
-      ${this.renderStyle()}
       <ha-label-badge
         class="${classMap({
           [domain]: true,
@@ -70,14 +80,6 @@ export class HaStateLabelBadge extends LitElement {
     `;
   }
 
-  static get properties(): PropertyDeclarations {
-    return {
-      hass: {},
-      state: {},
-      _timerTimeRemaining: {},
-    };
-  }
-
   protected firstUpdated(changedProperties: PropertyValues): void {
     super.firstUpdated(changedProperties);
     this.addEventListener("click", (ev) => {
@@ -201,48 +203,47 @@ export class HaStateLabelBadge extends LitElement {
     this._timerTimeRemaining = timerTimeRemaining(stateObj);
   }
 
-  private renderStyle(): TemplateResult {
-    return html`
-      <style>
-        :host {
-          cursor: pointer;
-        }
+  static get styles(): CSSResult {
+    return css`
+      :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));
+      }
+
+      .warning {
+        --ha-label-badge-color: var(--label-badge-yellow, #fce588);
+      }
     `;
   }
 }
@@ -252,5 +253,3 @@ declare global {
     "ha-state-label-badge": HaStateLabelBadge;
   }
 }
-
-customElements.define("ha-state-label-badge", HaStateLabelBadge);

src/translations/en.json

@@ -332,7 +332,9 @@
   "state_badge": {
     "default": {
       "unknown": "Unk",
-      "unavailable": "Unavai"
+      "unavailable": "Unavai",
+      "error": "Error",
+      "entity_not_found": "Entity Not Found"
     },
     "alarm_control_panel": {
       "armed": "Armed",