Work with clamps

timmo001 · timmo001 · commit 807fbf8bb6db · 2025-09-04T11:04:24.000+01:00
diff --git a/src/components/ha-numeric-arrow-input.ts b/src/components/ha-numeric-arrow-input.ts
@@ -64,22 +64,24 @@ export class HaNumericArrowInput extends LitElement {
 
   private _up() {
     const newValue = this.value + (this.step ?? 1);
-    fireEvent(this, "value-changed", { value: this._clampValue(newValue) });
+    fireEvent(this, "value-changed", this._clampValue(newValue));
   }
 
   private _down() {
     const newValue = this.value - (this.step ?? 1);
-    fireEvent(this, "value-changed", { value: this._clampValue(newValue) });
+    fireEvent(this, "value-changed", this._clampValue(newValue));
   }
 
-  private _clampValue(value: number) {
-    if (this.max && value >= this.max) {
-      return this.max;
+  private _clampValue(value: number): { clamped: boolean; value: number } {
+    if (this.max !== undefined && value >= this.max) {
+      return { clamped: true, value: this.max };
     }
-    if (this.min && value <= this.min) {
-      return this.min;
+
+    if (this.min !== undefined && value < this.min) {
+      return { clamped: true, value: this.min };
     }
-    return value;
+
+    return { clamped: false, value };
   }
 
   static styles = css`
diff --git a/src/components/ha-time-picker.ts b/src/components/ha-time-picker.ts
@@ -152,9 +152,8 @@ export class HaTimePicker extends LitElement {
     }
   }
 
-  private _hoursChanged(ev: CustomEvent<{ value: number }>) {
+  private _hoursChanged(ev: CustomEvent<{ clamped: boolean; value: number }>) {
     const value = ev.detail.value;
-    console.log({ originalValue: this.value }, "hoursChanged", value);
     if (this._useAmPm) {
       if (value > 12) {
         this._hours = value - 12;
@@ -168,36 +167,45 @@ export class HaTimePicker extends LitElement {
     }
   }
 
-  private _minutesChanged(ev: CustomEvent<{ value: number }>) {
-    console.log(
-      { originalValue: this.value },
-      "minutesChanged",
-      ev.detail.value
-    );
+  private _minutesChanged(
+    ev: CustomEvent<{ clamped: boolean; value: number }>
+  ) {
     this._minutes = ev.detail.value;
+    if (ev.detail.clamped) {
+      if (ev.detail.value <= 0) {
+        this._hours -= 1;
+        this._minutes = 59;
+      }
+
+      if (ev.detail.value >= 59) {
+        this._hours += 1;
+        this._minutes = 0;
+      }
+    }
   }
 
-  private _secondsChanged(ev: CustomEvent<{ value: number }>) {
-    console.log(
-      { originalValue: this.value },
-      "secondsChanged",
-      ev.detail.value
-    );
+  private _secondsChanged(
+    ev: CustomEvent<{ clamped: boolean; value: number }>
+  ) {
     this._seconds = ev.detail.value;
+    if (ev.detail.clamped) {
+      if (ev.detail.value <= 0) {
+        this._minutes -= 1;
+        this._seconds = 59;
+      }
+
+      if (ev.detail.value >= 59) {
+        this._minutes += 1;
+        this._seconds = 0;
+      }
+    }
   }
 
   private _toggleAmPm() {
     this._hours = this._hours > 12 ? this._hours - 12 : this._hours + 12;
   }
 
   private _timeUpdated() {
-    console.log(
-      { originalValue: this.value },
-      "timeUpdated",
-      this._hours,
-      this._minutes,
-      this._seconds
-    );
     const timeParts = [
       this._hours.toString().padStart(2, "0"),
       this._minutes.toString().padStart(2, "0"),

Original file line number	Diff line number	Diff line change
`@@ -64,22 +64,24 @@ export class HaNumericArrowInput extends LitElement {`
`64`	`64`
`65`	`65`	`private _up() {`
`66`	`66`	`const newValue = this.value + (this.step ?? 1);`
`67`		`- fireEvent(this, "value-changed", { value: this._clampValue(newValue) });`
	`67`	`+ fireEvent(this, "value-changed", this._clampValue(newValue));`
`68`	`68`	`}`
`69`	`69`
`70`	`70`	`private _down() {`
`71`	`71`	`const newValue = this.value - (this.step ?? 1);`
`72`		`- fireEvent(this, "value-changed", { value: this._clampValue(newValue) });`
	`72`	`+ fireEvent(this, "value-changed", this._clampValue(newValue));`
`73`	`73`	`}`
`74`	`74`
`75`		`- private _clampValue(value: number) {`
`76`		`- if (this.max && value >= this.max) {`
`77`		`- return this.max;`
	`75`	`+ private _clampValue(value: number): { clamped: boolean; value: number } {`
	`76`	`+ if (this.max !== undefined && value >= this.max) {`
	`77`	`+ return { clamped: true, value: this.max };`
`78`	`78`	`}`
`79`		`- if (this.min && value <= this.min) {`
`80`		`- return this.min;`
	`79`	`+`
	`80`	`+ if (this.min !== undefined && value < this.min) {`
	`81`	`+ return { clamped: true, value: this.min };`
`81`	`82`	`}`
`82`		`- return value;`
	`83`	`+`
	`84`	`+ return { clamped: false, value };`
`83`	`85`	`}`
`84`	`86`
`85`	`87`	static styles = css`