Update alarm card styling (#25598)

src/dialogs/enter-code/dialog-enter-code.ts

@@ -222,7 +222,6 @@ export class DialogEnterCode
         grid-column-start: 6;
       }
     }
-
     ha-control-button {
       width: 56px;
       height: 56px;
@@ -238,12 +237,6 @@ export class DialogEnterCode
       --control-button-background-color: var(--red-color);
       --control-button-icon-color: var(--red-color);
     }
-    .hidden {
-      display: none;
-    }
-    .buttons {
-      margin-top: 12px;
-    }
   `;
 }
 

src/panels/lovelace/cards/hui-alarm-panel-card.ts

@@ -1,7 +1,8 @@
+import { mdiClose } from "@mdi/js";
 import type { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
 import type { PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { styleMap } from "lit/directives/style-map";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
@@ -20,18 +21,18 @@ import {
   callAlarmAction,
 } from "../../../data/alarm_control_panel";
 import { UNAVAILABLE } from "../../../data/entity";
-import type { HomeAssistant } from "../../../types";
-import { findEntities } from "../common/find-entities";
-import { createEntityNotFoundWarning } from "../components/hui-warning";
-import type { LovelaceCard } from "../types";
 import type { ExtEntityRegistryEntry } from "../../../data/entity_registry";
 import {
   getExtendedEntityRegistryEntry,
   subscribeEntityRegistry,
 } from "../../../data/entity_registry";
+import type { HomeAssistant } from "../../../types";
+import { findEntities } from "../common/find-entities";
+import { createEntityNotFoundWarning } from "../components/hui-warning";
+import type { LovelaceCard } from "../types";
 import type { AlarmPanelCardConfig, AlarmPanelCardConfigState } from "./types";
 
-const BUTTONS = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "", "0", "clear"];
+const BUTTONS = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "clear", "0", ""];
 
 export const DEFAULT_STATES = [
   "arm_home",
@@ -100,7 +101,7 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
 
   @state() private _entry?: ExtEntityRegistryEntry | null;
 
-  @query("#alarmCode") private _input?: HaTextField;
+  @state() private _value?: string;
 
   private _unsubEntityRegistry?: UnsubscribeFunc;
 
@@ -116,14 +117,14 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
 
   public async getCardSize(): Promise<number> {
     if (!this._config || !this.hass) {
-      return 9;
+      return 10;
     }
 
     const stateObj = this.hass.states[this._config.entity];
 
     return !stateObj || stateObj.attributes.code_format !== FORMAT_NUMBER
       ? 4
-      : 9;
+      : 10;
   }
 
   public setConfig(config: AlarmPanelCardConfig): void {
@@ -272,7 +273,8 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
           ? nothing
           : html`
               <ha-textfield
-                id="alarmCode"
+                .value=${this._value || ""}
+                @input=${this._handleInput}
                 .label=${this.hass.localize("ui.card.alarm_control_panel.code")}
                 type="password"
                 .inputMode=${stateObj.attributes.code_format === FORMAT_NUMBER
@@ -283,26 +285,31 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
         ${stateObj.attributes.code_format !== FORMAT_NUMBER || defaultCode
           ? nothing
           : html`
-              <div id="keypad">
+              <div class="keypad">
                 ${BUTTONS.map((value) =>
                   value === ""
-                    ? html` <mwc-button disabled></mwc-button> `
-                    : html`
-                        <mwc-button
-                          .value=${value}
-                          @click=${this._handlePadClick}
-                          outlined
-                          class=${classMap({
-                            numberkey: value !== "clear",
-                          })}
-                        >
-                          ${value === "clear"
-                            ? this.hass!.localize(
-                                `ui.card.alarm_control_panel.clear_code`
-                              )
-                            : value}
-                        </mwc-button>
-                      `
+                    ? html`<span></span>`
+                    : value === "clear"
+                      ? html`
+                          <ha-control-button
+                            @click=${this._handlePadClick}
+                            class="clear"
+                            .value=${value}
+                            .disabled=${!this._value}
+                            .label=${this.hass!.localize("ui.common.clear")}
+                          >
+                            <ha-svg-icon path=${mdiClose}></ha-svg-icon>
+                          </ha-control-button>
+                        `
+                      : html`
+                          <ha-control-button
+                            .value=${value}
+                            @click=${this._handlePadClick}
+                            .label=${value}
+                          >
+                            ${value}
+                          </ha-control-button>
+                        `
                 )}
               </div>
             `}
@@ -324,22 +331,23 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
         ) || entityState;
   }
 
+  private _handleInput(e: Event): void {
+    this._value = (e.currentTarget as HaTextField).value;
+  }
+
   private _handlePadClick(e: MouseEvent): void {
     const val = (e.currentTarget! as any).value;
-    this._input!.value = val === "clear" ? "" : this._input!.value + val;
+    this._value = val === "clear" ? "" : (this._value || "") + val;
   }
 
   private _handleActionClick(e: MouseEvent): void {
-    const input = this._input;
     callAlarmAction(
       this.hass!,
       this._config!.entity,
       (e.currentTarget! as any).action,
-      input?.value || undefined
+      this._value || undefined
     );
-    if (input) {
-      input.value = "";
-    }
+    this._value = undefined;
   }
 
   private _handleMoreInfo() {
@@ -408,20 +416,28 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
       animation: none;
     }
 
-    #keypad {
-      display: flex;
-      justify-content: center;
-      flex-wrap: wrap;
-      margin: auto;
-      width: 100%;
-      max-width: 300px;
-      direction: ltr;
+    .keypad {
+      --keypad-columns: 3;
+      margin-top: 12px;
+      padding: 12px;
+      display: grid;
+      grid-template-columns: repeat(var(--keypad-columns), auto);
+      grid-auto-rows: auto;
+      grid-gap: 24px;
+      justify-items: center;
+      align-items: center;
     }
 
-    #keypad mwc-button {
-      padding: 8px;
-      width: 30%;
-      box-sizing: border-box;
+    ha-control-button {
+      width: 56px;
+      height: 56px;
+      --control-button-border-radius: 28px;
+      --mdc-icon-size: 24px;
+      font-size: var(--ha-font-size-2xl);
+    }
+    .clear {
+      --control-button-background-color: var(--red-color);
+      --control-button-icon-color: var(--red-color);
     }
 
     .actions {
@@ -438,13 +454,6 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
     mwc-button#disarm {
       color: var(--error-color);
     }
-
-    mwc-button.numberkey {
-      --mdc-typography-button-font-size: var(
-        --keypad-font-size,
-        var(--ha-font-size-s)
-      );
-    }
   `;
 }