Fix labels in duration input (#25510)

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

@@ -81,27 +81,27 @@ export class HaBaseTimeInput extends LitElement {
   /**
    * Label for the day input
    */
-  @property({ attribute: false }) dayLabel = "";
+  @property({ type: String, attribute: "day-label" }) dayLabel = "";
 
   /**
    * Label for the hour input
    */
-  @property({ attribute: false }) hourLabel = "";
+  @property({ type: String, attribute: "hour-label" }) hourLabel = "";
 
   /**
    * Label for the min input
    */
-  @property({ attribute: false }) minLabel = "";
+  @property({ type: String, attribute: "min-label" }) minLabel = "";
 
   /**
    * Label for the sec input
    */
-  @property({ attribute: false }) secLabel = "";
+  @property({ type: String, attribute: "sec-label" }) secLabel = "";
 
   /**
    * Label for the milli sec input
    */
-  @property({ attribute: false }) millisecLabel = "";
+  @property({ type: String, attribute: "ms-label" }) millisecLabel = "";
 
   /**
    * show the sec field
@@ -342,7 +342,7 @@ export class HaBaseTimeInput extends LitElement {
       padding-right: 3px;
     }
     ha-textfield {
-      width: 55px;
+      width: 60px;
       flex-grow: 1;
       text-align: center;
       --mdc-shape-small: 0;

src/components/ha-duration-input.ts

@@ -52,11 +52,11 @@ class HaDurationInput extends LitElement {
         .milliseconds=${this._milliseconds}
         @value-changed=${this._durationChanged}
         no-hours-limit
-        dayLabel="dd"
-        hourLabel="hh"
-        minLabel="mm"
-        secLabel="ss"
-        millisecLabel="ms"
+        day-label="dd"
+        hour-label="hh"
+        min-label="mm"
+        sec-label="ss"
+        ms-label="ms"
       ></ha-base-time-input>
     `;
   }

src/components/ha-time-input.ts

@@ -28,22 +28,30 @@ export class HaTimeInput extends LitElement {
   protected render() {
     const useAMPM = useAmPm(this.locale);
 
-    const parts = this.value?.split(":") || [];
-    let hours = parts[0];
-    const numberHours = Number(parts[0]);
-    if (numberHours && useAMPM && numberHours > 12 && numberHours < 24) {
-      hours = String(numberHours - 12).padStart(2, "0");
-    }
-    if (useAMPM && numberHours === 0) {
-      hours = "12";
+    let hours = NaN;
+    let minutes = NaN;
+    let seconds = NaN;
+    let numberHours = 0;
+    if (this.value) {
+      const parts = this.value?.split(":") || [];
+      minutes = parts[1] ? Number(parts[1]) : 0;
+      seconds = parts[2] ? Number(parts[2]) : 0;
+      hours = parts[0] ? Number(parts[0]) : 0;
+      numberHours = hours;
+      if (numberHours && useAMPM && numberHours > 12 && numberHours < 24) {
+        hours = numberHours - 12;
+      }
+      if (useAMPM && numberHours === 0) {
+        hours = 12;
+      }
     }
 
     return html`
       <ha-base-time-input
         .label=${this.label}
-        .hours=${Number(hours)}
-        .minutes=${Number(parts[1])}
-        .seconds=${Number(parts[2])}
+        .hours=${hours}
+        .minutes=${minutes}
+        .seconds=${seconds}
         .format=${useAMPM ? 12 : 24}
         .amPm=${useAMPM && numberHours >= 12 ? "PM" : "AM"}
         .disabled=${this.disabled}
@@ -52,6 +60,11 @@ export class HaTimeInput extends LitElement {
         .required=${this.required}
         .clearable=${this.clearable && this.value !== undefined}
         .helper=${this.helper}
+        day-label="dd"
+        hour-label="hh"
+        min-label="mm"
+        sec-label="ss"
+        ms-label="ms"
       ></ha-base-time-input>
     `;
   }