Convert time inputs to Lit + mwc (#11609)

src/components/ha-duration-input.ts

@@ -1,7 +1,8 @@
 import { html, LitElement, TemplateResult } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
-import "./paper-time-input";
+import "./ha-base-time-input";
+import type { TimeChangedEvent } from "./ha-base-time-input";
 
 export interface HaDurationData {
   hours?: number;
@@ -32,110 +33,69 @@ class HaDurationInput extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <paper-time-input
+      <ha-base-time-input
         .label=${this.label}
         .required=${this.required}
         .autoValidate=${this.required}
         .disabled=${this.disabled}
-        error-message="Required"
-        enable-second
+        errorMessage="Required"
+        enableSecond
         .enableMillisecond=${this.enableMillisecond}
         format="24"
-        .hour=${this._parseDuration(this._hours)}
-        .min=${this._parseDuration(this._minutes)}
-        .sec=${this._parseDuration(this._seconds)}
-        .millisec=${this._parseDurationMillisec(this._milliseconds)}
-        @hour-changed=${this._hourChanged}
-        @min-changed=${this._minChanged}
-        @sec-changed=${this._secChanged}
-        @millisec-changed=${this._millisecChanged}
-        float-input-labels
-        no-hours-limit
-        always-float-input-labels
-        hour-label="hh"
-        min-label="mm"
-        sec-label="ss"
-        millisec-label="ms"
-      ></paper-time-input>
+        .hours=${this._hours}
+        .minutes=${this._minutes}
+        .seconds=${this._seconds}
+        .milliseconds=${this._milliseconds}
+        @value-changed=${this._durationChanged}
+        noHoursLimit
+        hourLabel="hh"
+        minLabel="mm"
+        secLabel="ss"
+        millisecLabel="ms"
+      ></ha-base-time-input>
     `;
   }
 
   private get _hours() {
-    return this.data && this.data.hours ? Number(this.data.hours) : 0;
+    return this.data?.hours ? Number(this.data.hours) : 0;
   }
 
   private get _minutes() {
-    return this.data && this.data.minutes ? Number(this.data.minutes) : 0;
+    return this.data?.minutes ? Number(this.data.minutes) : 0;
   }
 
   private get _seconds() {
-    return this.data && this.data.seconds ? Number(this.data.seconds) : 0;
+    return this.data?.seconds ? Number(this.data.seconds) : 0;
   }
 
   private get _milliseconds() {
-    return this.data && this.data.milliseconds
-      ? Number(this.data.milliseconds)
-      : 0;
+    return this.data?.milliseconds ? Number(this.data.milliseconds) : 0;
   }
 
-  private _parseDuration(value) {
-    return value.toString().padStart(2, "0");
-  }
+  private _durationChanged(ev: CustomEvent<{ value: TimeChangedEvent }>) {
+    ev.stopPropagation();
+    const value = { ...ev.detail.value };
 
-  private _parseDurationMillisec(value) {
-    return value.toString().padStart(3, "0");
-  }
-
-  private _hourChanged(ev) {
-    this._durationChanged(ev, "hours");
-  }
-
-  private _minChanged(ev) {
-    this._durationChanged(ev, "minutes");
-  }
-
-  private _secChanged(ev) {
-    this._durationChanged(ev, "seconds");
-  }
-
-  private _millisecChanged(ev) {
-    this._durationChanged(ev, "milliseconds");
-  }
-
-  private _durationChanged(ev, unit) {
-    let value = Number(ev.detail.value);
-
-    if (value === this[`_${unit}`]) {
-      return;
+    if (!this.enableMillisecond && !value.milliseconds) {
+      // @ts-ignore
+      delete value.milliseconds;
+    } else if (value.milliseconds > 999) {
+      value.seconds += Math.floor(value.milliseconds / 1000);
+      value.milliseconds %= 1000;
     }
 
-    let hours = this._hours;
-    let minutes = this._minutes;
-
-    if (unit === "seconds" && value > 59) {
-      minutes += Math.floor(value / 60);
-      value %= 60;
+    if (value.seconds > 59) {
+      value.minutes += Math.floor(value.seconds / 60);
+      value.seconds %= 60;
     }
 
-    if (unit === "minutes" && value > 59) {
-      hours += Math.floor(value / 60);
-      value %= 60;
+    if (value.minutes > 59) {
+      value.hours += Math.floor(value.minutes / 60);
+      value.minutes %= 60;
     }
 
-    const newValue: HaDurationData = {
-      hours,
-      minutes,
-      seconds: this._seconds,
-    };
-
-    if (this.enableMillisecond || this._milliseconds) {
-      newValue.milliseconds = this._milliseconds;
-    }
-
-    newValue[unit] = value;
-
     fireEvent(this, "value-changed", {
-      value: newValue,
+      value,
     });
   }
 }