Move more info control component to state control (#18745)

This commit is contained in:
Paul Bottein 2023-11-24 15:33:11 +01:00 committed by GitHub
parent 239d8fa948
commit 15b1d8ee14
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
38 changed files with 350 additions and 438 deletions

View File

@ -31,9 +31,7 @@ class HaCoverControls extends LitElement {
class=${classMap({
hidden: !supportsFeature(this.stateObj, CoverEntityFeature.OPEN),
})}
.label=${this.hass.localize(
"ui.dialogs.more_info_control.cover.open_cover"
)}
.label=${this.hass.localize("ui.card.cover.open_cover")}
@click=${this._onOpenTap}
.disabled=${!canOpen(this.stateObj)}
.path=${computeOpenIcon(this.stateObj)}
@ -43,9 +41,7 @@ class HaCoverControls extends LitElement {
class=${classMap({
hidden: !supportsFeature(this.stateObj, CoverEntityFeature.STOP),
})}
.label=${this.hass.localize(
"ui.dialogs.more_info_control.cover.stop_cover"
)}
.label=${this.hass.localize("ui.card.cover.stop_cover")}
.path=${mdiStop}
@click=${this._onStopTap}
.disabled=${!canStop(this.stateObj)}
@ -54,9 +50,7 @@ class HaCoverControls extends LitElement {
class=${classMap({
hidden: !supportsFeature(this.stateObj, CoverEntityFeature.CLOSE),
})}
.label=${this.hass.localize(
"ui.dialogs.more_info_control.cover.close_cover"
)}
.label=${this.hass.localize("ui.card.cover.close_cover")}
@click=${this._onCloseTap}
.disabled=${!canClose(this.stateObj)}
.path=${computeCloseIcon(this.stateObj)}

View File

@ -31,9 +31,7 @@ class HaCoverTiltControls extends LitElement {
CoverEntityFeature.OPEN_TILT
),
})}
.label=${this.hass.localize(
"ui.dialogs.more_info_control.cover.open_tilt_cover"
)}
.label=${this.hass.localize("ui.card.cover.open_tilt_cover")}
.path=${mdiArrowTopRight}
@click=${this._onOpenTiltTap}
.disabled=${!canOpenTilt(this.stateObj)}
@ -45,9 +43,7 @@ class HaCoverTiltControls extends LitElement {
CoverEntityFeature.STOP_TILT
),
})}
.label=${this.hass.localize(
"ui.dialogs.more_info_control.cover.stop_cover"
)}
.label=${this.hass.localize("ui.card.cover.stop_cover")}
.path=${mdiStop}
@click=${this._onStopTiltTap}
.disabled=${!canStopTilt(this.stateObj)}
@ -59,9 +55,7 @@ class HaCoverTiltControls extends LitElement {
CoverEntityFeature.CLOSE_TILT
),
})}
.label=${this.hass.localize(
"ui.dialogs.more_info_control.cover.close_tilt_cover"
)}
.label=${this.hass.localize("ui.card.cover.close_tilt_cover")}
.path=${mdiArrowBottomLeft}
@click=${this._onCloseTiltTap}
.disabled=${!canCloseTilt(this.stateObj)}

View File

