Add entity and device selectors (#7735)

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

@@ -42,6 +42,10 @@ interface Device {
   id: string;
 }
 
+export type HaDevicePickerDeviceFilterFunc = (
+  device: DeviceRegistryEntry
+) => boolean;
+
 const rowRenderer = (root: HTMLElement, _owner, model: { item: Device }) => {
   if (!root.firstElementChild) {
     root.innerHTML = `
@@ -102,6 +106,8 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
   @property({ type: Array, attribute: "include-device-classes" })
   public includeDeviceClasses?: string[];
 
+  @property() public deviceFilter?: HaDevicePickerDeviceFilterFunc;
+
   @property({ type: Boolean })
   private _opened?: boolean;
 
@@ -112,7 +118,8 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
       entities: EntityRegistryEntry[],
       includeDomains: this["includeDomains"],
       excludeDomains: this["excludeDomains"],
-      includeDeviceClasses: this["includeDeviceClasses"]
+      includeDeviceClasses: this["includeDeviceClasses"],
+      deviceFilter: this["deviceFilter"]
     ): Device[] => {
       if (!devices.length) {
         return [];
@@ -180,6 +187,14 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
         });
       }
 
+      if (deviceFilter) {
+        inputDevices = inputDevices.filter(
+          (device) =>
+            // We always want to include the device of the current value
+            device.id === this.value || deviceFilter!(device)
+        );
+      }
+
       const outputDevices = inputDevices.map((device) => {
         return {
           id: device.id,
@@ -224,7 +239,8 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
       this.entities,
       this.includeDomains,
       this.excludeDomains,
-      this.includeDeviceClasses
+      this.includeDeviceClasses,
+      this.deviceFilter
     );
     return html`
       <vaadin-combo-box-light