Add Day to duration selector (#12125)

src/components/ha-duration-input.ts

@@ -5,6 +5,7 @@ import "./ha-base-time-input";
 import type { TimeChangedEvent } from "./ha-base-time-input";
 
 export interface HaDurationData {
+  days?: number;
   hours?: number;
   minutes?: number;
   seconds?: number;
@@ -23,6 +24,8 @@ class HaDurationInput extends LitElement {
 
   @property({ type: Boolean }) public enableMillisecond?: boolean;
 
+  @property({ type: Boolean }) public enableDay?: boolean;
+
   @property({ type: Boolean }) public disabled = false;
 
   @query("paper-time-input", true) private _input?: HTMLElement;
@@ -44,13 +47,16 @@ class HaDurationInput extends LitElement {
         errorMessage="Required"
         enableSecond
         .enableMillisecond=${this.enableMillisecond}
+        .enableDay=${this.enableDay}
         format="24"
+        .days=${this._days}
         .hours=${this._hours}
         .minutes=${this._minutes}
         .seconds=${this._seconds}
         .milliseconds=${this._milliseconds}
         @value-changed=${this._durationChanged}
         noHoursLimit
+        dayLabel="dd"
         hourLabel="hh"
         minLabel="mm"
         secLabel="ss"
@@ -59,6 +65,10 @@ class HaDurationInput extends LitElement {
     `;
   }
 
+  private get _days() {
+    return this.data?.days ? Number(this.data.days) : 0;
+  }
+
   private get _hours() {
     return this.data?.hours ? Number(this.data.hours) : 0;
   }
@@ -97,6 +107,11 @@ class HaDurationInput extends LitElement {
       value.minutes %= 60;
     }
 
+    if (this.enableDay && value.hours > 24) {
+      value.days = (value.days ?? 0) + Math.floor(value.hours / 24);
+      value.hours %= 24;
+    }
+
     fireEvent(this, "value-changed", {
       value,
     });