Add positive_time_period_dict to ha-form

src/components/ha-form/ha-form-float.ts

@@ -32,7 +32,7 @@ export class HaFormFloat extends LitElement implements HaFormElement {
     return html`
       <paper-input
         .label=${this.label}
-        .value=${this.data}
+        .value=${this._value}
         .required=${this.schema.required}
         .autoValidate=${this.schema.required}
         @value-changed=${this._valueChanged}
@@ -42,9 +42,13 @@ export class HaFormFloat extends LitElement implements HaFormElement {
     `;
   }
 
+  private get _value() {
+    return this.data || 0;
+  }
+
   private _valueChanged(ev: Event) {
     const value = Number((ev.target as PaperInputElement).value);
-    if (this.data === value) {
+    if (this._value === value) {
       return;
     }
     fireEvent(

src/components/ha-form/ha-form-integer.ts

@@ -41,7 +41,7 @@ export class HaFormInteger extends LitElement implements HaFormElement {
             ${this.label}
             <ha-paper-slider
               pin=""
-              .value=${this.data}
+              .value=${this._value}
               .min=${this.schema.valueMin}
               .max=${this.schema.valueMax}
               @value-changed=${this._valueChanged}
@@ -60,11 +60,15 @@ export class HaFormInteger extends LitElement implements HaFormElement {
         `;
   }
 
+  private get _value() {
+    return this.data || 0;
+  }
+
   private _valueChanged(ev: Event) {
     const value = Number(
       (ev.target as PaperInputElement | PaperSliderElement).value
     );
-    if (this.data === value) {
+    if (this._value === value) {
       return;
     }
     fireEvent(

src/components/ha-form/ha-form-positive_time_period_dict.ts

@@ -0,0 +1,119 @@
+import {
+  customElement,
+  LitElement,
+  html,
+  property,
+  TemplateResult,
+  query,
+} from "lit-element";
+import { HaFormElement, HaFormTimeData, HaFormTimeSchema } from "./ha-form";
+import { fireEvent } from "../../common/dom/fire_event";
+
+@customElement("ha-form-positive_time_period_dict")
+export class HaFormTimePeriod extends LitElement implements HaFormElement {
+  @property() public schema!: HaFormTimeSchema;
+  @property() public data!: HaFormTimeData;
+  @property() public label!: string;
+  @property() public suffix!: string;
+  @query("paper-time-input") private _input?: HTMLElement;
+
+  public focus() {
+    if (this._input) {
+      this._input.focus();
+    }
+  }
+
+  protected render(): TemplateResult | void {
+    return html`
+      <paper-time-input
+        .label=${this.label}
+        .required=${this.schema.required}
+        .autoValidate=${this.schema.required}
+        error-message="Required"
+        enable-second
+        format="24"
+        .hour=${this._parseDuration(this._hours)}
+        .min=${this._parseDuration(this._minutes)}
+        .sec=${this._parseDuration(this._seconds)}
+        @hour-changed=${this._hourChanged}
+        @min-changed=${this._minChanged}
+        @sec-changed=${this._secChanged}
+        float-input-labels
+        no-hours-limit
+        always-float-input-labels
+        hour-label="hh"
+        min-label="mm"
+        sec-label="ss"
+      ></paper-time-input>
+    `;
+  }
+
+  private get _hours() {
+    return this.data && this.data.hours ? Number(this.data.hours) : 0;
+  }
+
+  private get _minutes() {
+    return this.data && this.data.minutes ? Number(this.data.minutes) : 0;
+  }
+
+  private get _seconds() {
+    return this.data && this.data.seconds ? Number(this.data.seconds) : 0;
+  }
+
+  private _parseDuration(value) {
+    return value.toString().padStart(2, "0");
+  }
+
+  private _hourChanged(ev) {
+    this._durationChanged(ev, "hours");
+  }
+
+  private _minChanged(ev) {
+    this._durationChanged(ev, "minutes");
+  }
+
+  private _secChanged(ev) {
+    this._durationChanged(ev, "seconds");
+  }
+
+  private _durationChanged(ev, unit) {
+    let value = Number(ev.detail.value);
+
+    if (value === this[`_${unit}`]) {
+      return;
+    }
+
+    let hours = this._hours;
+    let minutes = this._minutes;
+
+    if (unit === "seconds" && value > 59) {
+      minutes = minutes + Math.floor(value / 60);
+      value %= 60;
+    }
+
+    if (unit === "minutes" && value > 59) {
+      hours = hours + Math.floor(value / 60);
+      value %= 60;
+    }
+
+    fireEvent(
+      this,
+      "value-changed",
+      {
+        value: {
+          hours,
+          minutes,
+          seconds: this._seconds,
+          ...{ [unit]: value },
+        },
+      },
+      { bubbles: false }
+    );
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-form-positive_time_period_dict": HaFormTimePeriod;
+  }
+}

src/components/ha-form/ha-form.ts

@@ -14,14 +14,16 @@ import "./ha-form-integer";
 import "./ha-form-float";
 import "./ha-form-boolean";
 import "./ha-form-select";
+import "./ha-form-positive_time_period_dict";
 import { fireEvent } from "../../common/dom/fire_event";
 
 export type HaFormSchema =
   | HaFormStringSchema
   | HaFormIntegerSchema
   | HaFormFloatSchema
   | HaFormBooleanSchema
-  | HaFormSelectSchema;
+  | HaFormSelectSchema
+  | HaFormTimeSchema;
 
 export interface HaFormBaseSchema {
   name: string;
@@ -55,6 +57,10 @@ export interface HaFormBooleanSchema extends HaFormBaseSchema {
   type: "boolean";
 }
 
+export interface HaFormTimeSchema extends HaFormBaseSchema {
+  type: "time";
+}
+
 export interface HaFormDataContainer {
   [key: string]: HaFormData;
 }
@@ -64,13 +70,19 @@ export type HaFormData =
   | HaFormIntegerData
   | HaFormFloatData
   | HaFormBooleanData
-  | HaFormSelectData;
+  | HaFormSelectData
+  | HaFormTimeData;
 
 export type HaFormStringData = string;
 export type HaFormIntegerData = number;
 export type HaFormFloatData = number;
 export type HaFormBooleanData = boolean;
 export type HaFormSelectData = string;
+export interface HaFormTimeData {
+  hours?: number;
+  minutes?: number;
+  seconds?: number;
+}
 
 export interface HaFormElement extends LitElement {
   schema: HaFormSchema;