From e646528b86e2541a7ec3497e9156e68b66cb5396 Mon Sep 17 00:00:00 2001
From: Paul Bottein <paul.bottein@gmail.com>
Date: Wed, 6 Dec 2023 14:22:32 +0100
Subject: [PATCH] Fix empty classmap in state control (#18922)

* Fix empy classmap in state control

* Don't use class map
---
 .../climate/ha-state-control-climate-humidity.ts         | 9 ++++-----
 .../climate/ha-state-control-climate-temperature.ts      | 8 ++++----
 .../humidifier/ha-state-control-humidifier-humidity.ts   | 9 ++++-----
 .../ha-state-control-water_heater-temperature.ts         | 9 ++++-----
 4 files changed, 16 insertions(+), 19 deletions(-)

diff --git a/src/state-control/climate/ha-state-control-climate-humidity.ts b/src/state-control/climate/ha-state-control-climate-humidity.ts
index 8246e13350..be27b7bdb6 100644
--- a/src/state-control/climate/ha-state-control-climate-humidity.ts
+++ b/src/state-control/climate/ha-state-control-climate-humidity.ts
@@ -1,7 +1,6 @@
 import { mdiMinus, mdiPlus, mdiWaterPercent } from "@mdi/js";
 import { CSSResultGroup, LitElement, PropertyValues, html } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { classMap } from "lit/directives/class-map";
 import { styleMap } from "lit/directives/style-map";
 import { stateActive } from "../../common/entity/state_active";
 import { domainStateColorProperties } from "../../common/entity/state_color";
@@ -179,8 +178,8 @@ export class HaStateControlClimateHumidity extends LitElement {
     const currentHumidity = this.stateObj.attributes.current_humidity;
 
     const containerSizeClass = this._sizeController.value
-      ? { [this._sizeController.value]: true }
-      : {};
+      ? ` ${this._sizeController.value}`
+      : "";
 
     if (
       supportsTargetHumidity &&
@@ -189,7 +188,7 @@ export class HaStateControlClimateHumidity extends LitElement {
     ) {
       return html`
         <div
-          class="container${classMap(containerSizeClass)}"
+          class="container${containerSizeClass}"
           style=${styleMap({
             "--state-color": stateColor,
           })}
@@ -218,7 +217,7 @@ export class HaStateControlClimateHumidity extends LitElement {
     }
 
     return html`
-      <div class="container${classMap(containerSizeClass)}">
+      <div class="container${containerSizeClass}">
         <ha-control-circular-slider
           .preventInteractionOnScroll=${this.preventInteractionOnScroll}
           .current=${this.stateObj.attributes.current_humidity}
diff --git a/src/state-control/climate/ha-state-control-climate-temperature.ts b/src/state-control/climate/ha-state-control-climate-temperature.ts
index 8289aae7fe..755b0ce6ab 100644
--- a/src/state-control/climate/ha-state-control-climate-temperature.ts
+++ b/src/state-control/climate/ha-state-control-climate-temperature.ts
@@ -294,8 +294,8 @@ export class HaStateControlClimateTemperature extends LitElement {
     }
 
     const containerSizeClass = this._sizeController.value
-      ? { [this._sizeController.value]: true }
-      : {};
+      ? ` ${this._sizeController.value}`
+      : "";
 
     if (
       supportsTargetTemperature &&
@@ -314,7 +314,7 @@ export class HaStateControlClimateTemperature extends LitElement {
 
       return html`
         <div
-          class="container${classMap(containerSizeClass)}"
+          class="container${containerSizeClass}"
           style=${styleMap({
             "--state-color": stateColor,
             "--action-color": actionColor,
@@ -353,7 +353,7 @@ export class HaStateControlClimateTemperature extends LitElement {
     ) {
       return html`
         <div
-          class="container${classMap(containerSizeClass)}"
+          class="container${containerSizeClass}"
           style=${styleMap({
             "--low-color": lowColor,
             "--high-color": highColor,
diff --git a/src/state-control/humidifier/ha-state-control-humidifier-humidity.ts b/src/state-control/humidifier/ha-state-control-humidifier-humidity.ts
index 1cc5995ecc..9f9bf92605 100644
--- a/src/state-control/humidifier/ha-state-control-humidifier-humidity.ts
+++ b/src/state-control/humidifier/ha-state-control-humidifier-humidity.ts
@@ -1,7 +1,6 @@
 import { mdiMinus, mdiPlus, mdiWaterPercent } from "@mdi/js";
 import { CSSResultGroup, LitElement, PropertyValues, html } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { classMap } from "lit/directives/class-map";
 import { styleMap } from "lit/directives/style-map";
 import { stateActive } from "../../common/entity/state_active";
 import { stateColorCss } from "../../common/entity/state_color";
@@ -188,8 +187,8 @@ export class HaStateControlHumidifierHumidity extends LitElement {
     const currentHumidity = this.stateObj.attributes.current_humidity;
 
     const containerSizeClass = this._sizeController.value
-      ? { [this._sizeController.value]: true }
-      : {};
+      ? ` ${this._sizeController.value}`
+      : "";
 
     if (targetHumidity != null && this.stateObj.state !== UNAVAILABLE) {
       const inverted =
@@ -198,7 +197,7 @@ export class HaStateControlHumidifierHumidity extends LitElement {
 
       return html`
         <div
-          class="container${classMap(containerSizeClass)}"
+          class="container${containerSizeClass}"
           style=${styleMap({
             "--state-color": stateColor,
             "--action-color": actionColor,
@@ -230,7 +229,7 @@ export class HaStateControlHumidifierHumidity extends LitElement {
 
     return html`
       <div
-        class="container${classMap(containerSizeClass)}"
+        class="container${containerSizeClass}"
         style=${styleMap({
           "--action-color": actionColor,
         })}
diff --git a/src/state-control/water_heater/ha-state-control-water_heater-temperature.ts b/src/state-control/water_heater/ha-state-control-water_heater-temperature.ts
index 78c2d2cdb1..bbcd5cdaad 100644
--- a/src/state-control/water_heater/ha-state-control-water_heater-temperature.ts
+++ b/src/state-control/water_heater/ha-state-control-water_heater-temperature.ts
@@ -1,7 +1,6 @@
 import { mdiMinus, mdiPlus } from "@mdi/js";
 import { CSSResultGroup, LitElement, PropertyValues, html } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { classMap } from "lit/directives/class-map";
 import { styleMap } from "lit/directives/style-map";
 import { UNIT_F } from "../../common/const";
 import { stateActive } from "../../common/entity/state_active";
@@ -184,8 +183,8 @@ export class HaStateControlWaterHeaterTemperature extends LitElement {
     const active = stateActive(this.stateObj);
 
     const containerSizeClass = this._sizeController.value
-      ? { [this._sizeController.value]: true }
-      : {};
+      ? ` ${this._sizeController.value}`
+      : "";
 
     if (
       supportsTargetTemperature &&
@@ -194,7 +193,7 @@ export class HaStateControlWaterHeaterTemperature extends LitElement {
     ) {
       return html`
         <div
-          class="container${classMap(containerSizeClass)}"
+          class="container${containerSizeClass}"
           style=${styleMap({
             "--state-color": stateColor,
           })}
@@ -225,7 +224,7 @@ export class HaStateControlWaterHeaterTemperature extends LitElement {
 
     return html`
       <div
-        class="container${classMap(containerSizeClass)}"
+        class="container${containerSizeClass}"
         style=${styleMap({
           "--state-color": stateColor,
         })}