${this.devices.map(
- (device) =>
- html`
-
-
- ${computeDeviceName(device, this.hass)}
- ${!device.model && !device.manufacturer
- ? html` `
- : html`${device.model}
- ${device.manufacturer
- ? html`(${device.manufacturer})`
- : ""}`}
-
-
+ (device) => html`
+
+
+ ${computeDeviceName(device, this.hass)}
+ ${!device.model && !device.manufacturer
+ ? html` `
+ : html`${device.model}
+ ${device.manufacturer
+ ? html`(${device.manufacturer})`
+ : ""}`}
- `
+
+
+ `
)}
`}
diff --git a/src/dialogs/more-info/components/lights/dialog-light-color-favorite.ts b/src/dialogs/more-info/components/lights/dialog-light-color-favorite.ts
index 410ba70c04..8549c90682 100644
--- a/src/dialogs/more-info/components/lights/dialog-light-color-favorite.ts
+++ b/src/dialogs/more-info/components/lights/dialog-light-color-favorite.ts
@@ -150,22 +150,21 @@ class DialogLightColorFavorite extends LitElement {
? html`
${this._modes.map(
- (value) =>
- html`
-
-
-
- `
+ (value) => html`
+
+
+
+ `
)}
`
diff --git a/src/dialogs/more-info/components/lights/light-color-rgb-picker.ts b/src/dialogs/more-info/components/lights/light-color-rgb-picker.ts
index cf50ae5c04..90b18f4223 100644
--- a/src/dialogs/more-info/components/lights/light-color-rgb-picker.ts
+++ b/src/dialogs/more-info/components/lights/light-color-rgb-picker.ts
@@ -415,7 +415,7 @@ class LightRgbColorPicker extends LitElement {
number,
number,
number,
- number
+ number,
];
this._applyColor({ rgbww_color });
} else if (lightSupportsColorMode(this.stateObj!, LightColorMode.RGBW)) {
@@ -427,7 +427,7 @@ class LightRgbColorPicker extends LitElement {
number,
number,
number,
- number
+ number,
];
this._applyColor({ rgbw_color });
}
diff --git a/src/dialogs/more-info/components/lock/ha-more-info-lock-toggle.ts b/src/dialogs/more-info/components/lock/ha-more-info-lock-toggle.ts
index aafecef40d..0f5691e408 100644
--- a/src/dialogs/more-info/components/lock/ha-more-info-lock-toggle.ts
+++ b/src/dialogs/more-info/components/lock/ha-more-info-lock-toggle.ts
@@ -15,9 +15,8 @@ import "../../../../components/ha-control-button";
import "../../../../components/ha-control-switch";
import { UNAVAILABLE, UNKNOWN } from "../../../../data/entity";
import { forwardHaptic } from "../../../../data/haptics";
-import { LockEntity } from "../../../../data/lock";
+import { callProtectedLockService, LockEntity } from "../../../../data/lock";
import { HomeAssistant } from "../../../../types";
-import { showEnterCodeDialogDialog } from "../../../enter-code/show-enter-code-dialog";
@customElement("ha-more-info-lock-toggle")
export class HaMoreInfoLockToggle extends LitElement {
@@ -68,30 +67,12 @@ export class HaMoreInfoLockToggle extends LitElement {
return;
}
forwardHaptic("light");
-
- let code: string | undefined;
-
- if (this.stateObj.attributes.code_format) {
- const response = await showEnterCodeDialogDialog(this, {
- codeFormat: "text",
- codePattern: this.stateObj.attributes.code_format,
- title: this.hass.localize(
- `ui.dialogs.more_info_control.lock.${turnOn ? "lock" : "unlock"}`
- ),
- submitText: this.hass.localize(
- `ui.dialogs.more_info_control.lock.${turnOn ? "lock" : "unlock"}`
- ),
- });
- if (response == null) {
- throw new Error("cancel");
- }
- code = response;
- }
-
- await this.hass.callService("lock", turnOn ? "lock" : "unlock", {
- entity_id: this.stateObj.entity_id,
- code,
- });
+ callProtectedLockService(
+ this,
+ this.hass,
+ this.stateObj,
+ turnOn ? "lock" : "unlock"
+ );
}
protected render(): TemplateResult {
diff --git a/src/dialogs/more-info/const.ts b/src/dialogs/more-info/const.ts
index d6d6d615aa..a0dc211937 100644
--- a/src/dialogs/more-info/const.ts
+++ b/src/dialogs/more-info/const.ts
@@ -72,6 +72,7 @@ export const DOMAINS_HIDE_DEFAULT_MORE_INFO = [
"select",
"text",
"update",
+ "event",
];
/** Domains that should have the history hidden in the more info dialog. */
diff --git a/src/dialogs/more-info/controls/more-info-configurator.ts b/src/dialogs/more-info/controls/more-info-configurator.ts
index 0e68a22c7e..76c2fb9f5b 100644
--- a/src/dialogs/more-info/controls/more-info-configurator.ts
+++ b/src/dialogs/more-info/controls/more-info-configurator.ts
@@ -36,12 +36,13 @@ export class MoreInfoConfigurator extends LitElement {
`
: ""}
${this.stateObj.attributes.fields.map(
- (field) => html`
`
+ (field) =>
+ html`
`
)}
${this.stateObj.attributes.submit_caption
? html`
diff --git a/src/dialogs/more-info/controls/more-info-fan.ts b/src/dialogs/more-info/controls/more-info-fan.ts
index 588397c5ce..ae841e996c 100644
--- a/src/dialogs/more-info/controls/more-info-fan.ts
+++ b/src/dialogs/more-info/controls/more-info-fan.ts
@@ -299,23 +299,22 @@ class MoreInfoFan extends LitElement {
>
${this.stateObj.attributes.preset_modes?.map(
- (mode) =>
- html`
-
- ${computeAttributeValueDisplay(
- this.hass.localize,
- this.stateObj!,
- this.hass.locale,
- this.hass.config,
- this.hass.entities,
- "preset_mode",
- mode
- )}
-
- `
+ (mode) => html`
+
+ ${computeAttributeValueDisplay(
+ this.hass.localize,
+ this.stateObj!,
+ this.hass.locale,
+ this.hass.config,
+ this.hass.entities,
+ "preset_mode",
+ mode
+ )}
+
+ `
)}
`
diff --git a/src/dialogs/more-info/controls/more-info-lock.ts b/src/dialogs/more-info/controls/more-info-lock.ts
index 5fa6ec5df3..e17753050c 100644
--- a/src/dialogs/more-info/controls/more-info-lock.ts
+++ b/src/dialogs/more-info/controls/more-info-lock.ts
@@ -1,16 +1,19 @@
-import "@material/web/iconbutton/outlined-icon-button";
import { mdiDoorOpen, mdiLock, mdiLockOff } from "@mdi/js";
-import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
+import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
import { customElement, property } from "lit/decorators";
import { styleMap } from "lit/directives/style-map";
import { domainIcon } from "../../../common/entity/domain_icon";
import { stateColorCss } from "../../../common/entity/state_color";
import { supportsFeature } from "../../../common/entity/supports-feature";
import "../../../components/ha-attributes";
+import "../../../components/ha-outlined-icon-button";
import { UNAVAILABLE } from "../../../data/entity";
-import { LockEntity, LockEntityFeature } from "../../../data/lock";
+import {
+ LockEntity,
+ LockEntityFeature,
+ callProtectedLockService,
+} from "../../../data/lock";
import type { HomeAssistant } from "../../../types";
-import { showEnterCodeDialogDialog } from "../../enter-code/show-enter-code-dialog";
import { moreInfoControlStyle } from "../components/ha-more-info-control-style";
import "../components/ha-more-info-state-header";
import "../components/lock/ha-more-info-lock-toggle";
@@ -22,41 +25,15 @@ class MoreInfoLock extends LitElement {
@property({ attribute: false }) public stateObj?: LockEntity;
private async _open() {
- this._callService("open");
+ callProtectedLockService(this, this.hass, this.stateObj!, "open");
}
private async _lock() {
- this._callService("lock");
+ callProtectedLockService(this, this.hass, this.stateObj!, "lock");
}
private async _unlock() {
- this._callService("unlock");
- }
-
- private async _callService(service: "open" | "lock" | "unlock") {
- let code: string | undefined;
-
- if (this.stateObj!.attributes.code_format) {
- const response = await showEnterCodeDialogDialog(this, {
- codeFormat: "text",
- codePattern: this.stateObj!.attributes.code_format,
- title: this.hass.localize(
- `ui.dialogs.more_info_control.lock.${service}`
- ),
- submitText: this.hass.localize(
- `ui.dialogs.more_info_control.lock.${service}`
- ),
- });
- if (!response) {
- return;
- }
- code = response;
- }
-
- this.hass.callService("lock", service, {
- entity_id: this.stateObj!.entity_id,
- code,
- });
+ callProtectedLockService(this, this.hass, this.stateObj!, "unlock");
}
protected render() {
@@ -105,7 +82,7 @@ class MoreInfoLock extends LitElement {
${supportsOpen
? html`
-
-
+
`
: nothing}
${isJammed
? html`
-
-
-
+
-
+
`
: nothing}
@@ -163,13 +140,6 @@ class MoreInfoLock extends LitElement {
return [
moreInfoControlStyle,
css`
- md-outlined-icon-button {
- --ha-icon-display: block;
- --md-sys-color-on-surface: var(--secondary-text-color);
- --md-sys-color-on-surface-variant: var(--secondary-text-color);
- --md-sys-color-on-surface-rgb: var(--rgb-secondary-text-color);
- --md-sys-color-outline: var(--secondary-text-color);
- }
@keyframes pulse {
0% {
opacity: 1;
diff --git a/src/dialogs/more-info/controls/more-info-media_player.ts b/src/dialogs/more-info/controls/more-info-media_player.ts
index b02fc75e9d..1d9fcbe0fc 100644
--- a/src/dialogs/more-info/controls/more-info-media_player.ts
+++ b/src/dialogs/more-info/controls/more-info-media_player.ts
@@ -15,12 +15,12 @@ import { stopPropagation } from "../../../common/dom/stop_propagation";
import { computeAttributeValueDisplay } from "../../../common/entity/compute_attribute_display";
import { supportsFeature } from "../../../common/entity/supports-feature";
import { computeRTLDirection } from "../../../common/util/compute_rtl";
+import { stateActive } from "../../../common/entity/state_active";
import "../../../components/ha-icon-button";
import "../../../components/ha-select";
import "../../../components/ha-slider";
import "../../../components/ha-svg-icon";
import { showMediaBrowserDialog } from "../../../components/media-player/show-media-browser-dialog";
-import { UNAVAILABLE, UNKNOWN } from "../../../data/entity";
import {
computeMediaControls,
handleMediaControlClick,
@@ -83,7 +83,7 @@ class MoreInfoMediaPlayer extends LitElement {
${supportsFeature(stateObj, MediaPlayerEntityFeature.VOLUME_MUTE)
@@ -141,7 +141,7 @@ class MoreInfoMediaPlayer extends LitElement {
`
: ""}
- ${![UNAVAILABLE, UNKNOWN, "off"].includes(stateObj.state) &&
+ ${stateActive(stateObj) &&
supportsFeature(stateObj, MediaPlayerEntityFeature.SELECT_SOURCE) &&
stateObj.attributes.source_list?.length
? html`
@@ -156,27 +156,26 @@ class MoreInfoMediaPlayer extends LitElement {
@closed=${stopPropagation}
>
${stateObj.attributes.source_list!.map(
- (source) =>
- html`
-