Add UI for new selectors

src/components/ha-expansion-panel.ts

@@ -76,7 +76,7 @@ class HaExpansionPanel extends LitElement {
 
       .summary {
         display: flex;
-        padding: 0px 16px;
+        padding: var(--expansion-panel-summary-padding, 0px 16px);
         min-height: 48px;
         align-items: center;
         cursor: pointer;

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

@@ -0,0 +1,30 @@
+import { customElement, html, LitElement, property } from "lit-element";
+import { HomeAssistant } from "../../types";
+import { AreaSelector } from "../../data/selector";
+import "../ha-area-picker";
+
+@customElement("ha-selector-area")
+export class HaAreaSelector extends LitElement {
+  @property() public hass!: HomeAssistant;
+
+  @property() public selector!: AreaSelector;
+
+  @property() public value?: any;
+
+  @property() public label?: string;
+
+  protected render() {
+    return html`<ha-area-picker
+      .hass=${this.hass}
+      .value=${this.value}
+      .label=${this.label}
+      no-add
+    ></ha-area-picker>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-selector-area": HaAreaSelector;
+  }
+}

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

@@ -0,0 +1,54 @@
+import {
+  css,
+  CSSResult,
+  customElement,
+  html,
+  LitElement,
+  property,
+} from "lit-element";
+import { fireEvent } from "../../common/dom/fire_event";
+import { HomeAssistant } from "../../types";
+import "../ha-formfield";
+import "../ha-switch";
+
+@customElement("ha-selector-boolean")
+export class HaBooleanSelector extends LitElement {
+  @property() public hass!: HomeAssistant;
+
+  @property() public value?: number;
+
+  @property() public label?: string;
+
+  protected render() {
+    return html` <ha-formfield alignEnd spaceBetween .label=${this.label}>
+      <ha-switch
+        .checked=${this.value}
+        @change=${this._handleChange}
+      ></ha-switch>
+    </ha-formfield>`;
+  }
+
+  private _handleChange(ev) {
+    const value = ev.target.checked;
+    if (this.value === value) {
+      return;
+    }
+    fireEvent(this, "value-changed", { value });
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      ha-formfield {
+        width: 100%;
+        margin: 16px 0;
+        --mdc-typography-body2-font-size: 1em;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-selector-boolean": HaBooleanSelector;
+  }
+}

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

@@ -38,6 +38,12 @@ export class HaDeviceSelector extends LitElement {
       .value=${this.value}
       .label=${this.label}
       .deviceFilter=${(device) => this._filterDevices(device)}
+      .includeDeviceClasses=${this.selector.device.entity?.device_class
+        ? [this.selector.device.entity.device_class]
+        : undefined}
+      .includeDomains=${this.selector.device.entity?.domain
+        ? [this.selector.device.entity.domain]
+        : undefined}
       allow-custom-entity
     ></ha-device-picker>`;
   }

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

@@ -0,0 +1,104 @@
+import {
+  css,
+  CSSResult,
+  customElement,
+  html,
+  LitElement,
+  property,
+} from "lit-element";
+import { HomeAssistant } from "../../types";
+import { NumberSelector } from "../../data/selector";
+import "@polymer/paper-input/paper-input";
+import "../ha-slider";
+import { fireEvent } from "../../common/dom/fire_event";
+import { classMap } from "lit-html/directives/class-map";
+
+@customElement("ha-selector-number")
+export class HaNumberSelector extends LitElement {
+  @property() public hass!: HomeAssistant;
+
+  @property() public selector!: NumberSelector;
+
+  @property() public value?: number;
+
+  @property() public label?: string;
+
+  protected render() {
+    return html`${this.label}
+      ${this.selector.number.mode === "slider"
+        ? html`<ha-slider
+            .min=${this.selector.number.min}
+            .max=${this.selector.number.max}
+            .value=${this._value}
+            .step=${this.selector.number.step}
+            pin
+            ignore-bar-touch
+            @change=${this._handleSliderChange}
+          >
+          </ha-slider>`
+        : ""}
+      <paper-input
+        pattern="[0-9]+([\\.][0-9]+)?"
+        .label=${this.selector.number.mode === "slider"
+          ? undefined
+          : this.label}
+        .noLabelFloat=${this.selector.number.mode === "slider"}
+        class=${classMap({ single: this.selector.number.mode === "box" })}
+        .min=${this.selector.number.min}
+        .max=${this.selector.number.max}
+        .value=${this._value}
+        .step=${this.selector.number.step}
+        type="number"
+        auto-validate
+        @value-changed=${this._handleInputChange}
+      >
+        ${this.selector.number.unit_of_measurement
+          ? html`<div slot="suffix">
+              ${this.selector.number.unit_of_measurement}
+            </div>`
+          : ""}
+      </paper-input>`;
+  }
+
+  private get _value() {
+    return this.value || 0;
+  }
+
+  private _handleInputChange(ev) {
+    const value = ev.detail.value;
+    if (this._value === value) {
+      return;
+    }
+    fireEvent(this, "value-changed", { value });
+  }
+
+  private _handleSliderChange(ev) {
+    const value = ev.target.value;
+    if (this._value === value) {
+      return;
+    }
+    fireEvent(this, "value-changed", { value });
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      :host {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+      ha-slider {
+        flex: 1;
+      }
+      .single {
+        flex: 1;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-selector-number": HaNumberSelector;
+  }
+}

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

@@ -0,0 +1,59 @@
+import { customElement, html, LitElement, property } from "lit-element";
+import { HomeAssistant } from "../../types";
+import { TimeSelector } from "../../data/selector";
+import { fireEvent } from "../../common/dom/fire_event";
+import "../paper-time-input";
+
+const test = new Date().toLocaleString();
+const useAMPM = test.includes("AM") || test.includes("PM");
+
+@customElement("ha-selector-time")
+export class HaTimeSelector extends LitElement {
+  @property() public hass!: HomeAssistant;
+
+  @property() public selector!: TimeSelector;
+
+  @property() public value?: string;
+
+  @property() public label?: string;
+
+  protected render() {
+    const parts = this.value?.split(":") || [];
+    const hours = useAMPM ? parts[0] ?? "12" : parts[0] ?? "0";
+
+    return html`
+      <paper-time-input
+        .label=${this.label}
+        .hour=${useAMPM && Number(hours) > 12 ? Number(hours) - 12 : hours}
+        .min=${parts[1] ?? "00"}
+        .sec=${parts[2] ?? "00"}
+        .format=${useAMPM ? 12 : 24}
+        .amPm=${useAMPM && (Number(hours) > 12 ? "PM" : "AM")}
+        @change=${this._timeChanged}
+        @am-pm-changed=${this._timeChanged}
+        hide-label
+        enable-second
+      ></paper-time-input>
+    `;
+  }
+
+  private _timeChanged(ev) {
+    let value = ev.target.value;
+    if (useAMPM) {
+      let hours = Number(ev.target.hour);
+      if (ev.target.amPm === "PM") {
+        hours += 12;
+      }
+      value = `${hours}:${ev.target.min}:${ev.target.sec}`;
+    }
+    fireEvent(this, "value-changed", {
+      value,
+    });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-selector-time": HaTimeSelector;
+  }
+}

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

@@ -4,6 +4,10 @@ import { HomeAssistant } from "../../types";
 
 import "./ha-selector-entity";
 import "./ha-selector-device";
+import "./ha-selector-area";
+import "./ha-selector-number";
+import "./ha-selector-boolean";
+import "./ha-selector-time";
 import { Selector } from "../../data/selector";
 
 @customElement("ha-selector")

src/components/paper-time-input.js

@@ -97,6 +97,7 @@ export class PaperTimeInput extends PolymerElement {
         .time-input-wrap {
           @apply --layout-horizontal;
           @apply --layout-no-wrap;
+          justify-content: var(--paper-time-input-justify-content, normal);
         }
 
         [hidden] {

src/data/blueprint.ts

@@ -11,18 +11,19 @@ export interface Blueprint {
 export interface BlueprintMetaData {
   domain: string;
   name: string;
+  input?: Record<string, BlueprintInput | null>;
   description?: string;
-  input: Record<string, BlueprintInput | null>;
+  source_url?: string;
 }
 
 export interface BlueprintInput {
   name?: string;
   description?: string;
   selector?: Selector;
+  default?: any;
 }
 
 export interface BlueprintImportResult {
-  url: string;
   suggested_filename: string;
   raw_data: string;
   blueprint: Blueprint;

src/data/input_number.ts

@@ -5,10 +5,10 @@ export interface InputNumber {
   name: string;
   min: number;
   max: number;
+  step: number;
+  mode: "box" | "slider";
   icon?: string;
   initial?: number;
-  step?: number;
-  mode?: "box" | "slider";
   unit_of_measurement?: string;
 }
 

src/data/selector.ts

@@ -1,4 +1,10 @@
-export type Selector = EntitySelector | DeviceSelector;
+export type Selector =
+  | EntitySelector
+  | DeviceSelector
+  | AreaSelector
+  | NumberSelector
+  | BooleanSelector
+  | TimeSelector;
 
 export interface EntitySelector {
   entity: {
@@ -13,5 +19,31 @@ export interface DeviceSelector {
     integration?: string;
     manufacturer?: string;
     model?: string;
+    entity?: EntitySelector["entity"];
   };
 }
+
+export interface AreaSelector {
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  area: {};
+}
+
+export interface NumberSelector {
+  number: {
+    min: number;
+    max: number;
+    step: number;
+    mode: "box" | "slider";
+    unit_of_measurement?: string;
+  };
+}
+
+export interface BooleanSelector {
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  boolean: {};
+}
+
+export interface TimeSelector {
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  time: {};
+}