Add minimal UI for climate and water entity without target (#18666)

src/components/ha-control-circular-slider.ts

@@ -66,6 +66,9 @@ export class HaControlCircularSlider extends LitElement {
   @property({ type: Boolean, reflect: true })
   public disabled = false;
 
+  @property({ type: Boolean, reflect: true })
+  public readonly = false;
+
   @property({ type: Boolean })
   public dual?: boolean;
 
@@ -258,7 +261,7 @@ export class HaControlCircularSlider extends LitElement {
         e.srcEvent.preventDefault();
       });
       this._mc.on("panstart", (e) => {
-        if (this.disabled) return;
+        if (this.disabled || this.readonly) return;
         const percentage = this._getPercentageFromEvent(e);
         const raw = this._percentageToValue(percentage);
         this._activeSlider = this._findActiveSlider(raw);
@@ -266,11 +269,11 @@ export class HaControlCircularSlider extends LitElement {
         this.shadowRoot?.getElementById("#slider")?.focus();
       });
       this._mc.on("pancancel", () => {
-        if (this.disabled) return;
+        if (this.disabled || this.readonly) return;
         this._activeSlider = undefined;
       });
       this._mc.on("panmove", (e) => {
-        if (this.disabled) return;
+        if (this.disabled || this.readonly) return;
         const percentage = this._getPercentageFromEvent(e);
         const raw = this._percentageToValue(percentage);
         const bounded = this._boundedValue(raw);
@@ -281,7 +284,7 @@ export class HaControlCircularSlider extends LitElement {
         }
       });
       this._mc.on("panend", (e) => {
-        if (this.disabled) return;
+        if (this.disabled || this.readonly) return;
         const percentage = this._getPercentageFromEvent(e);
         const raw = this._percentageToValue(percentage);
         const bounded = this._boundedValue(raw);
@@ -296,7 +299,7 @@ export class HaControlCircularSlider extends LitElement {
         this._activeSlider = undefined;
       });
       this._mc.on("singletap", (e) => {
-        if (this.disabled) return;
+        if (this.disabled || this.readonly) return;
         const percentage = this._getPercentageFromEvent(e);
         const raw = this._percentageToValue(percentage);
         this._activeSlider = this._findActiveSlider(raw);
@@ -436,11 +439,15 @@ export class HaControlCircularSlider extends LitElement {
         ? current <= target
         : false;
 
-    const activeArc = showActive
+    const showTarget = value != null;
-      ? mode === "end"
+
-        ? this._strokeDashArc(target, current)
+    const activeArc = showTarget
-        : this._strokeDashArc(current, target)
+      ? showActive
-      : this._strokeCircleDashArc(target);
+        ? mode === "end"
+          ? this._strokeDashArc(target, current)
+          : this._strokeDashArc(current, target)
+        : this._strokeCircleDashArc(target)
+      : undefined;
 
     const coloredArc =
       mode === "full"
@@ -449,7 +456,9 @@ export class HaControlCircularSlider extends LitElement {
         ? this._strokeDashArc(target, limit)
         : this._strokeDashArc(limit, target);
 
-    const targetCircle = this._strokeCircleDashArc(target);
+    const targetCircle = showTarget
+      ? this._strokeCircleDashArc(target)
+      : undefined;
 
     const currentCircle =
       this.current != null &&
@@ -473,26 +482,33 @@ export class HaControlCircularSlider extends LitElement {
           stroke-dasharray=${coloredArc[0]}
           stroke-dashoffset=${coloredArc[1]}
         />
-        <path
+        ${
-          .id=${id}
+          activeArc
-          d=${path}
+            ? svg`
-          class="arc arc-active ${classMap({ [id]: true })}"
+              <path
-          stroke-dasharray=${activeArc[0]}
+                .id=${id}
-          stroke-dashoffset=${activeArc[1]}
+                d=${path}
-          role="slider"
+                class="arc arc-active ${classMap({ [id]: true })}"
-          tabindex="0"
+                stroke-dasharray=${activeArc[0]}
-          aria-valuemin=${this.min}
+                stroke-dashoffset=${activeArc[1]}
-          aria-valuemax=${this.max}
+                role="slider"
-          aria-valuenow=${
+                tabindex="0"
-            this._localValue != null
+                aria-valuemin=${this.min}
-              ? this._steppedValue(this._localValue)
+                aria-valuemax=${this.max}
-              : undefined
+                aria-valuenow=${
-          }
+                  this._localValue != null
-          aria-disabled=${this.disabled}
+                    ? this._steppedValue(this._localValue)
-          aria-label=${ifDefined(this.lowLabel ?? this.label)}
+                    : undefined
-          @keydown=${this._handleKeyDown}
+                }
-          @keyup=${this._handleKeyUp}
+                aria-disabled=${this.disabled}
-        />
+                aria-readonly=${this.readonly}
+                aria-label=${ifDefined(this.lowLabel ?? this.label)}
+                @keydown=${this._handleKeyDown}
+                @keyup=${this._handleKeyUp}
+              />
+            `
+            : nothing
+        }
         ${
           currentCircle
             ? svg`
@@ -505,18 +521,24 @@ export class HaControlCircularSlider extends LitElement {
           `
             : nothing
         }
-        <path
+        ${
-          class="target-border ${classMap({ [id]: true })}"
+          targetCircle
-          d=${path}
+            ? svg`
-          stroke-dasharray=${targetCircle[0]}
+              <path
-          stroke-dashoffset=${targetCircle[1]}
+                class="target-border ${classMap({ [id]: true })}"
-        />
+                d=${path}
-        <path
+                stroke-dasharray=${targetCircle[0]}
-          class="target"
+                stroke-dashoffset=${targetCircle[1]}
-          d=${path}
+              />
-          stroke-dasharray=${targetCircle[0]}
+              <path
-          stroke-dashoffset=${targetCircle[1]}
+                class="target"
-        />
+                d=${path}
+                stroke-dasharray=${targetCircle[0]}
+                stroke-dashoffset=${targetCircle[1]}
+              />
+          `
+            : nothing
+        }
       </g>
     `;
   }
@@ -568,7 +590,7 @@ export class HaControlCircularSlider extends LitElement {
                   />
                 `
               : nothing}
-            ${lowValue != null
+            ${lowValue != null || this.mode === "full"
               ? this.renderArc(
                   this.dual ? "low" : "value",
                   lowValue,
@@ -615,7 +637,8 @@ export class HaControlCircularSlider extends LitElement {
       #display {
         pointer-events: none;
       }
-      :host([disabled]) #interaction {
+      :host([disabled]) #interaction,
+      :host([readonly]) #interaction {
         cursor: initial;
       }
 

src/dialogs/more-info/components/climate/ha-more-info-climate-temperature.ts

@@ -159,6 +159,21 @@ export class HaMoreInfoClimateTemperature extends LitElement {
       `;
     }
 
+    if (
+      !supportsFeature(
+        this.stateObj,
+        ClimateEntityFeature.TARGET_TEMPERATURE
+      ) &&
+      !supportsFeature(
+        this.stateObj,
+        ClimateEntityFeature.TARGET_TEMPERATURE_RANGE
+      )
+    ) {
+      return html`
+        <p class="label">${this.hass.formatEntityState(this.stateObj)}</p>
+      `;
+    }
+
     const action = this.stateObj.attributes.hvac_action;
 
     const actionLabel = this.hass.formatEntityAttributeValue(
@@ -383,15 +398,17 @@ export class HaMoreInfoClimateTemperature extends LitElement {
       <div
         class="container"
         style=${styleMap({
-          "--action-color": actionColor,
+          "--state-color": stateColor,
         })}
       >
         <ha-control-circular-slider
+          mode="full"
           .current=${this.stateObj.attributes.current_temperature}
           .min=${this._min}
           .max=${this._max}
           .step=${this._step}
-          disabled
+          readonly
+          .disabled=${!active}
         >
         </ha-control-circular-slider>
         <div class="info">

src/dialogs/more-info/components/water_heater/ha-more-info-water_heater-temperature.ts

@@ -99,6 +99,17 @@ export class HaMoreInfoWaterHeaterTemperature extends LitElement {
       `;
     }
 
+    if (
+      !supportsFeature(
+        this.stateObj,
+        WaterHeaterEntityFeature.TARGET_TEMPERATURE
+      )
+    ) {
+      return html`
+        <p class="label">${this.hass.formatEntityState(this.stateObj)}</p>
+      `;
+    }
+
     return html`
       <p class="label">
         ${this.hass.localize(
@@ -202,13 +213,20 @@ export class HaMoreInfoWaterHeaterTemperature extends LitElement {
     }
 
     return html`
-      <div class="container">
+      <div
+        class="container"
+        style=${styleMap({
+          "--state-color": stateColor,
+        })}
+      >
         <ha-control-circular-slider
+          mode="full"
           .current=${this.stateObj.attributes.current_temperature}
           .min=${this._min}
           .max=${this._max}
           .step=${this._step}
-          disabled
+          readonly
+          .disabled=${!active}
         >
         </ha-control-circular-slider>
         <div class="info">