diff --git a/src/components/device/ha-device-automation-picker.ts b/src/components/device/ha-device-automation-picker.ts index e4cc705dcec1..007f40e77cf8 100644 --- a/src/components/device/ha-device-automation-picker.ts +++ b/src/components/device/ha-device-automation-picker.ts @@ -1,7 +1,5 @@ -import "@polymer/paper-input/paper-input"; -import "@polymer/paper-item/paper-item"; -import "@polymer/paper-item/paper-item-body"; -import "@polymer/paper-listbox/paper-listbox"; +import "@material/mwc-list/mwc-list-item"; +import "@material/mwc-select/mwc-select"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { property, state } from "lit/decorators"; import { fireEvent } from "../../common/dom/fire_event"; @@ -10,7 +8,6 @@ import { deviceAutomationsEqual, } from "../../data/device_automation"; import { HomeAssistant } from "../../types"; -import "../ha-paper-dropdown-menu"; const NO_AUTOMATION_KEY = "NO_AUTOMATION"; const UNKNOWN_AUTOMATION_KEY = "UNKNOWN_AUTOMATION"; @@ -67,14 +64,12 @@ export abstract class HaDeviceAutomationPicker< this._createNoAutomation = createNoAutomation; } - private get _key() { - if ( - !this.value || - deviceAutomationsEqual( - this._createNoAutomation(this.deviceId), - this.value - ) - ) { + private get _value() { + if (!this.value) { + return ""; + } + + if (!this._automations.length) { return NO_AUTOMATION_KEY; } @@ -93,42 +88,32 @@ export abstract class HaDeviceAutomationPicker< if (this._renderEmpty) { return html``; } + const value = this._value; return html` - - - - - ${this._automations.map( - (automation, idx) => html` - - ${this._localizeDeviceAutomation(this.hass, automation)} - - ` - )} - - + ${value === NO_AUTOMATION_KEY + ? html` + ${this.NO_AUTOMATION_TEXT} + ` + : ""} + ${value === UNKNOWN_AUTOMATION_KEY + ? html` + ${this.UNKNOWN_AUTOMATION_TEXT} + ` + : ""} + ${this._automations.map( + (automation, idx) => html` + + ${this._localizeDeviceAutomation(this.hass, automation)} + + ` + )} + `; } @@ -138,14 +123,6 @@ export abstract class HaDeviceAutomationPicker< if (changedProps.has("deviceId")) { this._updateDeviceInfo(); } - - // The value has changed, force the listbox to update - if (changedProps.has("value") || changedProps.has("_renderEmpty")) { - const listbox = this.shadowRoot!.querySelector("paper-listbox")!; - if (listbox) { - listbox._selectSelected(this._key); - } - } } private async _updateDeviceInfo() { @@ -168,9 +145,16 @@ export abstract class HaDeviceAutomationPicker< } private _automationChanged(ev) { - if (ev.detail.item.automation) { - this._setValue(ev.detail.item.automation); + const value = ev.target.value; + if (!value || [UNKNOWN_AUTOMATION_KEY, NO_AUTOMATION_KEY].includes(value)) { + return; + } + const [deviceId, idx] = value.split("_"); + const automation = this._automations[idx]; + if (automation.device_id !== deviceId) { + return; } + this._setValue(automation); } private _setValue(automation: T) { @@ -183,14 +167,9 @@ export abstract class HaDeviceAutomationPicker< static get styles(): CSSResultGroup { return css` - ha-paper-dropdown-menu { + mwc-select { width: 100%; - } - paper-listbox { - min-width: 200px; - } - paper-item { - cursor: pointer; + margin-top: 4px; } `; }