Make duration input clearable (#22614)

src/components/ha-duration-input.ts

@@ -43,6 +43,7 @@ class HaDurationInput extends LitElement {
         .label=${this.label}
         .helper=${this.helper}
         .required=${this.required}
+        .clearable=${!this.required && this.data !== undefined}
         .autoValidate=${this.required}
         .disabled=${this.disabled}
         errorMessage="Required"
@@ -67,50 +68,79 @@ class HaDurationInput extends LitElement {
   }
 
   private get _days() {
-    return this.data?.days ? Number(this.data.days) : 0;
+    return this.data?.days
+      ? Number(this.data.days)
+      : this.required || this.data
+        ? 0
+        : NaN;
   }
 
   private get _hours() {
-    return this.data?.hours ? Number(this.data.hours) : 0;
+    return this.data?.hours
+      ? Number(this.data.hours)
+      : this.required || this.data
+        ? 0
+        : NaN;
   }
 
   private get _minutes() {
-    return this.data?.minutes ? Number(this.data.minutes) : 0;
+    return this.data?.minutes
+      ? Number(this.data.minutes)
+      : this.required || this.data
+        ? 0
+        : NaN;
   }
 
   private get _seconds() {
-    return this.data?.seconds ? Number(this.data.seconds) : 0;
+    return this.data?.seconds
+      ? Number(this.data.seconds)
+      : this.required || this.data
+        ? 0
+        : NaN;
   }
 
   private get _milliseconds() {
-    return this.data?.milliseconds ? Number(this.data.milliseconds) : 0;
+    return this.data?.milliseconds
+      ? Number(this.data.milliseconds)
+      : this.required || this.data
+        ? 0
+        : NaN;
   }
 
-  private _durationChanged(ev: CustomEvent<{ value: TimeChangedEvent }>) {
+  private _durationChanged(ev: CustomEvent<{ value?: TimeChangedEvent }>) {
     ev.stopPropagation();
-    const value = { ...ev.detail.value };
+    const value = ev.detail.value ? { ...ev.detail.value } : undefined;
 
-    if (!this.enableMillisecond && !value.milliseconds) {
+    if (value) {
-      // @ts-ignore
+      value.hours ||= 0;
-      delete value.milliseconds;
+      value.minutes ||= 0;
-    } else if (value.milliseconds > 999) {
+      value.seconds ||= 0;
-      value.seconds += Math.floor(value.milliseconds / 1000);
-      value.milliseconds %= 1000;
-    }
 
-    if (value.seconds > 59) {
+      if ("days" in value) value.days ||= 0;
-      value.minutes += Math.floor(value.seconds / 60);
+      if ("milliseconds" in value) value.milliseconds ||= 0;
-      value.seconds %= 60;
-    }
 
-    if (value.minutes > 59) {
+      if (!this.enableMillisecond && !value.milliseconds) {
-      value.hours += Math.floor(value.minutes / 60);
+        // @ts-ignore
-      value.minutes %= 60;
+        delete value.milliseconds;
-    }
+      } else if (value.milliseconds > 999) {
+        value.seconds += Math.floor(value.milliseconds / 1000);
+        value.milliseconds %= 1000;
+      }
 
-    if (this.enableDay && value.hours > 24) {
+      if (value.seconds > 59) {
-      value.days = (value.days ?? 0) + Math.floor(value.hours / 24);
+        value.minutes += Math.floor(value.seconds / 60);
-      value.hours %= 24;
+        value.seconds %= 60;
+      }
+
+      if (value.minutes > 59) {
+        value.hours += Math.floor(value.minutes / 60);
+        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", {

src/panels/config/automation/action/types/ha-automation-action-delay.ts

@@ -49,6 +49,7 @@ export class HaDelayAction extends LitElement implements ActionElement {
       .disabled=${this.disabled}
       .data=${this._timeData}
       enableMillisecond
+      required
       @value-changed=${this._valueChanged}
     ></ha-duration-input>`;
   }

src/panels/config/automation/action/types/ha-automation-action-wait_for_trigger.ts

@@ -67,9 +67,6 @@ export class HaWaitForTriggerAction
   private _timeoutChanged(ev: CustomEvent<{ value: TimeChangedEvent }>): void {
     ev.stopPropagation();
     const value = ev.detail.value;
-    if (!value) {
-      return;
-    }
     fireEvent(this, "value-changed", {
       value: { ...this.action, timeout: value },
     });

src/panels/config/automation/trigger/types/ha-automation-trigger-calendar.ts

@@ -46,7 +46,7 @@ export class HaCalendarTrigger extends LitElement implements TriggerElement {
             ],
           ],
         },
-        { name: "offset", selector: { duration: {} } },
+        { name: "offset", required: true, selector: { duration: {} } },
         {
           name: "offset_type",
           type: "select",