diff --git a/src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts b/src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts
index 55f384a6c9d7..30fd573dbe27 100644
--- a/src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts
@@ -1,5 +1,5 @@
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-listbox/paper-listbox";
+import "@material/mwc-list/mwc-list-item";
+import "@material/mwc-select/mwc-select";
import {
css,
CSSResultGroup,
@@ -11,8 +11,6 @@ import {
import { customElement, property, state } from "lit/decorators";
import { stopPropagation } from "../../../common/dom/stop_propagation";
import { computeStateName } from "../../../common/entity/compute_state_name";
-import "../../../components/entity/state-badge";
-import "../../../components/ha-paper-dropdown-menu";
import { UNAVAILABLE_STATES } from "../../../data/entity";
import { forwardHaptic } from "../../../data/haptics";
import {
@@ -67,75 +65,43 @@ class HuiInputSelectEntityRow extends LitElement implements LovelaceRow {
.config=${this._config}
hideName
>
-
-
- ${stateObj.attributes.options
- ? stateObj.attributes.options.map(
- (option) => html` ${option} `
- )
- : ""}
-
-
+ ${stateObj.attributes.options
+ ? stateObj.attributes.options.map(
+ (option) =>
+ html`${option}`
+ )
+ : ""}
+
`;
}
- protected updated(changedProps: PropertyValues) {
- super.updated(changedProps);
-
- if (!this.hass || !this._config) {
- return;
- }
-
- const stateObj = this.hass.states[this._config.entity] as
- | InputSelectEntity
- | undefined;
-
- if (!stateObj) {
- return;
- }
-
- // Update selected after rendering the items or else it won't work in Firefox
- if (stateObj.attributes.options) {
- this.shadowRoot!.querySelector("paper-listbox")!.selected =
- stateObj.attributes.options.indexOf(stateObj.state);
- }
- }
-
static get styles(): CSSResultGroup {
return css`
hui-generic-entity-row {
display: flex;
align-items: center;
}
- ha-paper-dropdown-menu {
- margin-left: 16px;
- flex: 1;
- }
- paper-item {
- cursor: pointer;
- min-width: 200px;
- }
- .pointer {
- cursor: pointer;
- }
- state-badge:focus {
- outline: none;
- background: var(--divider-color);
- border-radius: 100%;
+ mwc-select {
+ width: 100%;
}
`;
}
private _selectedChanged(ev): void {
const stateObj = this.hass!.states[this._config!.entity];
- const option = ev.target.selectedItem.innerText.trim();
+ const option = ev.target.value;
if (option === stateObj.state) {
return;
}
diff --git a/src/panels/lovelace/entity-rows/hui-select-entity-row.ts b/src/panels/lovelace/entity-rows/hui-select-entity-row.ts
index 5aa6f103fda4..f6bc9ec8678d 100644
--- a/src/panels/lovelace/entity-rows/hui-select-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-select-entity-row.ts
@@ -1,5 +1,5 @@
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-listbox/paper-listbox";
+import "@material/mwc-list/mwc-list-item";
+import "@material/mwc-select/mwc-select";
import {
css,
CSSResultGroup,
@@ -11,8 +11,6 @@ import {
import { customElement, property, state } from "lit/decorators";
import { stopPropagation } from "../../../common/dom/stop_propagation";
import { computeStateName } from "../../../common/entity/compute_state_name";
-import "../../../components/entity/state-badge";
-import "../../../components/ha-paper-dropdown-menu";
import { UNAVAILABLE } from "../../../data/entity";
import { forwardHaptic } from "../../../data/haptics";
import { SelectEntity, setSelectOption } from "../../../data/select";
@@ -64,86 +62,52 @@ class HuiSelectEntityRow extends LitElement implements LovelaceRow {
.config=${this._config}
hideName
>
-
-
- ${stateObj.attributes.options
- ? stateObj.attributes.options.map(
- (option) =>
- html`
- ${(stateObj.attributes.device_class &&
- this.hass!.localize(
- `component.select.state.${stateObj.attributes.device_class}.${option}`
- )) ||
+ ${stateObj.attributes.options
+ ? stateObj.attributes.options.map(
+ (option) =>
+ html`
+ ${(stateObj.attributes.device_class &&
this.hass!.localize(
- `component.select.state._.${option}`
- ) ||
- option}
- `
- )
- : ""}
-
-
+ `component.select.state.${stateObj.attributes.device_class}.${option}`
+ )) ||
+ this.hass!.localize(
+ `component.select.state._.${option}`
+ ) ||
+ option}
+
+ `
+ )
+ : ""}
+
`;
}
- protected updated(changedProps: PropertyValues) {
- super.updated(changedProps);
-
- if (!this.hass || !this._config) {
- return;
- }
-
- const stateObj = this.hass.states[this._config.entity] as
- | SelectEntity
- | undefined;
-
- if (!stateObj) {
- return;
- }
-
- // Update selected after rendering the items or else it won't work in Firefox
- if (stateObj.attributes.options) {
- this.shadowRoot!.querySelector("paper-listbox")!.selected =
- stateObj.attributes.options.indexOf(stateObj.state);
- }
- }
-
static get styles(): CSSResultGroup {
return css`
hui-generic-entity-row {
display: flex;
align-items: center;
}
- ha-paper-dropdown-menu {
- margin-left: 16px;
- flex: 1;
- }
- paper-item {
- cursor: pointer;
- min-width: 200px;
- }
- .pointer {
- cursor: pointer;
- }
- state-badge:focus {
- outline: none;
- background: var(--divider-color);
- border-radius: 100%;
+ mwc-select {
+ width: 100%;
}
`;
}
private _selectedChanged(ev): void {
const stateObj = this.hass!.states[this._config!.entity];
- const option = ev.target.selectedItem.option;
+ const option = ev.target.value;
if (option === stateObj.state) {
return;
}
diff --git a/src/state-summary/state-card-input_select.ts b/src/state-summary/state-card-input_select.ts
index 91b47eede356..c992975a827f 100644
--- a/src/state-summary/state-card-input_select.ts
+++ b/src/state-summary/state-card-input_select.ts
@@ -1,21 +1,12 @@
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light";
-import "@polymer/paper-item/paper-item";
-import type { PaperItemElement } from "@polymer/paper-item/paper-item";
-import "@polymer/paper-listbox/paper-listbox";
-import {
- css,
- CSSResultGroup,
- html,
- LitElement,
- PropertyValues,
- TemplateResult,
-} from "lit";
+import "@material/mwc-list/mwc-list-item";
+import "@material/mwc-select/mwc-select";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators";
import { stopPropagation } from "../common/dom/stop_propagation";
import { computeStateName } from "../common/entity/compute_state_name";
import "../components/entity/state-badge";
+import { UNAVAILABLE_STATES } from "../data/entity";
import { InputSelectEntity, setInputSelectOption } from "../data/input_select";
-import type { PolymerIronSelectEvent } from "../polymer-types";
import type { HomeAssistant } from "../types";
@customElement("state-card-input_select")
@@ -27,32 +18,25 @@ class StateCardInputSelect extends LitElement {
protected render(): TemplateResult {
return html`
-
-
- ${this.stateObj.attributes.options.map(
- (option) => html` ${option} `
- )}
-
-
+ ${this.stateObj.attributes.options.map(
+ (option) =>
+ html`${option}`
+ )}
+
`;
}
- protected updated(changedProps: PropertyValues) {
- super.updated(changedProps);
- // Update selected after rendering the items or else it won't work in Firefox
- this.shadowRoot!.querySelector("paper-listbox")!.selected =
- this.stateObj.attributes.options.indexOf(this.stateObj.state);
- }
-
- private async _selectedOptionChanged(
- ev: PolymerIronSelectEvent
- ) {
- const option = ev.detail.item.innerText.trim();
+ private async _selectedOptionChanged(ev) {
+ const option = ev.target.value;
if (option === this.stateObj.state) {
return;
}
@@ -62,7 +46,7 @@ class StateCardInputSelect extends LitElement {
static get styles(): CSSResultGroup {
return css`
:host {
- display: block;
+ display: flex;
}
state-badge {
@@ -70,14 +54,8 @@ class StateCardInputSelect extends LitElement {
margin-top: 10px;
}
- paper-dropdown-menu-light {
- display: block;
- margin-left: 53px;
- }
-
- paper-item {
- cursor: pointer;
- min-width: 200px;
+ mwc-select {
+ width: 100%;
}
`;
}
diff --git a/src/state-summary/state-card-select.ts b/src/state-summary/state-card-select.ts
index 8541cac41b1c..1aae15ad6c1e 100644
--- a/src/state-summary/state-card-select.ts
+++ b/src/state-summary/state-card-select.ts
@@ -1,18 +1,11 @@
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light";
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-listbox/paper-listbox";
-import {
- css,
- CSSResultGroup,
- html,
- LitElement,
- PropertyValues,
- TemplateResult,
-} from "lit";
+import "@material/mwc-list/mwc-list-item";
+import "@material/mwc-select/mwc-select";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators";
import { stopPropagation } from "../common/dom/stop_propagation";
import { computeStateName } from "../common/entity/compute_state_name";
import "../components/entity/state-badge";
+import { UNAVAILABLE } from "../data/entity";
import { SelectEntity, setSelectOption } from "../data/select";
import type { HomeAssistant } from "../types";
@@ -25,42 +18,34 @@ class StateCardSelect extends LitElement {
protected render(): TemplateResult {
return html`
-
-
- ${this.stateObj.attributes.options.map(
- (option) =>
- html`
- ${(this.stateObj.attributes.device_class &&
- this.hass.localize(
- `component.select.state.${this.stateObj.attributes.device_class}.${option}`
- )) ||
- this.hass.localize(`component.select.state._.${option}`) ||
- option}
- `
- )}
-
-
+ ${this.stateObj.attributes.options.map(
+ (option) =>
+ html`
+
+ ${(this.stateObj.attributes.device_class &&
+ this.hass.localize(
+ `component.select.state.${this.stateObj.attributes.device_class}.${option}`
+ )) ||
+ this.hass.localize(`component.select.state._.${option}`) ||
+ option}
+
+ `
+ )}
+
`;
}
- protected updated(changedProps: PropertyValues) {
- super.updated(changedProps);
- if (!changedProps.has("stateObj")) {
- return;
- }
- // Update selected after rendering the items or else it won't work in Firefox
- this.shadowRoot!.querySelector("paper-listbox")!.selected =
- this.stateObj.attributes.options.indexOf(this.stateObj.state);
- }
-
private _selectedOptionChanged(ev) {
- const option = ev.target.selectedItem.option;
+ const option = ev.target.value;
if (option === this.stateObj.state) {
return;
}
@@ -70,7 +55,7 @@ class StateCardSelect extends LitElement {
static get styles(): CSSResultGroup {
return css`
:host {
- display: block;
+ display: flex;
}
state-badge {
@@ -78,14 +63,8 @@ class StateCardSelect extends LitElement {
margin-top: 10px;
}
- paper-dropdown-menu-light {
- display: block;
- margin-left: 53px;
- }
-
- paper-item {
- cursor: pointer;
- min-width: 200px;
+ mwc-select {
+ width: 100%;
}
`;
}