Update Types for various cards (#1920)

* Update Types

* Travis fix

* Travis change

* Add HTMLElementTagNameMap for gauge

* Review Changes

* Formatting values as string to be accepted into format temp

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 {
+  public setConfig(config: Config): void {
-    this.config = config;
+    this._config = config;
   }
 
   protected render(): TemplateResult {
-    if (!this.config) {
+    if (!this._config) {
       return html``;
     }
 
     return html`
       ${this.renderStyle()}
-      ${this.config.error}
+      ${this._config.error}
-      <pre>${this._toStr(this.config.origConfig)}</pre>
+      <pre>${this._toStr(this._config.origConfig)}</pre>
     `;
   }
 

src/panels/lovelace/cards/hui-gauge-card.ts

@@ -6,8 +6,9 @@ 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";
 
@@ -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] !==
@@ -102,10 +103,10 @@ 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() {
+  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,20 +248,26 @@ 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 });
   }
 }
 
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-gauge-card": HuiGaugeCard;
+  }
+}
+
 customElements.define("hui-gauge-card", HuiGaugeCard);

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() {
+  protected render(): TemplateResult {
-    if (!this.config) {
+    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;

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() {
+  public getCardSize(): number {
-    return this.config!.content.split("\n").length;
+    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() {
+  protected render(): TemplateResult {
-    if (!this.config) {
+    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 {

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() {
+  protected render(): TemplateResult {
-    if (!this.hass || !this.config) {
+    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,21 @@ 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] !==
+        (changedProps.get("hass") as any).states[this._config!.entity] !==
-        this.hass!.states[this.config!.entity]
+        this.hass!.states[this._config!.entity]
       );
     }
-    return changedProps;
+    if (changedProps.has("_config")) {
+      return true;
+    }
+    return true;
   }
 
-  protected firstUpdated() {
+  protected firstUpdated(): void {
-    const stateObj = this.hass!.states[this.config!.entity] as ClimateEntity;
+    const stateObj = this.hass!.states[this._config!.entity] as ClimateEntity;
 
     const _sliderType =
       stateObj.attributes.target_temp_low &&
@@ -137,8 +146,8 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
     });
   }
 
-  protected updated() {
+  protected updated(): void {
-    const stateObj = this.hass!.states[this.config!.entity] as ClimateEntity;
+    const stateObj = this.hass!.states[this._config!.entity] as ClimateEntity;
 
     let sliderValue;
     let uiValue;
@@ -151,8 +160,8 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
         stateObj.attributes.target_temp_high
       }`;
       uiValue = formatTemp([
-        stateObj.attributes.target_temp_low,
+        String(stateObj.attributes.target_temp_low),
-        stateObj.attributes.target_temp_high,
+        String(stateObj.attributes.target_temp_high),
       ]);
     } else {
       sliderValue = uiValue = stateObj.attributes.temperature;
@@ -164,7 +173,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 +317,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) {
+  private _setTemperature(e): void {
-    const stateObj = this.hass!.states[this.config!.entity] as ClimateEntity;
+    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 +362,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,
     });
   }