handle unavailable lights (#3549)

* handle unavailable lights

* unavailable overlay

* extract unavailable overlay

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

@@ -15,6 +15,7 @@ import applyThemesOnElement from "../../../common/dom/apply_themes_on_element";
 import "../../../components/ha-card";
 import "../../../components/ha-icon";
 import "../components/hui-warning";
+import "../components/hui-unavailable";
 
 import { fireEvent } from "../../../common/dom/fire_event";
 import { styleMap } from "lit-html/directives/style-map";
@@ -94,6 +95,13 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
     return html`
       ${this.renderStyle()}
       <ha-card>
+        ${stateObj.state === "unavailable"
+          ? html`
+              <hui-unavailable
+                .text="${this.hass.localize("state.default.unavailable")}"
+              ></hui-unavailable>
+            `
+          : ""}
         <paper-icon-button
           icon="hass:dots-vertical"
           class="more-info"

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

@@ -0,0 +1,55 @@
+import {
+  html,
+  LitElement,
+  TemplateResult,
+  CSSResult,
+  css,
+  customElement,
+  property,
+} from "lit-element";
+
+@customElement("hui-unavailable")
+export class HuiUnavailable extends LitElement {
+  @property() public text?: string;
+
+  protected render(): TemplateResult | void {
+    return html`
+      <div class="disabled-overlay">
+        <div>${this.text}</div>
+      </div>
+    `;
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      .disabled-overlay {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: var(--state-icon-unavailable-color);
+        opacity: 0.5;
+        z-index: 50;
+      }
+
+      .disabled-overlay div {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        font-size: 50px;
+        color: var(--primary-text-color);
+        transform: translate(-50%, -50%);
+        -ms-transform: translate(-50%, -50%);
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-unavailable": HuiUnavailable;
+  }
+}