Add more info for switch and siren (#15547)

* Add more info for switch and siren

* Fix attributes

src/dialogs/more-info/components/ha-more-info-toggle.ts

@@ -146,6 +146,7 @@ export class HaMoreInfoToggle extends LitElement {
         flex: 1;
         width: 100%;
         --control-button-border-radius: 18px;
+        --mdc-icon-size: 24px;
       }
       ha-control-button.active {
         --control-button-icon-color: white;

src/dialogs/more-info/const.ts

@@ -16,7 +16,7 @@ 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"];
+export const DOMAINS_WITH_NEW_MORE_INFO = ["light", "siren", "switch"];
 /** Domains with separate more info dialog. */
 export const DOMAINS_WITH_MORE_INFO = [
   "alarm_control_panel",
@@ -37,7 +37,9 @@ export const DOMAINS_WITH_MORE_INFO = [
   "remote",
   "script",
   "scene",
+  "siren",
   "sun",
+  "switch",
   "timer",
   "update",
   "vacuum",

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

@@ -248,7 +248,7 @@ class MoreInfoLight extends LitElement {
       }
 
       ha-more-info-light-brightness,
-      ha-more-info-light-toggle {
+      ha-more-info-toggle {
         margin-bottom: 24px;
       }
 

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

@@ -0,0 +1,64 @@
+import { mdiVolumeHigh, mdiVolumeOff } from "@mdi/js";
+import { css, 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 "../components/ha-more-info-state-header";
+import "../components/ha-more-info-toggle";
+
+@customElement("more-info-siren")
+class MoreInfoSiren extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public stateObj?: LightEntity;
+
+  protected render(): TemplateResult | null {
+    if (!this.hass || !this.stateObj) {
+      return null;
+    }
+
+    return html`
+      <div class="content">
+        <ha-more-info-state-header
+          .hass=${this.hass}
+          .stateObj=${this.stateObj}
+        ></ha-more-info-state-header>
+        <ha-more-info-toggle
+          .stateObj=${this.stateObj}
+          .hass=${this.hass}
+          .iconPathOn=${mdiVolumeHigh}
+          .iconPathOff=${mdiVolumeOff}
+        ></ha-more-info-toggle>
+        <ha-attributes
+          .hass=${this.hass}
+          .stateObj=${this.stateObj}
+        ></ha-attributes>
+      </div>
+    `;
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      .content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+
+      ha-more-info-toggle {
+        margin-bottom: 24px;
+      }
+
+      ha-attributes {
+        width: 100%;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "more-info-siren": MoreInfoSiren;
+  }
+}

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

@@ -0,0 +1,64 @@
+import { mdiPower, mdiPowerOff } from "@mdi/js";
+import { css, 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 "../components/ha-more-info-state-header";
+import "../components/ha-more-info-toggle";
+
+@customElement("more-info-switch")
+class MoreInfoSwitch extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public stateObj?: LightEntity;
+
+  protected render(): TemplateResult | null {
+    if (!this.hass || !this.stateObj) {
+      return null;
+    }
+
+    return html`
+      <div class="content">
+        <ha-more-info-state-header
+          .hass=${this.hass}
+          .stateObj=${this.stateObj}
+        ></ha-more-info-state-header>
+        <ha-more-info-toggle
+          .stateObj=${this.stateObj}
+          .hass=${this.hass}
+          .iconPathOn=${mdiPower}
+          .iconPathOff=${mdiPowerOff}
+        ></ha-more-info-toggle>
+        <ha-attributes
+          .hass=${this.hass}
+          .stateObj=${this.stateObj}
+        ></ha-attributes>
+      </div>
+    `;
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      .content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+
+      ha-more-info-toggle {
+        margin-bottom: 24px;
+      }
+
+      ha-attributes {
+        width: 100%;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "more-info-switch": MoreInfoSwitch;
+  }
+}

src/dialogs/more-info/state_more_info_control.ts

@@ -23,7 +23,9 @@ const LAZY_LOADED_MORE_INFO_CONTROL = {
   person: () => import("./controls/more-info-person"),
   remote: () => import("./controls/more-info-remote"),
   script: () => import("./controls/more-info-script"),
+  siren: () => import("./controls/more-info-siren"),
   sun: () => import("./controls/more-info-sun"),
+  switch: () => import("./controls/more-info-switch"),
   timer: () => import("./controls/more-info-timer"),
   update: () => import("./controls/more-info-update"),
   vacuum: () => import("./controls/more-info-vacuum"),