jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-18 14:56:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/ha-cover-controls.ts
View File

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

12
src/components/ha-cover-tilt-controls.ts
View File

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

4
src/data/lock.ts
View File

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

0
src/dialogs/more-info/components/ha-more-info-control-style.ts → src/dialogs/more-info/components/more-info-control-style.ts
View File

20
src/dialogs/more-info/controls/more-info-alarm_control_panel.ts
View File

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

14
src/dialogs/more-info/controls/more-info-climate.ts
View File

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

26
src/dialogs/more-info/controls/more-info-cover.ts
View File

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

14
src/dialogs/more-info/controls/more-info-fan.ts
View File

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

8
src/dialogs/more-info/controls/more-info-group.ts
View File

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

8
src/dialogs/more-info/controls/more-info-humidifier.ts
View File

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

10
src/dialogs/more-info/controls/more-info-input_boolean.ts
View File

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

19
src/dialogs/more-info/controls/more-info-light.ts
View File

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

30
src/dialogs/more-info/controls/more-info-lock.ts
View File

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

10
src/dialogs/more-info/controls/more-info-siren.ts
View File

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

10
src/dialogs/more-info/controls/more-info-switch.ts
View File

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

8
src/dialogs/more-info/controls/more-info-water_heater.ts
View File

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

18
src/panels/lovelace/card-features/hui-alarm-modes-card-feature.ts
View File

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

12
src/panels/lovelace/card-features/hui-cover-open-close-card-feature.ts
View File

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

12
src/panels/lovelace/card-features/hui-cover-tilt-card-feature.ts
View File

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

4
src/panels/lovelace/card-features/hui-cover-tilt-position-card-feature.ts
View File

@ -9,11 +9,11 @@ import { stateColorCss } from "../../../common/entity/state_color";
import { supportsFeature } from "../../../common/entity/supports-feature"; import { supportsFeature } from "../../../common/entity/supports-feature";
import { CoverEntity, CoverEntityFeature } from "../../../data/cover"; import { CoverEntity, CoverEntityFeature } from "../../../data/cover";
import { UNAVAILABLE } from "../../../data/entity"; 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 { HomeAssistant } from "../../../types";
import { LovelaceCardFeature } from "../types"; import { LovelaceCardFeature } from "../types";
import { CoverTiltPositionCardFeatureConfig } from "./types"; import { CoverTiltPositionCardFeatureConfig } from "./types";
import { DOMAIN_ATTRIBUTES_UNITS } from "../../../data/entity_attributes";
const GRADIENT = generateTiltSliderTrackBackgroundGradient(); const GRADIENT = generateTiltSliderTrackBackgroundGradient();

5
src/panels/lovelace/card-features/hui-fan-speed-card-feature.ts
View File

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

8
src/panels/lovelace/cards/hui-humidifier-card.ts
View File

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

8
src/panels/lovelace/cards/hui-thermostat-card.ts
View File

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

40
src/dialogs/more-info/components/alarm_control_panel/ha-more-info-alarm_control_panel-modes.ts → src/state-control/alarm_control_panel/ha-state-control-alarm_control_panel-modes.ts
View File

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

36
src/dialogs/more-info/components/climate/ha-more-info-climate-humidity.ts → src/state-control/climate/ha-state-control-climate-humidity.ts
View File

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

38
src/dialogs/more-info/components/climate/ha-more-info-climate-temperature.ts → src/state-control/climate/ha-state-control-climate-temperature.ts
View File

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

52
src/dialogs/more-info/components/cover/ha-more-info-cover-buttons.ts → src/state-control/cover/ha-state-control-cover-buttons.ts
View File

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

20
src/dialogs/more-info/components/cover/ha-more-info-cover-position.ts → src/state-control/cover/ha-state-control-cover-position.ts
View File

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

20
src/dialogs/more-info/components/cover/ha-more-info-cover-tilt-position.ts → src/state-control/cover/ha-state-control-cover-tilt-position.ts
View File

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

32
src/dialogs/more-info/components/cover/ha-more-info-cover-toggle.ts → src/state-control/cover/ha-state-control-cover-toggle.ts
View File

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

31
src/dialogs/more-info/components/fan/ha-more-info-fan-speed.ts → src/state-control/fan/ha-state-control-fan-speed.ts
View File

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

32
src/dialogs/more-info/components/ha-more-info-toggle.ts → src/state-control/ha-state-control-toggle.ts
View File

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

32
src/dialogs/more-info/components/humidifier/ha-more-info-humidifier-humidity.ts → src/state-control/humidifier/ha-state-control-humidifier-humidity.ts
View File

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

29
src/dialogs/more-info/components/lights/ha-more-info-light-brightness.ts → src/state-control/light/ha-state-control-light-brightness.ts
View File

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

34
src/dialogs/more-info/components/lock/ha-more-info-lock-toggle.ts → src/state-control/lock/ha-state-control-lock-toggle.ts
View File

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

2
src/dialogs/more-info/components/ha-more-info-control-circular-slider-style.ts → src/state-control/state-control-circular-slider-style.ts
View File

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

36
src/dialogs/more-info/components/water_heater/ha-more-info-water_heater-temperature.ts → src/state-control/water_heater/ha-state-control-water_heater-temperature.ts
View File

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

82
src/translations/en.json
View File

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