Add input boolean more info (#15675)

* Add input boolean more info

* Fix typings

src/dialogs/more-info/const.ts

@@ -16,7 +16,12 @@ export const EDITABLE_DOMAINS_WITH_ID = ["scene", "automation"];
  * */
 export const EDITABLE_DOMAINS_WITH_UNIQUE_ID = ["script"];
 /** Domains with with new more info design. */
-export const DOMAINS_WITH_NEW_MORE_INFO = ["light", "siren", "switch"];
+export const DOMAINS_WITH_NEW_MORE_INFO = [
+  "input_boolean",
+  "light",
+  "siren",
+  "switch",
+];
 /** Domains with separate more info dialog. */
 export const DOMAINS_WITH_MORE_INFO = [
   "alarm_control_panel",
@@ -29,6 +34,7 @@ export const DOMAINS_WITH_MORE_INFO = [
   "fan",
   "group",
   "humidifier",
+  "input_boolean",
   "input_datetime",
   "light",
   "lock",

src/dialogs/more-info/controls/more-info-input_boolean.ts

@@ -0,0 +1,51 @@
+import { mdiPower, mdiPowerOff } from "@mdi/js";
+import { HassEntity } from "home-assistant-js-websocket";
+import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
+import "../../../components/ha-attributes";
+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";
+
+@customElement("more-info-input_boolean")
+class MoreInfoInputBoolean extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public stateObj?: HassEntity;
+
+  protected render(): TemplateResult | null {
+    if (!this.hass || !this.stateObj) {
+      return null;
+    }
+
+    return html`
+      <ha-more-info-state-header
+        .hass=${this.hass}
+        .stateObj=${this.stateObj}
+      ></ha-more-info-state-header>
+      <div class="controls">
+        <ha-more-info-toggle
+          .stateObj=${this.stateObj}
+          .hass=${this.hass}
+          .iconPathOn=${mdiPower}
+          .iconPathOff=${mdiPowerOff}
+        ></ha-more-info-toggle>
+      </div>
+      <ha-attributes
+        .hass=${this.hass}
+        .stateObj=${this.stateObj}
+      ></ha-attributes>
+    `;
+  }
+
+  static get styles(): CSSResultGroup {
+    return moreInfoControlStyle;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "more-info-input_boolean": MoreInfoInputBoolean;
+  }
+}

src/dialogs/more-info/controls/more-info-siren.ts

@@ -1,8 +1,8 @@
 import { mdiVolumeHigh, mdiVolumeOff } from "@mdi/js";
+import { HassEntity } from "home-assistant-js-websocket";
 import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../../../components/ha-attributes";
-import { LightEntity } from "../../../data/light";
 import type { HomeAssistant } from "../../../types";
 import { moreInfoControlStyle } from "../components/ha-more-info-control-style";
 import "../components/ha-more-info-state-header";
@@ -12,7 +12,7 @@ import "../components/ha-more-info-toggle";
 class MoreInfoSiren extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ attribute: false }) public stateObj?: LightEntity;
+  @property({ attribute: false }) public stateObj?: HassEntity;
 
   protected render(): TemplateResult | null {
     if (!this.hass || !this.stateObj) {

src/dialogs/more-info/controls/more-info-switch.ts

@@ -1,8 +1,8 @@
 import { mdiPower, mdiPowerOff } from "@mdi/js";
+import { HassEntity } from "home-assistant-js-websocket";
 import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../../../components/ha-attributes";
-import { LightEntity } from "../../../data/light";
 import type { HomeAssistant } from "../../../types";
 import { moreInfoControlStyle } from "../components/ha-more-info-control-style";
 import "../components/ha-more-info-state-header";
@@ -12,7 +12,7 @@ import "../components/ha-more-info-toggle";
 class MoreInfoSwitch extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ attribute: false }) public stateObj?: LightEntity;
+  @property({ attribute: false }) public stateObj?: HassEntity;
 
   protected render(): TemplateResult | null {
     if (!this.hass || !this.stateObj) {

src/dialogs/more-info/state_more_info_control.ts

@@ -16,6 +16,7 @@ const LAZY_LOADED_MORE_INFO_CONTROL = {
   fan: () => import("./controls/more-info-fan"),
   group: () => import("./controls/more-info-group"),
   humidifier: () => import("./controls/more-info-humidifier"),
+  input_boolean: () => import("./controls/more-info-input_boolean"),
   input_datetime: () => import("./controls/more-info-input_datetime"),
   light: () => import("./controls/more-info-light"),
   lock: () => import("./controls/more-info-lock"),