Revert "Use md-select for entity-row and state-card" (#25308)

Revert "Use md-select for entity-row and state-card (#25307)"

This reverts commit 3c9dce20e2679bb14d9dd6caecc38e47ab919209.
This commit is contained in:
Wendelin 2025-05-05 10:57:50 +02:00 committed by Paul Bottein
parent 868daf692d
commit 3121721ac7
No known key found for this signature in database
3 changed files with 37 additions and 31 deletions

View File

@ -3,8 +3,8 @@ import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { stopPropagation } from "../../../common/dom/stop_propagation";
import { computeStateName } from "../../../common/entity/compute_state_name";
import "../../../components/ha-md-select";
import "../../../components/ha-md-select-option";
import "../../../components/ha-list-item";
import "../../../components/ha-select";
import { UNAVAILABLE } from "../../../data/entity";
import { forwardHaptic } from "../../../data/haptics";
import type { InputSelectEntity } from "../../../data/input_select";
@ -57,26 +57,25 @@ class HuiInputSelectEntityRow extends LitElement implements LovelaceRow {
.config=${this._config}
hide-name
>
<ha-md-select
<ha-select
.label=${this._config.name || computeStateName(stateObj)}
.value=${stateObj.state}
.options=${stateObj.attributes.options}
.disabled=${
stateObj.state === UNAVAILABLE /* UNKNOWN state is allowed */
}
naturalMenuWidth
@change=${this._selectedChanged}
@selected=${this._selectedChanged}
@click=${stopPropagation}
@closed=${stopPropagation}
>
${stateObj.attributes.options
? stateObj.attributes.options.map(
(option) =>
html`<ha-md-select-option .value=${option}>
<div slot="headline">${option}</div>
</ha-md-select-option>`
html`<ha-list-item .value=${option}>${option}</ha-list-item>`
)
: nothing}
</ha-md-select>
: ""}
</ha-select>
</hui-generic-entity-row>
`;
}
@ -86,8 +85,9 @@ class HuiInputSelectEntityRow extends LitElement implements LovelaceRow {
display: flex;
align-items: center;
}
ha-md-select {
ha-select {
width: 100%;
--ha-select-min-width: 0;
}
`;

View File

@ -1,10 +1,11 @@
import type { TemplateResult } from "lit";
import { css, html, LitElement } 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 "../components/ha-md-select";
import "../components/ha-md-select-option";
import "../components/ha-list-item";
import "../components/ha-select";
import { UNAVAILABLE } from "../data/entity";
import type { InputSelectEntity } from "../data/input_select";
import { setInputSelectOption } from "../data/input_select";
@ -19,21 +20,23 @@ class StateCardInputSelect extends LitElement {
protected render(): TemplateResult {
return html`
<state-badge .hass=${this.hass} .stateObj=${this.stateObj}></state-badge>
<ha-md-select
<ha-select
.label=${computeStateName(this.stateObj)}
.value=${this.stateObj.state}
.options=${this.stateObj.attributes.options}
.disabled=${
this.stateObj.state === UNAVAILABLE /* UNKNOWN state is allowed */
}
@change=${this._selectedOptionChanged}
naturalMenuWidth
fixedMenuPosition
@selected=${this._selectedOptionChanged}
@closed=${stopPropagation}
>
${this.stateObj.attributes.options.map(
(option) =>
html`<ha-md-select-option .value=${option}>
<div slot="headline">${option}</div>
</ha-md-select-option>`
html`<ha-list-item .value=${option}>${option}</ha-list-item>`
)}
</ha-md-select>
</ha-select>
`;
}
@ -55,7 +58,7 @@ class StateCardInputSelect extends LitElement {
margin-top: 10px;
}
ha-md-select {
ha-select {
width: 100%;
}
`;

View File

@ -1,10 +1,11 @@
import type { TemplateResult } from "lit";
import { css, html, LitElement } 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 "../components/ha-md-select";
import "../components/ha-md-select-option";
import "../components/ha-list-item";
import "../components/ha-select";
import { UNAVAILABLE } from "../data/entity";
import type { SelectEntity } from "../data/select";
import { setSelectOption } from "../data/select";
@ -19,22 +20,24 @@ class StateCardSelect extends LitElement {
protected render(): TemplateResult {
return html`
<state-badge .hass=${this.hass} .stateObj=${this.stateObj}></state-badge>
<ha-md-select
.label=${computeStateName(this.stateObj)}
<ha-select
.value=${this.stateObj.state}
.label=${computeStateName(this.stateObj)}
.options=${this.stateObj.attributes.options}
.disabled=${this.stateObj.state === UNAVAILABLE}
@change=${this._selectedOptionChanged}
naturalMenuWidth
fixedMenuPosition
@selected=${this._selectedOptionChanged}
@closed=${stopPropagation}
>
${this.stateObj.attributes.options.map(
(option) => html`
<ha-md-select-option .value=${option}>
<div slot="headline">
${this.hass.formatEntityState(this.stateObj, option)}
</div>
</ha-md-select-option>
<ha-list-item .value=${option}>
${this.hass.formatEntityState(this.stateObj, option)}
</ha-list-item>
`
)}
</ha-md-select>
</ha-select>
`;
}
@ -56,7 +59,7 @@ class StateCardSelect extends LitElement {
margin-top: 10px;
}
ha-md-select {
ha-select {
width: 100%;
}
`;