Add new badges design with UI editor

src/data/lovelace.ts

@@ -3,9 +3,10 @@ import {
   getCollection,
   HassEventBase,
 } from "home-assistant-js-websocket";
+import { HuiBadge } from "../panels/lovelace/badges/hui-badge";
 import type { HuiCard } from "../panels/lovelace/cards/hui-card";
 import type { HuiSection } from "../panels/lovelace/sections/hui-section";
-import { Lovelace, LovelaceBadge } from "../panels/lovelace/types";
+import { Lovelace } from "../panels/lovelace/types";
 import { HomeAssistant } from "../types";
 import { LovelaceSectionConfig } from "./lovelace/config/section";
 import { fetchConfig, LegacyLovelaceConfig } from "./lovelace/config/types";
@@ -21,7 +22,7 @@ export interface LovelaceViewElement extends HTMLElement {
   narrow?: boolean;
   index?: number;
   cards?: HuiCard[];
-  badges?: LovelaceBadge[];
+  badges?: HuiBadge[];
   sections?: HuiSection[];
   isStrategy: boolean;
   setConfig(config: LovelaceViewConfig): void;

src/data/lovelace/config/badge.ts

@@ -1,4 +1,7 @@
+import { Condition } from "../../../panels/lovelace/common/validate-condition";
+
 export interface LovelaceBadgeConfig {
   type?: string;
   [key: string]: any;
+  visibility?: Condition[];
 }

src/data/lovelace/config/section.ts

@@ -1,4 +1,5 @@
 import type { Condition } from "../../../panels/lovelace/common/validate-condition";
+import { LovelaceBadgeConfig } from "./badge";
 import type { LovelaceCardConfig } from "./card";
 import type { LovelaceStrategyConfig } from "./strategy";
 
@@ -10,6 +11,7 @@ export interface LovelaceBaseSectionConfig {
 export interface LovelaceSectionConfig extends LovelaceBaseSectionConfig {
   type?: string;
   cards?: LovelaceCardConfig[];
+  badges?: LovelaceBadgeConfig[]; // Not supported yet
 }
 
 export interface LovelaceStrategySectionConfig

src/data/lovelace/config/view.ts

@@ -27,7 +27,7 @@ export interface LovelaceBaseViewConfig {
 
 export interface LovelaceViewConfig extends LovelaceBaseViewConfig {
   type?: string;
-  badges?: Array<string | LovelaceBadgeConfig>;
+  badges?: LovelaceBadgeConfig[];
   cards?: LovelaceCardConfig[];
   sections?: LovelaceSectionRawConfig[];
 }

src/data/lovelace_custom_cards.ts

@@ -8,6 +8,14 @@ export interface CustomCardEntry {
   documentationURL?: string;
 }
 
+export interface CustomBadgeEntry {
+  type: string;
+  name?: string;
+  description?: string;
+  preview?: boolean;
+  documentationURL?: string;
+}
+
 export interface CustomCardFeatureEntry {
   type: string;
   name?: string;
@@ -18,6 +26,7 @@ export interface CustomCardFeatureEntry {
 export interface CustomCardsWindow {
   customCards?: CustomCardEntry[];
   customCardFeatures?: CustomCardFeatureEntry[];
+  customBadges?: CustomBadgeEntry[];
   /**
    * @deprecated Use customCardFeatures
    */
@@ -34,6 +43,9 @@ if (!("customCards" in customCardsWindow)) {
 if (!("customCardFeatures" in customCardsWindow)) {
   customCardsWindow.customCardFeatures = [];
 }
+if (!("customBadges" in customCardsWindow)) {
+  customCardsWindow.customBadges = [];
+}
 if (!("customTileFeatures" in customCardsWindow)) {
   customCardsWindow.customTileFeatures = [];
 }
@@ -43,10 +55,14 @@ export const getCustomCardFeatures = () => [
   ...customCardsWindow.customCardFeatures!,
   ...customCardsWindow.customTileFeatures!,
 ];
+export const customBadges = customCardsWindow.customBadges!;
 
 export const getCustomCardEntry = (type: string) =>
   customCards.find((card) => card.type === type);
 
+export const getCustomBadgeEntry = (type: string) =>
+  customBadges.find((badge) => badge.type === type);
+
 export const isCustomType = (type: string) =>
   type.startsWith(CUSTOM_TYPE_PREFIX);
 

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

@@ -0,0 +1,200 @@
+import { PropertyValues, ReactiveElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import { fireEvent } from "../../../common/dom/fire_event";
+import { MediaQueriesListener } from "../../../common/dom/media_query";
+import "../../../components/ha-svg-icon";
+import { LovelaceBadgeConfig } from "../../../data/lovelace/config/badge";
+import type { HomeAssistant } from "../../../types";
+import {
+  attachConditionMediaQueriesListeners,
+  checkConditionsMet,
+} from "../common/validate-condition";
+import { createBadgeElement } from "../create-element/create-badge-element";
+import { createErrorBadgeConfig } from "../create-element/create-element-base";
+import type { LovelaceBadge } from "../types";
+
+declare global {
+  interface HASSDomEvents {
+    "badge-updated": undefined;
+  }
+}
+
+@customElement("hui-badge")
+export class HuiBadge extends ReactiveElement {
+  @property({ type: Boolean }) public preview = false;
+
+  @property({ attribute: false }) public config?: LovelaceBadgeConfig;
+
+  @property({ attribute: false }) public hass?: HomeAssistant;
+
+  private _elementConfig?: LovelaceBadgeConfig;
+
+  public load() {
+    if (!this.config) {
+      throw new Error("Cannot build badge without config");
+    }
+    this._loadElement(this.config);
+  }
+
+  private _element?: LovelaceBadge;
+
+  private _listeners: MediaQueriesListener[] = [];
+
+  protected createRenderRoot() {
+    return this;
+  }
+
+  public disconnectedCallback() {
+    super.disconnectedCallback();
+    this._clearMediaQueries();
+  }
+
+  public connectedCallback() {
+    super.connectedCallback();
+    this._listenMediaQueries();
+    this._updateVisibility();
+  }
+
+  private _updateElement(config: LovelaceBadgeConfig) {
+    if (!this._element) {
+      return;
+    }
+    this._element.setConfig(config);
+    this._elementConfig = config;
+    fireEvent(this, "badge-updated");
+  }
+
+  private _loadElement(config: LovelaceBadgeConfig) {
+    this._element = createBadgeElement(config);
+    this._elementConfig = config;
+    if (this.hass) {
+      this._element.hass = this.hass;
+    }
+    this._element.addEventListener(
+      "ll-upgrade",
+      (ev: Event) => {
+        ev.stopPropagation();
+        if (this.hass) {
+          this._element!.hass = this.hass;
+        }
+        fireEvent(this, "badge-updated");
+      },
+      { once: true }
+    );
+    this._element.addEventListener(
+      "ll-rebuild",
+      (ev: Event) => {
+        ev.stopPropagation();
+        this._loadElement(config);
+        fireEvent(this, "badge-updated");
+      },
+      { once: true }
+    );
+    while (this.lastChild) {
+      this.removeChild(this.lastChild);
+    }
+    this._updateVisibility();
+  }
+
+  protected willUpdate(changedProps: PropertyValues<typeof this>): void {
+    super.willUpdate(changedProps);
+
+    if (!this._element) {
+      this.load();
+    }
+  }
+
+  protected update(changedProps: PropertyValues<typeof this>) {
+    super.update(changedProps);
+
+    if (this._element) {
+      if (changedProps.has("config")) {
+        const elementConfig = this._elementConfig;
+        if (this.config !== elementConfig && this.config) {
+          const typeChanged = this.config?.type !== elementConfig?.type;
+          if (typeChanged) {
+            this._loadElement(this.config);
+          } else {
+            this._updateElement(this.config);
+          }
+        }
+      }
+      if (changedProps.has("hass")) {
+        try {
+          if (this.hass) {
+            this._element.hass = this.hass;
+          }
+        } catch (e: any) {
+          this._loadElement(createErrorBadgeConfig(e.message, null));
+        }
+      }
+    }
+
+    if (changedProps.has("hass") || changedProps.has("preview")) {
+      this._updateVisibility();
+    }
+  }
+
+  private _clearMediaQueries() {
+    this._listeners.forEach((unsub) => unsub());
+    this._listeners = [];
+  }
+
+  private _listenMediaQueries() {
+    this._clearMediaQueries();
+    if (!this.config?.visibility) {
+      return;
+    }
+    const conditions = this.config.visibility;
+    const hasOnlyMediaQuery =
+      conditions.length === 1 &&
+      conditions[0].condition === "screen" &&
+      !!conditions[0].media_query;
+
+    this._listeners = attachConditionMediaQueriesListeners(
+      this.config.visibility,
+      (matches) => {
+        this._updateVisibility(hasOnlyMediaQuery && matches);
+      }
+    );
+  }
+
+  private _updateVisibility(forceVisible?: boolean) {
+    if (!this._element || !this.hass) {
+      return;
+    }
+
+    if (this._element.hidden) {
+      this._setElementVisibility(false);
+      return;
+    }
+
+    const visible =
+      forceVisible ||
+      this.preview ||
+      !this.config?.visibility ||
+      checkConditionsMet(this.config.visibility, this.hass);
+    this._setElementVisibility(visible);
+  }
+
+  private _setElementVisibility(visible: boolean) {
+    if (!this._element) return;
+
+    if (this.hidden !== !visible) {
+      this.style.setProperty("display", visible ? "" : "none");
+      this.toggleAttribute("hidden", !visible);
+    }
+
+    if (!visible && this._element.parentElement) {
+      this.removeChild(this._element);
+    } else if (visible && !this._element.parentElement) {
+      this.appendChild(this._element);
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-badge": HuiBadge;
+  }
+}