Add Day to duration selector (#12125)

src/components/ha-base-time-input.ts

@@ -1,12 +1,13 @@
-import { LitElement, html, TemplateResult, css } from "lit";
-import { customElement, property } from "lit/decorators";
-import "./ha-select";
 import "@material/mwc-list/mwc-list-item";
-import "./ha-textfield";
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import { stopPropagation } from "../common/dom/stop_propagation";
+import "./ha-select";
+import "./ha-textfield";
 
 export interface TimeChangedEvent {
+  days?: number;
   hours: number;
   minutes: number;
   seconds: number;
@@ -46,6 +47,11 @@ export class HaBaseTimeInput extends LitElement {
    */
   @property({ type: Boolean }) disabled = false;
 
+  /**
+   * day
+   */
+  @property({ type: Number }) days = 0;
+
   /**
    * hour
    */
@@ -66,6 +72,11 @@ export class HaBaseTimeInput extends LitElement {
    */
   @property({ type: Number }) milliseconds = 0;
 
+  /**
+   * Label for the day input
+   */
+  @property() dayLabel = "";
+
   /**
    * Label for the hour input
    */
@@ -96,6 +107,11 @@ export class HaBaseTimeInput extends LitElement {
    */
   @property({ type: Boolean }) enableMillisecond = false;
 
+  /**
+   * show the day field
+   */
+  @property({ type: Boolean }) enableDay = false;
+
   /**
    * limit hours input
    */
@@ -115,6 +131,29 @@ export class HaBaseTimeInput extends LitElement {
     return html`
       ${this.label ? html`<label>${this.label}</label>` : ""}
       <div class="time-input-wrap">
+        ${this.enableDay
+          ? html`
+              <ha-textfield
+                id="day"
+                type="number"
+                inputmode="numeric"
+                .value=${this.days}
+                .label=${this.dayLabel}
+                name="days"
+                @input=${this._valueChanged}
+                @focus=${this._onFocus}
+                no-spinner
+                .required=${this.required}
+                .autoValidate=${this.autoValidate}
+                min="0"
+                .disabled=${this.disabled}
+                suffix=":"
+                class="hasSuffix"
+              >
+              </ha-textfield>
+            `
+          : ""}
+
         <ha-textfield
           id="hour"
           type="number"

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,
     });

src/components/ha-selector/ha-selector-duration.ts

@@ -28,6 +28,7 @@ export class HaTimeDuration extends LitElement {
         .data=${this.value}
         .disabled=${this.disabled}
         .required=${this.required}
+        .enableDay=${this.selector.duration.enable_day}
       ></ha-duration-input>
     `;
   }

src/data/selector.ts

@@ -96,8 +96,9 @@ export interface DeviceSelector {
 }
 
 export interface DurationSelector {
-  // eslint-disable-next-line @typescript-eslint/ban-types
-  duration: {};
+  duration: {
+    enable_day?: boolean;
+  };
 }
 
 export interface EntitySelector {