Setup

src/components/ha-numeric-arrow-input.ts

@@ -1,5 +1,6 @@
-import { css, html, LitElement } from "lit";
+import { css, html, LitElement, type PropertyValues } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
+import { mdiArrowDown, mdiArrowUp } from "@mdi/js";
 import { fireEvent } from "../common/dom/fire_event";
 import "./ha-icon-button";
 import "./ha-textfield";
@@ -16,42 +17,73 @@ export class HaNumericArrowInput extends LitElement {
 
   @property({ attribute: false }) public step?: number;
 
-  @property({ attribute: false }) public value?: number;
+  @property({ attribute: false }) public value = 0;
+
+  @property({ attribute: false }) public labelUp?: string;
+
+  @property({ attribute: false }) public labelDown?: string;
+
+  @state() private _value = 0;
+
+  protected firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    this._value = this.value ?? 0;
+  }
 
   render() {
-    return html`<div class="container">
+    return html`<div
-      <ha-icon-button icon="mdi:arrow-up"></ha-icon-button>
+      class="numeric-arrow-input-container"
-      <ha-textfield
+      @keydown=${this._keyDown}
-        .disabled=${this.disabled}
+    >
-        .required=${this.required}
+      <ha-icon-button
-        .value=${String(this.value ?? 0)}
+        .label=${this.labelUp ?? ""}
-        @change=${this._valueChanged}
+        .path=${mdiArrowUp}
-        @keydown=${this._keyDown}
+        @click=${this._up}
-      ></ha-textfield>
+      ></ha-icon-button>
-      <ha-icon-button icon="mdi:arrow-down"></ha-icon-button>
+      ${this._value}
+      <ha-icon-button
+        .label=${this.labelDown ?? ""}
+        .path=${mdiArrowDown}
+        @click=${this._down}
+      ></ha-icon-button>
     </div>`;
   }
 
+  protected updated(changedProperties: PropertyValues) {
+    super.updated(changedProperties);
+    if (changedProperties.has("value")) {
+      fireEvent(this, "value-changed", { value: this._value });
+    }
+  }
+
   private _keyDown(ev: KeyboardEvent) {
     if (ev.key === "ArrowUp") {
-      this._valueChanged(ev);
+      this._up();
     }
     if (ev.key === "ArrowDown") {
-      this._valueChanged(ev);
+      this._down();
     }
   }
 
-  private _valueChanged(ev: Event) {
+  private _up() {
-    const value = (ev.target as HTMLInputElement).value;
+    this._value += this.step ?? 1;
-    this.value = Number(value) + (this.step ?? 1);
+  }
-    fireEvent(this, "value-changed", { value: this.value });
+
+  private _down() {
+    this._value -= this.step ?? 1;
   }
 
   static styles = css`
-    .container {
+    .numeric-arrow-input-container {
       display: flex;
-      flex-direction: row;
+      flex-direction: column;
       align-items: center;
+      justify-content: center;
+      gap: 4px;
+      width: 24px;
+      height: 24px;
+      border: 1px solid var(--ha-border-color);
+      border-radius: 4px;
     }
   `;
 }

src/components/ha-time-picker.ts

@@ -1,5 +1,5 @@
 import type { PropertyValues } from "lit";
-import { html, LitElement, nothing } from "lit";
+import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { useAmPm } from "../common/datetime/use_am_pm";
 import { fireEvent } from "../common/dom/fire_event";
@@ -62,7 +62,7 @@ export class HaTimePicker extends LitElement {
   }
 
   protected render() {
-    return html`<div class="container">
+    return html`<div class="time-picker-container">
       <ha-numeric-arrow-input
         .disabled=${this.disabled}
         .required=${this.required}
@@ -182,6 +182,15 @@ export class HaTimePicker extends LitElement {
     fireEvent(this, "change");
     fireEvent(this, "value-changed", { value: time });
   }
+
+  static styles = css`
+    .time-picker-container {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 4px;
+    }
+  `;
 }
 
 declare global {