diff --git a/gallery/src/pages/components/ha-selector.ts b/gallery/src/pages/components/ha-selector.ts index 2ea007d913..4408191b20 100644 --- a/gallery/src/pages/components/ha-selector.ts +++ b/gallery/src/pages/components/ha-selector.ts @@ -184,6 +184,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 1b437da780..ff975abef5 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 60da624665..2b0af5ace1 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,36 @@ export class HaDeviceSelector extends LitElement { } protected render() { - return html``; + if (!this.selector.device.multiple) { + return html` `; + } + + return html` + ${this.label ? html`` : ""} + + `; } private _filterDevices = (device: DeviceRegistryEntry): boolean => { diff --git a/src/data/selector.ts b/src/data/selector.ts index 8d8c062b08..ce84b86fbc 100644 --- a/src/data/selector.ts +++ b/src/data/selector.ts @@ -49,6 +49,7 @@ export interface DeviceSelector { domain?: EntitySelector["entity"]["domain"]; device_class?: EntitySelector["entity"]["device_class"]; }; + multiple?: boolean; }; }