Numeric threshold selector fixes (#30350)

* Update numeric threshold

* Update ha-selector-numeric-threshold.ts

src/components/ha-form/compute-initial-ha-form-data.ts

@@ -142,6 +142,19 @@ export const computeInitialHaFormData = (
             ])[firstChoice],
           };
         }
+      } else if ("numeric_threshold" in selector) {
+        const mode = selector.numeric_threshold?.mode ?? "crossed";
+        const type = mode === "changed" ? "any" : "above";
+        data[field.name] =
+          type === "any"
+            ? { type }
+            : {
+                type,
+                value: {
+                  number: selector.numeric_threshold?.number?.min ?? 0,
+                  active_choice: "number",
+                },
+              };
       } else {
         throw new Error(
           `Selector ${Object.keys(selector)[0]} not supported in initial form data`

src/components/ha-selector/ha-selector-numeric-threshold.ts

@@ -2,6 +2,7 @@ import memoizeOne from "memoize-one";
 import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { mdiChartBellCurveCumulative } from "@mdi/js";
 import { fireEvent } from "../../common/dom/fire_event";
 import type {
   NumericThresholdSelector,
@@ -76,6 +77,18 @@ export class HaNumericThresholdSelector extends LitElement {
     }
   }
 
+  protected updated(changedProperties: PropertyValues): void {
+    super.updated(changedProperties);
+    if (
+      (changedProperties.has("value") || changedProperties.has("selector")) &&
+      !this.value
+    ) {
+      const mode = this._getMode();
+      const type = DEFAULT_TYPE[mode];
+      fireEvent(this, "value-changed", { value: { type } });
+    }
+  }
+
   private _getUnitOptions() {
     return this.selector.numeric_threshold?.unit_of_measurement;
   }
@@ -220,6 +233,7 @@ export class HaNumericThresholdSelector extends LitElement {
       return [
         {
           value: "any",
+          iconPath: mdiChartBellCurveCumulative,
           label: localize(
             "ui.components.selectors.numeric_threshold.changed.any"
           ),
@@ -481,7 +495,7 @@ export class HaNumericThresholdSelector extends LitElement {
     .value-inputs {
       display: flex;
       gap: var(--ha-space-2);
-      align-items: flex-end;
+      align-items: flex-start;
     }
 
     .value-selector {