🧹 cleanup elements (#2820)

* 🧹 cleanup elements

* lint

src/panels/lovelace/common/compute-tooltip.ts

@@ -3,10 +3,14 @@ import { HomeAssistant } from "../../../types";
 import { LovelaceElementConfig } from "../elements/types";
 import { ActionConfig } from "../../../data/lovelace";
 
-export const computeTooltip = (
+interface Config extends LovelaceElementConfig {
-  hass: HomeAssistant,
+  entity?: string;
-  config: LovelaceElementConfig
+  title?: string;
-): string => {
+  tap_action?: ActionConfig;
+  hold_action?: ActionConfig;
+}
+
+export const computeTooltip = (hass: HomeAssistant, config: Config): string => {
   if (config.title) {
     return config.title;
   }

src/panels/lovelace/elements/hui-icon-element.ts

@@ -1,4 +1,12 @@
-import { html, LitElement, TemplateResult } from "lit-element";
+import {
+  html,
+  LitElement,
+  TemplateResult,
+  property,
+  css,
+  CSSResult,
+  customElement,
+} from "lit-element";
 
 import "../../../components/ha-icon";
 
@@ -7,18 +15,20 @@ import { handleClick } from "../common/handle-click";
 import { longPress } from "../common/directives/long-press-directive";
 import { LovelaceElement, LovelaceElementConfig } from "./types";
 import { HomeAssistant } from "../../../types";
+import { ActionConfig } from "../../../data/lovelace";
 
-interface Config extends LovelaceElementConfig {
+export interface Config extends LovelaceElementConfig {
+  entity?: string;
+  name?: string;
+  tap_action?: ActionConfig;
+  hold_action?: ActionConfig;
   icon: string;
 }
 
+@customElement("hui-icon-element")
 export class HuiIconElement extends LitElement implements LovelaceElement {
-  public hass?: HomeAssistant;
+  @property() public hass?: HomeAssistant;
-  private _config?: Config;
+  @property() private _config?: Config;
-
-  static get properties() {
-    return { hass: {}, _config: {} };
-  }
 
   public setConfig(config: Config): void {
     if (!config.icon) {
@@ -29,15 +39,14 @@ export class HuiIconElement extends LitElement implements LovelaceElement {
   }
 
   protected render(): TemplateResult | void {
-    if (!this._config) {
+    if (!this._config || !this.hass) {
       return html``;
     }
 
     return html`
-      ${this.renderStyle()}
       <ha-icon
         .icon="${this._config.icon}"
-        .title="${computeTooltip(this.hass!, this._config)}"
+        .title="${computeTooltip(this.hass, this._config)}"
         @ha-click="${this._handleTap}"
         @ha-hold="${this._handleHold}"
         .longPress="${longPress()}"
@@ -45,21 +54,19 @@ export class HuiIconElement extends LitElement implements LovelaceElement {
     `;
   }
 
-  private _handleTap() {
+  private _handleTap(): void {
     handleClick(this, this.hass!, this._config!, false);
   }
 
-  private _handleHold() {
+  private _handleHold(): void {
     handleClick(this, this.hass!, this._config!, true);
   }
 
-  private renderStyle(): TemplateResult {
+  static get styles(): CSSResult {
-    return html`
+    return css`
-      <style>
+      :host {
-        :host {
+        cursor: pointer;
-          cursor: pointer;
+      }
-        }
-      </style>
     `;
   }
 }
@@ -69,5 +76,3 @@ declare global {
     "hui-icon-element": HuiIconElement;
   }
 }
-
-customElements.define("hui-icon-element", HuiIconElement);

src/panels/lovelace/elements/hui-image-element.ts

@@ -1,4 +1,12 @@
-import { html, LitElement, TemplateResult } from "lit-element";
+import {
+  html,
+  LitElement,
+  TemplateResult,
+  property,
+  customElement,
+  css,
+  CSSResult,
+} from "lit-element";
 
 import "../components/hui-image";
 
@@ -7,8 +15,12 @@ import { handleClick } from "../common/handle-click";
 import { longPress } from "../common/directives/long-press-directive";
 import { LovelaceElement, LovelaceElementConfig } from "./types";
 import { HomeAssistant } from "../../../types";
+import { ActionConfig } from "../../../data/lovelace";
 
-interface Config extends LovelaceElementConfig {
+export interface Config extends LovelaceElementConfig {
+  entity?: string;
+  tap_action?: ActionConfig;
+  hold_action?: ActionConfig;
   image?: string;
   state_image?: string;
   camera_image?: string;
@@ -17,13 +29,10 @@ interface Config extends LovelaceElementConfig {
   aspect_ratio?: string;
 }
 
+@customElement("hui-image-element")
 export class HuiImageElement extends LitElement implements LovelaceElement {
-  public hass?: HomeAssistant;
+  @property() public hass?: HomeAssistant;
-  private _config?: Config;
+  @property() private _config?: Config;
-
-  static get properties() {
-    return { hass: {}, _config: {} };
-  }
 
   public setConfig(config: Config): void {
     if (!config) {
@@ -38,12 +47,11 @@ export class HuiImageElement extends LitElement implements LovelaceElement {
   }
 
   protected render(): TemplateResult | void {
-    if (!this._config) {
+    if (!this._config || !this.hass) {
       return html``;
     }
 
     return html`
-      ${this.renderStyle()}
       <hui-image
         .hass="${this.hass}"
         .entity="${this._config.entity}"
@@ -52,7 +60,7 @@ export class HuiImageElement extends LitElement implements LovelaceElement {
         .cameraImage="${this._config.camera_image}"
         .filter="${this._config.filter}"
         .stateFilter="${this._config.state_filter}"
-        .title="${computeTooltip(this.hass!, this._config)}"
+        .title="${computeTooltip(this.hass, this._config)}"
         .aspectRatio="${this._config.aspect_ratio}"
         @ha-click="${this._handleTap}"
         @ha-hold="${this._handleHold}"
@@ -61,26 +69,24 @@ export class HuiImageElement extends LitElement implements LovelaceElement {
     `;
   }
 
-  private renderStyle(): TemplateResult {
+  static get styles(): CSSResult {
-    return html`
+    return css`
-      <style>
+      :host(.clickable) {
-        :host(.clickable) {
+        cursor: pointer;
-          cursor: pointer;
+        overflow: hidden;
-          overflow: hidden;
+        -webkit-touch-callout: none !important;
-          -webkit-touch-callout: none !important;
+      }
-        }
+      hui-image {
-        hui-image {
+        -webkit-user-select: none !important;
-          -webkit-user-select: none !important;
+      }
-        }
-      </style>
     `;
   }
 
-  private _handleTap() {
+  private _handleTap(): void {
     handleClick(this, this.hass!, this._config!, false);
   }
 
-  private _handleHold() {
+  private _handleHold(): void {
     handleClick(this, this.hass!, this._config!, true);
   }
 }
@@ -90,5 +96,3 @@ declare global {
     "hui-image-element": HuiImageElement;
   }
 }
-
-customElements.define("hui-image-element", HuiImageElement);

src/panels/lovelace/elements/hui-service-button-element.ts

@@ -1,14 +1,29 @@
-import { html, LitElement, TemplateResult } from "lit-element";
+import {
+  html,
+  LitElement,
+  TemplateResult,
+  property,
+  customElement,
+  CSSResult,
+  css,
+} from "lit-element";
 
 import "../../../components/buttons/ha-call-service-button";
 
 import { LovelaceElement, LovelaceElementConfig } from "./types";
 import { HomeAssistant } from "../../../types";
 
+export interface Config extends LovelaceElementConfig {
+  title?: string;
+  service?: string;
+  service_data?: object;
+}
+
+@customElement("hui-service-button-element")
 export class HuiServiceButtonElement extends LitElement
   implements LovelaceElement {
   public hass?: HomeAssistant;
-  private _config?: LovelaceElementConfig;
+  @property() private _config?: Config;
   private _domain?: string;
   private _service?: string;
 
@@ -16,7 +31,7 @@ export class HuiServiceButtonElement extends LitElement
     return { _config: {} };
   }
 
-  public setConfig(config: LovelaceElementConfig): void {
+  public setConfig(config: Config): void {
     if (!config || !config.service) {
       throw Error("Invalid Configuration: 'service' required");
     }
@@ -37,12 +52,11 @@ export class HuiServiceButtonElement extends LitElement
   }
 
   protected render(): TemplateResult | void {
-    if (!this._config) {
+    if (!this._config || !this.hass) {
       return html``;
     }
 
     return html`
-      ${this.renderStyle()}
       <ha-call-service-button
         .hass="${this.hass}"
         .domain="${this._domain}"
@@ -53,14 +67,12 @@ export class HuiServiceButtonElement extends LitElement
     `;
   }
 
-  private renderStyle(): TemplateResult {
+  static get styles(): CSSResult {
-    return html`
+    return css`
-      <style>
+      ha-call-service-button {
-        ha-call-service-button {
+        color: var(--primary-color);
-          color: var(--primary-color);
+        white-space: nowrap;
-          white-space: nowrap;
+      }
-        }
-      </style>
     `;
   }
 }
@@ -70,5 +82,3 @@ declare global {
     "hui-service-button-element": HuiServiceButtonElement;
   }
 }
-
-customElements.define("hui-service-button-element", HuiServiceButtonElement);

src/panels/lovelace/elements/hui-state-badge-element.ts

@@ -1,21 +1,29 @@
-import { html, LitElement, TemplateResult } from "lit-element";
+import {
+  html,
+  LitElement,
+  TemplateResult,
+  customElement,
+  property,
+} from "lit-element";
 
 import "../../../components/entity/ha-state-label-badge";
+import "../components/hui-warning";
 
 import computeStateName from "../../../common/entity/compute_state_name";
 import { LovelaceElement, LovelaceElementConfig } from "./types";
 import { HomeAssistant } from "../../../types";
 
+export interface Config extends LovelaceElementConfig {
+  entity: string;
+}
+
+@customElement("hui-state-badge-element")
 export class HuiStateBadgeElement extends LitElement
   implements LovelaceElement {
-  public hass?: HomeAssistant;
+  @property() public hass?: HomeAssistant;
-  private _config?: LovelaceElementConfig;
+  @property() private _config?: Config;
 
-  static get properties() {
+  public setConfig(config: Config): void {
-    return { hass: {}, _config: {} };
-  }
-
-  public setConfig(config: LovelaceElementConfig): void {
     if (!config.entity) {
       throw Error("Invalid Configuration: 'entity' required");
     }
@@ -24,20 +32,29 @@ export class HuiStateBadgeElement extends LitElement
   }
 
   protected render(): TemplateResult | void {
-    if (
+    if (!this._config || !this.hass) {
-      !this._config ||
-      !this.hass ||
-      !this.hass.states[this._config.entity!]
-    ) {
       return html``;
     }
 
-    const state = this.hass.states[this._config.entity!];
+    const stateObj = this.hass.states[this._config.entity!];
+
+    if (!stateObj) {
+      return html`
+        <hui-warning
+          >${this.hass.localize(
+            "ui.panel.lovelace.warning.entity_not_found",
+            "entity",
+            this._config.entity
+          )}</hui-warning
+        >
+      `;
+    }
+
     return html`
       <ha-state-label-badge
         .hass="${this.hass}"
-        .state="${state}"
+        .state="${stateObj}"
-        .title="${computeStateName(state)}"
+        .title="${computeStateName(stateObj)}"
       ></ha-state-label-badge>
     `;
   }
@@ -48,5 +65,3 @@ declare global {
     "hui-state-badge-element": HuiStateBadgeElement;
   }
 }
-
-customElements.define("hui-state-badge-element", HuiStateBadgeElement);

src/panels/lovelace/elements/hui-state-icon-element.ts

@@ -1,22 +1,35 @@
-import { html, LitElement, TemplateResult } from "lit-element";
+import {
+  html,
+  LitElement,
+  TemplateResult,
+  customElement,
+  property,
+  css,
+  CSSResult,
+} from "lit-element";
 
 import "../../../components/entity/state-badge";
+import "../components/hui-warning";
 
 import { computeTooltip } from "../common/compute-tooltip";
 import { handleClick } from "../common/handle-click";
 import { longPress } from "../common/directives/long-press-directive";
 import { LovelaceElement, LovelaceElementConfig } from "./types";
 import { HomeAssistant } from "../../../types";
+import { ActionConfig } from "../../../data/lovelace";
 
+export interface Config extends LovelaceElementConfig {
+  entity: string;
+  tap_action?: ActionConfig;
+  hold_action?: ActionConfig;
+}
+
+@customElement("hui-state-icon-element")
 export class HuiStateIconElement extends LitElement implements LovelaceElement {
-  public hass?: HomeAssistant;
+  @property() public hass?: HomeAssistant;
-  private _config?: LovelaceElementConfig;
+  @property() private _config?: Config;
 
-  static get properties() {
+  public setConfig(config: Config): void {
-    return { hass: {}, _config: {} };
-  }
-
-  public setConfig(config: LovelaceElementConfig): void {
     if (!config.entity) {
       throw Error("Invalid Configuration: 'entity' required");
     }
@@ -25,20 +38,28 @@ export class HuiStateIconElement extends LitElement implements LovelaceElement {
   }
 
   protected render(): TemplateResult | void {
-    if (
+    if (!this._config || !this.hass) {
-      !this._config ||
-      !this.hass ||
-      !this.hass.states[this._config.entity!]
-    ) {
       return html``;
     }
 
-    const state = this.hass!.states[this._config.entity!];
+    const stateObj = this.hass.states[this._config.entity!];
+
+    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()}
       <state-badge
-        .stateObj="${state}"
+        .stateObj="${stateObj}"
-        .title="${computeTooltip(this.hass!, this._config)}"
+        .title="${computeTooltip(this.hass, this._config)}"
         @ha-click="${this._handleClick}"
         @ha-hold="${this._handleHold}"
         .longPress="${longPress()}"
@@ -46,21 +67,19 @@ export class HuiStateIconElement extends LitElement implements LovelaceElement {
     `;
   }
 
-  private renderStyle(): TemplateResult {
+  static get styles(): CSSResult {
-    return html`
+    return css`
-      <style>
+      :host {
-        :host {
+        cursor: pointer;
-          cursor: pointer;
+      }
-        }
-      </style>
     `;
   }
 
-  private _handleClick() {
+  private _handleClick(): void {
     handleClick(this, this.hass!, this._config!, false);
   }
 
-  private _handleHold() {
+  private _handleHold(): void {
     handleClick(this, this.hass!, this._config!, true);
   }
 }
@@ -70,5 +89,3 @@ declare global {
     "hui-state-icon-element": HuiStateIconElement;
   }
 }
-
-customElements.define("hui-state-icon-element", HuiStateIconElement);

src/panels/lovelace/elements/hui-state-label-element.ts

@@ -1,6 +1,15 @@
-import { html, LitElement, TemplateResult } from "lit-element";
+import {
+  html,
+  LitElement,
+  TemplateResult,
+  customElement,
+  property,
+  css,
+  CSSResult,
+} from "lit-element";
 
 import "../../../components/entity/ha-state-label-badge";
+import "../components/hui-warning";
 
 import computeStateDisplay from "../../../common/entity/compute_state_display";
 import { computeTooltip } from "../common/compute-tooltip";
@@ -8,19 +17,20 @@ import { handleClick } from "../common/handle-click";
 import { longPress } from "../common/directives/long-press-directive";
 import { LovelaceElement, LovelaceElementConfig } from "./types";
 import { HomeAssistant } from "../../../types";
+import { ActionConfig } from "../../../data/lovelace";
 
 interface Config extends LovelaceElementConfig {
+  entity: string;
   prefix?: string;
   suffix?: string;
+  tap_action?: ActionConfig;
+  hold_action?: ActionConfig;
 }
 
+@customElement("hui-state-label-element")
 class HuiStateLabelElement extends LitElement implements LovelaceElement {
-  public hass?: HomeAssistant;
+  @property() public hass?: HomeAssistant;
-  private _config?: Config;
+  @property() private _config?: Config;
-
-  static get properties() {
-    return { hass: {}, _config: {} };
-  }
 
   public setConfig(config: Config): void {
     if (!config.entity) {
@@ -31,45 +41,59 @@ class HuiStateLabelElement extends LitElement implements LovelaceElement {
   }
 
   protected render(): TemplateResult | void {
-    if (!this._config) {
+    if (!this._config || !this.hass) {
       return html``;
     }
 
-    const state = this.hass!.states[this._config.entity!];
+    const stateObj = this.hass.states[this._config.entity!];
+
+    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()}
       <div
-        .title="${computeTooltip(this.hass!, this._config)}"
+        .title="${computeTooltip(this.hass, this._config)}"
         @ha-click="${this._handleTap}"
         @ha-hold="${this._handleHold}"
         .longPress="${longPress()}"
       >
-        ${this._config.prefix}${state
+        ${this._config.prefix}${stateObj
-          ? computeStateDisplay(this.hass!.localize, state, this.hass!.language)
+          ? computeStateDisplay(
+              this.hass.localize,
+              stateObj,
+              this.hass.language
+            )
           : "-"}${this._config.suffix}
       </div>
     `;
   }
 
-  private _handleTap() {
+  private _handleTap(): void {
     handleClick(this, this.hass!, this._config!, false);
   }
 
-  private _handleHold() {
+  private _handleHold(): void {
     handleClick(this, this.hass!, this._config!, true);
   }
 
-  private renderStyle(): TemplateResult {
+  static get styles(): CSSResult {
-    return html`
+    return css`
-      <style>
+      :host {
-        :host {
+        cursor: pointer;
-          cursor: pointer;
+      }
-        }
+      div {
-        div {
+        padding: 8px;
-          padding: 8px;
+        white-space: nowrap;
-          white-space: nowrap;
+      }
-        }
-      </style>
     `;
   }
 }
@@ -79,5 +103,3 @@ declare global {
     "hui-state-label-element": HuiStateLabelElement;
   }
 }
-
-customElements.define("hui-state-label-element", HuiStateLabelElement);

src/panels/lovelace/elements/types.ts

@@ -1,15 +1,8 @@
 import { HomeAssistant } from "../../../types";
-import { ActionConfig } from "../../../data/lovelace";
 
 export interface LovelaceElementConfig {
   type: string;
   style: object;
-  entity?: string;
-  hold_action?: ActionConfig;
-  service?: string;
-  service_data?: object;
-  tap_action?: ActionConfig;
-  title?: string;
 }
 
 export interface LovelaceElement extends HTMLElement {