Format input number (#8811)

src/common/entity/compute_state_display.ts

@@ -68,8 +68,12 @@ export const computeStateDisplay = (
     }
   }
 
-  // `counter` and `number` domains do not have a unit of measurement but should still use `formatNumber`
+  // `counter` `number` and `input_number` domains do not have a unit of measurement but should still use `formatNumber`
-  if (domain === "counter" || domain === "number") {
+  if (
+    domain === "counter" ||
+    domain === "number" ||
+    domain === "input_number"
+  ) {
     return formatNumber(compareState, locale);
   }
 

src/panels/lovelace/entity-rows/hui-input-number-entity-row.ts

@@ -10,7 +10,7 @@ import {
   PropertyValues,
   TemplateResult,
 } from "lit-element";
-import { formatNumber } from "../../../common/string/format_number";
+import { computeStateDisplay } from "../../../common/entity/compute_state_display";
 import { computeRTLDirection } from "../../../common/util/compute_rtl";
 import "../../../components/ha-slider";
 import { UNAVAILABLE_STATES } from "../../../data/entity";
@@ -89,8 +89,12 @@ class HuiInputNumberEntityRow extends LitElement implements LovelaceRow {
                   id="input"
                 ></ha-slider>
                 <span class="state">
-                  ${formatNumber(Number(stateObj.state), this.hass.locale)}
+                  ${computeStateDisplay(
-                  ${stateObj.attributes.unit_of_measurement}
+                    this.hass.localize,
+                    stateObj,
+                    this.hass.locale,
+                    stateObj.state
+                  )}
                 </span>
               </div>
             `

src/panels/lovelace/entity-rows/hui-number-entity-row.ts

@@ -19,6 +19,7 @@ import { hasConfigOrEntityChanged } from "../common/has-changed";
 import "../components/hui-generic-entity-row";
 import { EntityConfig, LovelaceRow } from "./types";
 import { createEntityNotFoundWarning } from "../components/hui-warning";
+import { computeStateDisplay } from "../../../common/entity/compute_state_display";
 
 @customElement("hui-number-entity-row")
 class HuiNumberEntityRow extends LitElement implements LovelaceRow {
@@ -88,8 +89,12 @@ class HuiNumberEntityRow extends LitElement implements LovelaceRow {
                   id="input"
                 ></ha-slider>
                 <span class="state">
-                  ${Number(stateObj.state)}
+                  ${computeStateDisplay(
-                  ${stateObj.attributes.unit_of_measurement}
+                    this.hass.localize,
+                    stateObj,
+                    this.hass.locale,
+                    stateObj.state
+                  )}
                 </span>
               </div>
             `

src/state-summary/state-card-input_number.js

@@ -5,6 +5,7 @@ import { mixinBehaviors } from "@polymer/polymer/lib/legacy/class";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
+import { computeStateDisplay } from "../common/entity/compute_state_display";
 import "../components/entity/state-info";
 import "../components/ha-slider";
 
@@ -75,7 +76,7 @@ class StateCardInputNumber extends mixinBehaviors(
           class="state sliderstate"
           hidden="[[hiddenslider]]"
         >
-          [[value]] [[stateObj.attributes.unit_of_measurement]]
+          [[formattedState]]
         </div>
       </div>
     `;
@@ -138,6 +139,7 @@ class StateCardInputNumber extends mixinBehaviors(
       },
       step: Number,
       value: Number,
+      formattedState: String,
       mode: String,
     };
   }
@@ -159,6 +161,12 @@ class StateCardInputNumber extends mixinBehaviors(
       max: Number(newVal.attributes.max),
       step: Number(newVal.attributes.step),
       value: Number(newVal.state),
+      formattedState: computeStateDisplay(
+        this.hass.localize,
+        newVal,
+        this.hass.locale,
+        newVal.state
+      ),
       mode: String(newVal.attributes.mode),
       maxlength: String(newVal.attributes.max).length,
       hiddenbox: newVal.attributes.mode !== "box",