Improve state badge migration (#21603)

src/panels/lovelace/badges/hui-badge.ts

@@ -57,9 +57,6 @@ export class HuiBadge extends ReactiveElement {
   }
 
   private _updateElement(config: LovelaceBadgeConfig) {
-    if (config.type === "state-label") {
-      config = { display_type: "complete", ...config, type: "entity" };
-    }
     if (!this._element) {
       return;
     }
@@ -69,9 +66,6 @@ export class HuiBadge extends ReactiveElement {
   }
 
   private _loadElement(config: LovelaceBadgeConfig) {
-    if (config.type === "state-label") {
-      config = { display_type: "complete", ...config, type: "entity" };
-    }
     this._element = createBadgeElement(config);
     this._elementConfig = config;
     if (this.hass) {

src/panels/lovelace/badges/hui-state-label-badge.ts

@@ -1,71 +1,25 @@
-import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { ifDefined } from "lit/directives/if-defined";
+import { customElement } from "lit/decorators";
 import "../../../components/entity/ha-state-label-badge";
-import { ActionHandlerEvent } from "../../../data/lovelace/action_handler";
-import { HomeAssistant } from "../../../types";
-import { actionHandler } from "../common/directives/action-handler-directive";
-import { handleAction } from "../common/handle-action";
-import { hasAction } from "../common/has-action";
-import { LovelaceBadge } from "../types";
-import { StateLabelBadgeConfig } from "./types";
+import { HuiStateLabelBadgeEditor } from "../editor/config-elements/hui-state-label-badge-editor";
+import { HuiEntityBadge } from "./hui-entity-badge";
+import { EntityBadgeConfig, StateLabelBadgeConfig } from "./types";
 
 @customElement("hui-state-label-badge")
-export class HuiStateLabelBadge extends LitElement implements LovelaceBadge {
-  @property({ attribute: false }) public hass?: HomeAssistant;
-
-  @state() protected _config?: StateLabelBadgeConfig;
-
-  public setConfig(config: StateLabelBadgeConfig): void {
-    this._config = config;
+export class HuiStateLabelBadge extends HuiEntityBadge {
+  public static async getConfigElement(): Promise<HuiStateLabelBadgeEditor> {
+    await import("../editor/config-elements/hui-state-label-badge-editor");
+    return document.createElement("hui-state-label-badge-editor");
   }
 
-  protected render() {
-    if (!this._config || !this.hass) {
-      return nothing;
-    }
+  // @ts-ignore
+  public override setConfig(config: StateLabelBadgeConfig): void {
+    const entityBadgeConfig: EntityBadgeConfig = {
+      type: "entity",
+      entity: config.entity,
+      display_type: config.show_name === false ? "standard" : "complete",
+    };
 
-    const stateObj = this.hass.states[this._config.entity!];
-
-    return html`
-      <ha-state-label-badge
-        .hass=${this.hass}
-        .state=${stateObj}
-        .name=${this._config.name}
-        .icon=${this._config.icon}
-        .image=${this._config.image}
-        .showName=${this._config.show_name ?? true}
-        @action=${this._handleAction}
-        .actionHandler=${actionHandler({
-          hasHold: hasAction(this._config!.hold_action),
-          hasDoubleClick: hasAction(this._config!.double_tap_action),
-        })}
-        tabindex=${ifDefined(
-          hasAction(this._config.tap_action) || this._config.entity
-            ? "0"
-            : undefined
-        )}
-      ></ha-state-label-badge>
-    `;
-  }
-
-  private _handleAction(ev: ActionHandlerEvent) {
-    handleAction(this, this.hass!, this._config!, ev.detail.action!);
-  }
-
-  static get styles(): CSSResultGroup {
-    return css`
-      ha-state-label-badge:focus {
-        outline: none;
-        background: var(--divider-color);
-        border-radius: 4px;
-      }
-      ha-state-label-badge {
-        display: inline-block;
-        padding: 4px 2px 4px 2px;
-        margin: -4px -2px -4px -2px;
-      }
-    `;
+    this._config = entityBadgeConfig;
   }
 }
 

src/panels/lovelace/editor/badge-editor/hui-dialog-edit-badge.ts

@@ -109,10 +109,6 @@ export class HuiDialogEditBadge
       this._badgeConfig = badge != null ? ensureBadgeConfig(badge) : badge;
     }
 
-    if (this._badgeConfig?.type === "state-label") {
-      this._badgeConfig = { ...this._badgeConfig, type: "entity" };
-    }
-
     this.large = false;
     if (this._badgeConfig && !Object.isFrozen(this._badgeConfig)) {
       this._badgeConfig = deepFreeze(this._badgeConfig);

src/panels/lovelace/editor/config-elements/hui-state-label-badge-editor.ts

@@ -0,0 +1,45 @@
+import { customElement } from "lit/decorators";
+import { assert, assign, boolean, object, optional, string } from "superstruct";
+import "../../../../components/ha-form/ha-form";
+import { EntityBadgeConfig } from "../../badges/types";
+import "../hui-sub-element-editor";
+import { actionConfigStruct } from "../structs/action-struct";
+import { baseLovelaceBadgeConfig } from "../structs/base-badge-struct";
+import "./hui-card-features-editor";
+import { HuiEntityBadgeEditor } from "./hui-entity-badge-editor";
+
+const badgeConfigStruct = assign(
+  baseLovelaceBadgeConfig,
+  object({
+    entity: optional(string()),
+    name: optional(string()),
+    icon: optional(string()),
+    show_entity_picture: optional(boolean()),
+    tap_action: optional(actionConfigStruct),
+    show_name: optional(boolean()),
+    image: optional(string()),
+  })
+);
+
+@customElement("hui-state-label-badge-editor")
+export class HuiStateLabelBadgeEditor extends HuiEntityBadgeEditor {
+  // @ts-ignore
+  public override setConfig(config: StateLabelBadgeConfig): void {
+    assert(config, badgeConfigStruct);
+
+    const entityBadgeConfig: EntityBadgeConfig = {
+      type: "entity",
+      entity: config.entity,
+      display_type: config.show_name === false ? "standard" : "complete",
+    };
+
+    // @ts-ignore
+    this._config = entityBadgeConfig;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-state-label-badge-editor": HuiStateLabelBadgeEditor;
+  }
+}