Fix empty classmap in state control (#18922)

* Fix empy classmap in state control

* Don't use class map
This commit is contained in:
Paul Bottein 2023-12-06 14:22:32 +01:00 committed by GitHub
parent 86726102fb
commit e646528b86
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 16 additions and 19 deletions

View File

@ -1,7 +1,6 @@
import { mdiMinus, mdiPlus, mdiWaterPercent } from "@mdi/js"; import { mdiMinus, mdiPlus, mdiWaterPercent } from "@mdi/js";
import { CSSResultGroup, LitElement, PropertyValues, html } from "lit"; import { CSSResultGroup, LitElement, PropertyValues, html } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import { styleMap } from "lit/directives/style-map"; import { styleMap } from "lit/directives/style-map";
import { stateActive } from "../../common/entity/state_active"; import { stateActive } from "../../common/entity/state_active";
import { domainStateColorProperties } from "../../common/entity/state_color"; import { domainStateColorProperties } from "../../common/entity/state_color";
@ -179,8 +178,8 @@ export class HaStateControlClimateHumidity extends LitElement {
const currentHumidity = this.stateObj.attributes.current_humidity; const currentHumidity = this.stateObj.attributes.current_humidity;
const containerSizeClass = this._sizeController.value const containerSizeClass = this._sizeController.value
? { [this._sizeController.value]: true } ? ` ${this._sizeController.value}`
: {}; : "";
if ( if (
supportsTargetHumidity && supportsTargetHumidity &&
@ -189,7 +188,7 @@ export class HaStateControlClimateHumidity extends LitElement {
) { ) {
return html` return html`
<div <div
class="container${classMap(containerSizeClass)}" class="container${containerSizeClass}"
style=${styleMap({ style=${styleMap({
"--state-color": stateColor, "--state-color": stateColor,
})} })}
@ -218,7 +217,7 @@ export class HaStateControlClimateHumidity extends LitElement {
} }
return html` return html`
<div class="container${classMap(containerSizeClass)}"> <div class="container${containerSizeClass}">
<ha-control-circular-slider <ha-control-circular-slider
.preventInteractionOnScroll=${this.preventInteractionOnScroll} .preventInteractionOnScroll=${this.preventInteractionOnScroll}
.current=${this.stateObj.attributes.current_humidity} .current=${this.stateObj.attributes.current_humidity}

View File

@ -294,8 +294,8 @@ export class HaStateControlClimateTemperature extends LitElement {
} }
const containerSizeClass = this._sizeController.value const containerSizeClass = this._sizeController.value
? { [this._sizeController.value]: true } ? ` ${this._sizeController.value}`
: {}; : "";
if ( if (
supportsTargetTemperature && supportsTargetTemperature &&
@ -314,7 +314,7 @@ export class HaStateControlClimateTemperature extends LitElement {
return html` return html`
<div <div
class="container${classMap(containerSizeClass)}" class="container${containerSizeClass}"
style=${styleMap({ style=${styleMap({
"--state-color": stateColor, "--state-color": stateColor,
"--action-color": actionColor, "--action-color": actionColor,
@ -353,7 +353,7 @@ export class HaStateControlClimateTemperature extends LitElement {
) { ) {
return html` return html`
<div <div
class="container${classMap(containerSizeClass)}" class="container${containerSizeClass}"
style=${styleMap({ style=${styleMap({
"--low-color": lowColor, "--low-color": lowColor,
"--high-color": highColor, "--high-color": highColor,

View File

@ -1,7 +1,6 @@
import { mdiMinus, mdiPlus, mdiWaterPercent } from "@mdi/js"; import { mdiMinus, mdiPlus, mdiWaterPercent } from "@mdi/js";
import { CSSResultGroup, LitElement, PropertyValues, html } from "lit"; import { CSSResultGroup, LitElement, PropertyValues, html } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import { styleMap } from "lit/directives/style-map"; import { styleMap } from "lit/directives/style-map";
import { stateActive } from "../../common/entity/state_active"; import { stateActive } from "../../common/entity/state_active";
import { stateColorCss } from "../../common/entity/state_color"; import { stateColorCss } from "../../common/entity/state_color";
@ -188,8 +187,8 @@ export class HaStateControlHumidifierHumidity extends LitElement {
const currentHumidity = this.stateObj.attributes.current_humidity; const currentHumidity = this.stateObj.attributes.current_humidity;
const containerSizeClass = this._sizeController.value const containerSizeClass = this._sizeController.value
? { [this._sizeController.value]: true } ? ` ${this._sizeController.value}`
: {}; : "";
if (targetHumidity != null && this.stateObj.state !== UNAVAILABLE) { if (targetHumidity != null && this.stateObj.state !== UNAVAILABLE) {
const inverted = const inverted =
@ -198,7 +197,7 @@ export class HaStateControlHumidifierHumidity extends LitElement {
return html` return html`
<div <div
class="container${classMap(containerSizeClass)}" class="container${containerSizeClass}"
style=${styleMap({ style=${styleMap({
"--state-color": stateColor, "--state-color": stateColor,
"--action-color": actionColor, "--action-color": actionColor,
@ -230,7 +229,7 @@ export class HaStateControlHumidifierHumidity extends LitElement {
return html` return html`
<div <div
class="container${classMap(containerSizeClass)}" class="container${containerSizeClass}"
style=${styleMap({ style=${styleMap({
"--action-color": actionColor, "--action-color": actionColor,
})} })}

View File

@ -1,7 +1,6 @@
import { mdiMinus, mdiPlus } from "@mdi/js"; import { mdiMinus, mdiPlus } from "@mdi/js";
import { CSSResultGroup, LitElement, PropertyValues, html } from "lit"; import { CSSResultGroup, LitElement, PropertyValues, html } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import { styleMap } from "lit/directives/style-map"; import { styleMap } from "lit/directives/style-map";
import { UNIT_F } from "../../common/const"; import { UNIT_F } from "../../common/const";
import { stateActive } from "../../common/entity/state_active"; import { stateActive } from "../../common/entity/state_active";
@ -184,8 +183,8 @@ export class HaStateControlWaterHeaterTemperature extends LitElement {
const active = stateActive(this.stateObj); const active = stateActive(this.stateObj);
const containerSizeClass = this._sizeController.value const containerSizeClass = this._sizeController.value
? { [this._sizeController.value]: true } ? ` ${this._sizeController.value}`
: {}; : "";
if ( if (
supportsTargetTemperature && supportsTargetTemperature &&
@ -194,7 +193,7 @@ export class HaStateControlWaterHeaterTemperature extends LitElement {
) { ) {
return html` return html`
<div <div
class="container${classMap(containerSizeClass)}" class="container${containerSizeClass}"
style=${styleMap({ style=${styleMap({
"--state-color": stateColor, "--state-color": stateColor,
})} })}
@ -225,7 +224,7 @@ export class HaStateControlWaterHeaterTemperature extends LitElement {
return html` return html`
<div <div
class="container${classMap(containerSizeClass)}" class="container${containerSizeClass}"
style=${styleMap({ style=${styleMap({
"--state-color": stateColor, "--state-color": stateColor,
})} })}