Restore legacy code while we still support them

demo/src/stubs/energy.ts

@@ -84,7 +84,6 @@ export const mockEnergy = (hass: MockHomeAssistant) => {
           stat_consumption: "sensor.energy_boiler",
         },
       ],
-      device_consumption_water: [],
     })
   );
   hass.mockWS(

src/data/energy.ts

@@ -191,7 +191,6 @@ export type EnergySource =
 export interface EnergyPreferences {
   energy_sources: EnergySource[];
   device_consumption: DeviceConsumptionEnergyPreference[];
-  device_consumption_water: DeviceConsumptionEnergyPreference[];
 }
 
 export interface EnergyInfo {
@@ -348,11 +347,6 @@ export const getReferencedStatisticIds = (
   if (!(includeTypes && !includeTypes.includes("device"))) {
     statIDs.push(...prefs.device_consumption.map((d) => d.stat_consumption));
   }
-  if (!(includeTypes && !includeTypes.includes("water"))) {
-    statIDs.push(
-      ...prefs.device_consumption_water.map((d) => d.stat_consumption)
-    );
-  }
 
   return statIDs;
 };

src/mixins/conditional-listener-mixin.ts

@@ -0,0 +1,104 @@
+import type { ReactiveElement } from "lit";
+import { listenMediaQuery } from "../common/dom/media_query";
+import type { HomeAssistant } from "../types";
+import type { Condition } from "../panels/lovelace/common/validate-condition";
+import { checkConditionsMet } from "../panels/lovelace/common/validate-condition";
+
+type Constructor<T> = abstract new (...args: any[]) => T;
+
+/**
+ * Extract media queries from conditions recursively
+ */
+export function extractMediaQueries(conditions: Condition[]): string[] {
+  return conditions.reduce<string[]>((array, c) => {
+    if ("conditions" in c && c.conditions) {
+      array.push(...extractMediaQueries(c.conditions));
+    }
+    if (c.condition === "screen" && c.media_query) {
+      array.push(c.media_query);
+    }
+    return array;
+  }, []);
+}
+
+/**
+ * Helper to setup media query listeners for conditional visibility
+ */
+export function setupMediaQueryListeners(
+  conditions: Condition[],
+  hass: HomeAssistant,
+  addListener: (unsub: () => void) => void,
+  onUpdate: (conditionsMet: boolean) => void
+): void {
+  const mediaQueries = extractMediaQueries(conditions);
+
+  if (mediaQueries.length === 0) return;
+
+  // Optimization for single media query
+  const hasOnlyMediaQuery =
+    conditions.length === 1 &&
+    conditions[0].condition === "screen" &&
+    !!conditions[0].media_query;
+
+  mediaQueries.forEach((mediaQuery) => {
+    const unsub = listenMediaQuery(mediaQuery, (matches) => {
+      if (hasOnlyMediaQuery) {
+        onUpdate(matches);
+      } else {
+        const conditionsMet = checkConditionsMet(conditions, hass);
+        onUpdate(conditionsMet);
+      }
+    });
+    addListener(unsub);
+  });
+}
+
+/**
+ * Mixin to handle conditional listeners for visibility control
+ *
+ * Provides lifecycle management for listeners (media queries, time-based, state changes, etc.)
+ * that control conditional visibility of components.
+ *
+ * Usage:
+ * 1. Extend your component with ConditionalListenerMixin(ReactiveElement)
+ * 2. Override setupConditionalListeners() to setup your listeners
+ * 3. Use addConditionalListener() to register unsubscribe functions
+ * 4. Call clearConditionalListeners() and setupConditionalListeners() when config changes
+ *
+ * The mixin automatically:
+ * - Sets up listeners when component connects to DOM
+ * - Cleans up listeners when component disconnects from DOM
+ */
+export const ConditionalListenerMixin = <
+  T extends Constructor<ReactiveElement>,
+>(
+  superClass: T
+) => {
+  abstract class ConditionalListenerClass extends superClass {
+    private __listeners: (() => void)[] = [];
+
+    public connectedCallback() {
+      super.connectedCallback();
+      this.setupConditionalListeners();
+    }
+
+    public disconnectedCallback() {
+      super.disconnectedCallback();
+      this.clearConditionalListeners();
+    }
+
+    protected clearConditionalListeners(): void {
+      this.__listeners.forEach((unsub) => unsub());
+      this.__listeners = [];
+    }
+
+    protected addConditionalListener(unsubscribe: () => void): void {
+      this.__listeners.push(unsubscribe);
+    }
+
+    protected setupConditionalListeners(): void {
+      // Override in subclass
+    }
+  }
+  return ConditionalListenerClass;
+};

src/panels/config/energy/components/ha-energy-device-settings-water.ts

@@ -1,249 +0,0 @@
-import {
-  mdiDelete,
-  mdiWater,
-  mdiDragHorizontalVariant,
-  mdiPencil,
-  mdiPlus,
-} from "@mdi/js";
-import type { CSSResultGroup, TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
-import { repeat } from "lit/directives/repeat";
-import { customElement, property } from "lit/decorators";
-import { fireEvent } from "../../../../common/dom/fire_event";
-import "../../../../components/ha-card";
-import "../../../../components/ha-button";
-import "../../../../components/ha-icon-button";
-import "../../../../components/ha-sortable";
-import "../../../../components/ha-svg-icon";
-import type {
-  DeviceConsumptionEnergyPreference,
-  EnergyPreferences,
-  EnergyPreferencesValidation,
-} from "../../../../data/energy";
-import { saveEnergyPreferences } from "../../../../data/energy";
-import type { StatisticsMetaData } from "../../../../data/recorder";
-import { getStatisticLabel } from "../../../../data/recorder";
-import {
-  showAlertDialog,
-  showConfirmationDialog,
-} from "../../../../dialogs/generic/show-dialog-box";
-import { haStyle } from "../../../../resources/styles";
-import type { HomeAssistant } from "../../../../types";
-import { documentationUrl } from "../../../../util/documentation-url";
-import { showEnergySettingsDeviceWaterDialog } from "../dialogs/show-dialogs-energy";
-import "./ha-energy-validation-result";
-import { energyCardStyles } from "./styles";
-
-@customElement("ha-energy-device-settings-water")
-export class EnergyDeviceSettingsWater extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ attribute: false })
-  public preferences!: EnergyPreferences;
-
-  @property({ attribute: false })
-  public statsMetadata?: Record<string, StatisticsMetaData>;
-
-  @property({ attribute: false })
-  public validationResult?: EnergyPreferencesValidation;
-
-  protected render(): TemplateResult {
-    return html`
-      <ha-card outlined>
-        <h1 class="card-header">
-          <ha-svg-icon .path=${mdiWater}></ha-svg-icon>
-          ${this.hass.localize(
-            "ui.panel.config.energy.device_consumption_water.title"
-          )}
-        </h1>
-
-        <div class="card-content">
-          <p>
-            ${this.hass.localize(
-              "ui.panel.config.energy.device_consumption_water.sub"
-            )}
-            <a
-              target="_blank"
-              rel="noopener noreferrer"
-              href=${documentationUrl(
-                this.hass,
-                "/docs/energy/water/#individual-devices"
-              )}
-              >${this.hass.localize(
-                "ui.panel.config.energy.device_consumption_water.learn_more"
-              )}</a
-            >
-          </p>
-          <h3>
-            ${this.hass.localize(
-              "ui.panel.config.energy.device_consumption_water.devices"
-            )}
-          </h3>
-          <ha-sortable handle-selector=".handle" @item-moved=${this._itemMoved}>
-            <div class="devices">
-              ${repeat(
-                this.preferences.device_consumption_water,
-                (device) => device.stat_consumption,
-                (device) => html`
-                  <div class="row" .device=${device}>
-                    <div class="handle">
-                      <ha-svg-icon
-                        .path=${mdiDragHorizontalVariant}
-                      ></ha-svg-icon>
-                    </div>
-                    <span class="content"
-                      >${device.name ||
-                      getStatisticLabel(
-                        this.hass,
-                        device.stat_consumption,
-                        this.statsMetadata?.[device.stat_consumption]
-                      )}</span
-                    >
-                    <ha-icon-button
-                      .label=${this.hass.localize("ui.common.edit")}
-                      @click=${this._editDevice}
-                      .path=${mdiPencil}
-                    ></ha-icon-button>
-                    <ha-icon-button
-                      .label=${this.hass.localize("ui.common.delete")}
-                      @click=${this._deleteDevice}
-                      .device=${device}
-                      .path=${mdiDelete}
-                    ></ha-icon-button>
-                  </div>
-                `
-              )}
-            </div>
-          </ha-sortable>
-          <div class="row">
-            <ha-svg-icon .path=${mdiWater}></ha-svg-icon>
-            <ha-button
-              @click=${this._addDevice}
-              appearance="filled"
-              size="small"
-            >
-              <ha-svg-icon slot="start" .path=${mdiPlus}></ha-svg-icon
-              >${this.hass.localize(
-                "ui.panel.config.energy.device_consumption_water.add_device"
-              )}</ha-button
-            >
-          </div>
-        </div>
-      </ha-card>
-    `;
-  }
-
-  private _itemMoved(ev: CustomEvent): void {
-    ev.stopPropagation();
-    const { oldIndex, newIndex } = ev.detail;
-    const devices = this.preferences.device_consumption_water.concat();
-    const device = devices.splice(oldIndex, 1)[0];
-    devices.splice(newIndex, 0, device);
-
-    const newPrefs = {
-      ...this.preferences,
-      device_consumption_water: devices,
-    };
-    fireEvent(this, "value-changed", { value: newPrefs });
-    this._savePreferences(newPrefs);
-  }
-
-  private _editDevice(ev) {
-    const origDevice: DeviceConsumptionEnergyPreference =
-      ev.currentTarget.closest(".row").device;
-    showEnergySettingsDeviceWaterDialog(this, {
-      statsMetadata: this.statsMetadata,
-      device: { ...origDevice },
-      device_consumptions: this.preferences
-        .device_consumption_water as DeviceConsumptionEnergyPreference[],
-      saveCallback: async (newDevice) => {
-        const newPrefs = {
-          ...this.preferences,
-          device_consumption_water:
-            this.preferences.device_consumption_water.map((d) =>
-              d === origDevice ? newDevice : d
-            ),
-        };
-        this._sanitizeParents(newPrefs);
-        await this._savePreferences(newPrefs);
-      },
-    });
-  }
-
-  private _addDevice() {
-    showEnergySettingsDeviceWaterDialog(this, {
-      statsMetadata: this.statsMetadata,
-      device_consumptions: this.preferences
-        .device_consumption_water as DeviceConsumptionEnergyPreference[],
-      saveCallback: async (device) => {
-        await this._savePreferences({
-          ...this.preferences,
-          device_consumption_water:
-            this.preferences.device_consumption_water.concat(device),
-        });
-      },
-    });
-  }
-
-  private _sanitizeParents(prefs: EnergyPreferences) {
-    const statIds = prefs.device_consumption_water.map(
-      (d) => d.stat_consumption
-    );
-    prefs.device_consumption_water.forEach((d) => {
-      if (d.included_in_stat && !statIds.includes(d.included_in_stat)) {
-        delete d.included_in_stat;
-      }
-    });
-  }
-
-  private async _deleteDevice(ev) {
-    const deviceToDelete: DeviceConsumptionEnergyPreference =
-      ev.currentTarget.device;
-
-    if (
-      !(await showConfirmationDialog(this, {
-        title: this.hass.localize("ui.panel.config.energy.delete_source"),
-      }))
-    ) {
-      return;
-    }
-
-    try {
-      const newPrefs = {
-        ...this.preferences,
-        device_consumption_water:
-          this.preferences.device_consumption_water.filter(
-            (device) => device !== deviceToDelete
-          ),
-      };
-      this._sanitizeParents(newPrefs);
-      await this._savePreferences(newPrefs);
-    } catch (err: any) {
-      showAlertDialog(this, { title: `Failed to save config: ${err.message}` });
-    }
-  }
-
-  private async _savePreferences(preferences: EnergyPreferences) {
-    const result = await saveEnergyPreferences(this.hass, preferences);
-    fireEvent(this, "value-changed", { value: result });
-  }
-
-  static get styles(): CSSResultGroup {
-    return [
-      haStyle,
-      energyCardStyles,
-      css`
-        .handle {
-          cursor: move; /* fallback if grab cursor is unsupported */
-          cursor: grab;
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-energy-device-settings-water": EnergyDeviceSettingsWater;
-  }
-}

src/panels/config/energy/dialogs/dialog-energy-device-settings-water.ts

@@ -1,268 +0,0 @@
-import { mdiWater } from "@mdi/js";
-import type { CSSResultGroup } from "lit";
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { fireEvent } from "../../../../common/dom/fire_event";
-import { stopPropagation } from "../../../../common/dom/stop_propagation";
-import "../../../../components/entity/ha-entity-picker";
-import "../../../../components/entity/ha-statistic-picker";
-import "../../../../components/ha-dialog";
-import "../../../../components/ha-radio";
-import "../../../../components/ha-button";
-import "../../../../components/ha-select";
-import "../../../../components/ha-list-item";
-import type { DeviceConsumptionEnergyPreference } from "../../../../data/energy";
-import { energyStatisticHelpUrl } from "../../../../data/energy";
-import { getStatisticLabel } from "../../../../data/recorder";
-import { getSensorDeviceClassConvertibleUnits } from "../../../../data/sensor";
-import type { HassDialog } from "../../../../dialogs/make-dialog-manager";
-import { haStyleDialog } from "../../../../resources/styles";
-import type { HomeAssistant } from "../../../../types";
-import type { EnergySettingsDeviceWaterDialogParams } from "./show-dialogs-energy";
-
-const volumeUnitClasses = ["volume"];
-
-@customElement("dialog-energy-device-settings-water")
-export class DialogEnergyDeviceSettingsWater
-  extends LitElement
-  implements HassDialog<EnergySettingsDeviceWaterDialogParams>
-{
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @state() private _params?: EnergySettingsDeviceWaterDialogParams;
-
-  @state() private _device?: DeviceConsumptionEnergyPreference;
-
-  @state() private _volume_units?: string[];
-
-  @state() private _error?: string;
-
-  private _excludeList?: string[];
-
-  private _possibleParents: DeviceConsumptionEnergyPreference[] = [];
-
-  public async showDialog(
-    params: EnergySettingsDeviceWaterDialogParams
-  ): Promise<void> {
-    this._params = params;
-    this._device = this._params.device;
-    this._computePossibleParents();
-    this._volume_units = (
-      await getSensorDeviceClassConvertibleUnits(this.hass, "water")
-    ).units;
-    this._excludeList = this._params.device_consumptions
-      .map((entry) => entry.stat_consumption)
-      .filter((id) => id !== this._device?.stat_consumption);
-  }
-
-  private _computePossibleParents() {
-    if (!this._device || !this._params) {
-      this._possibleParents = [];
-      return;
-    }
-    const children: string[] = [];
-    const devices = this._params.device_consumptions;
-    function getChildren(stat) {
-      devices.forEach((d) => {
-        if (d.included_in_stat === stat) {
-          children.push(d.stat_consumption);
-          getChildren(d.stat_consumption);
-        }
-      });
-    }
-    getChildren(this._device.stat_consumption);
-    this._possibleParents = this._params.device_consumptions.filter(
-      (d) =>
-        d.stat_consumption !== this._device!.stat_consumption &&
-        d.stat_consumption !== this._params?.device?.stat_consumption &&
-        !children.includes(d.stat_consumption)
-    );
-  }
-
-  public closeDialog() {
-    this._params = undefined;
-    this._device = undefined;
-    this._error = undefined;
-    this._excludeList = undefined;
-    fireEvent(this, "dialog-closed", { dialog: this.localName });
-    return true;
-  }
-
-  protected render() {
-    if (!this._params) {
-      return nothing;
-    }
-
-    const pickableUnit = this._volume_units?.join(", ") || "";
-
-    return html`
-      <ha-dialog
-        open
-        .heading=${html`<ha-svg-icon
-            .path=${mdiWater}
-            style="--mdc-icon-size: 32px;"
-          ></ha-svg-icon>
-          ${this.hass.localize(
-            "ui.panel.config.energy.device_consumption_water.dialog.header"
-          )}`}
-        @closed=${this.closeDialog}
-      >
-        ${this._error ? html`<p class="error">${this._error}</p>` : ""}
-        <div>
-          ${this.hass.localize(
-            "ui.panel.config.energy.device_consumption_water.dialog.selected_stat_intro",
-            { unit: pickableUnit }
-          )}
-        </div>
-
-        <ha-statistic-picker
-          .hass=${this.hass}
-          .helpMissingEntityUrl=${energyStatisticHelpUrl}
-          .includeUnitClass=${volumeUnitClasses}
-          .value=${this._device?.stat_consumption}
-          .label=${this.hass.localize(
-            "ui.panel.config.energy.device_consumption_water.dialog.device_consumption_water"
-          )}
-          .excludeStatistics=${this._excludeList}
-          @value-changed=${this._statisticChanged}
-          dialogInitialFocus
-        ></ha-statistic-picker>
-
-        <ha-textfield
-          .label=${this.hass.localize(
-            "ui.panel.config.energy.device_consumption_water.dialog.display_name"
-          )}
-          type="text"
-          .disabled=${!this._device}
-          .value=${this._device?.name || ""}
-          .placeholder=${this._device
-            ? getStatisticLabel(
-                this.hass,
-                this._device.stat_consumption,
-                this._params?.statsMetadata?.[this._device.stat_consumption]
-              )
-            : ""}
-          @input=${this._nameChanged}
-        >
-        </ha-textfield>
-
-        <ha-select
-          .label=${this.hass.localize(
-            "ui.panel.config.energy.device_consumption_water.dialog.included_in_device"
-          )}
-          .value=${this._device?.included_in_stat || ""}
-          .helper=${this.hass.localize(
-            "ui.panel.config.energy.device_consumption_water.dialog.included_in_device_helper"
-          )}
-          .disabled=${!this._device}
-          @selected=${this._parentSelected}
-          @closed=${stopPropagation}
-          fixedMenuPosition
-          naturalMenuWidth
-          clearable
-        >
-          ${!this._possibleParents.length
-            ? html`
-                <ha-list-item disabled value="-"
-                  >${this.hass.localize(
-                    "ui.panel.config.energy.device_consumption_water.dialog.no_upstream_devices"
-                  )}</ha-list-item
-                >
-              `
-            : this._possibleParents.map(
-                (stat) => html`
-                  <ha-list-item .value=${stat.stat_consumption}
-                    >${stat.name ||
-                    getStatisticLabel(
-                      this.hass,
-                      stat.stat_consumption,
-                      this._params?.statsMetadata?.[stat.stat_consumption]
-                    )}</ha-list-item
-                  >
-                `
-              )}
-        </ha-select>
-
-        <ha-button
-          appearance="plain"
-          @click=${this.closeDialog}
-          slot="primaryAction"
-        >
-          ${this.hass.localize("ui.common.cancel")}
-        </ha-button>
-        <ha-button
-          @click=${this._save}
-          .disabled=${!this._device}
-          slot="primaryAction"
-        >
-          ${this.hass.localize("ui.common.save")}
-        </ha-button>
-      </ha-dialog>
-    `;
-  }
-
-  private _statisticChanged(ev: CustomEvent<{ value: string }>) {
-    if (!ev.detail.value) {
-      this._device = undefined;
-      return;
-    }
-    this._device = { stat_consumption: ev.detail.value };
-    this._computePossibleParents();
-  }
-
-  private _nameChanged(ev) {
-    const newDevice = {
-      ...this._device!,
-      name: ev.target!.value,
-    } as DeviceConsumptionEnergyPreference;
-    if (!newDevice.name) {
-      delete newDevice.name;
-    }
-    this._device = newDevice;
-  }
-
-  private _parentSelected(ev) {
-    const newDevice = {
-      ...this._device!,
-      included_in_stat: ev.target!.value,
-    } as DeviceConsumptionEnergyPreference;
-    if (!newDevice.included_in_stat) {
-      delete newDevice.included_in_stat;
-    }
-    this._device = newDevice;
-  }
-
-  private async _save() {
-    try {
-      await this._params!.saveCallback(this._device!);
-      this.closeDialog();
-    } catch (err: any) {
-      this._error = err.message;
-    }
-  }
-
-  static get styles(): CSSResultGroup {
-    return [
-      haStyleDialog,
-      css`
-        ha-statistic-picker {
-          width: 100%;
-        }
-        ha-select {
-          margin-top: 16px;
-          width: 100%;
-        }
-        ha-textfield {
-          margin-top: 16px;
-          width: 100%;
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "dialog-energy-device-settings-water": DialogEnergyDeviceSettingsWater;
-  }
-}

src/panels/config/energy/dialogs/show-dialogs-energy.ts

@@ -76,13 +76,6 @@ export interface EnergySettingsDeviceDialogParams {
   saveCallback: (device: DeviceConsumptionEnergyPreference) => Promise<void>;
 }
 
-export interface EnergySettingsDeviceWaterDialogParams {
-  device?: DeviceConsumptionEnergyPreference;
-  device_consumptions: DeviceConsumptionEnergyPreference[];
-  statsMetadata?: Record<string, StatisticsMetaData>;
-  saveCallback: (device: DeviceConsumptionEnergyPreference) => Promise<void>;
-}
-
 export const showEnergySettingsDeviceDialog = (
   element: HTMLElement,
   dialogParams: EnergySettingsDeviceDialogParams
@@ -159,14 +152,3 @@ export const showEnergySettingsGridFlowToDialog = (
     dialogParams: { ...dialogParams, direction: "to" },
   });
 };
-
-export const showEnergySettingsDeviceWaterDialog = (
-  element: HTMLElement,
-  dialogParams: EnergySettingsDeviceWaterDialogParams
-): void => {
-  fireEvent(element, "show-dialog", {
-    dialogTag: "dialog-energy-device-settings-water",
-    dialogImport: () => import("./dialog-energy-device-settings-water"),
-    dialogParams: dialogParams,
-  });
-};

src/panels/config/energy/ha-config-energy.ts

@@ -22,7 +22,6 @@ import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant, Route } from "../../../types";
 import "../../../components/ha-alert";
 import "./components/ha-energy-device-settings";
