diff --git a/src/dialogs/config-flow/previews/entity-preview-row.ts b/src/dialogs/config-flow/previews/entity-preview-row.ts
index deb0031150..a52606b510 100644
--- a/src/dialogs/config-flow/previews/entity-preview-row.ts
+++ b/src/dialogs/config-flow/previews/entity-preview-row.ts
@@ -1,10 +1,24 @@
import type { HassEntity } from "home-assistant-js-websocket";
-import type { CSSResultGroup } from "lit";
+import type { CSSResultGroup, TemplateResult } from "lit";
import { LitElement, css, html, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
+import { ifDefined } from "lit/directives/if-defined";
+import { format } from "date-fns";
import { computeStateName } from "../../../common/entity/compute_state_name";
+import "../../../components/ha-climate-state";
+import "../../../components/ha-cover-controls";
+import "../../../components/ha-cover-tilt-controls";
+import "../../../components/ha-date-input";
+import "../../../components/ha-humidifier-state";
+import "../../../components/ha-select";
+import "../../../components/ha-slider";
+import "../../../components/ha-time-input";
+import "../../../components/entity/ha-entity-toggle";
import "../../../components/entity/state-badge";
+import { isTiltOnly } from "../../../data/cover";
import { isUnavailableState } from "../../../data/entity";
+import type { ImageEntity } from "../../../data/image";
+import { computeImageUrl } from "../../../data/image";
import { SENSOR_DEVICE_CLASS_TIMESTAMP } from "../../../data/sensor";
import "../../../panels/lovelace/components/hui-timestamp-display";
import type { HomeAssistant } from "../../../types";
@@ -28,18 +42,7 @@ class EntityPreviewRow extends LitElement {
${computeStateName(stateObj)}
-
- ${stateObj.attributes.device_class === SENSOR_DEVICE_CLASS_TIMESTAMP &&
- !isUnavailableState(stateObj.state)
- ? html`
-
- `
- : this.hass.formatEntityState(stateObj)}
-
`;
+ ${this.renderEntityState(stateObj)}
`;
}
static get styles(): CSSResultGroup {
@@ -59,8 +62,308 @@ class EntityPreviewRow extends LitElement {
.value {
direction: ltr;
}
+ .numberflex {
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ flex-grow: 2;
+ }
+ .numberstate {
+ min-width: 45px;
+ text-align: end;
+ }
+ ha-textfield {
+ text-align: end;
+ direction: ltr !important;
+ }
+ ha-slider {
+ width: 100%;
+ max-width: 200px;
+ }
+ ha-time-input {
+ margin-left: 4px;
+ margin-inline-start: 4px;
+ margin-inline-end: initial;
+ direction: var(--direction);
+ }
+ .datetimeflex {
+ display: flex;
+ justify-content: flex-end;
+ width: 100%;
+ }
+ mwc-button {
+ margin-right: -0.57em;
+ margin-inline-end: -0.57em;
+ margin-inline-start: initial;
+ }
+ img {
+ display: block;
+ width: 100%;
+ }
`;
}
+
+ private renderEntityState(stateObj: HassEntity): TemplateResult | string {
+ const domain = stateObj.entity_id.split(".", 1)[0];
+
+ if (domain === "button") {
+ return html`
+
+ ${this.hass.localize("ui.card.button.press")}
+
+ `;
+ }
+
+ const climateDomains = ["climate", "water_heater"];
+ if (climateDomains.includes(domain)) {
+ return html`
+
+
+ `;
+ }
+
+ if (domain === "cover") {
+ return html`
+ ${isTiltOnly(stateObj)
+ ? html`
+
+ `
+ : html`
+
+ `}
+ `;
+ }
+
+ if (domain === "date") {
+ return html`
+
+
+ `;
+ }
+
+ if (domain === "datetime") {
+ const dateObj = isUnavailableState(stateObj.state)
+ ? undefined
+ : new Date(stateObj.state);
+ const time = dateObj ? format(dateObj, "HH:mm:ss") : undefined;
+ const date = dateObj ? format(dateObj, "yyyy-MM-dd") : undefined;
+ return html`
+
+
+
+
+
+ `;
+ }
+
+ if (domain === "event") {
+ return html`
+
+ ${isUnavailableState(stateObj.state)
+ ? this.hass.formatEntityState(stateObj)
+ : html``}
+
+
+ ${isUnavailableState(stateObj.state)
+ ? nothing
+ : this.hass.formatEntityAttributeValue(stateObj, "event_type")}
+
+ `;
+ }
+
+ const toggleDomains = ["fan", "light", "remote", "siren", "switch"];
+ if (toggleDomains.includes(domain)) {
+ const showToggle =
+ stateObj.state === "on" ||
+ stateObj.state === "off" ||
+ isUnavailableState(stateObj.state);
+ return html`
+ ${showToggle
+ ? html`
+
+ `
+ : this.hass.formatEntityState(stateObj)}
+ `;
+ }
+
+ if (domain === "humidifier") {
+ return html`
+
+
+ `;
+ }
+
+ if (domain === "image") {
+ const image: string = computeImageUrl(stateObj as ImageEntity);
+ return html`
+ })
+ `;
+ }
+
+ if (domain === "lock") {
+ return html`
+
+ ${stateObj.state === "locked"
+ ? this.hass!.localize("ui.card.lock.unlock")
+ : this.hass!.localize("ui.card.lock.lock")}
+
+ `;
+ }
+
+ if (domain === "number") {
+ const showNumberSlider =
+ stateObj.attributes.mode === "slider" ||
+ (stateObj.attributes.mode === "auto" &&
+ (Number(stateObj.attributes.max) - Number(stateObj.attributes.min)) /
+ Number(stateObj.attributes.step) <=
+ 256);
+ return html`
+ ${showNumberSlider
+ ? html`
+
+
+
+ ${this.hass.formatEntityState(stateObj)}
+
+
+ `
+ : html`
+
+
`}
+ `;
+ }
+
+ if (domain === "select") {
+ return html`
+
+ ${stateObj.attributes.options
+ ? stateObj.attributes.options.map(
+ (option) => html`
+
+ ${this.hass!.formatEntityState(stateObj, option)}
+
+ `
+ )
+ : ""}
+
+ `;
+ }
+
+ if (domain === "sensor") {
+ const showSensor =
+ stateObj.attributes.device_class === SENSOR_DEVICE_CLASS_TIMESTAMP &&
+ !isUnavailableState(stateObj.state);
+ return html`
+ ${showSensor
+ ? html`
+
+ `
+ : this.hass.formatEntityState(stateObj)}
+ `;
+ }
+
+ if (domain === "text") {
+ return html`
+
+ `;
+ }
+
+ if (domain === "time") {
+ return html`
+
+ `;
+ }
+
+ if (domain === "weather") {
+ return html`
+
+ ${isUnavailableState(stateObj.state) ||
+ stateObj.attributes.temperature === undefined ||
+ stateObj.attributes.temperature === null
+ ? this.hass.formatEntityState(stateObj)
+ : this.hass.formatEntityAttributeValue(stateObj, "temperature")}
+
+ `;
+ }
+
+ return this.hass.formatEntityState(stateObj);
+ }
}
declare global {