Feature/badge preview

src/components/entity/ha-badge-group.ts

@@ -0,0 +1,35 @@
+import {
+  css,
+  CSSResult,
+  customElement,
+  html,
+  LitElement,
+  TemplateResult,
+} from "lit-element";
+import "../ha-label-badge";
+
+@customElement("ha-badge-group")
+export class HaBadgeGroup extends LitElement {
+  protected render(): TemplateResult | void {
+    return html`
+      <slot></slot>
+    `;
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      :host {
+        display: block;
+        margin: 8px 16px;
+        font-size: 85%;
+        text-align: center;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-badge-group": HaBadgeGroup;
+  }
+}

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

@@ -35,6 +35,8 @@ export class HaStateLabelBadge extends LitElement {
 
   @property() public image?: string;
 
+  @property() public disabled: boolean = false;
+
   @property() private _timerTimeRemaining?: number;
 
   private _connected?: boolean;
@@ -92,8 +94,12 @@ export class HaStateLabelBadge extends LitElement {
 
   protected firstUpdated(changedProperties: PropertyValues): void {
     super.firstUpdated(changedProperties);
+
     this.addEventListener("click", (ev) => {
       ev.stopPropagation();
+      if (this.disabled) {
+        return;
+      }
       if (this.state) {
         fireEvent(this, "hass-more-info", { entityId: this.state.entity_id });
       }
@@ -220,6 +226,10 @@ export class HaStateLabelBadge extends LitElement {
         cursor: pointer;
       }
 
+      :host([disabled]) {
+        cursor: initial;
+      }
+
       ha-label-badge {
         --ha-label-badge-color: var(--label-badge-red, #df4c1e);
       }

src/panels/lovelace/components/hui-entity-editor.ts

@@ -14,6 +14,7 @@ import { fireEvent } from "../../../common/dom/fire_event";
 import { EntityConfig } from "../entity-rows/types";
 
 import "../../../components/entity/ha-entity-picker";
+import "../../../components/entity/ha-badge-group";
 import { EditorTarget } from "../editor/types";
 
 @customElement("hui-entity-editor")
@@ -30,6 +31,27 @@ export class HuiEntityEditor extends LitElement {
     }
 
     return html`
+      <ha-badge-group>
+        ${this.entities.map((entity) => {
+          const state = this.hass!.states[entity.entity];
+          const name = entity.name;
+          const icon = entity.icon;
+          const image = entity.image;
+
+          return html`
+           <ha-state-label-badge
+            disabled="true"
+            .hass=${this.hass} 
+            .state=${state} 
+            .name=${name} 
+            .icon=${icon} 
+            .image=${image}>
+           </ha-label-badge>
+         </div>
+       `;
+        })}
+      </ha-badge-group>
+
       <h3>
         ${this.label ||
           this.hass!.localize(

src/panels/lovelace/views/hui-view.ts

@@ -7,6 +7,7 @@ import {
 } from "lit-element";
 
 import "../../../components/entity/ha-state-label-badge";
+import "../../../components/entity/ha-badge-group";
 // This one is for types
 // tslint:disable-next-line
 import { HaStateLabelBadge } from "../../../components/entity/ha-state-label-badge";
@@ -91,7 +92,7 @@ export class HUIView extends LitElement {
   protected render(): TemplateResult | void {
     return html`
       ${this.renderStyles()}
-      <div id="badges"></div>
+      <ha-badge-group id="badges"></ha-badge-group>
       <div id="columns"></div>
       ${this.lovelace!.editMode
         ? html`
@@ -122,12 +123,6 @@ export class HUIView extends LitElement {
           background: var(--lovelace-background);
         }
 
-        #badges {
-          margin: 8px 16px;
-          font-size: 85%;
-          text-align: center;
-        }
-
         #columns {
           display: flex;
           flex-direction: row;