-import "./components/ha-energy-device-settings-water";
 import "./components/ha-energy-grid-settings";
 import "./components/ha-energy-solar-settings";
 import "./components/ha-energy-battery-settings";
@@ -33,7 +32,6 @@ import { fileDownload } from "../../../util/file_download";
 const INITIAL_CONFIG: EnergyPreferences = {
   energy_sources: [],
   device_consumption: [],
-  device_consumption_water: [],
 };
 
 @customElement("ha-config-energy")
@@ -144,13 +142,6 @@ class HaConfigEnergy extends LitElement {
             .validationResult=${this._validationResult}
             @value-changed=${this._prefsChanged}
           ></ha-energy-device-settings>
-          <ha-energy-device-settings-water
-            .hass=${this.hass}
-            .preferences=${this._preferences!}
-            .statsMetadata=${this._statsMetadata}
-            .validationResult=${this._validationResult}
-            @value-changed=${this._prefsChanged}
-          ></ha-energy-device-settings-water>
         </div>
       </hass-subpage>
     `;

src/panels/energy/cards/energy-setup-wizard-card.ts

@@ -30,7 +30,6 @@ export class EnergySetupWizard extends LitElement implements LovelaceCard {
   @state() private _preferences: EnergyPreferences = {
     energy_sources: [],
     device_consumption: [],
-    device_consumption_water: [],
   };
 
   public getCardSize() {

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

@@ -2,14 +2,14 @@ import type { PropertyValues } from "lit";
 import { ReactiveElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
-import type { MediaQueriesListener } from "../../../common/dom/media_query";
 import "../../../components/ha-svg-icon";
 import type { LovelaceBadgeConfig } from "../../../data/lovelace/config/badge";
 import type { HomeAssistant } from "../../../types";
 import {
-  attachConditionMediaQueriesListeners,
-  checkConditionsMet,
-} from "../common/validate-condition";
+  ConditionalListenerMixin,
+  setupMediaQueryListeners,
+} from "../../../mixins/conditional-listener-mixin";
+import { 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";
@@ -22,7 +22,7 @@ declare global {
 }
 
 @customElement("hui-badge")
-export class HuiBadge extends ReactiveElement {
+export class HuiBadge extends ConditionalListenerMixin(ReactiveElement) {
   @property({ type: Boolean }) public preview = false;
 
   @property({ attribute: false }) public config?: LovelaceBadgeConfig;
@@ -40,20 +40,16 @@ export class HuiBadge extends ReactiveElement {
 
   private _element?: LovelaceBadge;
 
-  private _listeners: MediaQueriesListener[] = [];
-
   protected createRenderRoot() {
     return this;
   }
 
   public disconnectedCallback() {
     super.disconnectedCallback();
-    this._clearMediaQueries();
   }
 
   public connectedCallback() {
     super.connectedCallback();
-    this._listenMediaQueries();
     this._updateVisibility();
   }
 
@@ -137,26 +133,17 @@ export class HuiBadge extends ReactiveElement {
     }
   }
 
-  private _clearMediaQueries() {
-    this._listeners.forEach((unsub) => unsub());
-    this._listeners = [];
-  }
-
-  private _listenMediaQueries() {
-    this._clearMediaQueries();
-    if (!this.config?.visibility) {
+  protected setupConditionalListeners() {
+    if (!this.config?.visibility || !this.hass) {
       return;
     }
-    const conditions = this.config.visibility;
-    const hasOnlyMediaQuery =
-      conditions.length === 1 &&
-      conditions[0].condition === "screen" &&
-      !!conditions[0].media_query;
 
-    this._listeners = attachConditionMediaQueriesListeners(
+    setupMediaQueryListeners(
       this.config.visibility,
-      (matches) => {
-        this._updateVisibility(hasOnlyMediaQuery && matches);
+      this.hass,
+      (unsub) => this.addConditionalListener(unsub),
+      (conditionsMet) => {
+        this._updateVisibility(conditionsMet);
       }
     );
   }

src/panels/lovelace/cards/hui-card.ts

@@ -2,16 +2,16 @@ import type { PropertyValues } from "lit";
 import { ReactiveElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
-import type { MediaQueriesListener } from "../../../common/dom/media_query";
 import "../../../components/ha-svg-icon";
 import type { LovelaceCardConfig } from "../../../data/lovelace/config/card";
 import type { HomeAssistant } from "../../../types";
+import {
+  ConditionalListenerMixin,
+  setupMediaQueryListeners,
+} from "../../../mixins/conditional-listener-mixin";
 import { migrateLayoutToGridOptions } from "../common/compute-card-grid-size";
 import { computeCardSize } from "../common/compute-card-size";
-import {
-  attachConditionMediaQueriesListeners,
-  checkConditionsMet,
-} from "../common/validate-condition";
+import { checkConditionsMet } from "../common/validate-condition";
 import { tryCreateCardElement } from "../create-element/create-card-element";
 import { createErrorCardElement } from "../create-element/create-element-base";
 import type { LovelaceCard, LovelaceGridOptions } from "../types";
@@ -24,7 +24,7 @@ declare global {
 }
 
 @customElement("hui-card")
-export class HuiCard extends ReactiveElement {
+export class HuiCard extends ConditionalListenerMixin(ReactiveElement) {
   @property({ type: Boolean }) public preview = false;
 
   @property({ attribute: false }) public config?: LovelaceCardConfig;
@@ -44,20 +44,16 @@ export class HuiCard extends ReactiveElement {
 
   private _element?: LovelaceCard;
 
-  private _listeners: MediaQueriesListener[] = [];
-
   protected createRenderRoot() {
     return this;
   }
 
   public disconnectedCallback() {
     super.disconnectedCallback();
-    this._clearMediaQueries();
   }
 
   public connectedCallback() {
     super.connectedCallback();
-    this._listenMediaQueries();
     this._updateVisibility();
   }
 
@@ -251,26 +247,17 @@ export class HuiCard extends ReactiveElement {
     }
   }
 
-  private _clearMediaQueries() {
-    this._listeners.forEach((unsub) => unsub());
-    this._listeners = [];
-  }
-
-  private _listenMediaQueries() {
-    this._clearMediaQueries();
-    if (!this.config?.visibility) {
+  protected setupConditionalListeners() {
+    if (!this.config?.visibility || !this.hass) {
       return;
     }
-    const conditions = this.config.visibility;
-    const hasOnlyMediaQuery =
-      conditions.length === 1 &&
-      conditions[0].condition === "screen" &&
-      !!conditions[0].media_query;
 
-    this._listeners = attachConditionMediaQueriesListeners(
+    setupMediaQueryListeners(
       this.config.visibility,
-      (matches) => {
-        this._updateVisibility(hasOnlyMediaQuery && matches);
+      this.hass,
+      (unsub) => this.addConditionalListener(unsub),
+      (conditionsMet) => {
+        this._updateVisibility(conditionsMet);
       }
     );
   }

src/panels/lovelace/common/validate-condition.ts

@@ -1,6 +1,4 @@
 import { ensureArray } from "../../../common/array/ensure-array";
-import type { MediaQueriesListener } from "../../../common/dom/media_query";
-import { listenMediaQuery } from "../../../common/dom/media_query";
 
 import { isValidEntityId } from "../../../common/entity/valid_entity_id";
 import { UNKNOWN } from "../../../data/entity";
@@ -362,31 +360,3 @@ export function addEntityToCondition(
   }
   return condition;
 }
-
-export function extractMediaQueries(conditions: Condition[]): string[] {
-  return conditions.reduce<string[]>((array, c) => {
-    if ("conditions" in c && c.conditions) {
-      array.push(...extractMediaQueries(c.conditions));
-    }
-    if (c.condition === "screen" && c.media_query) {
-      array.push(c.media_query);
-    }
-    return array;
-  }, []);
-}
-
-export function attachConditionMediaQueriesListeners(
-  conditions: Condition[],
-  onChange: (visibility: boolean) => void
-): MediaQueriesListener[] {
-  const mediaQueries = extractMediaQueries(conditions);
-
-  const listeners = mediaQueries.map((query) => {
-    const listener = listenMediaQuery(query, (matches) => {
-      onChange(matches);
-    });
-    return listener;
-  });
-
-  return listeners;
-}

src/panels/lovelace/components/hui-conditional-base.ts

@@ -1,16 +1,16 @@
 import type { PropertyValues } from "lit";
 import { ReactiveElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import type { MediaQueriesListener } from "../../../common/dom/media_query";
-import { deepEqual } from "../../../common/util/deep-equal";
 import type { HomeAssistant } from "../../../types";
+import {
+  ConditionalListenerMixin,
+  setupMediaQueryListeners,
+} from "../../../mixins/conditional-listener-mixin";
 import type { HuiCard } from "../cards/hui-card";
 import type { ConditionalCardConfig } from "../cards/types";
 import type { Condition } from "../common/validate-condition";
 import {
-  attachConditionMediaQueriesListeners,
   checkConditionsMet,
-  extractMediaQueries,
   validateConditionalConfig,
 } from "../common/validate-condition";
 import type { ConditionalRowConfig, LovelaceRow } from "../entity-rows/types";
@@ -22,7 +22,9 @@ declare global {
 }
 
 @customElement("hui-conditional-base")
-export class HuiConditionalBase extends ReactiveElement {
+export class HuiConditionalBase extends ConditionalListenerMixin(
+  ReactiveElement
+) {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
   @property({ type: Boolean }) public preview = false;
@@ -31,10 +33,6 @@ export class HuiConditionalBase extends ReactiveElement {
 
   protected _element?: HuiCard | LovelaceRow;
 
-  private _listeners: MediaQueriesListener[] = [];
-
-  private _mediaQueries: string[] = [];
-
   protected createRenderRoot() {
     return this;
   }
@@ -63,21 +61,14 @@ export class HuiConditionalBase extends ReactiveElement {
 
   public disconnectedCallback() {
     super.disconnectedCallback();
-    this._clearMediaQueries();
   }
 
   public connectedCallback() {
     super.connectedCallback();
-    this._listenMediaQueries();
     this._updateVisibility();
   }
 
-  private _clearMediaQueries() {
-    this._listeners.forEach((unsub) => unsub());
-    this._listeners = [];
-  }
-
-  private _listenMediaQueries() {
+  protected setupConditionalListeners() {
     if (!this._config || !this.hass) {
       return;
     }
@@ -85,27 +76,13 @@ export class HuiConditionalBase extends ReactiveElement {
     const supportedConditions = this._config.conditions.filter(
       (c) => "condition" in c
     ) as Condition[];
-    const mediaQueries = extractMediaQueries(supportedConditions);
 
-    if (deepEqual(mediaQueries, this._mediaQueries)) return;
-
-    this._clearMediaQueries();
-
-    const conditions = this._config.conditions;
-    const hasOnlyMediaQuery =
-      conditions.length === 1 &&
-      "condition" in conditions[0] &&
-      conditions[0].condition === "screen" &&
-      !!conditions[0].media_query;
-
-    this._listeners = attachConditionMediaQueriesListeners(
+    setupMediaQueryListeners(
       supportedConditions,
-      (matches) => {
-        if (hasOnlyMediaQuery) {
-          this.setVisibility(matches);
-          return;
-        }
-        this._updateVisibility();
+      this.hass,
+      (unsub) => this.addConditionalListener(unsub),
+      (conditionsMet) => {
+        this.setVisibility(conditionsMet);
       }
     );
   }
@@ -119,7 +96,7 @@ export class HuiConditionalBase extends ReactiveElement {
       changed.has("hass") ||
       changed.has("preview")
     ) {
-      this._listenMediaQueries();
+      this.setupConditionalListeners();
       this._updateVisibility();
     }
   }

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

@@ -2,13 +2,13 @@ import type { PropertyValues } from "lit";
 import { ReactiveElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
-import type { MediaQueriesListener } from "../../../common/dom/media_query";
 import "../../../components/ha-svg-icon";
 import type { HomeAssistant } from "../../../types";
 import {
-  attachConditionMediaQueriesListeners,
-  checkConditionsMet,
-} from "../common/validate-condition";
+  ConditionalListenerMixin,
+  setupMediaQueryListeners,
+} from "../../../mixins/conditional-listener-mixin";
+import { checkConditionsMet } from "../common/validate-condition";
 import { createHeadingBadgeElement } from "../create-element/create-heading-badge-element";
 import type { LovelaceHeadingBadge } from "../types";
 import type { LovelaceHeadingBadgeConfig } from "./types";
@@ -21,7 +21,7 @@ declare global {
 }
 
 @customElement("hui-heading-badge")
-export class HuiHeadingBadge extends ReactiveElement {
+export class HuiHeadingBadge extends ConditionalListenerMixin(ReactiveElement) {
   @property({ type: Boolean }) public preview = false;
 
   @property({ attribute: false }) public config?: LovelaceHeadingBadgeConfig;
@@ -39,20 +39,16 @@ export class HuiHeadingBadge extends ReactiveElement {
 
   private _element?: LovelaceHeadingBadge;
 
-  private _listeners: MediaQueriesListener[] = [];
-
   protected createRenderRoot() {
     return this;
   }
 
   public disconnectedCallback() {
     super.disconnectedCallback();
-    this._clearMediaQueries();
   }
 
   public connectedCallback() {
     super.connectedCallback();
-    this._listenMediaQueries();
     this._updateVisibility();
   }
 
@@ -137,26 +133,17 @@ export class HuiHeadingBadge extends ReactiveElement {
     }
   }
 
-  private _clearMediaQueries() {
-    this._listeners.forEach((unsub) => unsub());
-    this._listeners = [];
-  }
-
-  private _listenMediaQueries() {
-    this._clearMediaQueries();
-    if (!this.config?.visibility) {
+  protected setupConditionalListeners() {
+    if (!this.config?.visibility || !this.hass) {
       return;
     }
-    const conditions = this.config.visibility;
-    const hasOnlyMediaQuery =
-      conditions.length === 1 &&
-      conditions[0].condition === "screen" &&
-      !!conditions[0].media_query;
 
-    this._listeners = attachConditionMediaQueriesListeners(
+    setupMediaQueryListeners(
       this.config.visibility,
-      (matches) => {
-        this._updateVisibility(hasOnlyMediaQuery && matches);
+      this.hass,
+      (unsub) => this.addConditionalListener(unsub),
+      (conditionsMet) => {
+        this._updateVisibility(conditionsMet);
       }
     );
   }

src/panels/lovelace/sections/hui-section.ts

@@ -4,7 +4,6 @@ import { ReactiveElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { storage } from "../../../common/decorators/storage";
 import { fireEvent } from "../../../common/dom/fire_event";
-import type { MediaQueriesListener } from "../../../common/dom/media_query";
 import "../../../components/ha-svg-icon";
 import type { LovelaceSectionElement } from "../../../data/lovelace";
 import type { LovelaceCardConfig } from "../../../data/lovelace/config/card";
@@ -14,12 +13,13 @@ import type {
 } from "../../../data/lovelace/config/section";
 import { isStrategySection } from "../../../data/lovelace/config/section";
 import type { HomeAssistant } from "../../../types";
+import {
+  ConditionalListenerMixin,
+  setupMediaQueryListeners,
+} from "../../../mixins/conditional-listener-mixin";
 import "../cards/hui-card";
 import type { HuiCard } from "../cards/hui-card";
-import {
-  attachConditionMediaQueriesListeners,
-  checkConditionsMet,
-} from "../common/validate-condition";
+import { checkConditionsMet } from "../common/validate-condition";
 import { createSectionElement } from "../create-element/create-section-element";
 import { showCreateCardDialog } from "../editor/card-editor/show-create-card-dialog";
 import { showEditCardDialog } from "../editor/card-editor/show-edit-card-dialog";
@@ -37,7 +37,7 @@ declare global {
 }
 
 @customElement("hui-section")
-export class HuiSection extends ReactiveElement {
+export class HuiSection extends ConditionalListenerMixin(ReactiveElement) {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ attribute: false }) public config!: LovelaceSectionRawConfig;
@@ -59,8 +59,6 @@ export class HuiSection extends ReactiveElement {
 
   private _layoutElement?: LovelaceSectionElement;
 
-  private _listeners: MediaQueriesListener[] = [];
-
   private _config: LovelaceSectionConfig | undefined;
 
   @storage({
@@ -114,14 +112,10 @@ export class HuiSection extends ReactiveElement {
 
   public disconnectedCallback() {
     super.disconnectedCallback();
-    this._clearMediaQueries();
   }
 
   public connectedCallback() {
     super.connectedCallback();
-    if (this.hasUpdated) {
-      this._listenMediaQueries();
-    }
     this._updateElement();
   }
 
@@ -158,26 +152,17 @@ export class HuiSection extends ReactiveElement {
     }
   }
 
-  private _clearMediaQueries() {
-    this._listeners.forEach((unsub) => unsub());
-    this._listeners = [];
-  }
-
-  private _listenMediaQueries() {
-    this._clearMediaQueries();
-    if (!this._config?.visibility) {
+  protected setupConditionalListeners() {
+    if (!this._config?.visibility || !this.hass) {
       return;
     }
-    const conditions = this._config.visibility;
-    const hasOnlyMediaQuery =
-      conditions.length === 1 &&
-      conditions[0].condition === "screen" &&
-      conditions[0].media_query != null;
 
-    this._listeners = attachConditionMediaQueriesListeners(
+    setupMediaQueryListeners(
       this._config.visibility,
-      (matches) => {
-        this._updateElement(hasOnlyMediaQuery && matches);
+      this.hass,
+      (unsub) => this.addConditionalListener(unsub),
+      (conditionsMet) => {
+        this._updateElement(conditionsMet);
       }
     );
   }
@@ -199,9 +184,6 @@ export class HuiSection extends ReactiveElement {
       type: sectionConfig.type || DEFAULT_SECTION_LAYOUT,
     };
     this._config = sectionConfig;
-    if (this.isConnected) {
-      this._listenMediaQueries();
-    }
 
     // Create a new layout element if necessary.
     let addLayoutElement = false;

src/translations/en.json

@@ -3208,22 +3208,6 @@
               "included_in_device_helper": "If this device is already counted by another device (such as a smart switch measured by a smart breaker), selecting the upstream device prevents duplicate energy tracking.",
               "no_upstream_devices": "No eligible upstream devices"
             }
-          },
-          "device_consumption_water": {
-            "title": "Individual water devices",
-            "sub": "Tracking the water usage of individual devices allows Home Assistant to break down your water usage by device.",
-            "learn_more": "More information on how to get started.",
-            "devices": "Devices",
-            "add_device": "Add device",
-            "dialog": {
-              "header": "Add a water device",
-              "display_name": "Display name",
-              "device_consumption_water": "Device water consumption",
-              "selected_stat_intro": "Select the water sensor that measures the device's water usage in either of {unit}.",
-              "included_in_device": "Upstream device",
-              "included_in_device_helper": "If this device is already counted by another device (such as a water meter measured by the main water supply), selecting the upstream device prevents duplicate water tracking.",
-              "no_upstream_devices": "No eligible upstream devices"
-            }
           }
         },
         "helpers": {