From f2120e15f490f599e08a00c768be4dfeeb87718f Mon Sep 17 00:00:00 2001
From: Zack Arnett <arnett.zackary@gmail.com>
Date: Mon, 29 Oct 2018 19:29:24 -0400
Subject: [PATCH 1/6] Update Types

---
 src/panels/lovelace/cards/hui-error-card.ts   | 14 ++--
 src/panels/lovelace/cards/hui-gauge-card.ts   | 21 +++---
 src/panels/lovelace/cards/hui-iframe-card.ts  | 27 ++++----
 .../lovelace/cards/hui-markdown-card.ts       | 29 +++++----
 .../lovelace/cards/hui-thermostat-card.ts     | 64 ++++++++++---------
 5 files changed, 82 insertions(+), 73 deletions(-)

diff --git a/src/panels/lovelace/cards/hui-error-card.ts b/src/panels/lovelace/cards/hui-error-card.ts
index 758fa43459a7..df367f2301b7 100644
--- a/src/panels/lovelace/cards/hui-error-card.ts
+++ b/src/panels/lovelace/cards/hui-error-card.ts
@@ -9,11 +9,11 @@ interface Config extends LovelaceConfig {
 }
 
 class HuiErrorCard extends LitElement implements LovelaceCard {
-  protected config?: Config;
+  private _config?: Config;
 
   static get properties() {
     return {
-      config: {},
+      _config: {},
     };
   }
 
@@ -21,19 +21,19 @@ class HuiErrorCard extends LitElement implements LovelaceCard {
     return 4;
   }
 
-  public setConfig(config): void {
-    this.config = config;
+  public setConfig(config: Config): void {
+    this._config = config;
   }
 
   protected render(): TemplateResult {
-    if (!this.config) {
+    if (!this._config) {
       return html``;
     }
 
     return html`
       ${this.renderStyle()}
-      ${this.config.error}
-      <pre>${this._toStr(this.config.origConfig)}</pre>
+      ${this._config.error}
+      <pre>${this._toStr(this._config.origConfig)}</pre>
     `;
   }
 
diff --git a/src/panels/lovelace/cards/hui-gauge-card.ts b/src/panels/lovelace/cards/hui-gauge-card.ts
index 6fcd7b4f8536..59efcdf96c5b 100644
--- a/src/panels/lovelace/cards/hui-gauge-card.ts
+++ b/src/panels/lovelace/cards/hui-gauge-card.ts
@@ -10,6 +10,7 @@ import isValidEntityId from "../../../common/entity/valid_entity_id.js";
 import { fireEvent } from "../../../common/dom/fire_event.js";
 
 import "../../../components/ha-card.js";
+import { TemplateResult } from "lit-html";
 
 interface Config extends LovelaceConfig {
   entity: string;
@@ -38,11 +39,11 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
     };
   }
 
-  public getCardSize() {
+  public getCardSize(): number {
     return 2;
   }
 
-  public setConfig(config) {
+  public setConfig(config: Config): void {
     if (!config || !config.entity) {
       throw new Error("Invalid card configuration");
     }
@@ -52,7 +53,7 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
     this._config = { min: 0, max: 100, ...config };
   }
 
-  protected render() {
+  protected render(): TemplateResult {
     if (!this._config || !this.hass) {
       return html``;
     }
@@ -92,7 +93,7 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
     `;
   }
 
-  protected shouldUpdate(changedProps: PropertyValues) {
+  protected shouldUpdate(changedProps: PropertyValues): boolean {
     if (changedProps.get("hass")) {
       return (
         (changedProps.get("hass") as any).states[this._config!.entity] !==
@@ -105,7 +106,7 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
     return (changedProps as unknown) as boolean;
   }
 
-  protected updated() {
+  protected updated(): void {
     if (
       !this._config ||
       !this.hass ||
@@ -135,7 +136,7 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
     );
   }
 
-  private renderStyle() {
+  private renderStyle(): TemplateResult {
     return html`
       <style>
         ha-card {
@@ -215,7 +216,7 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
     `;
   }
 
-  private _computeSeverity(stateValue: string, sections: object) {
+  private _computeSeverity(stateValue: string, sections: object): string {
     const numberValue = Number(stateValue);
 
     if (!sections) {
@@ -247,18 +248,18 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
     return severityMap.normal;
   }
 
-  private _translateTurn(value: number, config: Config) {
+  private _translateTurn(value: number, config: Config): number {
     const maxTurnValue = Math.min(Math.max(value, config.min!), config.max!);
     return (
       (5 * (maxTurnValue - config.min!)) / (config.max! - config.min!) / 10
     );
   }
 
-  private _computeBaseUnit() {
+  private _computeBaseUnit(): string {
     return this.clientWidth < 200 ? this.clientWidth / 5 + "px" : "50px";
   }
 
-  private _handleClick() {
+  private _handleClick(): void {
     fireEvent(this, "hass-more-info", { entityId: this._config!.entity });
   }
 }
diff --git a/src/panels/lovelace/cards/hui-iframe-card.ts b/src/panels/lovelace/cards/hui-iframe-card.ts
index 04411cad41d7..6530a7c13d5a 100644
--- a/src/panels/lovelace/cards/hui-iframe-card.ts
+++ b/src/panels/lovelace/cards/hui-iframe-card.ts
@@ -1,8 +1,9 @@
-import { html, LitElement } from "@polymer/lit-element";
+import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
 
 import "../../../components/ha-card.js";
 
 import { LovelaceCard, LovelaceConfig } from "../types.js";
+import { TemplateResult } from "lit-html";
 
 interface Config extends LovelaceConfig {
   aspect_ratio?: string;
@@ -11,42 +12,42 @@ interface Config extends LovelaceConfig {
 }
 
 export class HuiIframeCard extends LitElement implements LovelaceCard {
-  protected config?: Config;
+  protected _config?: Config;
 
-  static get properties() {
+  static get properties(): PropertyDeclarations {
     return {
-      config: {},
+      _config: {},
     };
   }
 
-  public getCardSize() {
+  public getCardSize(): number {
     return 1 + this.offsetHeight / 50;
   }
 
-  public setConfig(config: Config) {
+  public setConfig(config: Config): void {
     if (!config.url) {
       throw new Error("URL required");
     }
 
-    this.config = config;
+    this._config = config;
   }
 
-  protected render() {
-    if (!this.config) {
+  protected render(): TemplateResult {
+    if (!this._config) {
       return html``;
     }
 
     return html`
       ${this.renderStyle()}
-      <ha-card .header="${this.config.title}">
+      <ha-card .header="${this._config.title}">
         <div id="root">
-          <iframe src="${this.config.url}"></iframe>
+          <iframe src="${this._config.url}"></iframe>
         </div>
       </ha-card>
     `;
   }
 
-  private renderStyle() {
+  private renderStyle(): TemplateResult {
     return html`
       <style>
         ha-card {
@@ -55,7 +56,7 @@ export class HuiIframeCard extends LitElement implements LovelaceCard {
         #root {
           width: 100%;
           position: relative;
-          padding-top: ${this.config!.aspect_ratio || "50%"};
+          padding-top: ${this._config!.aspect_ratio || "50%"};
         }
         iframe {
           position: absolute;
diff --git a/src/panels/lovelace/cards/hui-markdown-card.ts b/src/panels/lovelace/cards/hui-markdown-card.ts
index 30acae1bf064..4f24f48daa12 100644
--- a/src/panels/lovelace/cards/hui-markdown-card.ts
+++ b/src/panels/lovelace/cards/hui-markdown-card.ts
@@ -1,10 +1,11 @@
-import { html, LitElement } from "@polymer/lit-element";
+import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
 import { classMap } from "lit-html/directives/classMap.js";
 
 import "../../../components/ha-card.js";
 import "../../../components/ha-markdown.js";
 
 import { LovelaceCard, LovelaceConfig } from "../types.js";
+import { TemplateResult } from "lit-html";
 
 interface Config extends LovelaceConfig {
   content: string;
@@ -12,45 +13,45 @@ interface Config extends LovelaceConfig {
 }
 
 export class HuiMarkdownCard extends LitElement implements LovelaceCard {
-  protected config?: Config;
+  private _config?: Config;
 
-  static get properties() {
+  static get properties(): PropertyDeclarations {
     return {
-      config: {},
+      _config: {},
     };
   }
 
-  public getCardSize() {
-    return this.config!.content.split("\n").length;
+  public getCardSize(): number {
+    return this._config!.content.split("\n").length;
   }
 
-  public setConfig(config: Config) {
+  public setConfig(config: Config): void {
     if (!config.content) {
       throw new Error("Invalid Configuration: Content Required");
     }
 
-    this.config = config;
+    this._config = config;
   }
 
-  protected render() {
-    if (!this.config) {
+  protected render(): TemplateResult {
+    if (!this._config) {
       return html``;
     }
 
     return html`
       ${this.renderStyle()}
-      <ha-card .header="${this.config.title}">
+      <ha-card .header="${this._config.title}">
         <ha-markdown
           class="markdown ${classMap({
-            "no-header": !this.config.title,
+            "no-header": !this._config.title,
           })}"
-          .content="${this.config.content}"
+          .content="${this._config.content}"
         ></ha-markdown>
       </ha-card>
     `;
   }
 
-  private renderStyle() {
+  private renderStyle(): TemplateResult {
     return html`
       <style>
         :host {
diff --git a/src/panels/lovelace/cards/hui-thermostat-card.ts b/src/panels/lovelace/cards/hui-thermostat-card.ts
index 8d590bcf9df8..187110bdda7b 100644
--- a/src/panels/lovelace/cards/hui-thermostat-card.ts
+++ b/src/panels/lovelace/cards/hui-thermostat-card.ts
@@ -1,4 +1,9 @@
-import { html, LitElement } from "@polymer/lit-element";
+import {
+  html,
+  LitElement,
+  PropertyDeclarations,
+  PropertyValues,
+} from "@polymer/lit-element";
 import { classMap } from "lit-html/directives/classMap.js";
 import { jQuery } from "../../../resources/jquery";
 
@@ -10,6 +15,7 @@ import { HomeAssistant, ClimateEntity } from "../../../types.js";
 import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
 import { LovelaceCard, LovelaceConfig } from "../types.js";
 import computeStateName from "../../../common/entity/compute_state_name.js";
+import { TemplateResult } from "lit-html";
 
 const thermostatConfig = {
   radius: 150,
@@ -33,39 +39,39 @@ interface Config extends LovelaceConfig {
   entity: string;
 }
 
-function formatTemp(temps) {
+function formatTemp(temps: string[]): string {
   return temps.filter(Boolean).join("-");
 }
 
 export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
   implements LovelaceCard {
   public hass?: HomeAssistant;
-  protected config?: Config;
+  private _config?: Config;
 
-  static get properties() {
+  static get properties(): PropertyDeclarations {
     return {
       hass: {},
-      config: {},
+      _config: {},
     };
   }
 
-  public getCardSize() {
+  public getCardSize(): number {
     return 4;
   }
 
-  public setConfig(config: Config) {
+  public setConfig(config: Config): void {
     if (!config.entity || config.entity.split(".")[0] !== "climate") {
       throw new Error("Specify an entity from within the climate domain.");
     }
 
-    this.config = config;
+    this._config = config;
   }
 
-  protected render() {
-    if (!this.hass || !this.config) {
+  protected render(): TemplateResult {
+    if (!this.hass || !this._config) {
       return html``;
     }
-    const stateObj = this.hass.states[this.config.entity] as ClimateEntity;
+    const stateObj = this.hass.states[this._config.entity] as ClimateEntity;
     const broadCard = this.clientWidth > 390;
     const mode = modeIcons[stateObj.attributes.operation_mode || ""]
       ? stateObj.attributes.operation_mode!
@@ -107,18 +113,18 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
     `;
   }
 
-  protected shouldUpdate(changedProps) {
+  protected shouldUpdate(changedProps: PropertyValues): boolean {
     if (changedProps.get("hass")) {
       return (
-        changedProps.get("hass").states[this.config!.entity] !==
-        this.hass!.states[this.config!.entity]
+        (changedProps.get("hass") as any).states[this._config!.entity] !==
+        this.hass!.states[this._config!.entity]
       );
     }
-    return changedProps;
+    return (changedProps as unknown) as boolean;
   }
 
-  protected firstUpdated() {
-    const stateObj = this.hass!.states[this.config!.entity] as ClimateEntity;
+  protected firstUpdated(): void {
+    const stateObj = this.hass!.states[this._config!.entity] as ClimateEntity;
 
     const _sliderType =
       stateObj.attributes.target_temp_low &&
@@ -137,8 +143,8 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
     });
   }
 
-  protected updated() {
-    const stateObj = this.hass!.states[this.config!.entity] as ClimateEntity;
+  protected updated(): void {
+    const stateObj = this.hass!.states[this._config!.entity] as ClimateEntity;
 
     let sliderValue;
     let uiValue;
@@ -164,7 +170,7 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
     this.shadowRoot!.querySelector("#set-temperature")!.innerHTML = uiValue;
   }
 
-  private renderStyle() {
+  private renderStyle(): TemplateResult {
     return html`
     ${roundSliderStyle}
     <style>
@@ -308,40 +314,40 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
     `;
   }
 
-  private _dragEvent(e) {
+  private _dragEvent(e): void {
     this.shadowRoot!.querySelector("#set-temperature")!.innerHTML = formatTemp(
       String(e.value).split(",")
     );
   }
 
-  private _setTemperature(e) {
-    const stateObj = this.hass!.states[this.config!.entity] as ClimateEntity;
+  private _setTemperature(e): void {
+    const stateObj = this.hass!.states[this._config!.entity] as ClimateEntity;
     if (
       stateObj.attributes.target_temp_low &&
       stateObj.attributes.target_temp_high
     ) {
       if (e.handle.index === 1) {
         this.hass!.callService("climate", "set_temperature", {
-          entity_id: this.config!.entity,
+          entity_id: this._config!.entity,
           target_temp_low: e.handle.value,
           target_temp_high: stateObj.attributes.target_temp_high,
         });
       } else {
         this.hass!.callService("climate", "set_temperature", {
-          entity_id: this.config!.entity,
+          entity_id: this._config!.entity,
           target_temp_low: stateObj.attributes.target_temp_low,
           target_temp_high: e.handle.value,
         });
       }
     } else {
       this.hass!.callService("climate", "set_temperature", {
-        entity_id: this.config!.entity,
+        entity_id: this._config!.entity,
         temperature: e.value,
       });
     }
   }
 
-  private _renderIcon(mode, currentMode) {
+  private _renderIcon(mode: string, currentMode: string): TemplateResult {
     if (!modeIcons[mode]) {
       return html``;
     }
@@ -353,9 +359,9 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
     ></ha-icon>`;
   }
 
-  private _handleModeClick(e: MouseEvent) {
+  private _handleModeClick(e: MouseEvent): void {
     this.hass!.callService("climate", "set_operation_mode", {
-      entity_id: this.config!.entity,
+      entity_id: this._config!.entity,
       operation_mode: (e.currentTarget as any).mode,
     });
   }

From a143ea62eba0fb42976c38b78dd633ebe54fc8b7 Mon Sep 17 00:00:00 2001
From: Zack Arnett <arnett.zackary@gmail.com>
Date: Mon, 29 Oct 2018 22:04:00 -0400
Subject: [PATCH 2/6] Travis fix

---
 src/panels/lovelace/cards/hui-thermostat-card.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/panels/lovelace/cards/hui-thermostat-card.ts b/src/panels/lovelace/cards/hui-thermostat-card.ts
index 187110bdda7b..e55daa7ce120 100644
--- a/src/panels/lovelace/cards/hui-thermostat-card.ts
+++ b/src/panels/lovelace/cards/hui-thermostat-card.ts
@@ -39,7 +39,7 @@ interface Config extends LovelaceConfig {
   entity: string;
 }
 
-function formatTemp(temps: string[]): string {
+function formatTemp(temps: number[]): string {
   return temps.filter(Boolean).join("-");
 }
 

From 203deb162786cb6b41d10685801bf1adc0c82f8b Mon Sep 17 00:00:00 2001
From: Zack Arnett <arnett.zackary@gmail.com>
Date: Mon, 29 Oct 2018 23:18:04 -0400
Subject: [PATCH 3/6] Travis change

---
 src/panels/lovelace/cards/hui-thermostat-card.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/panels/lovelace/cards/hui-thermostat-card.ts b/src/panels/lovelace/cards/hui-thermostat-card.ts
index e55daa7ce120..187110bdda7b 100644
--- a/src/panels/lovelace/cards/hui-thermostat-card.ts
+++ b/src/panels/lovelace/cards/hui-thermostat-card.ts
@@ -39,7 +39,7 @@ interface Config extends LovelaceConfig {
   entity: string;
 }
 
-function formatTemp(temps: number[]): string {
+function formatTemp(temps: string[]): string {
   return temps.filter(Boolean).join("-");
 }
 

From c0062477cfea843aa540469dc1eb658e4f12b293 Mon Sep 17 00:00:00 2001
From: Zack Arnett <arnett.zackary@gmail.com>
Date: Mon, 29 Oct 2018 23:52:31 -0400
Subject: [PATCH 4/6] Add HTMLElementTagNameMap for gauge

---
 src/panels/lovelace/cards/hui-gauge-card.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/panels/lovelace/cards/hui-gauge-card.ts b/src/panels/lovelace/cards/hui-gauge-card.ts
index 59efcdf96c5b..9406c2c89dbd 100644
--- a/src/panels/lovelace/cards/hui-gauge-card.ts
+++ b/src/panels/lovelace/cards/hui-gauge-card.ts
@@ -264,4 +264,10 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
   }
 }
 
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-gauge-card": HuiGaugeCard;
+  }
+}
+
 customElements.define("hui-gauge-card", HuiGaugeCard);

From 6c2c1abf08888a37cc87dc26c14368265c0b0d4b Mon Sep 17 00:00:00 2001
From: Zack Arnett <arnett.zackary@gmail.com>
Date: Tue, 30 Oct 2018 16:01:06 -0400
Subject: [PATCH 5/6] Review Changes

---
 src/panels/lovelace/cards/hui-gauge-card.ts      | 6 +++---
 src/panels/lovelace/cards/hui-thermostat-card.ts | 5 ++++-
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/panels/lovelace/cards/hui-gauge-card.ts b/src/panels/lovelace/cards/hui-gauge-card.ts
index 9406c2c89dbd..4f04285ce8bf 100644
--- a/src/panels/lovelace/cards/hui-gauge-card.ts
+++ b/src/panels/lovelace/cards/hui-gauge-card.ts
@@ -6,11 +6,11 @@ import {
 } from "@polymer/lit-element";
 import { LovelaceCard, LovelaceConfig } from "../types.js";
 import { HomeAssistant } from "../../../types.js";
-import isValidEntityId from "../../../common/entity/valid_entity_id.js";
 import { fireEvent } from "../../../common/dom/fire_event.js";
+import { TemplateResult } from "lit-html";
+import isValidEntityId from "../../../common/entity/valid_entity_id.js";
 
 import "../../../components/ha-card.js";
-import { TemplateResult } from "lit-html";
 
 interface Config extends LovelaceConfig {
   entity: string;
@@ -103,7 +103,7 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
     if (changedProps.get("_config")) {
       return changedProps.get("_config") !== this._config;
     }
-    return (changedProps as unknown) as boolean;
+    return true;
   }
 
   protected updated(): void {
diff --git a/src/panels/lovelace/cards/hui-thermostat-card.ts b/src/panels/lovelace/cards/hui-thermostat-card.ts
index 187110bdda7b..9a56c8d8cd2f 100644
--- a/src/panels/lovelace/cards/hui-thermostat-card.ts
+++ b/src/panels/lovelace/cards/hui-thermostat-card.ts
@@ -120,7 +120,10 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
         this.hass!.states[this._config!.entity]
       );
     }
-    return (changedProps as unknown) as boolean;
+    if (changedProps.has("_config")) {
+      return true;
+    }
+    return true;
   }
 
   protected firstUpdated(): void {

From 138693804043103e282123575f62728271d5f11c Mon Sep 17 00:00:00 2001
From: Zack Arnett <arnett.zackary@gmail.com>
Date: Tue, 30 Oct 2018 16:30:36 -0400
Subject: [PATCH 6/6] Formatting values as string to be accepted into format
 temp

---
 src/panels/lovelace/cards/hui-thermostat-card.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/panels/lovelace/cards/hui-thermostat-card.ts b/src/panels/lovelace/cards/hui-thermostat-card.ts
index 9a56c8d8cd2f..c9277f2e5f36 100644
--- a/src/panels/lovelace/cards/hui-thermostat-card.ts
+++ b/src/panels/lovelace/cards/hui-thermostat-card.ts
@@ -160,8 +160,8 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
         stateObj.attributes.target_temp_high
       }`;
       uiValue = formatTemp([
-        stateObj.attributes.target_temp_low,
-        stateObj.attributes.target_temp_high,
+        String(stateObj.attributes.target_temp_low),
+        String(stateObj.attributes.target_temp_high),
       ]);
     } else {
       sliderValue = uiValue = stateObj.attributes.temperature;