@ -35,8 +35,8 @@ export const callProtectedLockService = async (
const response = await showEnterCodeDialogDialog(element, {
codeFormat: "text",
codePattern: stateObj!.attributes.code_format,
title: hass.localize(`ui.dialogs.more_info_control.lock.${service}`),
submitText: hass.localize(`ui.dialogs.more_info_control.lock.${service}`),
title: hass.localize(`ui.card.lock.${service}`),
submitText: hass.localize(`ui.card.lock.${service}`),
});
if (!response) {
throw new Error("Code dialog closed");

View File

@ -6,11 +6,11 @@ import { domainIcon } from "../../../common/entity/domain_icon";
import { stateColorCss } from "../../../common/entity/state_color";
import "../../../components/ha-outlined-button";
import { AlarmControlPanelEntity } from "../../../data/alarm_control_panel";
import "../../../state-control/alarm_control_panel/ha-state-control-alarm_control_panel-modes";
import type { HomeAssistant } from "../../../types";
import { showEnterCodeDialogDialog } from "../../enter-code/show-enter-code-dialog";
import "../components/alarm_control_panel/ha-more-info-alarm_control_panel-modes";
import { moreInfoControlStyle } from "../components/ha-more-info-control-style";
import "../components/ha-more-info-state-header";
import { moreInfoControlStyle } from "../components/more-info-control-style";
@customElement("more-info-alarm_control_panel")
class MoreInfoAlarmControlPanel extends LitElement {
@ -24,12 +24,8 @@ class MoreInfoAlarmControlPanel extends LitElement {
if (this.stateObj!.attributes.code_format) {
const response = await showEnterCodeDialogDialog(this, {
codeFormat: this.stateObj!.attributes.code_format,
title: this.hass.localize(
"ui.dialogs.more_info_control.alarm_control_panel.disarm_title"
),
submitText: this.hass.localize(
"ui.dialogs.more_info_control.alarm_control_panel.disarm_action"
),
title: this.hass.localize("ui.card.alarm_control_panel.disarm"),
submitText: this.hass.localize("ui.card.alarm_control_panel.disarm"),
});
if (response == null) {
return;
@ -68,19 +64,17 @@ class MoreInfoAlarmControlPanel extends LitElement {
></ha-svg-icon>
</div>
<ha-outlined-button @click=${this._disarm}>
${this.hass.localize(
"ui.dialogs.more_info_control.alarm_control_panel.disarm_action"
)}
${this.hass.localize("ui.card.alarm_control_panel.disarm")}
<ha-svg-icon slot="icon" .path=${mdiShieldOff}></ha-svg-icon>
</ha-outlined-button>
</div>
`
: html`
<ha-more-info-alarm_control_panel-modes
<ha-state-control-alarm_control_panel-modes
.stateObj=${this.stateObj}
.hass=${this.hass}
>
</ha-more-info-alarm_control_panel-modes>
</ha-state-control-alarm_control_panel-modes>
`}
</div>
<span></span>

View File

@ -35,11 +35,11 @@ import {
} from "../../../data/climate";
import { UNAVAILABLE } from "../../../data/entity";
import { haOscillating } from "../../../data/icons/haOscillating";
import "../../../state-control/climate/ha-state-control-climate-humidity";
import "../../../state-control/climate/ha-state-control-climate-temperature";
import { HomeAssistant } from "../../../types";
import "../components/climate/ha-more-info-climate-humidity";
import "../components/climate/ha-more-info-climate-temperature";
import "../components/ha-more-info-control-select-container";
import { moreInfoControlStyle } from "../components/ha-more-info-control-style";
import { moreInfoControlStyle } from "../components/more-info-control-style";
type MainControl = "temperature" | "humidity";
@ -121,18 +121,18 @@ class MoreInfoClimate extends LitElement {
<div class="controls">
${this._mainControl === "temperature"
? html`
<ha-more-info-climate-temperature
<ha-state-control-climate-temperature
.hass=${this.hass}
.stateObj=${this.stateObj}
></ha-more-info-climate-temperature>
></ha-state-control-climate-temperature>
`
: nothing}
${this._mainControl === "humidity"
? html`
<ha-more-info-climate-humidity
<ha-state-control-climate-humidity
.hass=${this.hass}
.stateObj=${this.stateObj}
></ha-more-info-climate-humidity>
></ha-state-control-climate-humidity>
`
: nothing}
${supportTargetHumidity

View File

@ -17,13 +17,13 @@ import {
CoverEntityFeature,
computeCoverPositionStateDisplay,
} from "../../../data/cover";
import "../../../state-control/cover/ha-state-control-cover-buttons";
import "../../../state-control/cover/ha-state-control-cover-position";
import "../../../state-control/cover/ha-state-control-cover-tilt-position";
import "../../../state-control/cover/ha-state-control-cover-toggle";
import type { HomeAssistant } from "../../../types";
import "../components/cover/ha-more-info-cover-buttons";
import "../components/cover/ha-more-info-cover-position";
import "../components/cover/ha-more-info-cover-tilt-position";
import "../components/cover/ha-more-info-cover-toggle";
import { moreInfoControlStyle } from "../components/ha-more-info-control-style";
import "../components/ha-more-info-state-header";
import { moreInfoControlStyle } from "../components/more-info-control-style";
type Mode = "position" | "button";
@ -111,18 +111,18 @@ class MoreInfoCover extends LitElement {
? html`
${supportsPosition
? html`
<ha-more-info-cover-position
<ha-state-control-cover-position
.stateObj=${this.stateObj}
.hass=${this.hass}
></ha-more-info-cover-position>
></ha-state-control-cover-position>
`
: nothing}
${supportsTiltPosition
? html`
<ha-more-info-cover-tilt-position
<ha-state-control-cover-tilt-position
.stateObj=${this.stateObj}
.hass=${this.hass}
></ha-more-info-cover-tilt-position>
></ha-state-control-cover-tilt-position>
`
: nothing}
`
@ -133,17 +133,17 @@ class MoreInfoCover extends LitElement {
? html`
${supportsOpenCloseWithoutStop
? html`
<ha-more-info-cover-toggle
<ha-state-control-cover-toggle
.stateObj=${this.stateObj}
.hass=${this.hass}
></ha-more-info-cover-toggle>
></ha-state-control-cover-toggle>
`
: supportsOpenClose || supportsTilt
? html`
<ha-more-info-cover-buttons
<ha-state-control-cover-buttons
.stateObj=${this.stateObj}
.hass=${this.hass}
></ha-more-info-cover-buttons>
></ha-state-control-cover-buttons>
`
: nothing}
`

View File

@ -25,12 +25,12 @@ import {
import { forwardHaptic } from "../../../data/haptics";
import { haOscillating } from "../../../data/icons/haOscillating";
import { haOscillatingOff } from "../../../data/icons/haOscillatingOff";
import "../../../state-control/fan/ha-state-control-fan-speed";
import "../../../state-control/ha-state-control-toggle";
import type { HomeAssistant } from "../../../types";
import "../components/fan/ha-more-info-fan-speed";
import "../components/ha-more-info-control-select-container";
import { moreInfoControlStyle } from "../components/ha-more-info-control-style";
import "../components/ha-more-info-state-header";
import "../components/ha-more-info-toggle";
import { moreInfoControlStyle } from "../components/more-info-control-style";
@customElement("more-info-fan")
class MoreInfoFan extends LitElement {
@ -141,19 +141,19 @@ class MoreInfoFan extends LitElement {
<div class="controls">
${supportsSpeed
? html`
<ha-more-info-fan-speed
<ha-state-control-fan-speed
.stateObj=${this.stateObj}
.hass=${this.hass}
>
</ha-more-info-fan-speed>
</ha-state-control-fan-speed>
`
: html`
<ha-more-info-toggle
<ha-state-control-toggle
.stateObj=${this.stateObj}
.hass=${this.hass}
.iconPathOn=${mdiFan}
.iconPathOff=${mdiFanOff}
></ha-more-info-toggle>
></ha-state-control-toggle>
`}
${supportSpeedPercentage
? html`

View File

@ -1,18 +1,18 @@
import { HassEntity } from "home-assistant-js-websocket";
import {
css,
CSSResultGroup,
html,
LitElement,
PropertyValues,
css,
html,
nothing,
} from "lit";
import { property, state } from "lit/decorators";
import { dynamicElement } from "../../../common/dom/dynamic-element-directive";
import { computeGroupDomain, GroupEntity } from "../../../data/group";
import { GroupEntity, computeGroupDomain } from "../../../data/group";
import "../../../state-summary/state-card-content";
import { HomeAssistant } from "../../../types";
import { moreInfoControlStyle } from "../components/ha-more-info-control-style";
import { moreInfoControlStyle } from "../components/more-info-control-style";
import {
domainMoreInfoType,
importMoreInfoControl,

View File

@ -19,10 +19,10 @@ import {
HumidifierEntityFeature,
computeHumidiferModeIcon,
} from "../../../data/humidifier";
import "../../../state-control/humidifier/ha-state-control-humidifier-humidity";
import { HomeAssistant } from "../../../types";
import "../components/ha-more-info-control-select-container";
import { moreInfoControlStyle } from "../components/ha-more-info-control-style";
import "../components/humidifier/ha-more-info-humidifier-humidity";
import { moreInfoControlStyle } from "../components/more-info-control-style";
class MoreInfoHumidifier extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@ -76,10 +76,10 @@ class MoreInfoHumidifier extends LitElement {
</div>
<div class="controls">
<ha-more-info-humidifier-humidity
<ha-state-control-water_heater-temperature
.hass=${this.hass}
.stateObj=${this.stateObj}
></ha-more-info-humidifier-humidity>
></ha-state-control-water_heater-temperature>
</div>
<ha-more-info-control-select-container>

View File

@ -1,12 +1,12 @@
import { mdiPower, mdiPowerOff } from "@mdi/js";
import { HassEntity } from "home-assistant-js-websocket";
import { CSSResultGroup, html, LitElement, nothing } from "lit";
import { CSSResultGroup, LitElement, html, nothing } from "lit";
import { customElement, property } from "lit/decorators";
import "../../../components/ha-attributes";
import "../../../state-control/ha-state-control-toggle";
import type { HomeAssistant } from "../../../types";
import { moreInfoControlStyle } from "../components/ha-more-info-control-style";
import "../components/ha-more-info-state-header";
import "../components/ha-more-info-toggle";
import { moreInfoControlStyle } from "../components/more-info-control-style";
@customElement("more-info-input_boolean")
class MoreInfoInputBoolean extends LitElement {
@ -25,12 +25,12 @@ class MoreInfoInputBoolean extends LitElement {
.stateObj=${this.stateObj}
></ha-more-info-state-header>
<div class="controls">
<ha-more-info-toggle
<ha-state-control-toggle
.stateObj=${this.stateObj}
.hass=${this.hass}
.iconPathOn=${mdiPower}
.iconPathOff=${mdiPowerOff}
></ha-more-info-toggle>
></ha-state-control-toggle>
</div>
<ha-attributes
.hass=${this.hass}

View File

@ -35,16 +35,16 @@ import {
lightSupportsColorMode,
lightSupportsFavoriteColors,
} from "../../../data/light";
import "../../../state-control/ha-state-control-toggle";
import "../../../state-control/light/ha-state-control-light-brightness";
import type { HomeAssistant } from "../../../types";
import "../components/ha-more-info-control-select-container";
import { moreInfoControlStyle } from "../components/ha-more-info-control-style";
import "../components/ha-more-info-state-header";
import "../components/ha-more-info-toggle";
import "../components/lights/ha-favorite-color-button";
import "../components/lights/ha-more-info-light-brightness";
import "../components/lights/ha-more-info-light-favorite-colors";
import "../components/lights/light-color-rgb-picker";
import "../components/lights/light-color-temp-picker";
import { moreInfoControlStyle } from "../components/more-info-control-style";
type MainControl = "brightness" | "color_temp" | "color";
@ -123,23 +123,23 @@ class MoreInfoLight extends LitElement {
<div class="controls">
${!supportsBrightness
? html`
<ha-more-info-toggle
<ha-state-control-toggle
.stateObj=${this.stateObj}
.hass=${this.hass}
.iconPathOn=${mdiLightbulb}
.iconPathOff=${mdiLightbulbOff}
></ha-more-info-toggle>
></ha-state-control-toggle>
`
: nothing}
${supportsColorTemp || supportsColor || supportsBrightness
? html`
${supportsBrightness && this._mainControl === "brightness"
? html`
<ha-more-info-light-brightness
<ha-state-control-light-brightness
.stateObj=${this.stateObj}
.hass=${this.hass}
>
</ha-more-info-light-brightness>
</ha-state-control-light-brightness>
`
: nothing}
${supportsColor && this._mainControl === "color"
@ -180,8 +180,9 @@ class MoreInfoLight extends LitElement {
<ha-icon-button-toggle
.selected=${this._mainControl === "brightness"}
.disabled=${this.stateObj!.state === UNAVAILABLE}
.label=${this.hass.localize(
"ui.dialogs.more_info_control.light.brightness"
.label=${this.hass.formatEntityAttributeName(
this.stateObj,
"brightness"
)}
.control=${"brightness"}
@click=${this._setMainControl}

View File

@ -13,10 +13,10 @@ import {
LockEntityFeature,
callProtectedLockService,
} from "../../../data/lock";
import "../../../state-control/lock/ha-state-control-lock-toggle";
import type { HomeAssistant } from "../../../types";
import { moreInfoControlStyle } from "../components/ha-more-info-control-style";
import "../components/ha-more-info-state-header";
import "../components/lock/ha-more-info-lock-toggle";
import { moreInfoControlStyle } from "../components/more-info-control-style";
@customElement("more-info-lock")
class MoreInfoLock extends LitElement {
@ -69,11 +69,11 @@ class MoreInfoLock extends LitElement {
</div>
`
: html`
<ha-more-info-lock-toggle
<ha-state-control-lock-toggle
.stateObj=${this.stateObj}
.hass=${this.hass}
>
</ha-more-info-lock-toggle>
</ha-state-control-lock-toggle>
`
}
${
@ -84,12 +84,8 @@ class MoreInfoLock extends LitElement {
? html`
<ha-outlined-icon-button
.disabled=${this.stateObj.state === UNAVAILABLE}
.title=${this.hass.localize(
"ui.dialogs.more_info_control.lock.open"
)}
.ariaLabel=${this.hass.localize(
"ui.dialogs.more_info_control.lock.open"
)}
.title=${this.hass.localize("ui.card.lock.open")}
.ariaLabel=${this.hass.localize("ui.card.lock.open")}
@click=${this._open}
>
<ha-svg-icon .path=${mdiDoorOpen}></ha-svg-icon>
@ -99,22 +95,16 @@ class MoreInfoLock extends LitElement {
${isJammed
? html`
<ha-outlined-icon-button
.title=${this.hass.localize(
"ui.dialogs.more_info_control.lock.lock"
)}
.ariaLabel=${this.hass.localize(
"ui.dialogs.more_info_control.lock.lock"
)}
.title=${this.hass.localize("ui.card.lock.lock")}
.ariaLabel=${this.hass.localize("ui.card.lock.lock")}
@click=${this._lock}
>
<ha-svg-icon .path=${mdiLock}></ha-svg-icon>
</ha-outlined-icon-button>
<ha-outlined-icon-button
.title=${this.hass.localize(
"ui.dialogs.more_info_control.lock.unlock"
)}
.title=${this.hass.localize("ui.card.lock.unlock")}
.ariaLabel=${this.hass.localize(
"ui.dialogs.more_info_control.lock.unlock"
"ui.card.lock.unlock"
)}
@click=${this._unlock}
>

View File

@ -1,12 +1,12 @@
import { mdiVolumeHigh, mdiVolumeOff } from "@mdi/js";
import { HassEntity } from "home-assistant-js-websocket";
import { CSSResultGroup, html, LitElement, nothing } from "lit";
import { CSSResultGroup, LitElement, html, nothing } from "lit";
import { customElement, property } from "lit/decorators";
import "../../../components/ha-attributes";
import "../../../state-control/ha-state-control-toggle";
import type { HomeAssistant } from "../../../types";
import { moreInfoControlStyle } from "../components/ha-more-info-control-style";
import "../components/ha-more-info-state-header";
import "../components/ha-more-info-toggle";
import { moreInfoControlStyle } from "../components/more-info-control-style";
@customElement("more-info-siren")
class MoreInfoSiren extends LitElement {
@ -25,12 +25,12 @@ class MoreInfoSiren extends LitElement {
.stateObj=${this.stateObj}
></ha-more-info-state-header>
<div class="controls">
<ha-more-info-toggle
<ha-state-control-toggle
.stateObj=${this.stateObj}
.hass=${this.hass}
.iconPathOn=${mdiVolumeHigh}
.iconPathOff=${mdiVolumeOff}
></ha-more-info-toggle>
></ha-state-control-toggle>
</div>
<ha-attributes
.hass=${this.hass}

View File

@ -1,12 +1,12 @@
import { mdiPower, mdiPowerOff } from "@mdi/js";
import { HassEntity } from "home-assistant-js-websocket";
import { CSSResultGroup, html, LitElement, nothing } from "lit";
import { CSSResultGroup, LitElement, html, nothing } from "lit";
import { customElement, property } from "lit/decorators";
import "../../../components/ha-attributes";
import "../../../state-control/ha-state-control-toggle";
import type { HomeAssistant } from "../../../types";
import { moreInfoControlStyle } from "../components/ha-more-info-control-style";
import "../components/ha-more-info-state-header";
import "../components/ha-more-info-toggle";
import { moreInfoControlStyle } from "../components/more-info-control-style";
@customElement("more-info-switch")
class MoreInfoSwitch extends LitElement {
@ -25,12 +25,12 @@ class MoreInfoSwitch extends LitElement {
.stateObj=${this.stateObj}
></ha-more-info-state-header>
<div class="controls">
<ha-more-info-toggle
<ha-state-control-toggle
.stateObj=${this.stateObj}
.hass=${this.hass}
.iconPathOn=${mdiPower}
.iconPathOff=${mdiPowerOff}
></ha-more-info-toggle>
></ha-state-control-toggle>
</div>
<ha-attributes
.hass=${this.hass}

View File

@ -12,10 +12,10 @@ import {
compareWaterHeaterOperationMode,
computeOperationModeIcon,
} from "../../../data/water_heater";
import "../../../state-control/water_heater/ha-state-control-water_heater-temperature";
import { HomeAssistant } from "../../../types";
import "../components/ha-more-info-control-select-container";
import { moreInfoControlStyle } from "../components/ha-more-info-control-style";
import "../components/water_heater/ha-more-info-water_heater-temperature";
import { moreInfoControlStyle } from "../components/more-info-control-style";
@customElement("more-info-water_heater")
class MoreInfoWaterHeater extends LitElement {
@ -64,10 +64,10 @@ class MoreInfoWaterHeater extends LitElement {
: nothing}
</div>
<div class="controls">
<ha-more-info-water_heater-temperature
<ha-state-control-water_heater-temperature
.hass=${this.hass}
.stateObj=${this.stateObj}
></ha-more-info-water_heater-temperature>
></ha-state-control-water_heater-temperature>
</div>
<ha-more-info-control-select-container>
${supportOperationMode && stateObj.attributes.operation_list

View File

@ -134,14 +134,10 @@ class HuiAlarmModeCardFeature
const response = await showEnterCodeDialogDialog(this, {
codeFormat: this.stateObj!.attributes.code_format,
title: this.hass!.localize(
`ui.dialogs.more_info_control.alarm_control_panel.${
disarm ? "disarm_title" : "arm_title"
}`
`ui.card.alarm_control_panel.${disarm ? "disarm" : "arm"}`
),
submitText: this.hass!.localize(
`ui.dialogs.more_info_control.alarm_control_panel.${
disarm ? "disarm_action" : "arm_action"
}`
`ui.card.alarm_control_panel.${disarm ? "disarm" : "arm"}`
),
});
if (response == null) {
@ -172,9 +168,7 @@ class HuiAlarmModeCardFeature
const options = modes.map<ControlSelectOption>((mode) => ({
value: mode,
label: this.hass!.localize(
`ui.dialogs.more_info_control.alarm_control_panel.modes.${mode}`
),
label: this.hass!.localize(`ui.card.alarm_control_panel.modes.${mode}`),
path: ALARM_MODES[mode].path,
}));
@ -182,9 +176,7 @@ class HuiAlarmModeCardFeature
return html`
<ha-control-button-group>
<ha-control-button
.label=${this.hass.localize(
"ui.dialogs.more_info_control.alarm_control_panel.disarm_action"
)}
.label=${this.hass.localize("ui.card.alarm_control_panel.disarm")}
@click=${this._disarm}
>
<ha-svg-icon .path=${mdiShieldOff}></ha-svg-icon>
@ -200,7 +192,7 @@ class HuiAlarmModeCardFeature
@value-changed=${this._valueChanged}
hide-label
.ariaLabel=${this.hass.localize(
"ui.dialogs.more_info_control.alarm_control_panel.modes_label"
"ui.card.alarm_control_panel.modes_label"
)}
style=${styleMap({
"--control-select-color": color,

View File

@ -89,9 +89,7 @@ class HuiCoverOpenCloseCardFeature
${supportsFeature(this.stateObj, CoverEntityFeature.OPEN)
? html`
<ha-control-button
.label=${this.hass.localize(
"ui.dialogs.more_info_control.cover.open_cover"
)}
.label=${this.hass.localize("ui.card.cover.open_cover")}
@click=${this._onOpenTap}
.disabled=${!canOpen(this.stateObj)}
>
@ -104,9 +102,7 @@ class HuiCoverOpenCloseCardFeature
${supportsFeature(this.stateObj, CoverEntityFeature.STOP)
? html`
<ha-control-button
.label=${this.hass.localize(
"ui.dialogs.more_info_control.cover.stop_cover"
)}
.label=${this.hass.localize("ui.card.cover.stop_cover")}
@click=${this._onStopTap}
.disabled=${!canStop(this.stateObj)}
>
@ -117,9 +113,7 @@ class HuiCoverOpenCloseCardFeature
${supportsFeature(this.stateObj, CoverEntityFeature.CLOSE)
? html`
<ha-control-button
.label=${this.hass.localize(
"ui.dialogs.more_info_control.cover.close_cover"
)}
.label=${this.hass.localize("ui.card.cover.close_cover")}
@click=${this._onCloseTap}
.disabled=${!canClose(this.stateObj)}
>

View File

@ -85,9 +85,7 @@ class HuiCoverTiltCardFeature
${supportsFeature(this.stateObj, CoverEntityFeature.OPEN_TILT)
? html`
<ha-control-button
.label=${this.hass.localize(
"ui.dialogs.more_info_control.cover.open_tilt_cover"
)}
.label=${this.hass.localize("ui.card.cover.open_tilt_cover")}
@click=${this._onOpenTap}
.disabled=${!canOpenTilt(this.stateObj)}
>
@ -98,9 +96,7 @@ class HuiCoverTiltCardFeature
${supportsFeature(this.stateObj, CoverEntityFeature.STOP_TILT)
? html`
<ha-control-button
.label=${this.hass.localize(
"ui.dialogs.more_info_control.cover.stop_cover"
)}
.label=${this.hass.localize("ui.card.cover.stop_cover")}
@click=${this._onStopTap}
.disabled=${!canStopTilt(this.stateObj)}
>
@ -111,9 +107,7 @@ class HuiCoverTiltCardFeature
${supportsFeature(this.stateObj, CoverEntityFeature.CLOSE_TILT)
? html`
<ha-control-button
.label=${this.hass.localize(
"ui.dialogs.more_info_control.cover.close_tilt_cover"
)}
.label=${this.hass.localize("ui.card.cover.close_tilt_cover")}
@click=${this._onCloseTap}
.disabled=${!canCloseTilt(this.stateObj)}
>

View File

@ -9,11 +9,11 @@ import { stateColorCss } from "../../../common/entity/state_color";
import { supportsFeature } from "../../../common/entity/supports-feature";
import { CoverEntity, CoverEntityFeature } from "../../../data/cover";
import { UNAVAILABLE } from "../../../data/entity";
import { generateTiltSliderTrackBackgroundGradient } from "../../../dialogs/more-info/components/cover/ha-more-info-cover-tilt-position";
import { DOMAIN_ATTRIBUTES_UNITS } from "../../../data/entity_attributes";
import { generateTiltSliderTrackBackgroundGradient } from "../../../state-control/cover/ha-state-control-cover-tilt-position";
import { HomeAssistant } from "../../../types";
import { LovelaceCardFeature } from "../types";
import { CoverTiltPositionCardFeatureConfig } from "./types";
import { DOMAIN_ATTRIBUTES_UNITS } from "../../../data/entity_attributes";
const GRADIENT = generateTiltSliderTrackBackgroundGradient();

View File

@ -57,10 +57,7 @@ class HuiFanSpeedCardFeature extends LitElement implements LovelaceCardFeature {
if (speed === "on" || speed === "off") {
return this.hass!.formatEntityState(this.stateObj!, speed);
}
return (
this.hass!.localize(`ui.dialogs.more_info_control.fan.speed.${speed}`) ||
speed
);
return this.hass!.localize(`ui.card.fan.speed.${speed}`) || speed;
}
protected render() {

View File

@ -16,7 +16,7 @@ import { stateColorCss } from "../../../common/entity/state_color";
import "../../../components/ha-card";
import "../../../components/ha-icon-button";
import { HumidifierEntity } from "../../../data/humidifier";
import "../../../dialogs/more-info/components/humidifier/ha-more-info-humidifier-humidity";
import "../../../state-control/humidifier/ha-state-control-humidifier-humidity";
import { HomeAssistant } from "../../../types";
import "../card-features/hui-card-features";
import { findEntities } from "../common/find-entities";
@ -126,11 +126,11 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
return html`
<ha-card>
<p class="title">${name}</p>
<ha-more-info-humidifier-humidity
<ha-state-control-humidifier-humidity
show-current
.hass=${this.hass}
.stateObj=${stateObj}
></ha-more-info-humidifier-humidity>
></ha-state-control-humidifier-humidity>
<ha-icon-button
class="more-info"
.label=${this.hass!.localize(
@ -180,7 +180,7 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
box-sizing: border-box;
}
ha-more-info-humidifier-humidity {
ha-state-control-humidifier-humidity {
width: 100%;
max-width: 344px; /* 12px + 12px + 320px */
padding: 0 12px 12px 12px;

View File

@ -16,7 +16,7 @@ import { stateColorCss } from "../../../common/entity/state_color";
import "../../../components/ha-card";
import "../../../components/ha-icon-button";
import { ClimateEntity } from "../../../data/climate";
import "../../../dialogs/more-info/components/climate/ha-more-info-climate-temperature";
import "../../../state-control/climate/ha-state-control-climate-temperature";
import { HomeAssistant } from "../../../types";
import { findEntities } from "../common/find-entities";
import { createEntityNotFoundWarning } from "../components/hui-warning";
@ -118,11 +118,11 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
return html`
<ha-card>
<p class="title">${name}</p>
<ha-more-info-climate-temperature
<ha-state-control-climate-temperature
show-current
.hass=${this.hass}
.stateObj=${stateObj}
></ha-more-info-climate-temperature>
></ha-state-control-climate-temperature>
<ha-icon-button
class="more-info"
.label=${this.hass!.localize(
@ -172,7 +172,7 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
box-sizing: border-box;
}
ha-more-info-climate-temperature {
ha-state-control-climate-temperature {
width: 100%;
max-width: 344px; /* 12px + 12px + 320px */
padding: 0 12px 12px 12px;

View File

@ -2,22 +2,22 @@ import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
import { customElement, property, state } from "lit/decorators";
import { styleMap } from "lit/directives/style-map";
import memoizeOne from "memoize-one";
import { stateColorCss } from "../../../../common/entity/state_color";
import { supportsFeature } from "../../../../common/entity/supports-feature";
import "../../../../components/ha-control-select";
import type { ControlSelectOption } from "../../../../components/ha-control-select";
import "../../../../components/ha-control-slider";
import { stateColorCss } from "../../common/entity/state_color";
import { supportsFeature } from "../../common/entity/supports-feature";
import "../../components/ha-control-select";
import type { ControlSelectOption } from "../../components/ha-control-select";
import "../../components/ha-control-slider";
import {
ALARM_MODES,
AlarmControlPanelEntity,
AlarmMode,
ALARM_MODES,
} from "../../../../data/alarm_control_panel";
import { UNAVAILABLE } from "../../../../data/entity";
import { HomeAssistant } from "../../../../types";
import { showEnterCodeDialogDialog } from "../../../enter-code/show-enter-code-dialog";
} from "../../data/alarm_control_panel";
import { UNAVAILABLE } from "../../data/entity";
import { showEnterCodeDialogDialog } from "../../dialogs/enter-code/show-enter-code-dialog";
import { HomeAssistant } from "../../types";
@customElement("ha-more-info-alarm_control_panel-modes")
export class HaMoreInfoAlarmControlPanelModes extends LitElement {
@customElement("ha-state-control-alarm_control_panel-modes")
export class HaStateControlAlarmControlPanelModes extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@property({ attribute: false }) public stateObj!: AlarmControlPanelEntity;
@ -59,14 +59,10 @@ export class HaMoreInfoAlarmControlPanelModes extends LitElement {
const response = await showEnterCodeDialogDialog(this, {
codeFormat: this.stateObj!.attributes.code_format,
title: this.hass!.localize(
`ui.dialogs.more_info_control.alarm_control_panel.${
disarm ? "disarm_title" : "arm_title"
}`
`ui.card.alarm_control_panel.${disarm ? "disarm" : "arm"}`
),
submitText: this.hass!.localize(
`ui.dialogs.more_info_control.alarm_control_panel.${
disarm ? "disarm_action" : "arm_action"
}`
`ui.card.alarm_control_panel.${disarm ? "disarmn" : "arm"}`
),
});
if (response == null) {
@ -103,9 +99,7 @@ export class HaMoreInfoAlarmControlPanelModes extends LitElement {
const options = modes.map<ControlSelectOption>((mode) => ({
value: mode,
label: this.hass.localize(
`ui.dialogs.more_info_control.alarm_control_panel.modes.${mode}`
),
label: this.hass.localize(`ui.card.alarm_control_panel.modes.${mode}`),
path: ALARM_MODES[mode].path,
}));
@ -116,7 +110,7 @@ export class HaMoreInfoAlarmControlPanelModes extends LitElement {
.value=${this._currentMode}
@value-changed=${this._valueChanged}
.ariaLabel=${this.hass.localize(
"ui.dialogs.more_info_control.alarm_control_panel.modes_label"
"ui.card.alarm_control_panel.modes_label"
)}
style=${styleMap({
"--control-select-color": color,
@ -146,6 +140,6 @@ export class HaMoreInfoAlarmControlPanelModes extends LitElement {
declare global {
interface HTMLElementTagNameMap {
"ha-more-info-alarm_control_panel-modes": HaMoreInfoAlarmControlPanelModes;
"ha-state-control-alarm_control_panel-modes": HaStateControlAlarmControlPanelModes;
}
}

View File

@ -2,23 +2,23 @@ import { mdiMinus, mdiPlus, mdiWaterPercent } from "@mdi/js";
import { CSSResultGroup, LitElement, PropertyValues, html } from "lit";
import { customElement, property, state } from "lit/decorators";
import { styleMap } from "lit/directives/style-map";
import { stateActive } from "../../../../common/entity/state_active";
import { domainStateColorProperties } from "../../../../common/entity/state_color";
import { supportsFeature } from "../../../../common/entity/supports-feature";
import { clamp } from "../../../../common/number/clamp";
import { debounce } from "../../../../common/util/debounce";
import "../../../../components/ha-big-number";
import "../../../../components/ha-control-circular-slider";
import "../../../../components/ha-outlined-icon-button";
import "../../../../components/ha-svg-icon";
import { ClimateEntity, ClimateEntityFeature } from "../../../../data/climate";
import { UNAVAILABLE } from "../../../../data/entity";
import { computeCssVariable } from "../../../../resources/css-variables";
import { HomeAssistant } from "../../../../types";
import { moreInfoControlCircularSliderStyle } from "../ha-more-info-control-circular-slider-style";
import { stateActive } from "../../common/entity/state_active";
import { domainStateColorProperties } from "../../common/entity/state_color";
import { supportsFeature } from "../../common/entity/supports-feature";
import { clamp } from "../../common/number/clamp";
import { debounce } from "../../common/util/debounce";
import "../../components/ha-big-number";
import "../../components/ha-control-circular-slider";
import "../../components/ha-outlined-icon-button";
import "../../components/ha-svg-icon";
import { ClimateEntity, ClimateEntityFeature } from "../../data/climate";
import { UNAVAILABLE } from "../../data/entity";
import { computeCssVariable } from "../../resources/css-variables";
import { HomeAssistant } from "../../types";
import { stateControlCircularSliderStyle } from "../state-control-circular-slider-style";
@customElement("ha-more-info-climate-humidity")
export class HaMoreInfoClimateHumidity extends LitElement {
@customElement("ha-state-control-climate-humidity")
export class HaStateControlClimateHumidity extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@property({ attribute: false }) public stateObj!: ClimateEntity;
@ -224,12 +224,12 @@ export class HaMoreInfoClimateHumidity extends LitElement {
}
static get styles(): CSSResultGroup {
return moreInfoControlCircularSliderStyle;
return stateControlCircularSliderStyle;
}
}
declare global {
interface HTMLElementTagNameMap {
"ha-more-info-climate-humidity": HaMoreInfoClimateHumidity;
"ha-state-control-climate-humidity": HaStateControlClimateHumidity;
}
}

View File

@ -3,26 +3,26 @@ import { CSSResultGroup, LitElement, PropertyValues, css, html } from "lit";
import { customElement, property, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import { styleMap } from "lit/directives/style-map";
import { UNIT_F } from "../../../../common/const";
import { stateActive } from "../../../../common/entity/state_active";
import { stateColorCss } from "../../../../common/entity/state_color";
import { supportsFeature } from "../../../../common/entity/supports-feature";
import { clamp } from "../../../../common/number/clamp";
import { debounce } from "../../../../common/util/debounce";
import "../../../../components/ha-big-number";
import "../../../../components/ha-control-circular-slider";
import type { ControlCircularSliderMode } from "../../../../components/ha-control-circular-slider";
import "../../../../components/ha-outlined-icon-button";
import "../../../../components/ha-svg-icon";
import { UNIT_F } from "../../common/const";
import { stateActive } from "../../common/entity/state_active";
import { stateColorCss } from "../../common/entity/state_color";
import { supportsFeature } from "../../common/entity/supports-feature";
import { clamp } from "../../common/number/clamp";
import { debounce } from "../../common/util/debounce";
import "../../components/ha-big-number";
import "../../components/ha-control-circular-slider";
import type { ControlCircularSliderMode } from "../../components/ha-control-circular-slider";
import "../../components/ha-outlined-icon-button";
import "../../components/ha-svg-icon";
import {
CLIMATE_HVAC_ACTION_TO_MODE,
ClimateEntity,
ClimateEntityFeature,
HvacMode,
} from "../../../../data/climate";
import { UNAVAILABLE } from "../../../../data/entity";
import { HomeAssistant } from "../../../../types";
import { moreInfoControlCircularSliderStyle } from "../ha-more-info-control-circular-slider-style";
} from "../../data/climate";
import { UNAVAILABLE } from "../../data/entity";
import { HomeAssistant } from "../../types";
import { stateControlCircularSliderStyle } from "../state-control-circular-slider-style";
type Target = "value" | "low" | "high";
@ -36,8 +36,8 @@ const SLIDER_MODES: Record<HvacMode, ControlCircularSliderMode> = {
off: "full",
};
@customElement("ha-more-info-climate-temperature")
export class HaMoreInfoClimateTemperature extends LitElement {
@customElement("ha-state-control-climate-temperature")
export class HaStateControlClimateTemperature extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@property({ attribute: false }) public stateObj!: ClimateEntity;
@ -422,7 +422,7 @@ export class HaMoreInfoClimateTemperature extends LitElement {
static get styles(): CSSResultGroup {
return [
moreInfoControlCircularSliderStyle,
stateControlCircularSliderStyle,
css`
/* Dual target */
.dual {
@ -477,6 +477,6 @@ export class HaMoreInfoClimateTemperature extends LitElement {
declare global {
interface HTMLElementTagNameMap {
"ha-more-info-climate-temperature": HaMoreInfoClimateTemperature;
"ha-state-control-climate-temperature": HaStateControlClimateTemperature;
}
}

View File

@ -1,11 +1,11 @@
import { mdiArrowBottomLeft, mdiArrowTopRight, mdiStop } from "@mdi/js";
import {
css,
CSSResultGroup,
html,
LitElement,
nothing,
TemplateResult,
css,
html,
nothing,
} from "lit";
import { customElement, property } from "lit/decorators";
import { repeat } from "lit/directives/repeat";
@ -13,23 +13,23 @@ import memoizeOne from "memoize-one";
import {
computeCloseIcon,
computeOpenIcon,
} from "../../../../common/entity/cover_icon";
import { supportsFeature } from "../../../../common/entity/supports-feature";
import "../../../../components/ha-control-button";
import "../../../../components/ha-control-button-group";
import "../../../../components/ha-control-slider";
import "../../../../components/ha-svg-icon";
} from "../../common/entity/cover_icon";
import { supportsFeature } from "../../common/entity/supports-feature";
import "../../components/ha-control-button";
import "../../components/ha-control-button-group";
import "../../components/ha-control-slider";
import "../../components/ha-svg-icon";
import {
CoverEntity,
CoverEntityFeature,
canClose,
canCloseTilt,
canOpen,
canOpenTilt,
canStop,
canStopTilt,
CoverEntity,
CoverEntityFeature,
} from "../../../../data/cover";
import { HomeAssistant } from "../../../../types";
} from "../../data/cover";
import { HomeAssistant } from "../../types";
type CoverButton =
| "open"
@ -107,8 +107,8 @@ export const getCoverLayout = memoizeOne(
}
);
@customElement("ha-more-info-cover-buttons")
export class HaMoreInfoCoverButtons extends LitElement {
@customElement("ha-state-control-cover-buttons")
export class HaStateControlCoverButtons extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@property({ attribute: false }) public stateObj!: CoverEntity;
@ -159,9 +159,7 @@ export class HaMoreInfoCoverButtons extends LitElement {
if (button === "open") {
return html`
<ha-control-button
.label=${this.hass.localize(
"ui.dialogs.more_info_control.cover.open_cover"
)}
.label=${this.hass.localize("ui.card.cover.open_cover")}
@click=${this._onOpenTap}
.disabled=${!canOpen(this.stateObj)}
data-button="open"
@ -173,9 +171,7 @@ export class HaMoreInfoCoverButtons extends LitElement {
if (button === "close") {
return html`
<ha-control-button
.label=${this.hass.localize(
"ui.dialogs.more_info_control.cover.close_cover"
)}
.label=${this.hass.localize("ui.card.cover.close_cover")}
@click=${this._onCloseTap}
.disabled=${!canClose(this.stateObj)}
data-button="close"
@ -187,9 +183,7 @@ export class HaMoreInfoCoverButtons extends LitElement {
if (button === "stop") {
return html`
<ha-control-button
.label=${this.hass.localize(
"ui.dialogs.more_info_control.cover.stop_cover"
)}
.label=${this.hass.localize("ui.card.cover.stop_cover")}
@click=${this._onStopTap}
.disabled=${!canStop(this.stateObj) && !canStopTilt(this.stateObj)}
data-button="stop"
@ -201,9 +195,7 @@ export class HaMoreInfoCoverButtons extends LitElement {
if (button === "open-tilt") {
return html`
<ha-control-button
.label=${this.hass.localize(
"ui.dialogs.more_info_control.cover.open_tilt_cover"
)}
.label=${this.hass.localize("ui.card.cover.open_tilt_cover")}
@click=${this._onOpenTiltTap}
.disabled=${!canOpenTilt(this.stateObj)}
data-button="open-tilt"
@ -215,9 +207,7 @@ export class HaMoreInfoCoverButtons extends LitElement {
if (button === "close-tilt") {
return html`
<ha-control-button
.label=${this.hass.localize(
"ui.dialogs.more_info_control.cover.close_tilt_cover"
)}
.label=${this.hass.localize("ui.card.cover.close_tilt_cover")}
@click=${this._onCloseTiltTap}
.disabled=${!canCloseTilt(this.stateObj)}
data-button="close-tilt"
@ -306,6 +296,6 @@ export class HaMoreInfoCoverButtons extends LitElement {
declare global {
interface HTMLElementTagNameMap {
"ha-more-info-cover-buttons": HaMoreInfoCoverButtons;
"ha-state-control-cover-buttons": HaStateControlCoverButtons;
}
}

View File

@ -1,16 +1,16 @@
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import { styleMap } from "lit/directives/style-map";
import { computeAttributeNameDisplay } from "../../../../common/entity/compute_attribute_display";
import { stateColorCss } from "../../../../common/entity/state_color";
import "../../../../components/ha-control-slider";
import { CoverEntity } from "../../../../data/cover";
import { UNAVAILABLE } from "../../../../data/entity";
import { DOMAIN_ATTRIBUTES_UNITS } from "../../../../data/entity_attributes";
import { HomeAssistant } from "../../../../types";
import { computeAttributeNameDisplay } from "../../common/entity/compute_attribute_display";
import { stateColorCss } from "../../common/entity/state_color";
import "../../components/ha-control-slider";
import { CoverEntity } from "../../data/cover";
import { UNAVAILABLE } from "../../data/entity";
import { DOMAIN_ATTRIBUTES_UNITS } from "../../data/entity_attributes";
import { HomeAssistant } from "../../types";
@customElement("ha-more-info-cover-position")
export class HaMoreInfoCoverPosition extends LitElement {
@customElement("ha-state-control-cover-position")
export class HaStateControlCoverPosition extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@property({ attribute: false }) public stateObj!: CoverEntity;
@ -87,6 +87,6 @@ export class HaMoreInfoCoverPosition extends LitElement {
declare global {
interface HTMLElementTagNameMap {
"ha-more-info-cover-position": HaMoreInfoCoverPosition;
"ha-state-control-cover-position": HaStateControlCoverPosition;
}
}

View File

@ -8,13 +8,13 @@ import {
} from "lit";
import { customElement, property, state } from "lit/decorators";
import { styleMap } from "lit/directives/style-map";
import { computeAttributeNameDisplay } from "../../../../common/entity/compute_attribute_display";
import { stateColorCss } from "../../../../common/entity/state_color";
import "../../../../components/ha-control-slider";
import { CoverEntity } from "../../../../data/cover";
import { UNAVAILABLE } from "../../../../data/entity";
import { DOMAIN_ATTRIBUTES_UNITS } from "../../../../data/entity_attributes";
import { HomeAssistant } from "../../../../types";
import { computeAttributeNameDisplay } from "../../common/entity/compute_attribute_display";
import { stateColorCss } from "../../common/entity/state_color";
import "../../components/ha-control-slider";
import { CoverEntity } from "../../data/cover";
import { UNAVAILABLE } from "../../data/entity";
import { DOMAIN_ATTRIBUTES_UNITS } from "../../data/entity_attributes";
import { HomeAssistant } from "../../types";
export function generateTiltSliderTrackBackgroundGradient() {
const count = 24;
@ -45,8 +45,8 @@ export function generateTiltSliderTrackBackgroundGradient() {
const GRADIENT = generateTiltSliderTrackBackgroundGradient();
@customElement("ha-more-info-cover-tilt-position")
export class HaMoreInfoCoverTiltPosition extends LitElement {
@customElement("ha-state-control-cover-tilt-position")
export class HaStateControlInfoCoverTiltPosition extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@property({ attribute: false }) public stateObj!: CoverEntity;
@ -128,6 +128,6 @@ export class HaMoreInfoCoverTiltPosition extends LitElement {
declare global {
interface HTMLElementTagNameMap {
"ha-more-info-cover-tilt-position": HaMoreInfoCoverTiltPosition;
"ha-state-control-cover-tilt-position": HaStateControlInfoCoverTiltPosition;
}
}

View File

@ -3,16 +3,16 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import { styleMap } from "lit/directives/style-map";
import { domainIcon } from "../../../../common/entity/domain_icon";
import { stateColorCss } from "../../../../common/entity/state_color";
import "../../../../components/ha-control-button";
import "../../../../components/ha-control-switch";
import { UNAVAILABLE, UNKNOWN } from "../../../../data/entity";
import { forwardHaptic } from "../../../../data/haptics";
import { HomeAssistant } from "../../../../types";
import { domainIcon } from "../../common/entity/domain_icon";
import { stateColorCss } from "../../common/entity/state_color";
import "../../components/ha-control-button";
import "../../components/ha-control-switch";
import { UNAVAILABLE, UNKNOWN } from "../../data/entity";
import { forwardHaptic } from "../../data/haptics";
import { HomeAssistant } from "../../types";
@customElement("ha-more-info-cover-toggle")
export class HaMoreInfoCoverToggle extends LitElement {
@customElement("ha-state-control-cover-toggle")
export class HaStateControlCoverToggle extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@property({ attribute: false }) public stateObj!: HassEntity;
@ -67,9 +67,7 @@ export class HaMoreInfoCoverToggle extends LitElement {
return html`
<div class="buttons">
<ha-control-button
.label=${this.hass.localize(
"ui.dialogs.more_info_control.cover.open_cover"
)}
.label=${this.hass.localize("ui.card.cover.open_cover")}
@click=${this._turnOn}
.disabled=${this.stateObj.state === UNAVAILABLE}
class=${classMap({
@ -84,9 +82,7 @@ export class HaMoreInfoCoverToggle extends LitElement {
></ha-svg-icon>
</ha-control-button>
<ha-control-button
.label=${this.hass.localize(
"ui.dialogs.more_info_control.cover.close_cover"
)}
.label=${this.hass.localize("ui.card.cover.close_cover")}
@click=${this._turnOff}
.disabled=${this.stateObj.state === UNAVAILABLE}
class=${classMap({
@ -112,7 +108,9 @@ export class HaMoreInfoCoverToggle extends LitElement {
reversed
.checked=${isOn}
@change=${this._valueChanged}
.ariaLabel=${this.hass.localize("ui.dialogs.more_info_control.toggle")}
.ariaLabel=${isOn
? this.hass.localize("ui.card.cover.close_cover")
: this.hass.localize("ui.card.cover.open_cover")}
style=${styleMap({
"--control-switch-on-color": onColor,
"--control-switch-off-color": offColor,
@ -164,6 +162,6 @@ export class HaMoreInfoCoverToggle extends LitElement {
declare global {
interface HTMLElementTagNameMap {
"ha-more-info-cover-toggle": HaMoreInfoCoverToggle;
"ha-state-control-cover-toggle": HaStateControlCoverToggle;
}
}

View File

@ -1,14 +1,14 @@
import { css, CSSResultGroup, html, LitElement } from "lit";
import { customElement, property, state } from "lit/decorators";
import { styleMap } from "lit/directives/style-map";
import { computeAttributeNameDisplay } from "../../../../common/entity/compute_attribute_display";
import { stateActive } from "../../../../common/entity/state_active";
import { stateColorCss } from "../../../../common/entity/state_color";
import "../../../../components/ha-control-select";
import type { ControlSelectOption } from "../../../../components/ha-control-select";
import "../../../../components/ha-control-slider";
import { UNAVAILABLE } from "../../../../data/entity";
import { DOMAIN_ATTRIBUTES_UNITS } from "../../../../data/entity_attributes";
import { computeAttributeNameDisplay } from "../../common/entity/compute_attribute_display";
import { stateActive } from "../../common/entity/state_active";
import { stateColorCss } from "../../common/entity/state_color";
import "../../components/ha-control-select";
import type { ControlSelectOption } from "../../components/ha-control-select";
import "../../components/ha-control-slider";
import { UNAVAILABLE } from "../../data/entity";
import { DOMAIN_ATTRIBUTES_UNITS } from "../../data/entity_attributes";
import {
computeFanSpeedCount,
computeFanSpeedIcon,
@ -18,11 +18,11 @@ import {
fanPercentageToSpeed,
FanSpeed,
fanSpeedToPercentage,
} from "../../../../data/fan";
import { HomeAssistant } from "../../../../types";
} from "../../data/fan";
import { HomeAssistant } from "../../types";
@customElement("ha-more-info-fan-speed")
export class HaMoreInfoFanSpeed extends LitElement {
@customElement("ha-state-control-fan-speed")
export class HaStateControlFanSpeed extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@property({ attribute: false }) public stateObj!: FanEntity;
@ -70,10 +70,7 @@ export class HaMoreInfoFanSpeed extends LitElement {
if (speed === "on" || speed === "off") {
return this.hass.formatEntityState(this.stateObj, speed);
}
return (
this.hass.localize(`ui.dialogs.more_info_control.fan.speed.${speed}`) ||
speed
);
return this.hass.localize(`ui.card.fan.speed.${speed}`) || speed;
}
protected render() {
@ -167,6 +164,6 @@ export class HaMoreInfoFanSpeed extends LitElement {
declare global {
interface HTMLElementTagNameMap {
"ha-more-info-fan-speed": HaMoreInfoFanSpeed;
"ha-state-control-fan-speed": HaStateControlFanSpeed;
}
}

View File

@ -1,20 +1,20 @@
import { mdiFlash, mdiFlashOff } from "@mdi/js";
import { HassEntity } from "home-assistant-js-websocket";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { CSSResultGroup, LitElement, TemplateResult, css, html } from "lit";
import { customElement, property } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import { styleMap } from "lit/directives/style-map";
import { computeDomain } from "../../../common/entity/compute_domain";
import { stateActive } from "../../../common/entity/state_active";
import { stateColorCss } from "../../../common/entity/state_color";
import "../../../components/ha-control-button";
import "../../../components/ha-control-switch";
import { UNAVAILABLE, UNKNOWN } from "../../../data/entity";
import { forwardHaptic } from "../../../data/haptics";
import { HomeAssistant } from "../../../types";
import { computeDomain } from "../common/entity/compute_domain";
import { stateActive } from "../common/entity/state_active";
import { stateColorCss } from "../common/entity/state_color";
import "../components/ha-control-button";
import "../components/ha-control-switch";
import { UNAVAILABLE, UNKNOWN } from "../data/entity";
import { forwardHaptic } from "../data/haptics";
import { HomeAssistant } from "../types";
@customElement("ha-more-info-toggle")
export class HaMoreInfoToggle extends LitElement {
@customElement("ha-state-control-toggle")
export class HaStateControlToggle extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@property({ attribute: false }) public stateObj!: HassEntity;
@ -77,7 +77,7 @@ export class HaMoreInfoToggle extends LitElement {
return html`
<div class="buttons">
<ha-control-button
.label=${this.hass.localize("ui.dialogs.more_info_control.turn_on")}
.label=${this.hass.localize("ui.card.common.turn_on")}
@click=${this._turnOn}
.disabled=${this.stateObj.state === UNAVAILABLE}
class=${classMap({
@ -90,9 +90,7 @@ export class HaMoreInfoToggle extends LitElement {
<ha-svg-icon .path=${this.iconPathOn || mdiFlash}></ha-svg-icon>
</ha-control-button>
<ha-control-button
.label=${this.hass.localize(
"ui.dialogs.more_info_control.turn_off"
)}
.label=${this.hass.localize("ui.card.common.turn_off")}
@click=${this._turnOff}
.disabled=${this.stateObj.state === UNAVAILABLE}
class=${classMap({
@ -117,7 +115,7 @@ export class HaMoreInfoToggle extends LitElement {
.checked=${isOn}
.showHandle=${stateActive(this.stateObj)}
@change=${this._valueChanged}
.ariaLabel=${this.hass.localize("ui.dialogs.more_info_control.toggle")}
.ariaLabel=${this.hass.localize("ui.card.common.toggle")}
style=${styleMap({
"--control-switch-on-color": onColor,
"--control-switch-off-color": offColor,
@ -169,6 +167,6 @@ export class HaMoreInfoToggle extends LitElement {
declare global {
interface HTMLElementTagNameMap {
"ha-more-info-toggle": HaMoreInfoToggle;
"ha-state-control-toggle": HaStateControlToggle;
}
}

View File

@ -2,25 +2,25 @@ import { mdiMinus, mdiPlus, mdiWaterPercent } from "@mdi/js";
import { CSSResultGroup, LitElement, PropertyValues, html } from "lit";
import { customElement, property, state } from "lit/decorators";
import { styleMap } from "lit/directives/style-map";
import { stateActive } from "../../../../common/entity/state_active";
import { stateColorCss } from "../../../../common/entity/state_color";
import { clamp } from "../../../../common/number/clamp";
import { debounce } from "../../../../common/util/debounce";
import "../../../../components/ha-big-number";
import "../../../../components/ha-control-circular-slider";
import "../../../../components/ha-outlined-icon-button";
import "../../../../components/ha-svg-icon";
import { UNAVAILABLE } from "../../../../data/entity";
import { stateActive } from "../../common/entity/state_active";
import { stateColorCss } from "../../common/entity/state_color";
import { clamp } from "../../common/number/clamp";
import { debounce } from "../../common/util/debounce";
import "../../components/ha-big-number";
import "../../components/ha-control-circular-slider";
import "../../components/ha-outlined-icon-button";
import "../../components/ha-svg-icon";
import { UNAVAILABLE } from "../../data/entity";
import {
HUMIDIFIER_ACTION_MODE,
HumidifierEntity,
HumidifierEntityDeviceClass,
} from "../../../../data/humidifier";
import { HomeAssistant } from "../../../../types";
import { moreInfoControlCircularSliderStyle } from "../ha-more-info-control-circular-slider-style";
} from "../../data/humidifier";
import { HomeAssistant } from "../../types";
import { stateControlCircularSliderStyle } from "../state-control-circular-slider-style";
@customElement("ha-more-info-humidifier-humidity")
export class HaMoreInfoHumidifierHumidity extends LitElement {
@customElement("ha-state-control-humidifier-humidity")
export class HaStateControlHumidifierHumidity extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@property({ attribute: false }) public stateObj!: HumidifierEntity;
@ -240,12 +240,12 @@ export class HaMoreInfoHumidifierHumidity extends LitElement {
}
static get styles(): CSSResultGroup {
return moreInfoControlCircularSliderStyle;
return stateControlCircularSliderStyle;
}
}
declare global {
interface HTMLElementTagNameMap {
"ha-more-info-humidifier-humidity": HaMoreInfoHumidifierHumidity;
"ha-state-control-humidifier-humidity": HaStateControlHumidifierHumidity;
}
}

View File

@ -1,20 +1,16 @@
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import { styleMap } from "lit/directives/style-map";
import {
hsv2rgb,
rgb2hex,
rgb2hsv,
} from "../../../../common/color/convert-color";
import { stateActive } from "../../../../common/entity/state_active";
import { stateColorCss } from "../../../../common/entity/state_color";
import "../../../../components/ha-control-slider";
import { UNAVAILABLE } from "../../../../data/entity";
import { LightEntity } from "../../../../data/light";
import { HomeAssistant } from "../../../../types";
import { hsv2rgb, rgb2hex, rgb2hsv } from "../../common/color/convert-color";
import { stateActive } from "../../common/entity/state_active";
import { stateColorCss } from "../../common/entity/state_color";
import "../../components/ha-control-slider";
import { UNAVAILABLE } from "../../data/entity";
import { LightEntity } from "../../data/light";
import { HomeAssistant } from "../../types";
@customElement("ha-more-info-light-brightness")
export class HaMoreInfoLightBrightness extends LitElement {
@customElement("ha-state-control-light-brightness")
export class HaStateControlLightBrightness extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@property({ attribute: false }) public stateObj!: LightEntity;
@ -69,8 +65,9 @@ export class HaMoreInfoLightBrightness extends LitElement {
max="100"
.showHandle=${stateActive(this.stateObj)}
@value-changed=${this._valueChanged}
.ariaLabel=${this.hass.localize(
"ui.dialogs.more_info_control.light.brightness"
.ariaLabel=${this.hass.formatEntityAttributeName(
this.stateObj,
"brightness"
)}
style=${styleMap({
"--control-slider-color": color,
@ -103,6 +100,6 @@ export class HaMoreInfoLightBrightness extends LitElement {
declare global {
interface HTMLElementTagNameMap {
"ha-more-info-light-brightness": HaMoreInfoLightBrightness;
"ha-state-control-light-brightness": HaStateControlLightBrightness;
}
}

View File

@ -9,17 +9,17 @@ import {
import { customElement, property, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import { styleMap } from "lit/directives/style-map";
import { domainIcon } from "../../../../common/entity/domain_icon";
import { stateColorCss } from "../../../../common/entity/state_color";
import "../../../../components/ha-control-button";
import "../../../../components/ha-control-switch";
import { UNAVAILABLE, UNKNOWN } from "../../../../data/entity";
import { forwardHaptic } from "../../../../data/haptics";
import { callProtectedLockService, LockEntity } from "../../../../data/lock";
import { HomeAssistant } from "../../../../types";
import { domainIcon } from "../../common/entity/domain_icon";
import { stateColorCss } from "../../common/entity/state_color";
import "../../components/ha-control-button";
import "../../components/ha-control-switch";
import { UNAVAILABLE, UNKNOWN } from "../../data/entity";
import { forwardHaptic } from "../../data/haptics";
import { callProtectedLockService, LockEntity } from "../../data/lock";
import { HomeAssistant } from "../../types";
@customElement("ha-more-info-lock-toggle")
export class HaMoreInfoLockToggle extends LitElement {
@customElement("ha-state-control-lock-toggle")
export class HaStateControlLockToggle extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@property({ attribute: false }) public stateObj!: LockEntity;
@ -97,17 +97,13 @@ export class HaMoreInfoLockToggle extends LitElement {
return html`
<div class="buttons">
<ha-control-button
.label=${this.hass.localize(
"ui.dialogs.more_info_control.lock.lock"
)}
.label=${this.hass.localize("ui.card.lock.lock")}
@click=${this._turnOn}
>
<ha-svg-icon .path=${onIcon}></ha-svg-icon>
</ha-control-button>
<ha-control-button
.label=${this.hass.localize(
"ui.dialogs.more_info_control.lock.unlock"
)}
.label=${this.hass.localize("ui.card.lock.unlock")}
@click=${this._turnOff}
>
<ha-svg-icon .path=${offIcon}></ha-svg-icon>
@ -122,7 +118,9 @@ export class HaMoreInfoLockToggle extends LitElement {
reversed
.checked=${this._isOn}
@change=${this._valueChanged}
.ariaLabel=${this.hass.localize("ui.dialogs.more_info_control.toggle")}
.ariaLabel=${this._isOn
? this.hass.localize("ui.card.lock.unlock")
: this.hass.localize("ui.card.lock.lock")}
style=${styleMap({
"--control-switch-on-color": color,
"--control-switch-off-color": color,
@ -198,6 +196,6 @@ export class HaMoreInfoLockToggle extends LitElement {
declare global {
interface HTMLElementTagNameMap {
"ha-more-info-lock-toggle": HaMoreInfoLockToggle;
"ha-state-control-lock-toggle": HaStateControlLockToggle;
}
}

View File

@ -1,6 +1,6 @@
import { css } from "lit";
export const moreInfoControlCircularSliderStyle = css`
export const stateControlCircularSliderStyle = css`
/* Layout elements */
:host {
width: 320px;

View File

@ -2,26 +2,26 @@ import { mdiMinus, mdiPlus } from "@mdi/js";
import { CSSResultGroup, LitElement, PropertyValues, html } from "lit";
import { customElement, property, state } from "lit/decorators";
import { styleMap } from "lit/directives/style-map";
import { UNIT_F } from "../../../../common/const";
import { stateActive } from "../../../../common/entity/state_active";
import { stateColorCss } from "../../../../common/entity/state_color";
import { supportsFeature } from "../../../../common/entity/supports-feature";
import { clamp } from "../../../../common/number/clamp";
import { debounce } from "../../../../common/util/debounce";
import "../../../../components/ha-big-number";
import "../../../../components/ha-control-circular-slider";
import "../../../../components/ha-outlined-icon-button";
import "../../../../components/ha-svg-icon";
import { UNAVAILABLE } from "../../../../data/entity";
import { UNIT_F } from "../../common/const";
import { stateActive } from "../../common/entity/state_active";
import { stateColorCss } from "../../common/entity/state_color";
import { supportsFeature } from "../../common/entity/supports-feature";
import { clamp } from "../../common/number/clamp";
import { debounce } from "../../common/util/debounce";
import "../../components/ha-big-number";
import "../../components/ha-control-circular-slider";
import "../../components/ha-outlined-icon-button";
import "../../components/ha-svg-icon";
import { UNAVAILABLE } from "../../data/entity";
import {
WaterHeaterEntity,
WaterHeaterEntityFeature,
} from "../../../../data/water_heater";
import { HomeAssistant } from "../../../../types";
import { moreInfoControlCircularSliderStyle } from "../ha-more-info-control-circular-slider-style";
} from "../../data/water_heater";
import { HomeAssistant } from "../../types";
import { stateControlCircularSliderStyle } from "../state-control-circular-slider-style";
@customElement("ha-more-info-water_heater-temperature")
export class HaMoreInfoWaterHeaterTemperature extends LitElement {
@customElement("ha-state-control-water_heater-temperature")
export class HaStateControlWaterHeaterTemperature extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@property({ attribute: false }) public stateObj!: WaterHeaterEntity;
@ -237,12 +237,12 @@ export class HaMoreInfoWaterHeaterTemperature extends LitElement {
}
static get styles(): CSSResultGroup {
return moreInfoControlCircularSliderStyle;
return stateControlCircularSliderStyle;
}
}
declare global {
interface HTMLElementTagNameMap {
"ha-more-info-water_heater-temperature": HaMoreInfoWaterHeaterTemperature;
"ha-state-control-water_heater-temperature": HaStateControlWaterHeaterTemperature;
}
}

View File

@ -72,15 +72,30 @@
"upload_backup": "Upload backup"
},
"card": {
"common": {
"turn_on": "Turn on",
"turn_off": "Turn off",
"toggle": "Toggle"
},
"alarm_control_panel": {
"code": "Code",
"clear_code": "Clear",
"disarm": "Disarm",
"arm": "Arm",
"arm_home": "Arm home",
"arm_away": "Arm away",
"arm_night": "Arm night",
"arm_vacation": "Arm vacation",
"arm_custom_bypass": "Custom bypass"
"arm_custom_bypass": "Custom bypass",
"modes_label": "Modes",
"modes": {
"armed_away": "Away",
"armed_home": "Home",
"armed_night": "Night",
"armed_vacation": "Vacation",
"armed_custom_bypass": "Custom",
"disarmed": "Disarmed"
}
},
"area": {
"area_not_found": "Area not found."
@ -120,15 +135,24 @@
},
"cover": {
"position": "Position",
"tilt_position": "Tilt position"
"tilt_position": "Tilt position",
"open_cover": "Open cover",
"close_cover": "Close cover",
"open_tilt_cover": "Open cover tilt",
"close_tilt_cover": "Close cover tilt",
"stop_cover": "Stop cover"
},
"fan": {
"speed": "Speed",
"preset_mode": "Preset mode",
"oscillate": "Oscillate",
"direction": "Direction",
"forward": "Forward",
"reverse": "Reverse"
"reverse": "Reverse",
"speed": {
"low": "Low",
"medium": "Medium",
"high": "High"
}
},
"humidifier": {
"currently": "[%key:ui::card::climate::currently%]",
@ -930,9 +954,6 @@
"last_changed": "Last changed",
"last_updated": "Last updated",
"show_more": "Show more",
"turn_on": "Turn on",
"turn_off": "Turn off",
"toggle": "Toggle",
"exit_edit_mode": "Exit edit mode",
"script": {
"last_action": "Last action",
@ -975,11 +996,6 @@
"create_zone": "Create zone from current location"
},
"cover": {
"open_cover": "Open cover",
"close_cover": "Close cover",
"open_tilt_cover": "Open cover tilt",
"close_tilt_cover": "Close cover tilt",
"stop_cover": "Stop cover",
"switch_mode": {
"button": "Switch to button mode",
"position": "Switch to position mode"
@ -995,7 +1011,6 @@
"color_temp": "Temperature",
"set_white": "Set white",
"select_effect": "Select effect",
"brightness": "Brightness",
"color_picker": {
"title": "Change color",
"mode": {
@ -1019,32 +1034,7 @@
"set_forward_direction": "Set forward direction",
"set_reverse_direction": "Set reverse direction",
"turn_on_oscillating": "Turn on oscillating",
"turn_off_oscillating": "Turn off oscillating",
"speed": {
"low": "Low",
"medium": "Medium",
"high": "High"
}
},
"alarm_control_panel": {
"modes_label": "Modes",
"modes": {
"armed_away": "Away",
"armed_home": "Home",
"armed_night": "Night",
"armed_vacation": "Vacation",
"armed_custom_bypass": "Custom",
"disarmed": "Disarmed"
},
"disarm_title": "Disarm",
"disarm_action": "Disarm",
"arm_title": "Arm",
"arm_action": "Arm"
},
"lock": {
"open": "Open",
"lock": "Lock",
"unlock": "Unlock"
"turn_off_oscillating": "Turn off oscillating"
},
"climate": {
"temperature": "Temperature",
@ -5199,14 +5189,14 @@
},
"alarm-modes": {
"label": "Alarm modes",
"modes": "[%key:ui::dialogs::more_info_control::alarm_control_panel::modes_label%]",
"modes": "[%key:ui::card::alarm_control_panel::modes_label%]",
"modes_list": {
"armed_away": "[%key:ui::dialogs::more_info_control::alarm_control_panel::modes::armed_away%]",
"armed_home": "[%key:ui::dialogs::more_info_control::alarm_control_panel::modes::armed_home%]",
"armed_night": "[%key:ui::dialogs::more_info_control::alarm_control_panel::modes::armed_night%]",
"armed_vacation": "[%key:ui::dialogs::more_info_control::alarm_control_panel::modes::armed_vacation%]",
"armed_custom_bypass": "[%key:ui::dialogs::more_info_control::alarm_control_panel::modes::armed_custom_bypass%]",
"disarmed": "[%key:ui::dialogs::more_info_control::alarm_control_panel::modes::disarmed%]"
"armed_away": "[%key:ui::card::alarm_control_panel::modes::armed_away%]",
"armed_home": "[%key:ui::card::alarm_control_panel::modes::armed_home%]",
"armed_night": "[%key:ui::card::alarm_control_panel::modes::armed_night%]",
"armed_vacation": "[%key:ui::card::alarm_control_panel::modes::armed_vacation%]",
"armed_custom_bypass": "[%key:ui::card::alarm_control_panel::modes::armed_custom_bypass%]",
"disarmed": "[%key:ui::card::alarm_control_panel::modes::disarmed%]"
}
},
"light-brightness": {