From 5bfaa660fd4ce924603889cd9d0c1157743f1411 Mon Sep 17 00:00:00 2001
From: Zack <zackbarett@hey.com>
Date: Tue, 15 Mar 2022 15:29:09 -0500
Subject: [PATCH 1/2] Add Devices Picker

---
 gallery/src/pages/components/ha-selector.ts   |  1 +
 src/components/device/ha-devices-picker.ts    |  8 +++-
 .../ha-selector/ha-selector-device.ts         | 46 ++++++++++++-------
 src/data/selector.ts                          |  1 +
 4 files changed, 38 insertions(+), 18 deletions(-)

diff --git a/gallery/src/pages/components/ha-selector.ts b/gallery/src/pages/components/ha-selector.ts
index 9f585d051a74..29dd91e42a17 100644
--- a/gallery/src/pages/components/ha-selector.ts
+++ b/gallery/src/pages/components/ha-selector.ts
@@ -183,6 +183,7 @@ const SCHEMAS: {
     name: "Multiples",
     input: {
       entity: { name: "Entity", selector: { entity: { multiple: true } } },
+      device: { name: "Device", selector: { device: { multiple: true } } },
     },
   },
 ];
diff --git a/src/components/device/ha-devices-picker.ts b/src/components/device/ha-devices-picker.ts
index 1b437da78041..ff975abef5b1 100644
--- a/src/components/device/ha-devices-picker.ts
+++ b/src/components/device/ha-devices-picker.ts
@@ -1,4 +1,4 @@
-import { html, LitElement, TemplateResult } from "lit";
+import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import { PolymerChangedEvent } from "../../polymer-types";
@@ -116,6 +116,12 @@ class HaDevicesPicker extends LitElement {
 
     this._updateDevices([...currentDevices, toAdd]);
   }
+
+  static override styles = css`
+    div {
+      margin-top: 8px;
+    }
+  `;
 }
 
 declare global {
diff --git a/src/components/ha-selector/ha-selector-device.ts b/src/components/ha-selector/ha-selector-device.ts
index 60da624665bd..e660863b886b 100644
--- a/src/components/ha-selector/ha-selector-device.ts
+++ b/src/components/ha-selector/ha-selector-device.ts
@@ -1,10 +1,11 @@
 import { html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { ConfigEntry, getConfigEntries } from "../../data/config_entries";
-import { DeviceRegistryEntry } from "../../data/device_registry";
-import { DeviceSelector } from "../../data/selector";
-import { HomeAssistant } from "../../types";
+import type { DeviceRegistryEntry } from "../../data/device_registry";
+import type { DeviceSelector } from "../../data/selector";
+import type { HomeAssistant } from "../../types";
 import "../device/ha-device-picker";
+import "../device/ha-devices-picker";
 
 @customElement("ha-selector-device")
 export class HaDeviceSelector extends LitElement {
@@ -30,20 +31,31 @@ export class HaDeviceSelector extends LitElement {
   }
 
   protected render() {
-    return html`<ha-device-picker
-      .hass=${this.hass}
-      .value=${this.value}
-      .label=${this.label}
-      .deviceFilter=${this._filterDevices}
-      .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}
-      .disabled=${this.disabled}
-      allow-custom-entity
-    ></ha-device-picker>`;
+    if (!this.selector.device.multiple) {
+      return html`<ha-device-picker
+        .hass=${this.hass}
+        .value=${this.value}
+        .label=${this.label}
+        .deviceFilter=${this._filterDevices}
+        .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}
+        .disabled=${this.disabled}
+        allow-custom-entity
+      ></ha-device-picker> `;
+    }
+
+    return html`
+      ${this.label ? html`<label>${this.label}</label>` : ""}
+      <ha-devices-picker
+        .hass=${this.hass}
+        .value=${this.value}
+        .entityFilter=${this._filterDevices}
+      ></ha-devices-picker>
+    `;
   }
 
   private _filterDevices = (device: DeviceRegistryEntry): boolean => {
diff --git a/src/data/selector.ts b/src/data/selector.ts
index 4e75ad8268e0..7f72bcb980a5 100644
--- a/src/data/selector.ts
+++ b/src/data/selector.ts
@@ -43,6 +43,7 @@ export interface DeviceSelector {
       domain?: EntitySelector["entity"]["domain"];
       device_class?: EntitySelector["entity"]["device_class"];
     };
+    multiple?: boolean;
   };
 }
 

From 635863d5af0e1195ed43a19b886c128271ec1fb8 Mon Sep 17 00:00:00 2001
From: Zack <zackbarett@hey.com>
Date: Tue, 15 Mar 2022 15:42:17 -0500
Subject: [PATCH 2/2] change filter

---
 src/components/ha-selector/ha-selector-device.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/ha-selector/ha-selector-device.ts b/src/components/ha-selector/ha-selector-device.ts
index e660863b886b..2b0af5ace120 100644
--- a/src/components/ha-selector/ha-selector-device.ts
+++ b/src/components/ha-selector/ha-selector-device.ts
@@ -53,7 +53,12 @@ export class HaDeviceSelector extends LitElement {
       <ha-devices-picker
         .hass=${this.hass}
         .value=${this.value}
-        .entityFilter=${this._filterDevices}
+        .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}
       ></ha-devices-picker>
     `;
   }