Rename number feature to number value feature (#18836)

src/panels/lovelace/card-features/hui-numeric-input-card-feature.ts

@@ -5,41 +5,46 @@ import { computeDomain } from "../../../common/entity/compute_domain";
 import { isUnavailableState } from "../../../data/entity";
 import { HomeAssistant } from "../../../types";
 import { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
-import { NumberCardFeatureConfig } from "./types";
+import { NumericInputCardFeatureConfig } from "./types";
 import "../../../components/ha-control-button";
 import "../../../components/ha-control-button-group";
 import "../../../components/ha-control-number-buttons";
 import "../../../components/ha-control-slider";
 import "../../../components/ha-icon";
 
-export const supportsNumberCardFeature = (stateObj: HassEntity) => {
+export const supportsNumericInputCardFeature = (stateObj: HassEntity) => {
   const domain = computeDomain(stateObj.entity_id);
   return domain === "input_number" || domain === "number";
 };
 
-@customElement("hui-number-card-feature")
+@customElement("hui-numeric-input-card-feature")
-class HuiNumberCardFeature extends LitElement implements LovelaceCardFeature {
+class HuiNumericInputCardFeature
+  extends LitElement
+  implements LovelaceCardFeature
+{
   @property({ attribute: false }) public hass?: HomeAssistant;
 
   @property({ attribute: false }) public stateObj?: HassEntity;
 
-  @state() private _config?: NumberCardFeatureConfig;
+  @state() private _config?: NumericInputCardFeatureConfig;
 
   @state() _currentState?: string;
 
-  static getStubConfig(): NumberCardFeatureConfig {
+  static getStubConfig(): NumericInputCardFeatureConfig {
     return {
-      type: "number",
+      type: "numeric-input",
       style: "buttons",
     };
   }
 
   public static async getConfigElement(): Promise<LovelaceCardFeatureEditor> {
-    await import("../editor/config-elements/hui-number-card-feature-editor");
+    await import(
-    return document.createElement("hui-number-card-feature-editor");
+      "../editor/config-elements/hui-numeric-input-card-feature-editor"
+    );
+    return document.createElement("hui-numeric-input-card-feature-editor");
   }
 
-  public setConfig(config: NumberCardFeatureConfig): void {
+  public setConfig(config: NumericInputCardFeatureConfig): void {
     if (!config) {
       throw new Error("Invalid configuration");
     }
@@ -69,7 +74,7 @@ class HuiNumberCardFeature extends LitElement implements LovelaceCardFeature {
       !this._config ||
       !this.hass ||
       !this.stateObj ||
-      !supportsNumberCardFeature(this.stateObj)
+      !supportsNumericInputCardFeature(this.stateObj)
     ) {
       return nothing;
     }
@@ -110,6 +115,10 @@ class HuiNumberCardFeature extends LitElement implements LovelaceCardFeature {
       }
       ha-control-slider {
         --control-slider-color: var(--feature-color);
+        --control-slider-background: var(--feature-color);
+        --control-slider-background-opacity: 0.2;
+        --control-slider-thickness: 40px;
+        --control-slider-border-radius: 10px;
       }
       .container {
         padding: 0 12px 12px 12px;
@@ -121,6 +130,6 @@ class HuiNumberCardFeature extends LitElement implements LovelaceCardFeature {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "hui-number-card-feature": HuiNumberCardFeature;
+    "hui-numeric-input-card-feature": HuiNumericInputCardFeature;
   }
 }

src/panels/lovelace/card-features/types.ts

@@ -50,8 +50,8 @@ export interface SelectOptionsCardFeatureConfig {
   type: "select-options";
 }
 
-export interface NumberCardFeatureConfig {
+export interface NumericInputCardFeatureConfig {
-  type: "number";
+  type: "numeric-input";
   style?: "buttons" | "slider";
 }
 
@@ -109,7 +109,7 @@ export type LovelaceCardFeatureConfig =
   | TargetTemperatureCardFeatureConfig
   | WaterHeaterOperationModesCardFeatureConfig
   | SelectOptionsCardFeatureConfig
-  | NumberCardFeatureConfig;
+  | NumericInputCardFeatureConfig;
 
 export type LovelaceCardFeatureContext = {
   entity_id?: string;

src/panels/lovelace/create-element/create-card-feature-element.ts

@@ -3,14 +3,14 @@ import "../card-features/hui-climate-hvac-modes-card-feature";
 import "../card-features/hui-climate-preset-modes-card-feature";
 import "../card-features/hui-cover-open-close-card-feature";
 import "../card-features/hui-cover-position-card-feature";
-import "../card-features/hui-cover-tilt-position-card-feature";
 import "../card-features/hui-cover-tilt-card-feature";
+import "../card-features/hui-cover-tilt-position-card-feature";
 import "../card-features/hui-fan-speed-card-feature";
 import "../card-features/hui-humidifier-modes-card-feature";
 import "../card-features/hui-lawn-mower-commands-card-feature";
 import "../card-features/hui-light-brightness-card-feature";
 import "../card-features/hui-light-color-temp-card-feature";
-import "../card-features/hui-number-card-feature";
+import "../card-features/hui-numeric-input-card-feature";
 import "../card-features/hui-select-options-card-feature";
 import "../card-features/hui-target-temperature-card-feature";
 import "../card-features/hui-vacuum-commands-card-feature";
@@ -34,11 +34,11 @@ const TYPES: Set<LovelaceCardFeatureConfig["type"]> = new Set([
   "lawn-mower-commands",
   "light-brightness",
   "light-color-temp",
+  "numeric-input",
   "select-options",
   "target-temperature",
   "vacuum-commands",
   "water-heater-operation-modes",
-  "number",
 ]);
 
 export const createCardFeatureElement = (config: LovelaceCardFeatureConfig) =>

src/panels/lovelace/editor/config-elements/hui-card-features-editor.ts

@@ -33,7 +33,7 @@ import { supportsHumidifierModesCardFeature } from "../../card-features/hui-humi
 import { supportsLawnMowerCommandCardFeature } from "../../card-features/hui-lawn-mower-commands-card-feature";
 import { supportsLightBrightnessCardFeature } from "../../card-features/hui-light-brightness-card-feature";
 import { supportsLightColorTempCardFeature } from "../../card-features/hui-light-color-temp-card-feature";
-import { supportsNumberCardFeature } from "../../card-features/hui-number-card-feature";
+import { supportsNumericInputCardFeature } from "../../card-features/hui-numeric-input-card-feature";
 import { supportsSelectOptionsCardFeature } from "../../card-features/hui-select-options-card-feature";
 import { supportsTargetTemperatureCardFeature } from "../../card-features/hui-target-temperature-card-feature";
 import { supportsVacuumCommandsCardFeature } from "../../card-features/hui-vacuum-commands-card-feature";
@@ -61,7 +61,7 @@ const UI_FEATURE_TYPES = [
   "target-temperature",
   "vacuum-commands",
   "water-heater-operation-modes",
-  "number",
+  "numeric-input",
 ] as const satisfies readonly FeatureType[];
 
 type UiFeatureTypes = (typeof UI_FEATURE_TYPES)[number];
@@ -73,7 +73,7 @@ const EDITABLES_FEATURE_TYPES = new Set<UiFeatureTypes>([
   "water-heater-operation-modes",
   "lawn-mower-commands",
   "climate-preset-modes",
-  "number",
+  "numeric-input",
 ]);
 
 const SUPPORTS_FEATURE_TYPES: Record<
@@ -92,7 +92,7 @@ const SUPPORTS_FEATURE_TYPES: Record<
   "lawn-mower-commands": supportsLawnMowerCommandCardFeature,
   "light-brightness": supportsLightBrightnessCardFeature,
   "light-color-temp": supportsLightColorTempCardFeature,
-  number: supportsNumberCardFeature,
+  "numeric-input": supportsNumericInputCardFeature,
   "target-temperature": supportsTargetTemperatureCardFeature,
   "vacuum-commands": supportsVacuumCommandsCardFeature,
   "water-heater-operation-modes": supportsWaterHeaterOperationModesCardFeature,

src/panels/lovelace/editor/config-elements/hui-numeric-input-card-feature-editor.ts

@@ -6,14 +6,14 @@ import "../../../../components/ha-form/ha-form";
 import type { SchemaUnion } from "../../../../components/ha-form/types";
 import type { HomeAssistant } from "../../../../types";
 import {
-  NumberCardFeatureConfig,
+  NumericInputCardFeatureConfig,
   LovelaceCardFeatureContext,
 } from "../../card-features/types";
 import type { LovelaceCardFeatureEditor } from "../../types";
 import { LocalizeFunc } from "../../../../common/translations/localize";
 
-@customElement("hui-number-card-feature-editor")
+@customElement("hui-numeric-input-card-feature-editor")
-export class HuiNumberCardFeatureEditor
+export class HuiNumericInputCardFeatureEditor
   extends LitElement
   implements LovelaceCardFeatureEditor
 {
@@ -21,9 +21,9 @@ export class HuiNumberCardFeatureEditor
 
   @property({ attribute: false }) public context?: LovelaceCardFeatureContext;
 
-  @state() private _config?: NumberCardFeatureConfig;
+  @state() private _config?: NumericInputCardFeatureConfig;
 
-  public setConfig(config: NumberCardFeatureConfig): void {
+  public setConfig(config: NumericInputCardFeatureConfig): void {
     this._config = config;
   }
 
@@ -39,7 +39,7 @@ export class HuiNumberCardFeatureEditor
               options: ["slider", "buttons"].map((mode) => ({
                 value: mode,
                 label: localize(
-                  `ui.panel.lovelace.editor.features.types.number.style_list.${mode}`
+                  `ui.panel.lovelace.editor.features.types.numeric-input.style_list.${mode}`
                 ),
               })),
             },
@@ -53,7 +53,7 @@ export class HuiNumberCardFeatureEditor
       return nothing;
     }
 
-    const data: NumberCardFeatureConfig = {
+    const data: NumericInputCardFeatureConfig = {
       style: "buttons",
       ...this._config,
     };
@@ -79,12 +79,12 @@ export class HuiNumberCardFeatureEditor
     schema: SchemaUnion<ReturnType<typeof this._schema>>
   ) =>
     this.hass!.localize(
-      `ui.panel.lovelace.editor.features.types.number.${schema.name}`
+      `ui.panel.lovelace.editor.features.types.numeric-input.${schema.name}`
     );
 }
 
 declare global {
   interface HTMLElementTagNameMap {
-    "hui-number-card-feature-editor": HuiNumberCardFeatureEditor;
+    "hui-numeric-input-card-feature-editor": HuiNumericInputCardFeatureEditor;
   }
 }

src/translations/en.json

@@ -5292,8 +5292,8 @@
               "select-options": {
                 "label": "Select options"
               },
-              "number": {
+              "numeric-input": {
-                "label": "Number",
+                "label": "Numeric input",
                 "style": "Style",
                 "style_list": {
                   "buttons": "Buttons",