mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-24 09:46:36 +00:00
Move more info control component to state control (#18745)
This commit is contained in:
Paul Bottein
GitHub
parent
239d8fa948
commit
15b1d8ee14
@ -31,9 +31,7 @@ class HaCoverControls extends LitElement {
|
||||
class=${classMap({
|
||||
hidden: !supportsFeature(this.stateObj, CoverEntityFeature.OPEN),
|
||||
})}
|
||||
.label=${this.hass.localize(
|
||||
"ui.dialogs.more_info_control.cover.open_cover"
|
||||
)}
|
||||
.label=${this.hass.localize("ui.card.cover.open_cover")}
|
||||
@click=${this._onOpenTap}
|
||||
.disabled=${!canOpen(this.stateObj)}
|
||||
.path=${computeOpenIcon(this.stateObj)}
|
||||
@ -43,9 +41,7 @@ class HaCoverControls extends LitElement {
|
||||
class=${classMap({
|
||||
hidden: !supportsFeature(this.stateObj, CoverEntityFeature.STOP),
|
||||
})}
|
||||
.label=${this.hass.localize(
|
||||
"ui.dialogs.more_info_control.cover.stop_cover"
|
||||
)}
|
||||
.label=${this.hass.localize("ui.card.cover.stop_cover")}
|
||||
.path=${mdiStop}
|
||||
@click=${this._onStopTap}
|
||||
.disabled=${!canStop(this.stateObj)}
|
||||
@ -54,9 +50,7 @@ class HaCoverControls extends LitElement {
|
||||
class=${classMap({
|
||||
hidden: !supportsFeature(this.stateObj, CoverEntityFeature.CLOSE),
|
||||
})}
|
||||
.label=${this.hass.localize(
|
||||
"ui.dialogs.more_info_control.cover.close_cover"
|
||||
)}
|
||||
.label=${this.hass.localize("ui.card.cover.close_cover")}
|
||||
@click=${this._onCloseTap}
|
||||
.disabled=${!canClose(this.stateObj)}
|
||||
.path=${computeCloseIcon(this.stateObj)}
|
||||
|
||||
@ -31,9 +31,7 @@ class HaCoverTiltControls extends LitElement {
|
||||
CoverEntityFeature.OPEN_TILT
|
||||
),
|
||||
})}
|
||||
.label=${this.hass.localize(
|
||||
"ui.dialogs.more_info_control.cover.open_tilt_cover"
|
||||
)}
|
||||
.label=${this.hass.localize("ui.card.cover.open_tilt_cover")}
|
||||
.path=${mdiArrowTopRight}
|
||||
@click=${this._onOpenTiltTap}
|
||||
.disabled=${!canOpenTilt(this.stateObj)}
|
||||
@ -45,9 +43,7 @@ class HaCoverTiltControls extends LitElement {
|
||||
CoverEntityFeature.STOP_TILT
|
||||
),
|
||||
})}
|
||||
.label=${this.hass.localize(
|
||||
"ui.dialogs.more_info_control.cover.stop_cover"
|
||||
)}
|
||||
.label=${this.hass.localize("ui.card.cover.stop_cover")}
|
||||
.path=${mdiStop}
|
||||
@click=${this._onStopTiltTap}
|
||||
.disabled=${!canStopTilt(this.stateObj)}
|
||||
@ -59,9 +55,7 @@ class HaCoverTiltControls extends LitElement {
|
||||
CoverEntityFeature.CLOSE_TILT
|
||||
),
|
||||
})}
|
||||
.label=${this.hass.localize(
|
||||
"ui.dialogs.more_info_control.cover.close_tilt_cover"
|
||||
)}
|
||||
.label=${this.hass.localize("ui.card.cover.close_tilt_cover")}
|
||||
.path=${mdiArrowBottomLeft}
|
||||
@click=${this._onCloseTiltTap}
|
||||
.disabled=${!canCloseTilt(this.stateObj)}
|
||||
|
||||
@ -35,8 +35,8 @@ export const callProtectedLockService = async (
|
||||
const response = await showEnterCodeDialogDialog(element, {
|
||||
codeFormat: "text",
|
||||
codePattern: stateObj!.attributes.code_format,
|
||||
title: hass.localize(`ui.dialogs.more_info_control.lock.${service}`),
|
||||
submitText: hass.localize(`ui.dialogs.more_info_control.lock.${service}`),
|
||||
title: hass.localize(`ui.card.lock.${service}`),
|
||||
submitText: hass.localize(`ui.card.lock.${service}`),
|
||||
});
|
||||
if (!response) {
|
||||
throw new Error("Code dialog closed");
|
||||
|
||||
@ -6,11 +6,11 @@ import { domainIcon } from "../../../common/entity/domain_icon";
|
||||
import { stateColorCss } from "../../../common/entity/state_color";
|
||||
import "../../../components/ha-outlined-button";
|
||||
import { AlarmControlPanelEntity } from "../../../data/alarm_control_panel";
|
||||
import "../../../state-control/alarm_control_panel/ha-state-control-alarm_control_panel-modes";
|
||||
import type { HomeAssistant } from "../../../types";
|
||||
import { showEnterCodeDialogDialog } from "../../enter-code/show-enter-code-dialog";
|
||||
import "../components/alarm_control_panel/ha-more-info-alarm_control_panel-modes";
|
||||
import { moreInfoControlStyle } from "../components/ha-more-info-control-style";
|
||||
import "../components/ha-more-info-state-header";
|
||||
import { moreInfoControlStyle } from "../components/more-info-control-style";
|
||||
|
||||
@customElement("more-info-alarm_control_panel")
|
||||
class MoreInfoAlarmControlPanel extends LitElement {
|
||||
@ -24,12 +24,8 @@ class MoreInfoAlarmControlPanel extends LitElement {
|
||||
if (this.stateObj!.attributes.code_format) {
|
||||
const response = await showEnterCodeDialogDialog(this, {
|
||||
codeFormat: this.stateObj!.attributes.code_format,
|
||||
title: this.hass.localize(
|
||||
"ui.dialogs.more_info_control.alarm_control_panel.disarm_title"
|
||||
),
|
||||
submitText: this.hass.localize(
|
||||
"ui.dialogs.more_info_control.alarm_control_panel.disarm_action"
|
||||
),
|
||||
title: this.hass.localize("ui.card.alarm_control_panel.disarm"),
|
||||
submitText: this.hass.localize("ui.card.alarm_control_panel.disarm"),
|
||||
});
|
||||
if (response == null) {
|
||||
return;
|
||||
@ -68,19 +64,17 @@ class MoreInfoAlarmControlPanel extends LitElement {
|
||||
></ha-svg-icon>
|
||||
</div>
|
||||
<ha-outlined-button @click=${this._disarm}>
|
||||
${this.hass.localize(
|
||||
"ui.dialogs.more_info_control.alarm_control_panel.disarm_action"
|
||||
)}
|
||||
${this.hass.localize("ui.card.alarm_control_panel.disarm")}
|
||||
<ha-svg-icon slot="icon" .path=${mdiShieldOff}></ha-svg-icon>
|
||||
</ha-outlined-button>
|
||||
</div>
|
||||
`
|
||||
: html`
|
||||
<ha-more-info-alarm_control_panel-modes
|
||||
<ha-state-control-alarm_control_panel-modes
|
||||
.stateObj=${this.stateObj}
|
||||
.hass=${this.hass}
|
||||
>
|
||||
</ha-more-info-alarm_control_panel-modes>
|
||||
</ha-state-control-alarm_control_panel-modes>
|
||||
`}
|
||||
</div>
|
||||
<span></span>
|
||||
|
||||
@ -35,11 +35,11 @@ import {
|
||||
} from "../../../data/climate";
|
||||
import { UNAVAILABLE } from "../../../data/entity";
|
||||
import { haOscillating } from "../../../data/icons/haOscillating";
|
||||
import "../../../state-control/climate/ha-state-control-climate-humidity";
|
||||
import "../../../state-control/climate/ha-state-control-climate-temperature";
|
||||
import { HomeAssistant } from "../../../types";
|
||||
import "../components/climate/ha-more-info-climate-humidity";
|
||||
import "../components/climate/ha-more-info-climate-temperature";
|
||||
import "../components/ha-more-info-control-select-container";
|
||||
import { moreInfoControlStyle } from "../components/ha-more-info-control-style";
|
||||
import { moreInfoControlStyle } from "../components/more-info-control-style";
|
||||
|
||||
type MainControl = "temperature" | "humidity";
|
||||
|
||||
@ -121,18 +121,18 @@ class MoreInfoClimate extends LitElement {
|
||||
<div class="controls">
|
||||
${this._mainControl === "temperature"
|
||||
? html`
|
||||
<ha-more-info-climate-temperature
|
||||
<ha-state-control-climate-temperature
|
||||
.hass=${this.hass}
|
||||
.stateObj=${this.stateObj}
|
||||
></ha-more-info-climate-temperature>
|
||||
></ha-state-control-climate-temperature>
|
||||
`
|
||||
: nothing}
|
||||
${this._mainControl === "humidity"
|
||||
? html`
|
||||
<ha-more-info-climate-humidity
|
||||
<ha-state-control-climate-humidity
|
||||
.hass=${this.hass}
|
||||
.stateObj=${this.stateObj}
|
||||
></ha-more-info-climate-humidity>
|
||||
></ha-state-control-climate-humidity>
|
||||
`
|
||||
: nothing}
|
||||
${supportTargetHumidity
|
||||
|
||||
@ -17,13 +17,13 @@ import {
|
||||
CoverEntityFeature,
|
||||
computeCoverPositionStateDisplay,
|
||||
} from "../../../data/cover";
|
||||
import "../../../state-control/cover/ha-state-control-cover-buttons";
|
||||
import "../../../state-control/cover/ha-state-control-cover-position";
|
||||
import "../../../state-control/cover/ha-state-control-cover-tilt-position";
|
||||
import "../../../state-control/cover/ha-state-control-cover-toggle";
|
||||
import type { HomeAssistant } from "../../../types";
|
||||
import "../components/cover/ha-more-info-cover-buttons";
|
||||
import "../components/cover/ha-more-info-cover-position";
|
||||
import "../components/cover/ha-more-info-cover-tilt-position";
|
||||
import "../components/cover/ha-more-info-cover-toggle";
|
||||
import { moreInfoControlStyle } from "../components/ha-more-info-control-style";
|
||||
import "../components/ha-more-info-state-header";
|
||||
import { moreInfoControlStyle } from "../components/more-info-control-style";
|
||||
|
||||
type Mode = "position" | "button";
|
||||
|
||||
@ -111,18 +111,18 @@ class MoreInfoCover extends LitElement {
|
||||
? html`
|
||||
${supportsPosition
|
||||
? html`
|
||||
<ha-more-info-cover-position
|
||||
<ha-state-control-cover-position
|
||||
.stateObj=${this.stateObj}
|
||||
.hass=${this.hass}
|
||||
></ha-more-info-cover-position>
|
||||
></ha-state-control-cover-position>
|
||||
`
|
||||
: nothing}
|
||||
${supportsTiltPosition
|
||||
? html`
|
||||
<ha-more-info-cover-tilt-position
|
||||
<ha-state-control-cover-tilt-position
|
||||
.stateObj=${this.stateObj}
|
||||
.hass=${this.hass}
|
||||
></ha-more-info-cover-tilt-position>
|
||||
></ha-state-control-cover-tilt-position>
|
||||
`
|
||||
: nothing}
|
||||
`
|
||||
@ -133,17 +133,17 @@ class MoreInfoCover extends LitElement {
|
||||
? html`
|
||||
${supportsOpenCloseWithoutStop
|
||||
? html`
|
||||
<ha-more-info-cover-toggle
|
||||
<ha-state-control-cover-toggle
|
||||
.stateObj=${this.stateObj}
|
||||
.hass=${this.hass}
|
||||
></ha-more-info-cover-toggle>
|
||||
></ha-state-control-cover-toggle>
|
||||
`
|
||||
: supportsOpenClose || supportsTilt
|
||||
? html`
|
||||
<ha-more-info-cover-buttons
|
||||
<ha-state-control-cover-buttons
|
||||
.stateObj=${this.stateObj}
|
||||
.hass=${this.hass}
|
||||
></ha-more-info-cover-buttons>
|
||||
></ha-state-control-cover-buttons>
|
||||
`
|
||||
: nothing}
|
||||
`
|
||||
|
||||
@ -25,12 +25,12 @@ import {
|
||||
import { forwardHaptic } from "../../../data/haptics";
|
||||
import { haOscillating } from "../../../data/icons/haOscillating";
|
||||
import { haOscillatingOff } from "../../../data/icons/haOscillatingOff";
|
||||
import "../../../state-control/fan/ha-state-control-fan-speed";
|
||||
import "../../../state-control/ha-state-control-toggle";
|
||||
import type { HomeAssistant } from "../../../types";
|
||||
import "../components/fan/ha-more-info-fan-speed";
|
||||
import "../components/ha-more-info-control-select-container";
|
||||
import { moreInfoControlStyle } from "../components/ha-more-info-control-style";
|
||||
import "../components/ha-more-info-state-header";
|
||||
import "../components/ha-more-info-toggle";
|
||||
import { moreInfoControlStyle } from "../components/more-info-control-style";
|
||||
|
||||
@customElement("more-info-fan")
|
||||
class MoreInfoFan extends LitElement {
|
||||
@ -141,19 +141,19 @@ class MoreInfoFan extends LitElement {
|
||||
<div class="controls">
|
||||
${supportsSpeed
|
||||
? html`
|
||||
<ha-more-info-fan-speed
|
||||
<ha-state-control-fan-speed
|
||||
.stateObj=${this.stateObj}
|
||||
.hass=${this.hass}
|
||||
>
|
||||
</ha-more-info-fan-speed>
|
||||
</ha-state-control-fan-speed>
|
||||
`
|
||||
: html`
|
||||
<ha-more-info-toggle
|
||||
<ha-state-control-toggle
|
||||
.stateObj=${this.stateObj}
|
||||
.hass=${this.hass}
|
||||
.iconPathOn=${mdiFan}
|
||||
.iconPathOff=${mdiFanOff}
|
||||
></ha-more-info-toggle>
|
||||
></ha-state-control-toggle>
|
||||
`}
|
||||
${supportSpeedPercentage
|
||||
? html`
|
||||
|
||||
@ -1,18 +1,18 @@
|
||||
import { HassEntity } from "home-assistant-js-websocket";
|
||||
import {
|
||||
css,
|
||||
CSSResultGroup,
|
||||
html,
|
||||
LitElement,
|
||||
PropertyValues,
|
||||
css,
|
||||
html,
|
||||
nothing,
|
||||
} from "lit";
|
||||
import { property, state } from "lit/decorators";
|
||||
import { dynamicElement } from "../../../common/dom/dynamic-element-directive";
|
||||
import { computeGroupDomain, GroupEntity } from "../../../data/group";
|
||||
import { GroupEntity, computeGroupDomain } from "../../../data/group";
|
||||
import "../../../state-summary/state-card-content";
|
||||
import { HomeAssistant } from "../../../types";
|
||||
import { moreInfoControlStyle } from "../components/ha-more-info-control-style";
|
||||
import { moreInfoControlStyle } from "../components/more-info-control-style";
|
||||
import {
|
||||
domainMoreInfoType,
|
||||
importMoreInfoControl,
|
||||
|
||||
@ -19,10 +19,10 @@ import {
|
||||
HumidifierEntityFeature,
|
||||
computeHumidiferModeIcon,
|
||||
} from "../../../data/humidifier";
|
||||
import "../../../state-control/humidifier/ha-state-control-humidifier-humidity";
|
||||
import { HomeAssistant } from "../../../types";
|
||||
import "../components/ha-more-info-control-select-container";
|
||||
import { moreInfoControlStyle } from "../components/ha-more-info-control-style";
|
||||
import "../components/humidifier/ha-more-info-humidifier-humidity";
|
||||
import { moreInfoControlStyle } from "../components/more-info-control-style";
|
||||
|
||||
class MoreInfoHumidifier extends LitElement {
|
||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||
@ -76,10 +76,10 @@ class MoreInfoHumidifier extends LitElement {
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
<ha-more-info-humidifier-humidity
|
||||
<ha-state-control-water_heater-temperature
|
||||
.hass=${this.hass}
|
||||
.stateObj=${this.stateObj}
|
||||
></ha-more-info-humidifier-humidity>
|
||||
></ha-state-control-water_heater-temperature>
|
||||
</div>
|
||||
|
||||
<ha-more-info-control-select-container>
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
import { mdiPower, mdiPowerOff } from "@mdi/js";
|
||||
import { HassEntity } from "home-assistant-js-websocket";
|
||||
import { CSSResultGroup, html, LitElement, nothing } from "lit";
|
||||
import { CSSResultGroup, LitElement, html, nothing } from "lit";
|
||||
import { customElement, property } from "lit/decorators";
|
||||
import "../../../components/ha-attributes";
|
||||
import "../../../state-control/ha-state-control-toggle";
|
||||
import type { HomeAssistant } from "../../../types";
|
||||
import { moreInfoControlStyle } from "../components/ha-more-info-control-style";
|
||||
import "../components/ha-more-info-state-header";
|
||||
import "../components/ha-more-info-toggle";
|
||||
import { moreInfoControlStyle } from "../components/more-info-control-style";
|
||||
|
||||
@customElement("more-info-input_boolean")
|
||||
class MoreInfoInputBoolean extends LitElement {
|
||||
@ -25,12 +25,12 @@ class MoreInfoInputBoolean extends LitElement {
|
||||
.stateObj=${this.stateObj}
|
||||
></ha-more-info-state-header>
|
||||
<div class="controls">
|
||||
<ha-more-info-toggle
|
||||
<ha-state-control-toggle
|
||||
.stateObj=${this.stateObj}
|
||||
.hass=${this.hass}
|
||||
.iconPathOn=${mdiPower}
|
||||
.iconPathOff=${mdiPowerOff}
|
||||
></ha-more-info-toggle>
|
||||
></ha-state-control-toggle>
|
||||
</div>
|
||||
<ha-attributes
|
||||
.hass=${this.hass}
|
||||
|
||||
@ -35,16 +35,16 @@ import {
|
||||
lightSupportsColorMode,
|
||||
lightSupportsFavoriteColors,
|
||||
} from "../../../data/light";
|
||||
import "../../../state-control/ha-state-control-toggle";
|
||||
import "../../../state-control/light/ha-state-control-light-brightness";
|
||||
import type { HomeAssistant } from "../../../types";
|
||||
import "../components/ha-more-info-control-select-container";
|
||||
import { moreInfoControlStyle } from "../components/ha-more-info-control-style";
|
||||
import "../components/ha-more-info-state-header";
|
||||
import "../components/ha-more-info-toggle";
|
||||
import "../components/lights/ha-favorite-color-button";
|
||||
import "../components/lights/ha-more-info-light-brightness";
|
||||
import "../components/lights/ha-more-info-light-favorite-colors";
|
||||
import "../components/lights/light-color-rgb-picker";
|
||||
import "../components/lights/light-color-temp-picker";
|
||||
import { moreInfoControlStyle } from "../components/more-info-control-style";
|
||||
|
||||
type MainControl = "brightness" | "color_temp" | "color";
|
||||
|
||||
@ -123,23 +123,23 @@ class MoreInfoLight extends LitElement {
|
||||
<div class="controls">
|
||||
${!supportsBrightness
|
||||
? html`
|
||||
<ha-more-info-toggle
|
||||
<ha-state-control-toggle
|
||||
.stateObj=${this.stateObj}
|
||||
.hass=${this.hass}
|
||||
.iconPathOn=${mdiLightbulb}
|
||||
.iconPathOff=${mdiLightbulbOff}
|
||||
></ha-more-info-toggle>
|
||||
></ha-state-control-toggle>
|
||||
`
|
||||
: nothing}
|
||||
${supportsColorTemp || supportsColor || supportsBrightness
|
||||
? html`
|
||||
${supportsBrightness && this._mainControl === "brightness"
|
||||
? html`
|
||||
<ha-more-info-light-brightness
|
||||
<ha-state-control-light-brightness
|
||||
.stateObj=${this.stateObj}
|
||||
.hass=${this.hass}
|
||||
>
|
||||
</ha-more-info-light-brightness>
|
||||
</ha-state-control-light-brightness>
|
||||
`
|
||||
: nothing}
|
||||
${supportsColor && this._mainControl === "color"
|
||||
@ -180,8 +180,9 @@ class MoreInfoLight extends LitElement {
|
||||
<ha-icon-button-toggle
|
||||
.selected=${this._mainControl === "brightness"}
|
||||
.disabled=${this.stateObj!.state === UNAVAILABLE}
|
||||
.label=${this.hass.localize(
|
||||
"ui.dialogs.more_info_control.light.brightness"
|
||||
.label=${this.hass.formatEntityAttributeName(
|
||||
this.stateObj,
|
||||
"brightness"
|
||||
)}
|
||||
.control=${"brightness"}
|
||||
@click=${this._setMainControl}
|
||||
|
||||
@ -13,10 +13,10 @@ import {
|
||||
LockEntityFeature,
|
||||
callProtectedLockService,
|
||||
} from "../../../data/lock";
|
||||
import "../../../state-control/lock/ha-state-control-lock-toggle";
|
||||
import type { HomeAssistant } from "../../../types";
|
||||
import { moreInfoControlStyle } from "../components/ha-more-info-control-style";
|
||||
import "../components/ha-more-info-state-header";
|
||||
import "../components/lock/ha-more-info-lock-toggle";
|
||||
import { moreInfoControlStyle } from "../components/more-info-control-style";
|
||||
|
||||
@customElement("more-info-lock")
|
||||
class MoreInfoLock extends LitElement {
|
||||
@ -69,11 +69,11 @@ class MoreInfoLock extends LitElement {
|
||||
</div>
|
||||
`
|
||||
: html`
|
||||
<ha-more-info-lock-toggle
|
||||
<ha-state-control-lock-toggle
|
||||
.stateObj=${this.stateObj}
|
||||
.hass=${this.hass}
|
||||
>
|
||||
</ha-more-info-lock-toggle>
|
||||
</ha-state-control-lock-toggle>
|
||||
`
|
||||
}
|
||||
${
|
||||
@ -84,12 +84,8 @@ class MoreInfoLock extends LitElement {
|
||||
? html`
|
||||
<ha-outlined-icon-button
|
||||
.disabled=${this.stateObj.state === UNAVAILABLE}
|
||||
.title=${this.hass.localize(
|
||||
"ui.dialogs.more_info_control.lock.open"
|
||||
)}
|
||||
.ariaLabel=${this.hass.localize(
|
||||
"ui.dialogs.more_info_control.lock.open"
|
||||
)}
|
||||
.title=${this.hass.localize("ui.card.lock.open")}
|
||||
.ariaLabel=${this.hass.localize("ui.card.lock.open")}
|
||||
@click=${this._open}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiDoorOpen}></ha-svg-icon>
|
||||
@ -99,22 +95,16 @@ class MoreInfoLock extends LitElement {
|
||||
${isJammed
|
||||
? html`
|
||||
<ha-outlined-icon-button
|
||||
.title=${this.hass.localize(
|
||||
"ui.dialogs.more_info_control.lock.lock"
|
||||
)}
|
||||
.ariaLabel=${this.hass.localize(
|
||||
"ui.dialogs.more_info_control.lock.lock"
|
||||
)}
|
||||
.title=${this.hass.localize("ui.card.lock.lock")}
|
||||
.ariaLabel=${this.hass.localize("ui.card.lock.lock")}
|
||||
@click=${this._lock}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiLock}></ha-svg-icon>
|
||||
</ha-outlined-icon-button>
|
||||
<ha-outlined-icon-button
|
||||
.title=${this.hass.localize(
|
||||
"ui.dialogs.more_info_control.lock.unlock"
|
||||
)}
|
||||
.title=${this.hass.localize("ui.card.lock.unlock")}
|
||||
.ariaLabel=${this.hass.localize(
|
||||
"ui.dialogs.more_info_control.lock.unlock"
|
||||
"ui.card.lock.unlock"
|
||||
)}
|
||||
@click=${this._unlock}
|
||||
>
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
import { mdiVolumeHigh, mdiVolumeOff } from "@mdi/js";
|
||||
import { HassEntity } from "home-assistant-js-websocket";
|
||||
import { CSSResultGroup, html, LitElement, nothing } from "lit";
|
||||
import { CSSResultGroup, LitElement, html, nothing } from "lit";
|
||||
import { customElement, property } from "lit/decorators";
|
||||
import "../../../components/ha-attributes";
|
||||
import "../../../state-control/ha-state-control-toggle";
|
||||
import type { HomeAssistant } from "../../../types";
|
||||
import { moreInfoControlStyle } from "../components/ha-more-info-control-style";
|
||||
import "../components/ha-more-info-state-header";
|
||||
import "../components/ha-more-info-toggle";
|
||||
import { moreInfoControlStyle } from "../components/more-info-control-style";
|
||||
|
||||
@customElement("more-info-siren")
|
||||
class MoreInfoSiren extends LitElement {
|
||||
@ -25,12 +25,12 @@ class MoreInfoSiren extends LitElement {
|
||||
.stateObj=${this.stateObj}
|
||||
></ha-more-info-state-header>
|
||||
<div class="controls">
|
||||
<ha-more-info-toggle
|
||||
<ha-state-control-toggle
|
||||
.stateObj=${this.stateObj}
|
||||
.hass=${this.hass}
|
||||
.iconPathOn=${mdiVolumeHigh}
|
||||
.iconPathOff=${mdiVolumeOff}
|
||||
></ha-more-info-toggle>
|
||||
></ha-state-control-toggle>
|
||||
</div>
|
||||
<ha-attributes
|
||||
.hass=${this.hass}
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
import { mdiPower, mdiPowerOff } from "@mdi/js";
|
||||
import { HassEntity } from "home-assistant-js-websocket";
|
||||
import { CSSResultGroup, html, LitElement, nothing } from "lit";
|
||||
import { CSSResultGroup, LitElement, html, nothing } from "lit";
|
||||
import { customElement, property } from "lit/decorators";
|
||||
import "../../../components/ha-attributes";
|
||||
import "../../../state-control/ha-state-control-toggle";
|
||||
import type { HomeAssistant } from "../../../types";
|
||||
import { moreInfoControlStyle } from "../components/ha-more-info-control-style";
|
||||
import "../components/ha-more-info-state-header";
|
||||
import "../components/ha-more-info-toggle";
|
||||
import { moreInfoControlStyle } from "../components/more-info-control-style";
|
||||
|
||||
@customElement("more-info-switch")
|
||||
class MoreInfoSwitch extends LitElement {
|
||||
@ -25,12 +25,12 @@ class MoreInfoSwitch extends LitElement {
|
||||
.stateObj=${this.stateObj}
|
||||
></ha-more-info-state-header>
|
||||
<div class="controls">
|
||||
<ha-more-info-toggle
|
||||
<ha-state-control-toggle
|
||||
.stateObj=${this.stateObj}
|
||||
.hass=${this.hass}
|
||||
.iconPathOn=${mdiPower}
|
||||
.iconPathOff=${mdiPowerOff}
|
||||
></ha-more-info-toggle>
|
||||
></ha-state-control-toggle>
|
||||
</div>
|
||||
<ha-attributes
|
||||
.hass=${this.hass}
|
||||
|
||||
@ -12,10 +12,10 @@ import {
|
||||
compareWaterHeaterOperationMode,
|
||||
computeOperationModeIcon,
|
||||
} from "../../../data/water_heater";
|
||||
import "../../../state-control/water_heater/ha-state-control-water_heater-temperature";
|
||||
import { HomeAssistant } from "../../../types";
|
||||
import "../components/ha-more-info-control-select-container";
|
||||
import { moreInfoControlStyle } from "../components/ha-more-info-control-style";
|
||||
import "../components/water_heater/ha-more-info-water_heater-temperature";
|
||||
import { moreInfoControlStyle } from "../components/more-info-control-style";
|
||||
|
||||
@customElement("more-info-water_heater")
|
||||
class MoreInfoWaterHeater extends LitElement {
|
||||
@ -64,10 +64,10 @@ class MoreInfoWaterHeater extends LitElement {
|
||||
: nothing}
|
||||
</div>
|
||||
<div class="controls">
|
||||
<ha-more-info-water_heater-temperature
|
||||
<ha-state-control-water_heater-temperature
|
||||
.hass=${this.hass}
|
||||
.stateObj=${this.stateObj}
|
||||
></ha-more-info-water_heater-temperature>
|
||||
></ha-state-control-water_heater-temperature>
|
||||
</div>
|
||||
<ha-more-info-control-select-container>
|
||||
${supportOperationMode && stateObj.attributes.operation_list
|
||||
|
||||
@ -134,14 +134,10 @@ class HuiAlarmModeCardFeature
|
||||
const response = await showEnterCodeDialogDialog(this, {
|
||||
codeFormat: this.stateObj!.attributes.code_format,
|
||||
title: this.hass!.localize(
|
||||
`ui.dialogs.more_info_control.alarm_control_panel.${
|
||||
disarm ? "disarm_title" : "arm_title"
|
||||
}`
|
||||
`ui.card.alarm_control_panel.${disarm ? "disarm" : "arm"}`
|
||||
),
|
||||
submitText: this.hass!.localize(
|
||||
`ui.dialogs.more_info_control.alarm_control_panel.${
|
||||
disarm ? "disarm_action" : "arm_action"
|
||||
}`
|
||||
`ui.card.alarm_control_panel.${disarm ? "disarm" : "arm"}`
|
||||
),
|
||||
});
|
||||
if (response == null) {
|
||||
@ -172,9 +168,7 @@ class HuiAlarmModeCardFeature
|
||||
|
||||
const options = modes.map<ControlSelectOption>((mode) => ({
|
||||
value: mode,
|
||||
label: this.hass!.localize(
|
||||
`ui.dialogs.more_info_control.alarm_control_panel.modes.${mode}`
|
||||
),
|
||||
label: this.hass!.localize(`ui.card.alarm_control_panel.modes.${mode}`),
|
||||
path: ALARM_MODES[mode].path,
|
||||
}));
|
||||
|
||||
@ -182,9 +176,7 @@ class HuiAlarmModeCardFeature
|
||||
return html`
|
||||
<ha-control-button-group>
|
||||
<ha-control-button
|
||||
.label=${this.hass.localize(
|
||||
"ui.dialogs.more_info_control.alarm_control_panel.disarm_action"
|
||||
)}
|
||||
.label=${this.hass.localize("ui.card.alarm_control_panel.disarm")}
|
||||
@click=${this._disarm}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiShieldOff}></ha-svg-icon>
|
||||
@ -200,7 +192,7 @@ class HuiAlarmModeCardFeature
|
||||
@value-changed=${this._valueChanged}
|
||||
hide-label
|
||||
.ariaLabel=${this.hass.localize(
|
||||
"ui.dialogs.more_info_control.alarm_control_panel.modes_label"
|
||||
"ui.card.alarm_control_panel.modes_label"
|
||||
)}
|
||||
style=${styleMap({
|
||||
"--control-select-color": color,
|
||||
|
||||
@ -89,9 +89,7 @@ class HuiCoverOpenCloseCardFeature
|
||||
${supportsFeature(this.stateObj, CoverEntityFeature.OPEN)
|
||||
? html`
|
||||
<ha-control-button
|
||||
.label=${this.hass.localize(
|
||||
"ui.dialogs.more_info_control.cover.open_cover"
|
||||
)}
|
||||
.label=${this.hass.localize("ui.card.cover.open_cover")}
|
||||
@click=${this._onOpenTap}
|
||||
.disabled=${!canOpen(this.stateObj)}
|
||||
>
|
||||
@ -104,9 +102,7 @@ class HuiCoverOpenCloseCardFeature
|
||||
${supportsFeature(this.stateObj, CoverEntityFeature.STOP)
|
||||
? html`
|
||||
<ha-control-button
|
||||
.label=${this.hass.localize(
|
||||
"ui.dialogs.more_info_control.cover.stop_cover"
|
||||
)}
|
||||
.label=${this.hass.localize("ui.card.cover.stop_cover")}
|
||||
@click=${this._onStopTap}
|
||||
.disabled=${!canStop(this.stateObj)}
|
||||
>
|
||||
@ -117,9 +113,7 @@ class HuiCoverOpenCloseCardFeature
|
||||
${supportsFeature(this.stateObj, CoverEntityFeature.CLOSE)
|
||||
? html`
|
||||
<ha-control-button
|
||||
.label=${this.hass.localize(
|
||||
"ui.dialogs.more_info_control.cover.close_cover"
|
||||
)}
|
||||
.label=${this.hass.localize("ui.card.cover.close_cover")}
|
||||
@click=${this._onCloseTap}
|
||||
.disabled=${!canClose(this.stateObj)}
|
||||
>
|
||||
|
||||
@ -85,9 +85,7 @@ class HuiCoverTiltCardFeature
|
||||
${supportsFeature(this.stateObj, CoverEntityFeature.OPEN_TILT)
|
||||
? html`
|
||||
<ha-control-button
|
||||
.label=${this.hass.localize(
|
||||
"ui.dialogs.more_info_control.cover.open_tilt_cover"
|
||||
)}
|
||||
.label=${this.hass.localize("ui.card.cover.open_tilt_cover")}
|
||||
@click=${this._onOpenTap}
|
||||
.disabled=${!canOpenTilt(this.stateObj)}
|
||||
>
|
||||
@ -98,9 +96,7 @@ class HuiCoverTiltCardFeature
|
||||
${supportsFeature(this.stateObj, CoverEntityFeature.STOP_TILT)
|
||||
? html`
|
||||
<ha-control-button
|
||||
.label=${this.hass.localize(
|
||||
"ui.dialogs.more_info_control.cover.stop_cover"
|
||||
)}
|
||||
.label=${this.hass.localize("ui.card.cover.stop_cover")}
|
||||
@click=${this._onStopTap}
|
||||
.disabled=${!canStopTilt(this.stateObj)}
|
||||
>
|
||||
@ -111,9 +107,7 @@ class HuiCoverTiltCardFeature
|
||||
${supportsFeature(this.stateObj, CoverEntityFeature.CLOSE_TILT)
|
||||
? html`
|
||||
<ha-control-button
|
||||
.label=${this.hass.localize(
|
||||
"ui.dialogs.more_info_control.cover.close_tilt_cover"
|
||||
)}
|
||||
.label=${this.hass.localize("ui.card.cover.close_tilt_cover")}
|
||||
@click=${this._onCloseTap}
|
||||
.disabled=${!canCloseTilt(this.stateObj)}
|
||||
>
|
||||
|
||||
@ -9,11 +9,11 @@ import { stateColorCss } from "../../../common/entity/state_color";
|
||||
import { supportsFeature } from "../../../common/entity/supports-feature";
|
||||
import { CoverEntity, CoverEntityFeature } from "../../../data/cover";
|
||||
import { UNAVAILABLE } from "../../../data/entity";
|
||||
import { generateTiltSliderTrackBackgroundGradient } from "../../../dialogs/more-info/components/cover/ha-more-info-cover-tilt-position";
|
||||
import { DOMAIN_ATTRIBUTES_UNITS } from "../../../data/entity_attributes";
|
||||
import { generateTiltSliderTrackBackgroundGradient } from "../../../state-control/cover/ha-state-control-cover-tilt-position";
|
||||
import { HomeAssistant } from "../../../types";
|
||||
import { LovelaceCardFeature } from "../types";
|
||||
import { CoverTiltPositionCardFeatureConfig } from "./types";
|
||||
import { DOMAIN_ATTRIBUTES_UNITS } from "../../../data/entity_attributes";
|
||||
|
||||
const GRADIENT = generateTiltSliderTrackBackgroundGradient();
|
||||
|
||||
|
||||
@ -57,10 +57,7 @@ class HuiFanSpeedCardFeature extends LitElement implements LovelaceCardFeature {
|
||||
if (speed === "on" || speed === "off") {
|
||||
return this.hass!.formatEntityState(this.stateObj!, speed);
|
||||
}
|
||||
return (
|
||||
this.hass!.localize(`ui.dialogs.more_info_control.fan.speed.${speed}`) ||
|
||||
speed
|
||||
);
|
||||
return this.hass!.localize(`ui.card.fan.speed.${speed}`) || speed;
|
||||
}
|
||||
|
||||
protected render() {
|
||||
|
||||
@ -16,7 +16,7 @@ import { stateColorCss } from "../../../common/entity/state_color";
|
||||
import "../../../components/ha-card";
|
||||
import "../../../components/ha-icon-button";
|
||||
import { HumidifierEntity } from "../../../data/humidifier";
|
||||
import "../../../dialogs/more-info/components/humidifier/ha-more-info-humidifier-humidity";
|
||||
import "../../../state-control/humidifier/ha-state-control-humidifier-humidity";
|
||||
import { HomeAssistant } from "../../../types";
|
||||
import "../card-features/hui-card-features";
|
||||
import { findEntities } from "../common/find-entities";
|
||||
@ -126,11 +126,11 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
|
||||
return html`
|
||||
<ha-card>
|
||||
<p class="title">${name}</p>
|
||||
<ha-more-info-humidifier-humidity
|
||||
<ha-state-control-humidifier-humidity
|
||||
show-current
|
||||
.hass=${this.hass}
|
||||
.stateObj=${stateObj}
|
||||
></ha-more-info-humidifier-humidity>
|
||||
></ha-state-control-humidifier-humidity>
|
||||
<ha-icon-button
|
||||
class="more-info"
|
||||
.label=${this.hass!.localize(
|
||||
@ -180,7 +180,7 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
ha-more-info-humidifier-humidity {
|
||||
ha-state-control-humidifier-humidity {
|
||||
width: 100%;
|
||||
max-width: 344px; /* 12px + 12px + 320px */
|
||||
padding: 0 12px 12px 12px;
|
||||
|
||||
@ -16,7 +16,7 @@ import { stateColorCss } from "../../../common/entity/state_color";
|
||||
import "../../../components/ha-card";
|
||||
import "../../../components/ha-icon-button";
|
||||
import { ClimateEntity } from "../../../data/climate";
|
||||
import "../../../dialogs/more-info/components/climate/ha-more-info-climate-temperature";
|
||||
import "../../../state-control/climate/ha-state-control-climate-temperature";
|
||||
import { HomeAssistant } from "../../../types";
|
||||
import { findEntities } from "../common/find-entities";
|
||||
import { createEntityNotFoundWarning } from "../components/hui-warning";
|
||||
@ -118,11 +118,11 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
|
||||
return html`
|
||||
<ha-card>
|
||||
<p class="title">${name}</p>
|
||||
<ha-more-info-climate-temperature
|
||||
<ha-state-control-climate-temperature
|
||||
show-current
|
||||
.hass=${this.hass}
|
||||
.stateObj=${stateObj}
|
||||
></ha-more-info-climate-temperature>
|
||||
></ha-state-control-climate-temperature>
|
||||
<ha-icon-button
|
||||
class="more-info"
|
||||
.label=${this.hass!.localize(
|
||||
@ -172,7 +172,7 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
ha-more-info-climate-temperature {
|
||||
ha-state-control-climate-temperature {
|
||||
width: 100%;
|
||||
max-width: 344px; /* 12px + 12px + 320px */
|
||||
padding: 0 12px 12px 12px;
|
||||
|
||||
@ -2,22 +2,22 @@ import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import { styleMap } from "lit/directives/style-map";
|
||||
import memoizeOne from "memoize-one";
|
||||
import { stateColorCss } from "../../../../common/entity/state_color";
|
||||
import { supportsFeature } from "../../../../common/entity/supports-feature";
|
||||
import "../../../../components/ha-control-select";
|
||||
import type { ControlSelectOption } from "../../../../components/ha-control-select";
|
||||
import "../../../../components/ha-control-slider";
|
||||
import { stateColorCss } from "../../common/entity/state_color";
|
||||
import { supportsFeature } from "../../common/entity/supports-feature";
|
||||
import "../../components/ha-control-select";
|
||||
import type { ControlSelectOption } from "../../components/ha-control-select";
|
||||
import "../../components/ha-control-slider";
|
||||
import {
|
||||
ALARM_MODES,
|
||||
AlarmControlPanelEntity,
|
||||
AlarmMode,
|
||||
ALARM_MODES,
|
||||
} from "../../../../data/alarm_control_panel";
|
||||
import { UNAVAILABLE } from "../../../../data/entity";
|
||||
import { HomeAssistant } from "../../../../types";
|
||||
import { showEnterCodeDialogDialog } from "../../../enter-code/show-enter-code-dialog";
|
||||
} from "../../data/alarm_control_panel";
|
||||
import { UNAVAILABLE } from "../../data/entity";
|
||||
import { showEnterCodeDialogDialog } from "../../dialogs/enter-code/show-enter-code-dialog";
|
||||
import { HomeAssistant } from "../../types";
|
||||
|
||||
@customElement("ha-more-info-alarm_control_panel-modes")
|
||||
export class HaMoreInfoAlarmControlPanelModes extends LitElement {
|
||||
@customElement("ha-state-control-alarm_control_panel-modes")
|
||||
export class HaStateControlAlarmControlPanelModes extends LitElement {
|
||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||
|
||||
@property({ attribute: false }) public stateObj!: AlarmControlPanelEntity;
|
||||
@ -59,14 +59,10 @@ export class HaMoreInfoAlarmControlPanelModes extends LitElement {
|
||||
const response = await showEnterCodeDialogDialog(this, {
|
||||
codeFormat: this.stateObj!.attributes.code_format,
|
||||
title: this.hass!.localize(
|
||||
`ui.dialogs.more_info_control.alarm_control_panel.${
|
||||
disarm ? "disarm_title" : "arm_title"
|
||||
}`
|
||||
`ui.card.alarm_control_panel.${disarm ? "disarm" : "arm"}`
|
||||
),
|
||||
submitText: this.hass!.localize(
|
||||
`ui.dialogs.more_info_control.alarm_control_panel.${
|
||||
disarm ? "disarm_action" : "arm_action"
|
||||
}`
|
||||
`ui.card.alarm_control_panel.${disarm ? "disarmn" : "arm"}`
|
||||
),
|
||||
});
|
||||
if (response == null) {
|
||||
@ -103,9 +99,7 @@ export class HaMoreInfoAlarmControlPanelModes extends LitElement {
|
||||
|
||||
const options = modes.map<ControlSelectOption>((mode) => ({
|
||||
value: mode,
|
||||
label: this.hass.localize(
|
||||
`ui.dialogs.more_info_control.alarm_control_panel.modes.${mode}`
|
||||
),
|
||||
label: this.hass.localize(`ui.card.alarm_control_panel.modes.${mode}`),
|
||||
path: ALARM_MODES[mode].path,
|
||||
}));
|
||||
|
||||
@ -116,7 +110,7 @@ export class HaMoreInfoAlarmControlPanelModes extends LitElement {
|
||||
.value=${this._currentMode}
|
||||
@value-changed=${this._valueChanged}
|
||||
.ariaLabel=${this.hass.localize(
|
||||
"ui.dialogs.more_info_control.alarm_control_panel.modes_label"
|
||||
"ui.card.alarm_control_panel.modes_label"
|
||||
)}
|
||||
style=${styleMap({
|
||||
"--control-select-color": color,
|
||||
@ -146,6 +140,6 @@ export class HaMoreInfoAlarmControlPanelModes extends LitElement {
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"ha-more-info-alarm_control_panel-modes": HaMoreInfoAlarmControlPanelModes;
|
||||
"ha-state-control-alarm_control_panel-modes": HaStateControlAlarmControlPanelModes;
|
||||
}
|
||||
}
|
||||
@ -2,23 +2,23 @@ import { mdiMinus, mdiPlus, mdiWaterPercent } from "@mdi/js";
|
||||
import { CSSResultGroup, LitElement, PropertyValues, html } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import { styleMap } from "lit/directives/style-map";
|
||||
import { stateActive } from "../../../../common/entity/state_active";
|
||||
import { domainStateColorProperties } from "../../../../common/entity/state_color";
|
||||
import { supportsFeature } from "../../../../common/entity/supports-feature";
|
||||
import { clamp } from "../../../../common/number/clamp";
|
||||
import { debounce } from "../../../../common/util/debounce";
|
||||
import "../../../../components/ha-big-number";
|
||||
import "../../../../components/ha-control-circular-slider";
|
||||
import "../../../../components/ha-outlined-icon-button";
|
||||
import "../../../../components/ha-svg-icon";
|
||||
import { ClimateEntity, ClimateEntityFeature } from "../../../../data/climate";
|
||||
import { UNAVAILABLE } from "../../../../data/entity";
|
||||
import { computeCssVariable } from "../../../../resources/css-variables";
|
||||
import { HomeAssistant } from "../../../../types";
|
||||
import { moreInfoControlCircularSliderStyle } from "../ha-more-info-control-circular-slider-style";
|
||||
import { stateActive } from "../../common/entity/state_active";
|
||||
import { domainStateColorProperties } from "../../common/entity/state_color";
|
||||
import { supportsFeature } from "../../common/entity/supports-feature";
|
||||
import { clamp } from "../../common/number/clamp";
|
||||
import { debounce } from "../../common/util/debounce";
|
||||
import "../../components/ha-big-number";
|
||||
import "../../components/ha-control-circular-slider";
|
||||
import "../../components/ha-outlined-icon-button";
|
||||
import "../../components/ha-svg-icon";
|
||||
import { ClimateEntity, ClimateEntityFeature } from "../../data/climate";
|
||||
import { UNAVAILABLE } from "../../data/entity";
|
||||
import { computeCssVariable } from "../../resources/css-variables";
|
||||
import { HomeAssistant } from "../../types";
|
||||
import { stateControlCircularSliderStyle } from "../state-control-circular-slider-style";
|
||||
|
||||
@customElement("ha-more-info-climate-humidity")
|
||||
export class HaMoreInfoClimateHumidity extends LitElement {
|
||||
@customElement("ha-state-control-climate-humidity")
|
||||
export class HaStateControlClimateHumidity extends LitElement {
|
||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||
|
||||
@property({ attribute: false }) public stateObj!: ClimateEntity;
|
||||
@ -224,12 +224,12 @@ export class HaMoreInfoClimateHumidity extends LitElement {
|
||||
}
|
||||
|
||||
static get styles(): CSSResultGroup {
|
||||
return moreInfoControlCircularSliderStyle;
|
||||
return stateControlCircularSliderStyle;
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"ha-more-info-climate-humidity": HaMoreInfoClimateHumidity;
|
||||
"ha-state-control-climate-humidity": HaStateControlClimateHumidity;
|
||||
}
|
||||
}
|
||||
@ -3,26 +3,26 @@ import { CSSResultGroup, LitElement, PropertyValues, css, html } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import { classMap } from "lit/directives/class-map";
|
||||
import { styleMap } from "lit/directives/style-map";
|
||||
import { UNIT_F } from "../../../../common/const";
|
||||
import { stateActive } from "../../../../common/entity/state_active";
|
||||
import { stateColorCss } from "../../../../common/entity/state_color";
|
||||
import { supportsFeature } from "../../../../common/entity/supports-feature";
|
||||
import { clamp } from "../../../../common/number/clamp";
|
||||
import { debounce } from "../../../../common/util/debounce";
|
||||
import "../../../../components/ha-big-number";
|
||||
import "../../../../components/ha-control-circular-slider";
|
||||
import type { ControlCircularSliderMode } from "../../../../components/ha-control-circular-slider";
|
||||
import "../../../../components/ha-outlined-icon-button";
|
||||
import "../../../../components/ha-svg-icon";
|
||||
import { UNIT_F } from "../../common/const";
|
||||
import { stateActive } from "../../common/entity/state_active";
|
||||
import { stateColorCss } from "../../common/entity/state_color";
|
||||
import { supportsFeature } from "../../common/entity/supports-feature";
|
||||
import { clamp } from "../../common/number/clamp";
|
||||
import { debounce } from "../../common/util/debounce";
|
||||
import "../../components/ha-big-number";
|
||||
import "../../components/ha-control-circular-slider";
|
||||
import type { ControlCircularSliderMode } from "../../components/ha-control-circular-slider";
|
||||
import "../../components/ha-outlined-icon-button";
|
||||
import "../../components/ha-svg-icon";
|
||||
import {
|
||||
CLIMATE_HVAC_ACTION_TO_MODE,
|
||||
ClimateEntity,
|
||||
ClimateEntityFeature,
|
||||
HvacMode,
|
||||
} from "../../../../data/climate";
|
||||
import { UNAVAILABLE } from "../../../../data/entity";
|
||||
import { HomeAssistant } from "../../../../types";
|
||||
import { moreInfoControlCircularSliderStyle } from "../ha-more-info-control-circular-slider-style";
|
||||
} from "../../data/climate";
|
||||
import { UNAVAILABLE } from "../../data/entity";
|
||||
import { HomeAssistant } from "../../types";
|
||||
import { stateControlCircularSliderStyle } from "../state-control-circular-slider-style";
|
||||
|
||||
type Target = "value" | "low" | "high";
|
||||
|
||||
@ -36,8 +36,8 @@ const SLIDER_MODES: Record<HvacMode, ControlCircularSliderMode> = {
|
||||
off: "full",
|
||||
};
|
||||
|
||||
@customElement("ha-more-info-climate-temperature")
|
||||
export class HaMoreInfoClimateTemperature extends LitElement {
|
||||
@customElement("ha-state-control-climate-temperature")
|
||||
export class HaStateControlClimateTemperature extends LitElement {
|
||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||
|
||||
@property({ attribute: false }) public stateObj!: ClimateEntity;
|
||||
@ -422,7 +422,7 @@ export class HaMoreInfoClimateTemperature extends LitElement {
|
||||
|
||||
static get styles(): CSSResultGroup {
|
||||
return [
|
||||
moreInfoControlCircularSliderStyle,
|
||||
stateControlCircularSliderStyle,
|
||||
css`
|
||||
/* Dual target */
|
||||
.dual {
|
||||
@ -477,6 +477,6 @@ export class HaMoreInfoClimateTemperature extends LitElement {
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"ha-more-info-climate-temperature": HaMoreInfoClimateTemperature;
|
||||
"ha-state-control-climate-temperature": HaStateControlClimateTemperature;
|
||||
}
|
||||
}
|
||||
@ -1,11 +1,11 @@
|
||||
import { mdiArrowBottomLeft, mdiArrowTopRight, mdiStop } from "@mdi/js";
|
||||
import {
|
||||
css,
|
||||
CSSResultGroup,
|
||||
html,
|
||||
LitElement,
|
||||
nothing,
|
||||
TemplateResult,
|
||||
css,
|
||||
html,
|
||||
nothing,
|
||||
} from "lit";
|
||||
import { customElement, property } from "lit/decorators";
|
||||
import { repeat } from "lit/directives/repeat";
|
||||
@ -13,23 +13,23 @@ import memoizeOne from "memoize-one";
|
||||
import {
|
||||
computeCloseIcon,
|
||||
computeOpenIcon,
|
||||
} from "../../../../common/entity/cover_icon";
|
||||
import { supportsFeature } from "../../../../common/entity/supports-feature";
|
||||
import "../../../../components/ha-control-button";
|
||||
import "../../../../components/ha-control-button-group";
|
||||
import "../../../../components/ha-control-slider";
|
||||
import "../../../../components/ha-svg-icon";
|
||||
} from "../../common/entity/cover_icon";
|
||||
import { supportsFeature } from "../../common/entity/supports-feature";
|
||||
import "../../components/ha-control-button";
|
||||
import "../../components/ha-control-button-group";
|
||||
import "../../components/ha-control-slider";
|
||||
import "../../components/ha-svg-icon";
|
||||
import {
|
||||
CoverEntity,
|
||||
CoverEntityFeature,
|
||||
canClose,
|
||||
canCloseTilt,
|
||||
canOpen,
|
||||
canOpenTilt,
|
||||
canStop,
|
||||
canStopTilt,
|
||||
CoverEntity,
|
||||
CoverEntityFeature,
|
||||
} from "../../../../data/cover";
|
||||
import { HomeAssistant } from "../../../../types";
|
||||
} from "../../data/cover";
|
||||
import { HomeAssistant } from "../../types";
|
||||
|
||||
type CoverButton =
|
||||
| "open"
|
||||
@ -107,8 +107,8 @@ export const getCoverLayout = memoizeOne(
|
||||
}
|
||||
);
|
||||
|
||||
@customElement("ha-more-info-cover-buttons")
|
||||
export class HaMoreInfoCoverButtons extends LitElement {
|
||||
@customElement("ha-state-control-cover-buttons")
|
||||
export class HaStateControlCoverButtons extends LitElement {
|
||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||
|
||||
@property({ attribute: false }) public stateObj!: CoverEntity;
|
||||
@ -159,9 +159,7 @@ export class HaMoreInfoCoverButtons extends LitElement {
|
||||
if (button === "open") {
|
||||
return html`
|
||||
<ha-control-button
|
||||
.label=${this.hass.localize(
|
||||
"ui.dialogs.more_info_control.cover.open_cover"
|
||||
)}
|
||||
.label=${this.hass.localize("ui.card.cover.open_cover")}
|
||||
@click=${this._onOpenTap}
|
||||
.disabled=${!canOpen(this.stateObj)}
|
||||
data-button="open"
|
||||
@ -173,9 +171,7 @@ export class HaMoreInfoCoverButtons extends LitElement {
|
||||
if (button === "close") {
|
||||
return html`
|
||||
<ha-control-button
|
||||
.label=${this.hass.localize(
|
||||
"ui.dialogs.more_info_control.cover.close_cover"
|
||||
)}
|
||||
.label=${this.hass.localize("ui.card.cover.close_cover")}
|
||||
@click=${this._onCloseTap}
|
||||
.disabled=${!canClose(this.stateObj)}
|
||||
data-button="close"
|
||||
@ -187,9 +183,7 @@ export class HaMoreInfoCoverButtons extends LitElement {
|
||||
if (button === "stop") {
|
||||
return html`
|
||||
<ha-control-button
|
||||
.label=${this.hass.localize(
|
||||
"ui.dialogs.more_info_control.cover.stop_cover"
|
||||
)}
|
||||
.label=${this.hass.localize("ui.card.cover.stop_cover")}
|
||||
@click=${this._onStopTap}
|
||||
.disabled=${!canStop(this.stateObj) && !canStopTilt(this.stateObj)}
|
||||
data-button="stop"
|
||||
@ -201,9 +195,7 @@ export class HaMoreInfoCoverButtons extends LitElement {
|
||||
if (button === "open-tilt") {
|
||||
return html`
|
||||
<ha-control-button
|
||||
.label=${this.hass.localize(
|
||||
"ui.dialogs.more_info_control.cover.open_tilt_cover"
|
||||
)}
|
||||
.label=${this.hass.localize("ui.card.cover.open_tilt_cover")}
|
||||
@click=${this._onOpenTiltTap}
|
||||
.disabled=${!canOpenTilt(this.stateObj)}
|
||||
data-button="open-tilt"
|
||||
@ -215,9 +207,7 @@ export class HaMoreInfoCoverButtons extends LitElement {
|
||||
if (button === "close-tilt") {
|
||||
return html`
|
||||
<ha-control-button
|
||||
.label=${this.hass.localize(
|
||||
"ui.dialogs.more_info_control.cover.close_tilt_cover"
|
||||
)}
|
||||
.label=${this.hass.localize("ui.card.cover.close_tilt_cover")}
|
||||
@click=${this._onCloseTiltTap}
|
||||
.disabled=${!canCloseTilt(this.stateObj)}
|
||||
data-button="close-tilt"
|
||||
@ -306,6 +296,6 @@ export class HaMoreInfoCoverButtons extends LitElement {
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"ha-more-info-cover-buttons": HaMoreInfoCoverButtons;
|
||||
"ha-state-control-cover-buttons": HaStateControlCoverButtons;
|
||||
}
|
||||
}
|
||||
@ -1,16 +1,16 @@
|
||||
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import { styleMap } from "lit/directives/style-map";
|
||||
import { computeAttributeNameDisplay } from "../../../../common/entity/compute_attribute_display";
|
||||
import { stateColorCss } from "../../../../common/entity/state_color";
|
||||
import "../../../../components/ha-control-slider";
|
||||
import { CoverEntity } from "../../../../data/cover";
|
||||
import { UNAVAILABLE } from "../../../../data/entity";
|
||||
import { DOMAIN_ATTRIBUTES_UNITS } from "../../../../data/entity_attributes";
|
||||
import { HomeAssistant } from "../../../../types";
|
||||
import { computeAttributeNameDisplay } from "../../common/entity/compute_attribute_display";
|
||||
import { stateColorCss } from "../../common/entity/state_color";
|
||||
import "../../components/ha-control-slider";
|
||||
import { CoverEntity } from "../../data/cover";
|
||||
import { UNAVAILABLE } from "../../data/entity";
|
||||
import { DOMAIN_ATTRIBUTES_UNITS } from "../../data/entity_attributes";
|
||||
import { HomeAssistant } from "../../types";
|
||||
|
||||
@customElement("ha-more-info-cover-position")
|
||||
export class HaMoreInfoCoverPosition extends LitElement {
|
||||
@customElement("ha-state-control-cover-position")
|
||||
export class HaStateControlCoverPosition extends LitElement {
|
||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||
|
||||
@property({ attribute: false }) public stateObj!: CoverEntity;
|
||||
@ -87,6 +87,6 @@ export class HaMoreInfoCoverPosition extends LitElement {
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"ha-more-info-cover-position": HaMoreInfoCoverPosition;
|
||||
"ha-state-control-cover-position": HaStateControlCoverPosition;
|
||||
}
|
||||
}
|
||||
@ -8,13 +8,13 @@ import {
|
||||
} from "lit";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import { styleMap } from "lit/directives/style-map";
|
||||
import { computeAttributeNameDisplay } from "../../../../common/entity/compute_attribute_display";
|
||||
import { stateColorCss } from "../../../../common/entity/state_color";
|
||||
import "../../../../components/ha-control-slider";
|
||||
import { CoverEntity } from "../../../../data/cover";
|
||||
import { UNAVAILABLE } from "../../../../data/entity";
|
||||
import { DOMAIN_ATTRIBUTES_UNITS } from "../../../../data/entity_attributes";
|
||||
import { HomeAssistant } from "../../../../types";
|
||||
import { computeAttributeNameDisplay } from "../../common/entity/compute_attribute_display";
|
||||
import { stateColorCss } from "../../common/entity/state_color";
|
||||
import "../../components/ha-control-slider";
|
||||
import { CoverEntity } from "../../data/cover";
|
||||
import { UNAVAILABLE } from "../../data/entity";
|
||||
import { DOMAIN_ATTRIBUTES_UNITS } from "../../data/entity_attributes";
|
||||
import { HomeAssistant } from "../../types";
|
||||
|
||||
export function generateTiltSliderTrackBackgroundGradient() {
|
||||
const count = 24;
|
||||
@ -45,8 +45,8 @@ export function generateTiltSliderTrackBackgroundGradient() {
|
||||
|
||||
const GRADIENT = generateTiltSliderTrackBackgroundGradient();
|
||||
|
||||
@customElement("ha-more-info-cover-tilt-position")
|
||||
export class HaMoreInfoCoverTiltPosition extends LitElement {
|
||||
@customElement("ha-state-control-cover-tilt-position")
|
||||
export class HaStateControlInfoCoverTiltPosition extends LitElement {
|
||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||
|
||||
@property({ attribute: false }) public stateObj!: CoverEntity;
|
||||
@ -128,6 +128,6 @@ export class HaMoreInfoCoverTiltPosition extends LitElement {
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"ha-more-info-cover-tilt-position": HaMoreInfoCoverTiltPosition;
|
||||
"ha-state-control-cover-tilt-position": HaStateControlInfoCoverTiltPosition;
|
||||
}
|
||||
}
|
||||
@ -3,16 +3,16 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
||||
import { customElement, property } from "lit/decorators";
|
||||
import { classMap } from "lit/directives/class-map";
|
||||
import { styleMap } from "lit/directives/style-map";
|
||||
import { domainIcon } from "../../../../common/entity/domain_icon";
|
||||
import { stateColorCss } from "../../../../common/entity/state_color";
|
||||
import "../../../../components/ha-control-button";
|
||||
import "../../../../components/ha-control-switch";
|
||||
import { UNAVAILABLE, UNKNOWN } from "../../../../data/entity";
|
||||
import { forwardHaptic } from "../../../../data/haptics";
|
||||
import { HomeAssistant } from "../../../../types";
|
||||
import { domainIcon } from "../../common/entity/domain_icon";
|
||||
import { stateColorCss } from "../../common/entity/state_color";
|
||||
import "../../components/ha-control-button";
|
||||
import "../../components/ha-control-switch";
|
||||
import { UNAVAILABLE, UNKNOWN } from "../../data/entity";
|
||||
import { forwardHaptic } from "../../data/haptics";
|
||||
import { HomeAssistant } from "../../types";
|
||||
|
||||
@customElement("ha-more-info-cover-toggle")
|
||||
export class HaMoreInfoCoverToggle extends LitElement {
|
||||
@customElement("ha-state-control-cover-toggle")
|
||||
export class HaStateControlCoverToggle extends LitElement {
|
||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||
|
||||
@property({ attribute: false }) public stateObj!: HassEntity;
|
||||
@ -67,9 +67,7 @@ export class HaMoreInfoCoverToggle extends LitElement {
|
||||
return html`
|
||||
<div class="buttons">
|
||||
<ha-control-button
|
||||
.label=${this.hass.localize(
|
||||
"ui.dialogs.more_info_control.cover.open_cover"
|
||||
)}
|
||||
.label=${this.hass.localize("ui.card.cover.open_cover")}
|
||||
@click=${this._turnOn}
|
||||
.disabled=${this.stateObj.state === UNAVAILABLE}
|
||||
class=${classMap({
|
||||
@ -84,9 +82,7 @@ export class HaMoreInfoCoverToggle extends LitElement {
|
||||
></ha-svg-icon>
|
||||
</ha-control-button>
|
||||
<ha-control-button
|
||||
.label=${this.hass.localize(
|
||||
"ui.dialogs.more_info_control.cover.close_cover"
|
||||
)}
|
||||
.label=${this.hass.localize("ui.card.cover.close_cover")}
|
||||
@click=${this._turnOff}
|
||||
.disabled=${this.stateObj.state === UNAVAILABLE}
|
||||
class=${classMap({
|
||||
@ -112,7 +108,9 @@ export class HaMoreInfoCoverToggle extends LitElement {
|
||||
reversed
|
||||
.checked=${isOn}
|
||||
@change=${this._valueChanged}
|
||||
.ariaLabel=${this.hass.localize("ui.dialogs.more_info_control.toggle")}
|
||||
.ariaLabel=${isOn
|
||||
? this.hass.localize("ui.card.cover.close_cover")
|
||||
: this.hass.localize("ui.card.cover.open_cover")}
|
||||
style=${styleMap({
|
||||
"--control-switch-on-color": onColor,
|
||||
"--control-switch-off-color": offColor,
|
||||
@ -164,6 +162,6 @@ export class HaMoreInfoCoverToggle extends LitElement {
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"ha-more-info-cover-toggle": HaMoreInfoCoverToggle;
|
||||
"ha-state-control-cover-toggle": HaStateControlCoverToggle;
|
||||
}
|
||||
}
|
||||
@ -1,14 +1,14 @@
|
||||
import { css, CSSResultGroup, html, LitElement } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import { styleMap } from "lit/directives/style-map";
|
||||
import { computeAttributeNameDisplay } from "../../../../common/entity/compute_attribute_display";
|
||||
import { stateActive } from "../../../../common/entity/state_active";
|
||||
import { stateColorCss } from "../../../../common/entity/state_color";
|
||||
import "../../../../components/ha-control-select";
|
||||
import type { ControlSelectOption } from "../../../../components/ha-control-select";
|
||||
import "../../../../components/ha-control-slider";
|
||||
import { UNAVAILABLE } from "../../../../data/entity";
|
||||
import { DOMAIN_ATTRIBUTES_UNITS } from "../../../../data/entity_attributes";
|
||||
import { computeAttributeNameDisplay } from "../../common/entity/compute_attribute_display";
|
||||
import { stateActive } from "../../common/entity/state_active";
|
||||
import { stateColorCss } from "../../common/entity/state_color";
|
||||
import "../../components/ha-control-select";
|
||||
import type { ControlSelectOption } from "../../components/ha-control-select";
|
||||
import "../../components/ha-control-slider";
|
||||
import { UNAVAILABLE } from "../../data/entity";
|
||||
import { DOMAIN_ATTRIBUTES_UNITS } from "../../data/entity_attributes";
|
||||
import {
|
||||
computeFanSpeedCount,
|
||||
computeFanSpeedIcon,
|
||||
@ -18,11 +18,11 @@ import {
|
||||
fanPercentageToSpeed,
|
||||
FanSpeed,
|
||||
fanSpeedToPercentage,
|
||||
} from "../../../../data/fan";
|
||||
import { HomeAssistant } from "../../../../types";
|
||||
} from "../../data/fan";
|
||||
import { HomeAssistant } from "../../types";
|
||||
|
||||
@customElement("ha-more-info-fan-speed")
|
||||
export class HaMoreInfoFanSpeed extends LitElement {
|
||||
@customElement("ha-state-control-fan-speed")
|
||||
export class HaStateControlFanSpeed extends LitElement {
|
||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||
|
||||
@property({ attribute: false }) public stateObj!: FanEntity;
|
||||
@ -70,10 +70,7 @@ export class HaMoreInfoFanSpeed extends LitElement {
|
||||
if (speed === "on" || speed === "off") {
|
||||
return this.hass.formatEntityState(this.stateObj, speed);
|
||||
}
|
||||
return (
|
||||
this.hass.localize(`ui.dialogs.more_info_control.fan.speed.${speed}`) ||
|
||||
speed
|
||||
);
|
||||
return this.hass.localize(`ui.card.fan.speed.${speed}`) || speed;
|
||||
}
|
||||
|
||||
protected render() {
|
||||
@ -167,6 +164,6 @@ export class HaMoreInfoFanSpeed extends LitElement {
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"ha-more-info-fan-speed": HaMoreInfoFanSpeed;
|
||||
"ha-state-control-fan-speed": HaStateControlFanSpeed;
|
||||
}
|
||||
}
|
||||
@ -1,20 +1,20 @@
|
||||
import { mdiFlash, mdiFlashOff } from "@mdi/js";
|
||||
import { HassEntity } from "home-assistant-js-websocket";
|
||||
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
||||
import { CSSResultGroup, LitElement, TemplateResult, css, html } from "lit";
|
||||
import { customElement, property } from "lit/decorators";
|
||||
import { classMap } from "lit/directives/class-map";
|
||||
import { styleMap } from "lit/directives/style-map";
|
||||
import { computeDomain } from "../../../common/entity/compute_domain";
|
||||
import { stateActive } from "../../../common/entity/state_active";
|
||||
import { stateColorCss } from "../../../common/entity/state_color";
|
||||
import "../../../components/ha-control-button";
|
||||
import "../../../components/ha-control-switch";
|
||||
import { UNAVAILABLE, UNKNOWN } from "../../../data/entity";
|
||||
import { forwardHaptic } from "../../../data/haptics";
|
||||
import { HomeAssistant } from "../../../types";
|
||||
import { computeDomain } from "../common/entity/compute_domain";
|
||||
import { stateActive } from "../common/entity/state_active";
|
||||
import { stateColorCss } from "../common/entity/state_color";
|
||||
import "../components/ha-control-button";
|
||||
import "../components/ha-control-switch";
|
||||
import { UNAVAILABLE, UNKNOWN } from "../data/entity";
|
||||
import { forwardHaptic } from "../data/haptics";
|
||||
import { HomeAssistant } from "../types";
|
||||
|
||||
@customElement("ha-more-info-toggle")
|
||||
export class HaMoreInfoToggle extends LitElement {
|
||||
@customElement("ha-state-control-toggle")
|
||||
export class HaStateControlToggle extends LitElement {
|
||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||
|
||||
@property({ attribute: false }) public stateObj!: HassEntity;
|
||||
@ -77,7 +77,7 @@ export class HaMoreInfoToggle extends LitElement {
|
||||
return html`
|
||||
<div class="buttons">
|
||||
<ha-control-button
|
||||
.label=${this.hass.localize("ui.dialogs.more_info_control.turn_on")}
|
||||
.label=${this.hass.localize("ui.card.common.turn_on")}
|
||||
@click=${this._turnOn}
|
||||
.disabled=${this.stateObj.state === UNAVAILABLE}
|
||||
class=${classMap({
|
||||
@ -90,9 +90,7 @@ export class HaMoreInfoToggle extends LitElement {
|
||||
<ha-svg-icon .path=${this.iconPathOn || mdiFlash}></ha-svg-icon>
|
||||
</ha-control-button>
|
||||
<ha-control-button
|
||||
.label=${this.hass.localize(
|
||||
"ui.dialogs.more_info_control.turn_off"
|
||||
)}
|
||||
.label=${this.hass.localize("ui.card.common.turn_off")}
|
||||
@click=${this._turnOff}
|
||||
.disabled=${this.stateObj.state === UNAVAILABLE}
|
||||
class=${classMap({
|
||||
@ -117,7 +115,7 @@ export class HaMoreInfoToggle extends LitElement {
|
||||
.checked=${isOn}
|
||||
.showHandle=${stateActive(this.stateObj)}
|
||||
@change=${this._valueChanged}
|
||||
.ariaLabel=${this.hass.localize("ui.dialogs.more_info_control.toggle")}
|
||||
.ariaLabel=${this.hass.localize("ui.card.common.toggle")}
|
||||
style=${styleMap({
|
||||
"--control-switch-on-color": onColor,
|
||||
"--control-switch-off-color": offColor,
|
||||
@ -169,6 +167,6 @@ export class HaMoreInfoToggle extends LitElement {
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"ha-more-info-toggle": HaMoreInfoToggle;
|
||||
"ha-state-control-toggle": HaStateControlToggle;
|
||||
}
|
||||
}
|
||||
@ -2,25 +2,25 @@ import { mdiMinus, mdiPlus, mdiWaterPercent } from "@mdi/js";
|
||||
import { CSSResultGroup, LitElement, PropertyValues, html } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import { styleMap } from "lit/directives/style-map";
|
||||
import { stateActive } from "../../../../common/entity/state_active";
|
||||
import { stateColorCss } from "../../../../common/entity/state_color";
|
||||
import { clamp } from "../../../../common/number/clamp";
|
||||
import { debounce } from "../../../../common/util/debounce";
|
||||
import "../../../../components/ha-big-number";
|
||||
import "../../../../components/ha-control-circular-slider";
|
||||
import "../../../../components/ha-outlined-icon-button";
|
||||
import "../../../../components/ha-svg-icon";
|
||||
import { UNAVAILABLE } from "../../../../data/entity";
|
||||
import { stateActive } from "../../common/entity/state_active";
|
||||
import { stateColorCss } from "../../common/entity/state_color";
|
||||
import { clamp } from "../../common/number/clamp";
|
||||
import { debounce } from "../../common/util/debounce";
|
||||
import "../../components/ha-big-number";
|
||||
import "../../components/ha-control-circular-slider";
|
||||
import "../../components/ha-outlined-icon-button";
|
||||
import "../../components/ha-svg-icon";
|
||||
import { UNAVAILABLE } from "../../data/entity";
|
||||
import {
|
||||
HUMIDIFIER_ACTION_MODE,
|
||||
HumidifierEntity,
|
||||
HumidifierEntityDeviceClass,
|
||||
} from "../../../../data/humidifier";
|
||||
import { HomeAssistant } from "../../../../types";
|
||||
import { moreInfoControlCircularSliderStyle } from "../ha-more-info-control-circular-slider-style";
|
||||
} from "../../data/humidifier";
|
||||
import { HomeAssistant } from "../../types";
|
||||
import { stateControlCircularSliderStyle } from "../state-control-circular-slider-style";
|
||||
|
||||
@customElement("ha-more-info-humidifier-humidity")
|
||||
export class HaMoreInfoHumidifierHumidity extends LitElement {
|
||||
@customElement("ha-state-control-humidifier-humidity")
|
||||
export class HaStateControlHumidifierHumidity extends LitElement {
|
||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||
|
||||
@property({ attribute: false }) public stateObj!: HumidifierEntity;
|
||||
@ -240,12 +240,12 @@ export class HaMoreInfoHumidifierHumidity extends LitElement {
|
||||
}
|
||||
|
||||
static get styles(): CSSResultGroup {
|
||||
return moreInfoControlCircularSliderStyle;
|
||||
return stateControlCircularSliderStyle;
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"ha-more-info-humidifier-humidity": HaMoreInfoHumidifierHumidity;
|
||||
"ha-state-control-humidifier-humidity": HaStateControlHumidifierHumidity;
|
||||
}
|
||||
}
|
||||
@ -1,20 +1,16 @@
|
||||
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import { styleMap } from "lit/directives/style-map";
|
||||
import {
|
||||
hsv2rgb,
|
||||
rgb2hex,
|
||||
rgb2hsv,
|
||||
} from "../../../../common/color/convert-color";
|
||||
import { stateActive } from "../../../../common/entity/state_active";
|
||||
import { stateColorCss } from "../../../../common/entity/state_color";
|
||||
import "../../../../components/ha-control-slider";
|
||||
import { UNAVAILABLE } from "../../../../data/entity";
|
||||
import { LightEntity } from "../../../../data/light";
|
||||
import { HomeAssistant } from "../../../../types";
|
||||
import { hsv2rgb, rgb2hex, rgb2hsv } from "../../common/color/convert-color";
|
||||
import { stateActive } from "../../common/entity/state_active";
|
||||
import { stateColorCss } from "../../common/entity/state_color";
|
||||
import "../../components/ha-control-slider";
|
||||
import { UNAVAILABLE } from "../../data/entity";
|
||||
import { LightEntity } from "../../data/light";
|
||||
import { HomeAssistant } from "../../types";
|
||||
|
||||
@customElement("ha-more-info-light-brightness")
|
||||
export class HaMoreInfoLightBrightness extends LitElement {
|
||||
@customElement("ha-state-control-light-brightness")
|
||||
export class HaStateControlLightBrightness extends LitElement {
|
||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||
|
||||
@property({ attribute: false }) public stateObj!: LightEntity;
|
||||
@ -69,8 +65,9 @@ export class HaMoreInfoLightBrightness extends LitElement {
|
||||
max="100"
|
||||
.showHandle=${stateActive(this.stateObj)}
|
||||
@value-changed=${this._valueChanged}
|
||||
.ariaLabel=${this.hass.localize(
|
||||
"ui.dialogs.more_info_control.light.brightness"
|
||||
.ariaLabel=${this.hass.formatEntityAttributeName(
|
||||
this.stateObj,
|
||||
"brightness"
|
||||
)}
|
||||
style=${styleMap({
|
||||
"--control-slider-color": color,
|
||||
@ -103,6 +100,6 @@ export class HaMoreInfoLightBrightness extends LitElement {
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"ha-more-info-light-brightness": HaMoreInfoLightBrightness;
|
||||
"ha-state-control-light-brightness": HaStateControlLightBrightness;
|
||||
}
|
||||
}
|
||||
@ -9,17 +9,17 @@ import {
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import { classMap } from "lit/directives/class-map";
|
||||
import { styleMap } from "lit/directives/style-map";
|
||||
import { domainIcon } from "../../../../common/entity/domain_icon";
|
||||
import { stateColorCss } from "../../../../common/entity/state_color";
|
||||
import "../../../../components/ha-control-button";
|
||||
import "../../../../components/ha-control-switch";
|
||||
import { UNAVAILABLE, UNKNOWN } from "../../../../data/entity";
|
||||
import { forwardHaptic } from "../../../../data/haptics";
|
||||
import { callProtectedLockService, LockEntity } from "../../../../data/lock";
|
||||
import { HomeAssistant } from "../../../../types";
|
||||
import { domainIcon } from "../../common/entity/domain_icon";
|
||||
import { stateColorCss } from "../../common/entity/state_color";
|
||||
import "../../components/ha-control-button";
|
||||
import "../../components/ha-control-switch";
|
||||
import { UNAVAILABLE, UNKNOWN } from "../../data/entity";
|
||||
import { forwardHaptic } from "../../data/haptics";
|
||||
import { callProtectedLockService, LockEntity } from "../../data/lock";
|
||||
import { HomeAssistant } from "../../types";
|
||||
|
||||
@customElement("ha-more-info-lock-toggle")
|
||||
export class HaMoreInfoLockToggle extends LitElement {
|
||||
@customElement("ha-state-control-lock-toggle")
|
||||
export class HaStateControlLockToggle extends LitElement {
|
||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||
|
||||
@property({ attribute: false }) public stateObj!: LockEntity;
|
||||
@ -97,17 +97,13 @@ export class HaMoreInfoLockToggle extends LitElement {
|
||||
return html`
|
||||
<div class="buttons">
|
||||
<ha-control-button
|
||||
.label=${this.hass.localize(
|
||||
"ui.dialogs.more_info_control.lock.lock"
|
||||
)}
|
||||
.label=${this.hass.localize("ui.card.lock.lock")}
|
||||
@click=${this._turnOn}
|
||||
>
|
||||
<ha-svg-icon .path=${onIcon}></ha-svg-icon>
|
||||
</ha-control-button>
|
||||
<ha-control-button
|
||||
.label=${this.hass.localize(
|
||||
"ui.dialogs.more_info_control.lock.unlock"
|
||||
)}
|
||||
.label=${this.hass.localize("ui.card.lock.unlock")}
|
||||
@click=${this._turnOff}
|
||||
>
|
||||
<ha-svg-icon .path=${offIcon}></ha-svg-icon>
|
||||
@ -122,7 +118,9 @@ export class HaMoreInfoLockToggle extends LitElement {
|
||||
reversed
|
||||
.checked=${this._isOn}
|
||||
@change=${this._valueChanged}
|
||||
.ariaLabel=${this.hass.localize("ui.dialogs.more_info_control.toggle")}
|
||||
.ariaLabel=${this._isOn
|
||||
? this.hass.localize("ui.card.lock.unlock")
|
||||
: this.hass.localize("ui.card.lock.lock")}
|
||||
style=${styleMap({
|
||||
"--control-switch-on-color": color,
|
||||
"--control-switch-off-color": color,
|
||||
@ -198,6 +196,6 @@ export class HaMoreInfoLockToggle extends LitElement {
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"ha-more-info-lock-toggle": HaMoreInfoLockToggle;
|
||||
"ha-state-control-lock-toggle": HaStateControlLockToggle;
|
||||
}
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
import { css } from "lit";
|
||||
|
||||
export const moreInfoControlCircularSliderStyle = css`
|
||||
export const stateControlCircularSliderStyle = css`
|
||||
/* Layout elements */
|
||||
:host {
|
||||
width: 320px;
|
||||
@ -2,26 +2,26 @@ import { mdiMinus, mdiPlus } from "@mdi/js";
|
||||
import { CSSResultGroup, LitElement, PropertyValues, html } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import { styleMap } from "lit/directives/style-map";
|
||||
import { UNIT_F } from "../../../../common/const";
|
||||
import { stateActive } from "../../../../common/entity/state_active";
|
||||
import { stateColorCss } from "../../../../common/entity/state_color";
|
||||
import { supportsFeature } from "../../../../common/entity/supports-feature";
|
||||
import { clamp } from "../../../../common/number/clamp";
|
||||
import { debounce } from "../../../../common/util/debounce";
|
||||
import "../../../../components/ha-big-number";
|
||||
import "../../../../components/ha-control-circular-slider";
|
||||
import "../../../../components/ha-outlined-icon-button";
|
||||
import "../../../../components/ha-svg-icon";
|
||||
import { UNAVAILABLE } from "../../../../data/entity";
|
||||
import { UNIT_F } from "../../common/const";
|
||||
import { stateActive } from "../../common/entity/state_active";
|
||||
import { stateColorCss } from "../../common/entity/state_color";
|
||||
import { supportsFeature } from "../../common/entity/supports-feature";
|
||||
import { clamp } from "../../common/number/clamp";
|
||||
import { debounce } from "../../common/util/debounce";
|
||||
import "../../components/ha-big-number";
|
||||
import "../../components/ha-control-circular-slider";
|
||||
import "../../components/ha-outlined-icon-button";
|
||||
import "../../components/ha-svg-icon";
|
||||
import { UNAVAILABLE } from "../../data/entity";
|
||||
import {
|
||||
WaterHeaterEntity,
|
||||
WaterHeaterEntityFeature,
|
||||
} from "../../../../data/water_heater";
|
||||
import { HomeAssistant } from "../../../../types";
|
||||
import { moreInfoControlCircularSliderStyle } from "../ha-more-info-control-circular-slider-style";
|
||||
} from "../../data/water_heater";
|
||||
import { HomeAssistant } from "../../types";
|
||||
import { stateControlCircularSliderStyle } from "../state-control-circular-slider-style";
|
||||
|
||||
@customElement("ha-more-info-water_heater-temperature")
|
||||
export class HaMoreInfoWaterHeaterTemperature extends LitElement {
|
||||
@customElement("ha-state-control-water_heater-temperature")
|
||||
export class HaStateControlWaterHeaterTemperature extends LitElement {
|
||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||
|
||||
@property({ attribute: false }) public stateObj!: WaterHeaterEntity;
|
||||
@ -237,12 +237,12 @@ export class HaMoreInfoWaterHeaterTemperature extends LitElement {
|
||||
}
|
||||
|
||||
static get styles(): CSSResultGroup {
|
||||
return moreInfoControlCircularSliderStyle;
|
||||
return stateControlCircularSliderStyle;
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"ha-more-info-water_heater-temperature": HaMoreInfoWaterHeaterTemperature;
|
||||
"ha-state-control-water_heater-temperature": HaStateControlWaterHeaterTemperature;
|
||||
}
|
||||
}
|
||||
@ -72,15 +72,30 @@
|
||||
"upload_backup": "Upload backup"
|
||||
},
|
||||
"card": {
|
||||
"common": {
|
||||
"turn_on": "Turn on",
|
||||
"turn_off": "Turn off",
|
||||
"toggle": "Toggle"
|
||||
},
|
||||
"alarm_control_panel": {
|
||||
"code": "Code",
|
||||
"clear_code": "Clear",
|
||||
"disarm": "Disarm",
|
||||
"arm": "Arm",
|
||||
"arm_home": "Arm home",
|
||||
"arm_away": "Arm away",
|
||||
"arm_night": "Arm night",
|
||||
"arm_vacation": "Arm vacation",
|
||||
"arm_custom_bypass": "Custom bypass"
|
||||
"arm_custom_bypass": "Custom bypass",
|
||||
"modes_label": "Modes",
|
||||
"modes": {
|
||||
"armed_away": "Away",
|
||||
"armed_home": "Home",
|
||||
"armed_night": "Night",
|
||||
"armed_vacation": "Vacation",
|
||||
"armed_custom_bypass": "Custom",
|
||||
"disarmed": "Disarmed"
|
||||
}
|
||||
},
|
||||
"area": {
|
||||
"area_not_found": "Area not found."
|
||||
@ -120,15 +135,24 @@
|
||||
},
|
||||
"cover": {
|
||||
"position": "Position",
|
||||
"tilt_position": "Tilt position"
|
||||
"tilt_position": "Tilt position",
|
||||
"open_cover": "Open cover",
|
||||
"close_cover": "Close cover",
|
||||
"open_tilt_cover": "Open cover tilt",
|
||||
"close_tilt_cover": "Close cover tilt",
|
||||
"stop_cover": "Stop cover"
|
||||
},
|
||||
"fan": {
|
||||
"speed": "Speed",
|
||||
"preset_mode": "Preset mode",
|
||||
"oscillate": "Oscillate",
|
||||
"direction": "Direction",
|
||||
"forward": "Forward",
|
||||
"reverse": "Reverse"
|
||||
"reverse": "Reverse",
|
||||
"speed": {
|
||||
"low": "Low",
|
||||
"medium": "Medium",
|
||||
"high": "High"
|
||||
}
|
||||
},
|
||||
"humidifier": {
|
||||
"currently": "[%key:ui::card::climate::currently%]",
|
||||
@ -930,9 +954,6 @@
|
||||
"last_changed": "Last changed",
|
||||
"last_updated": "Last updated",
|
||||
"show_more": "Show more",
|
||||
"turn_on": "Turn on",
|
||||
"turn_off": "Turn off",
|
||||
"toggle": "Toggle",
|
||||
"exit_edit_mode": "Exit edit mode",
|
||||
"script": {
|
||||
"last_action": "Last action",
|
||||
@ -975,11 +996,6 @@
|
||||
"create_zone": "Create zone from current location"
|
||||
},
|
||||
"cover": {
|
||||
"open_cover": "Open cover",
|
||||
"close_cover": "Close cover",
|
||||
"open_tilt_cover": "Open cover tilt",
|
||||
"close_tilt_cover": "Close cover tilt",
|
||||
"stop_cover": "Stop cover",
|
||||
"switch_mode": {
|
||||
"button": "Switch to button mode",
|
||||
"position": "Switch to position mode"
|
||||
@ -995,7 +1011,6 @@
|
||||
"color_temp": "Temperature",
|
||||
"set_white": "Set white",
|
||||
"select_effect": "Select effect",
|
||||
"brightness": "Brightness",
|
||||
"color_picker": {
|
||||
"title": "Change color",
|
||||
"mode": {
|
||||
@ -1019,32 +1034,7 @@
|
||||
"set_forward_direction": "Set forward direction",
|
||||
"set_reverse_direction": "Set reverse direction",
|
||||
"turn_on_oscillating": "Turn on oscillating",
|
||||
"turn_off_oscillating": "Turn off oscillating",
|
||||
"speed": {
|
||||
"low": "Low",
|
||||
"medium": "Medium",
|
||||
"high": "High"
|
||||
}
|
||||
},
|
||||
"alarm_control_panel": {
|
||||
"modes_label": "Modes",
|
||||
"modes": {
|
||||
"armed_away": "Away",
|
||||
"armed_home": "Home",
|
||||
"armed_night": "Night",
|
||||
"armed_vacation": "Vacation",
|
||||
"armed_custom_bypass": "Custom",
|
||||
"disarmed": "Disarmed"
|
||||
},
|
||||
"disarm_title": "Disarm",
|
||||
"disarm_action": "Disarm",
|
||||
"arm_title": "Arm",
|
||||
"arm_action": "Arm"
|
||||
},
|
||||
"lock": {
|
||||
"open": "Open",
|
||||
"lock": "Lock",
|
||||
"unlock": "Unlock"
|
||||
"turn_off_oscillating": "Turn off oscillating"
|
||||
},
|
||||
"climate": {
|
||||
"temperature": "Temperature",
|
||||
@ -5199,14 +5189,14 @@
|
||||
},
|
||||
"alarm-modes": {
|
||||
"label": "Alarm modes",
|
||||
"modes": "[%key:ui::dialogs::more_info_control::alarm_control_panel::modes_label%]",
|
||||
"modes": "[%key:ui::card::alarm_control_panel::modes_label%]",
|
||||
"modes_list": {
|
||||
"armed_away": "[%key:ui::dialogs::more_info_control::alarm_control_panel::modes::armed_away%]",
|
||||
"armed_home": "[%key:ui::dialogs::more_info_control::alarm_control_panel::modes::armed_home%]",
|
||||
"armed_night": "[%key:ui::dialogs::more_info_control::alarm_control_panel::modes::armed_night%]",
|
||||
"armed_vacation": "[%key:ui::dialogs::more_info_control::alarm_control_panel::modes::armed_vacation%]",
|
||||
"armed_custom_bypass": "[%key:ui::dialogs::more_info_control::alarm_control_panel::modes::armed_custom_bypass%]",
|
||||
"disarmed": "[%key:ui::dialogs::more_info_control::alarm_control_panel::modes::disarmed%]"
|
||||
"armed_away": "[%key:ui::card::alarm_control_panel::modes::armed_away%]",
|
||||
"armed_home": "[%key:ui::card::alarm_control_panel::modes::armed_home%]",
|
||||
"armed_night": "[%key:ui::card::alarm_control_panel::modes::armed_night%]",
|
||||
"armed_vacation": "[%key:ui::card::alarm_control_panel::modes::armed_vacation%]",
|
||||
"armed_custom_bypass": "[%key:ui::card::alarm_control_panel::modes::armed_custom_bypass%]",
|
||||
"disarmed": "[%key:ui::card::alarm_control_panel::modes::disarmed%]"
|
||||
}
|
||||
},
|
||||
"light-brightness": {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user