From 0f680bcfd6ab5650bb1116f59679b5d7780a1ae8 Mon Sep 17 00:00:00 2001
From: Ian Richardson <iantrich@gmail.com>
Date: Tue, 12 Feb 2019 11:40:39 -0600
Subject: [PATCH] Fix typo in alarm editor (#2729)

* Fix typo in alarm editor

* tacking on decorators, styles and card size fix
---
 .../lovelace/cards/hui-alarm-panel-card.ts    | 41 ++++++++++---------
 .../hui-alarm-panel-card-editor.ts            |  2 +-
 2 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/src/panels/lovelace/cards/hui-alarm-panel-card.ts b/src/panels/lovelace/cards/hui-alarm-panel-card.ts
index aab241299b..8311aec7ad 100644
--- a/src/panels/lovelace/cards/hui-alarm-panel-card.ts
+++ b/src/panels/lovelace/cards/hui-alarm-panel-card.ts
@@ -2,8 +2,10 @@ import {
   html,
   LitElement,
   PropertyValues,
-  PropertyDeclarations,
   TemplateResult,
+  CSSResult,
+  css,
+  property,
 } from "lit-element";
 import { classMap } from "lit-html/directives/class-map";
 
@@ -50,20 +52,22 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
     return { states: ["arm_home", "arm_away"] };
   }
 
-  public hass?: HomeAssistant;
-  private _config?: Config;
-  private _code?: string;
-
-  static get properties(): PropertyDeclarations {
-    return {
-      hass: {},
-      _config: {},
-      _code: {},
-    };
-  }
+  @property() public hass?: HomeAssistant;
+  @property() private _config?: Config;
+  @property() private _code?: string;
 
   public getCardSize(): number {
-    return 4;
+    if (!this._config || !this.hass) {
+      return 0;
+    }
+
+    const stateObj = this.hass.states[this._config.entity];
+
+    if (!stateObj) {
+      return 0;
+    }
+
+    return stateObj.attributes.code_format !== FORMAT_NUMBER ? 3 : 8;
   }
 
   public setConfig(config: Config): void {
@@ -114,7 +118,6 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
     }
 
     return html`
-      ${this.renderStyle()}
       <ha-card .header="${this._config.name || this._label(stateObj.state)}">
         <ha-label-badge
           class="${classMap({ [stateObj.state]: true })}"
@@ -204,9 +207,9 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
     this._code = "";
   }
 
-  private renderStyle(): TemplateResult {
-    return html`
-      <style>
+  static get styles(): CSSResult[] {
+    return [
+      css`
         ha-card {
           padding-bottom: 16px;
           position: relative;
@@ -293,8 +296,8 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
         paper-button#disarm {
           color: var(--google-red-500);
         }
-      </style>
-    `;
+      `,
+    ];
   }
 }
 
diff --git a/src/panels/lovelace/editor/config-elements/hui-alarm-panel-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-alarm-panel-card-editor.ts
index 969a48f2e6..d5a3dad07b 100644
--- a/src/panels/lovelace/editor/config-elements/hui-alarm-panel-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-alarm-panel-card-editor.ts
@@ -57,7 +57,7 @@ export class HuiAlarmPanelCardEditor extends LitElement
       return html``;
     }
 
-    const states = ["arm_home", "arm_away", "arm_night", "arm_custom_bypass"];
+    const states = ["arm_home", "arm_away", "arm_night", "armed_custom_bypass"];
 
     return html`
       ${configElementStyle} ${this.renderStyle()}