Use ha-chip for alarm control panel card (#10393)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

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

@@ -8,17 +8,18 @@ import {
   PropertyValues,
   TemplateResult,
 } from "lit";
-import { customElement, property, state, query } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { alarmPanelIcon } from "../../../common/entity/alarm_panel_icon";
 import "../../../components/ha-card";
-import "../../../components/ha-label-badge";
+import "../../../components/ha-chip";
 import {
   callAlarmAction,
   FORMAT_NUMBER,
 } 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";
@@ -144,19 +145,24 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
       `;
     }
 
+    const stateLabel = this._stateDisplay(stateObj.state);
+
     return html`
-      <ha-card
+      <ha-card>
-        .header=${this._config.name ||
+        <h1 class="card-header">
+          ${this._config.name ||
           stateObj.attributes.friendly_name ||
-        this._stateDisplay(stateObj.state)}
+          stateLabel}
-      >
+          <ha-chip
-        <ha-label-badge
+            hasIcon
             class=${classMap({ [stateObj.state]: true })}
-          .label=${this._stateIconLabel(stateObj.state)}
             @click=${this._handleMoreInfo}
           >
-          <ha-svg-icon .path=${alarmPanelIcon(stateObj.state)}></ha-svg-icon>
+            <ha-svg-icon slot="icon" .path=${alarmPanelIcon(stateObj.state)}>
-        </ha-label-badge>
+            </ha-svg-icon>
+            ${stateLabel}
+          </ha-chip>
+        </h1>
         <div id="armActions" class="actions">
           ${(stateObj.state === "disarmed"
             ? this._config.states!
@@ -215,23 +221,16 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
     `;
   }
 
-  private _stateIconLabel(entityState: string): string {
-    const stateLabel = entityState.split("_").pop();
-    return stateLabel === "disarmed" ||
-      stateLabel === "triggered" ||
-      !stateLabel
-      ? ""
-      : this._stateDisplay(entityState);
-  }
-
   private _actionDisplay(entityState: string): string {
     return this.hass!.localize(`ui.card.alarm_control_panel.${entityState}`);
   }
 
   private _stateDisplay(entityState: string): string {
-    return this.hass!.localize(
+    return entityState === UNAVAILABLE
+      ? this.hass!.localize("state.default.unavailable")
+      : this.hass!.localize(
           `component.alarm_control_panel.state._.${entityState}`
-    );
+        ) || entityState;
   }
 
   private _handlePadClick(e: MouseEvent): void {
@@ -273,15 +272,20 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
         --alarm-state-color: var(--alarm-color-armed);
       }
 
-      ha-label-badge {
+      ha-chip {
-        --ha-label-badge-color: var(--alarm-state-color);
+        --ha-chip-background-color: var(--alarm-state-color);
-        --label-badge-text-color: var(--alarm-state-color);
+        --ha-chip-text-color: var(--text-primary-color);
-        --label-badge-background-color: var(--card-background-color);
+        line-height: initial;
-        color: var(--alarm-state-color);
+      }
-        position: absolute;
+
-        right: 12px;
+      .card-header {
-        top: 8px;
+        display: flex;
-        cursor: pointer;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      .unavailable {
+        --alarm-state-color: var(--state-unavailable-color);
       }
 
       .disarmed {