Migrate state label badge to entity badge (#21507)

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

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

src/panels/lovelace/create-element/create-badge-element.ts

@@ -1,15 +1,15 @@
 import { LovelaceBadgeConfig } from "../../../data/lovelace/config/badge";
 import "../badges/hui-entity-badge";
-import "../badges/hui-state-label-badge";
 import {
   createLovelaceElement,
   getLovelaceElementClass,
   tryCreateLovelaceElement,
 } from "./create-element-base";
 
-const ALWAYS_LOADED_TYPES = new Set(["error", "state-label", "entity"]);
+const ALWAYS_LOADED_TYPES = new Set(["error", "entity"]);
 const LAZY_LOAD_TYPES = {
   "entity-filter": () => import("../badges/hui-entity-filter-badge"),
+  "state-label": () => import("../badges/hui-state-label-badge"),
 };
 
 // This will not return an error card but will throw the error
@@ -20,7 +20,7 @@ export const tryCreateBadgeElement = (config: LovelaceBadgeConfig) =>
     ALWAYS_LOADED_TYPES,
     LAZY_LOAD_TYPES,
     undefined,
-    undefined
+    "entity"
   );
 
 export const createBadgeElement = (config: LovelaceBadgeConfig) =>

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

@@ -109,6 +109,10 @@ 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-entity-badge-editor.ts

@@ -44,6 +44,8 @@ const badgeConfigStruct = assign(
     color: optional(string()),
     show_entity_picture: optional(boolean()),
     tap_action: optional(actionConfigStruct),
+    show_name: optional(boolean()),
+    image: optional(string()),
   })
 );