Cleanup cards (#2870)

* Cleanup cards

* Update hui-iframe-card.ts

* address review comments

* Apply paper-styles

https://github.com/PolymerElements/paper-styles/blob/v3.0.1/classes/typography.js

I didn't find `paper-font-common-nowrap` in anything after v1.0.0 but did end up applying what I found here: 923ede74eb/third_party/polymer/v1_0/components/paper-styles/typography.html

* Added comments on paper-style usage

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

@@ -6,6 +6,7 @@ import {
   CSSResult,
   css,
   property,
+  customElement,
 } from "lit-element";
 import { classMap } from "lit-html/directives/class-map";
 
@@ -39,6 +40,7 @@ export interface Config extends LovelaceCardConfig {
   states?: string[];
 }
 
+@customElement("hui-alarm-panel-card")
 class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
   public static async getConfigElement() {
     await import(/* webpackChunkName: "hui-alarm-panel-card-editor" */ "../editor/config-elements/hui-alarm-panel-card-editor");
@@ -50,7 +52,9 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
   }
 
   @property() public hass?: HomeAssistant;
+
   @property() private _config?: Config;
+
   @property() private _code?: string;
 
   public getCardSize(): number {
@@ -205,9 +209,8 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
     this._code = "";
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResult {
-    return [
+    return css`
-      css`
       ha-card {
         padding-bottom: 16px;
         position: relative;
@@ -220,6 +223,7 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
         --base-unit: 15px;
         font-size: calc(var(--base-unit));
       }
+
       ha-label-badge {
         --ha-label-badge-color: var(--alarm-state-color);
         --label-badge-text-color: var(--alarm-state-color);
@@ -229,21 +233,26 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
         right: 12px;
         top: 12px;
       }
+
       .disarmed {
         --alarm-state-color: var(--alarm-color-disarmed);
       }
+
       .triggered {
         --alarm-state-color: var(--alarm-color-triggered);
         animation: pulse 1s infinite;
       }
+
       .arming {
         --alarm-state-color: var(--alarm-color-pending);
         animation: pulse 1s infinite;
       }
+
       .pending {
         --alarm-state-color: var(--alarm-color-pending);
         animation: pulse 1s infinite;
       }
+
       @keyframes pulse {
         0% {
           --ha-label-badge-color: var(--alarm-state-color);
@@ -252,12 +261,14 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
           --ha-label-badge-color: rgba(255, 153, 0, 0.3);
         }
       }
+
       paper-input {
         margin: 0 auto 8px;
         max-width: 150px;
         font-size: calc(var(--base-unit));
         text-align: center;
       }
+
       .state {
         margin-left: 16px;
         font-size: calc(var(--base-unit) * 0.9);
@@ -266,6 +277,7 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
         color: var(--alarm-state-color);
         animation: none;
       }
+
       #keypad {
         display: flex;
         justify-content: center;
@@ -273,6 +285,7 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
         margin: auto;
         width: 300px;
       }
+
       #keypad mwc-button {
         margin-bottom: 5%;
         width: 30%;
@@ -280,6 +293,7 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
         font-size: calc(var(--base-unit) * 1.1);
         box-sizing: border-box;
       }
+
       .actions {
         margin: 0 8px;
         padding-top: 20px;
@@ -288,15 +302,16 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
         justify-content: center;
         font-size: calc(var(--base-unit) * 1);
       }
+
       .actions mwc-button {
         min-width: calc(var(--base-unit) * 9);
         margin: 0 4px;
       }
+
       mwc-button#disarm {
         color: var(--google-red-500);
       }
-      `,
+    `;
-    ];
   }
 }
 
@@ -305,5 +320,3 @@ declare global {
     "hui-alarm-panel-card": HuiAlarmPanelCard;
   }
 }
-
-customElements.define("hui-alarm-panel-card", HuiAlarmPanelCard);

src/panels/lovelace/cards/hui-empty-state-card.ts

@@ -1,10 +1,11 @@
 import {
   html,
   LitElement,
-  PropertyDeclarations,
   TemplateResult,
   CSSResult,
   css,
+  customElement,
+  property,
 } from "lit-element";
 
 import "@polymer/paper-card/paper-card";
@@ -18,8 +19,9 @@ export interface Config extends LovelaceCardConfig {
   title?: string;
 }
 
+@customElement("hui-empty-state-card")
 export class HuiEmptyStateCard extends LitElement implements LovelaceCard {
-  public hass?: HomeAssistant;
+  @property() public hass?: HomeAssistant;
 
   public getCardSize(): number {
     return 2;
@@ -29,12 +31,6 @@ export class HuiEmptyStateCard extends LitElement implements LovelaceCard {
     // tslint:disable-next-line
   }
 
-  static get properties(): PropertyDeclarations {
-    return {
-      hass: {},
-    };
-  }
-
   protected render(): TemplateResult | void {
     if (!this.hass) {
       return html``;
@@ -83,5 +79,3 @@ declare global {
     "hui-empty-state-card": HuiEmptyStateCard;
   }
 }
-
-customElements.define("hui-empty-state-card", HuiEmptyStateCard);

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

@@ -1,9 +1,12 @@
 import {
   html,
   LitElement,
-  PropertyDeclarations,
   PropertyValues,
   TemplateResult,
+  customElement,
+  property,
+  css,
+  CSSResult,
 } from "lit-element";
 
 import "../../../components/ha-card";
@@ -36,6 +39,7 @@ export interface EntitiesCardConfig extends LovelaceCardConfig {
   theme?: string;
 }
 
+@customElement("hui-entities-card")
 class HuiEntitiesCard extends LitElement implements LovelaceCard {
   public static async getConfigElement(): Promise<LovelaceCardEditor> {
     await import(/* webpackChunkName: "hui-entities-card-editor" */ "../editor/config-elements/hui-entities-card-editor");
@@ -46,8 +50,10 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
     return { entities: [] };
   }
 
+  @property() protected _config?: EntitiesCardConfig;
+
   protected _hass?: HomeAssistant;
-  protected _config?: EntitiesCardConfig;
+
   protected _configEntities?: EntitiesCardEntityConfig[];
 
   set hass(hass: HomeAssistant) {
@@ -65,12 +71,6 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
     }
   }
 
-  static get properties(): PropertyDeclarations {
-    return {
-      _config: {},
-    };
-  }
-
   public getCardSize(): number {
     if (!this._config) {
       return 0;
@@ -100,7 +100,6 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
     const { show_header_toggle, title } = this._config;
 
     return html`
-      ${this.renderStyle()}
       <ha-card>
         ${!title && !show_header_toggle
           ? html``
@@ -128,38 +127,52 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
     `;
   }
 
-  private renderStyle(): TemplateResult {
+  static get styles(): CSSResult {
-    return html`
+    return css`
-      <style>
       ha-card {
         padding: 16px;
       }
+
       #states {
         margin: -4px 0;
       }
+
       #states > * {
         margin: 8px 0;
       }
+
       #states > div > * {
         overflow: hidden;
       }
+
       .header {
-          @apply --paper-font-headline;
+        /* start paper-font-headline style */
-          /* overwriting line-height +8 because entity-toggle can be 40px height,
+        font-family: "Roboto", "Noto", sans-serif;
-            compensating this with reduced padding */
+        -webkit-font-smoothing: antialiased; /* OS X subpixel AA bleed bug */
+        text-rendering: optimizeLegibility;
+        font-size: 24px;
+        font-weight: 400;
+        letter-spacing: -0.012em;
+        /* end paper-font-headline style */
+
         line-height: 40px;
         color: var(--primary-text-color);
         padding: 4px 0 12px;
         display: flex;
         justify-content: space-between;
       }
+
       .header .name {
-          @apply --paper-font-common-nowrap;
+        /* start paper-font-common-nowrap style */
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        /* end paper-font-common-nowrap */
       }
+
       .state-card-dialog {
         cursor: pointer;
       }
-      </style>
     `;
   }
 
@@ -192,5 +205,3 @@ declare global {
     "hui-entities-card": HuiEntitiesCard;
   }
 }
-
-customElements.define("hui-entities-card", HuiEntitiesCard);

src/panels/lovelace/cards/hui-entity-button-card.ts

@@ -1,11 +1,12 @@
 import {
   html,
   LitElement,
-  PropertyDeclarations,
   PropertyValues,
   TemplateResult,
   CSSResult,
   css,
+  customElement,
+  property,
 } from "lit-element";
 import { HassEntity } from "home-assistant-js-websocket";
 import { styleMap } from "lit-html/directives/style-map";
@@ -34,6 +35,7 @@ export interface Config extends LovelaceCardConfig {
   hold_action?: ActionConfig;
 }
 
+@customElement("hui-entity-button-card")
 class HuiEntityButtonCard extends LitElement implements LovelaceCard {
   public static async getConfigElement(): Promise<LovelaceCardEditor> {
     await import(/* webpackChunkName: "hui-entity-button-card-editor" */ "../editor/config-elements/hui-entity-button-card-editor");
@@ -47,15 +49,9 @@ class HuiEntityButtonCard extends LitElement implements LovelaceCard {
     };
   }
 
-  public hass?: HomeAssistant;
+  @property() public hass?: HomeAssistant;
-  private _config?: Config;
 
-  static get properties(): PropertyDeclarations {
+  @property() private _config?: Config;
-    return {
-      hass: {},
-      _config: {},
-    };
-  }
 
   public getCardSize(): number {
     return 2;
@@ -147,11 +143,13 @@ class HuiEntityButtonCard extends LitElement implements LovelaceCard {
         padding: 4% 0;
         font-size: 1.2rem;
       }
+
       ha-icon {
         width: 40%;
         height: auto;
         color: var(--paper-item-icon-color, #44739e);
       }
+
       ha-icon[data-domain="light"][data-state="on"],
       ha-icon[data-domain="switch"][data-state="on"],
       ha-icon[data-domain="binary_sensor"][data-state="on"],
@@ -159,6 +157,7 @@ class HuiEntityButtonCard extends LitElement implements LovelaceCard {
       ha-icon[data-domain="sun"][data-state="above_horizon"] {
         color: var(--paper-item-icon-active-color, #fdd835);
       }
+
       ha-icon[data-state="unavailable"] {
         color: var(--state-icon-unavailable-color);
       }
@@ -198,5 +197,3 @@ declare global {
     "hui-entity-button-card": HuiEntityButtonCard;
   }
 }
-
-customElements.define("hui-entity-button-card", HuiEntityButtonCard);

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

@@ -1,4 +1,12 @@
-import { html, LitElement, TemplateResult } from "lit-element";
+import {
+  html,
+  LitElement,
+  TemplateResult,
+  customElement,
+  property,
+  css,
+  CSSResult,
+} from "lit-element";
 
 import { LovelaceCard } from "../types";
 import { LovelaceCardConfig } from "../../../data/lovelace";
@@ -21,15 +29,11 @@ export const createErrorCardConfig = (error, origConfig) => ({
   origConfig,
 });
 
+@customElement("hui-error-card")
 export class HuiErrorCard extends LitElement implements LovelaceCard {
   public hass?: HomeAssistant;
-  private _config?: Config;
 
-  static get properties() {
+  @property() private _config?: Config;
-    return {
-      _config: {},
-    };
-  }
 
   public getCardSize(): number {
     return 4;
@@ -45,14 +49,13 @@ export class HuiErrorCard extends LitElement implements LovelaceCard {
     }
 
     return html`
-      ${this.renderStyle()} ${this._config.error}
+      ${this._config.error}
       <pre>${this._toStr(this._config.origConfig)}</pre>
     `;
   }
 
-  private renderStyle(): TemplateResult {
+  static get styles(): CSSResult {
-    return html`
+    return css`
-      <style>
       :host {
         display: block;
         background-color: #ef5350;
@@ -60,7 +63,6 @@ export class HuiErrorCard extends LitElement implements LovelaceCard {
         padding: 8px;
         font-weight: 500;
       }
-      </style>
     `;
   }
 
@@ -74,5 +76,3 @@ declare global {
     "hui-error-card": HuiErrorCard;
   }
 }
-
-customElements.define("hui-error-card", HuiErrorCard);

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

@@ -6,6 +6,7 @@ import {
   css,
   CSSResult,
   property,
+  customElement,
 } from "lit-element";
 import { styleMap } from "lit-html/directives/style-map";
 
@@ -45,6 +46,7 @@ export const severityMap = {
   normal: "var(--label-badge-blue)",
 };
 
+@customElement("hui-gauge-card")
 class HuiGaugeCard extends LitElement implements LovelaceCard {
   public static async getConfigElement(): Promise<LovelaceCardEditor> {
     await import(/* webpackChunkName: "hui-gauge-card-editor" */ "../editor/config-elements/hui-gauge-card-editor");
@@ -55,7 +57,9 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
   }
 
   @property() public hass?: HomeAssistant;
+
   @property() private _config?: Config;
+
   private _updated?: boolean;
 
   public getCardSize(): number {
@@ -306,5 +310,3 @@ declare global {
     "hui-gauge-card": HuiGaugeCard;
   }
 }
-
-customElements.define("hui-gauge-card", HuiGaugeCard);

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

@@ -2,8 +2,11 @@ import {
   html,
   LitElement,
   PropertyValues,
-  PropertyDeclarations,
   TemplateResult,
+  customElement,
+  property,
+  css,
+  CSSResult,
 } from "lit-element";
 import { classMap } from "lit-html/directives/class-map";
 
@@ -38,6 +41,7 @@ export interface Config extends LovelaceCardConfig {
   columns?: number;
 }
 
+@customElement("hui-glance-card")
 export class HuiGlanceCard extends LitElement implements LovelaceCard {
   public static async getConfigElement(): Promise<LovelaceCardEditor> {
     await import(/* webpackChunkName: "hui-glance-card-editor" */ "../editor/config-elements/hui-glance-card-editor");
@@ -47,16 +51,11 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard {
     return { entities: [] };
   }
 
-  public hass?: HomeAssistant;
+  @property() public hass?: HomeAssistant;
-  private _config?: Config;
-  private _configEntities?: ConfigEntity[];
 
-  static get properties(): PropertyDeclarations {
+  @property() private _config?: Config;
-    return {
+
-      hass: {},
+  private _configEntities?: ConfigEntity[];
-      _config: {},
-    };
-  }
 
   public getCardSize(): number {
     return (
@@ -120,7 +119,6 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard {
     const { title } = this._config;
 
     return html`
-      ${this.renderStyle()}
       <ha-card .header="${title}">
         <div class="entities ${classMap({ "no-header": !title })}">
           ${this._configEntities!.map((entityConf) =>
@@ -143,9 +141,8 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard {
     }
   }
 
-  private renderStyle(): TemplateResult {
+  static get styles(): CSSResult {
-    return html`
+    return css`
-      <style>
       .entities {
         display: flex;
         padding: 0 16px 4px;
@@ -177,7 +174,6 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard {
       state-badge {
         margin: 8px 0;
       }
-      </style>
     `;
   }
 
@@ -248,5 +244,3 @@ declare global {
     "hui-glance-card": HuiGlanceCard;
   }
 }
-
-customElements.define("hui-glance-card", HuiGlanceCard);

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

@@ -1,8 +1,11 @@
 import {
   html,
   LitElement,
-  PropertyDeclarations,
   TemplateResult,
+  customElement,
+  property,
+  css,
+  CSSResult,
 } from "lit-element";
 
 import "../../../components/ha-card";
@@ -17,6 +20,7 @@ export interface Config extends LovelaceCardConfig {
   url: string;
 }
 
+@customElement("hui-iframe-card")
 export class HuiIframeCard extends LitElement implements LovelaceCard {
   public static async getConfigElement(): Promise<LovelaceCardEditor> {
     await import(/* webpackChunkName: "hui-iframe-card-editor" */ "../editor/config-elements/hui-iframe-card-editor");
@@ -26,13 +30,7 @@ export class HuiIframeCard extends LitElement implements LovelaceCard {
     return { url: "https://www.home-assistant.io", aspect_ratio: "50%" };
   }
 
-  protected _config?: Config;
+  @property() protected _config?: Config;
-
-  static get properties(): PropertyDeclarations {
-    return {
-      _config: {},
-    };
-  }
 
   public getCardSize(): number {
     if (!this._config) {
@@ -60,7 +58,6 @@ export class HuiIframeCard extends LitElement implements LovelaceCard {
     const aspectRatio = this._config.aspect_ratio || "50%";
 
     return html`
-      ${this.renderStyle()}
       <ha-card .header="${this._config.title}">
         <div
           id="root"
@@ -74,16 +71,17 @@ export class HuiIframeCard extends LitElement implements LovelaceCard {
     `;
   }
 
-  private renderStyle(): TemplateResult {
+  static get styles(): CSSResult {
-    return html`
+    return css`
-      <style>
       ha-card {
         overflow: hidden;
       }
+
       #root {
         width: 100%;
         position: relative;
       }
+
       iframe {
         position: absolute;
         border: none;
@@ -92,7 +90,6 @@ export class HuiIframeCard extends LitElement implements LovelaceCard {
         top: 0;
         left: 0;
       }
-      </style>
     `;
   }
 }
@@ -102,5 +99,3 @@ declare global {
     "hui-iframe-card": HuiIframeCard;
   }
 }
-
-customElements.define("hui-iframe-card", HuiIframeCard);

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

@@ -4,6 +4,7 @@ import {
   PropertyValues,
   TemplateResult,
   property,
+  customElement,
 } from "lit-element";
 import "@polymer/paper-icon-button/paper-icon-button";
 
@@ -45,6 +46,7 @@ export interface Config extends LovelaceCardConfig {
   theme?: string;
 }
 
+@customElement("hui-light-card")
 export class HuiLightCard extends LitElement implements LovelaceCard {
   public static async getConfigElement(): Promise<LovelaceCardEditor> {
     await import(/* webpackChunkName: "hui-light-card-editor" */ "../editor/config-elements/hui-light-card-editor");
@@ -55,9 +57,13 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
   }
 
   @property() public hass?: HomeAssistant;
+
   @property() private _config?: Config;
+
   @property() private _roundSliderStyle?: TemplateResult;
+
   @property() private _jQuery?: any;
+
   private _brightnessTimout?: number;
 
   public getCardSize(): number {
@@ -183,6 +189,7 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
         :host {
           display: block;
         }
+
         ha-card {
           position: relative;
           overflow: hidden;
@@ -193,6 +200,7 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
           --brightness-font-size: 1.2rem;
           --rail-border-color: transparent;
         }
+
         #tooltip {
           position: absolute;
           top: 0;
@@ -202,6 +210,7 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
           text-align: center;
           z-index: 15;
         }
+
         .icon-state {
           display: block;
           margin: auto;
@@ -209,40 +218,50 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
           height: 100%;
           transform: translate(0, 25%);
         }
+
         #light {
           margin: 0 auto;
           padding-top: 16px;
           padding-bottom: 16px;
         }
+
         #light .rs-bar.rs-transition.rs-first,
         .rs-bar.rs-transition.rs-second {
           z-index: 20 !important;
         }
+
         #light .rs-range-color {
           background-color: var(--primary-color);
         }
+
         #light .rs-path-color {
           background-color: var(--disabled-text-color);
         }
+
         #light .rs-handle {
           background-color: var(--paper-card-background-color, white);
           padding: 7px;
           border: 2px solid var(--disabled-text-color);
         }
+
         #light .rs-handle.rs-focus {
           border-color: var(--primary-color);
         }
+
         #light .rs-handle:after {
           border-color: var(--primary-color);
           background-color: var(--primary-color);
         }
+
         #light .rs-border {
           border-color: var(--rail-border-color);
         }
+
         #light .rs-inner.rs-bg-color.rs-border,
         #light .rs-overlay.rs-transition.rs-bg-color {
           background-color: var(--paper-card-background-color, white);
         }
+
         .light-icon {
           margin: auto;
           width: 76px;
@@ -250,16 +269,20 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
           color: var(--paper-item-icon-color, #44739e);
           cursor: pointer;
         }
+
         .light-icon[data-state="on"] {
           color: var(--paper-item-icon-active-color, #fdd835);
         }
+
         .light-icon[data-state="unavailable"] {
           color: var(--state-icon-unavailable-color);
         }
+
         .name {
           padding-top: 40px;
           font-size: var(--name-font-size);
         }
+
         .brightness {
           font-size: var(--brightness-font-size);
           position: absolute;
@@ -276,9 +299,11 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
           text-shadow: var(--brightness-font-text-shadow);
           pointer-events: none;
         }
+
         .show_brightness {
           opacity: 1;
         }
+
         .more-info {
           position: absolute;
           cursor: pointer;
@@ -352,5 +377,3 @@ declare global {
     "hui-light-card": HuiLightCard;
   }
 }
-
-customElements.define("hui-light-card", HuiLightCard);

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

@@ -1,8 +1,11 @@
 import {
   html,
   LitElement,
-  PropertyDeclarations,
   TemplateResult,
+  customElement,
+  property,
+  css,
+  CSSResult,
 } from "lit-element";
 import { classMap } from "lit-html/directives/class-map";
 
@@ -17,22 +20,18 @@ export interface Config extends LovelaceCardConfig {
   title?: string;
 }
 
+@customElement("hui-markdown-card")
 export class HuiMarkdownCard extends LitElement implements LovelaceCard {
   public static async getConfigElement(): Promise<LovelaceCardEditor> {
     await import(/* webpackChunkName: "hui-markdown-card-editor" */ "../editor/config-elements/hui-markdown-card-editor");
     return document.createElement("hui-markdown-card-editor");
   }
+
   public static getStubConfig(): object {
     return { content: " " };
   }
 
-  private _config?: Config;
+  @property() private _config?: Config;
-
-  static get properties(): PropertyDeclarations {
-    return {
-      _config: {},
-    };
-  }
 
   public getCardSize(): number {
     return this._config!.content.split("\n").length;
@@ -52,7 +51,6 @@ export class HuiMarkdownCard extends LitElement implements LovelaceCard {
     }
 
     return html`
-      ${this.renderStyle()}
       <ha-card .header="${this._config.title}">
         <ha-markdown
           class="markdown ${classMap({
@@ -64,11 +62,17 @@ export class HuiMarkdownCard extends LitElement implements LovelaceCard {
     `;
   }
 
-  private renderStyle(): TemplateResult {
+  static get styles(): CSSResult {
-    return html`
+    return css`
-      <style>
       :host {
-          @apply --paper-font-body1;
+        /* start paper-font-headline style */
+        font-family: "Roboto", "Noto", sans-serif;
+        -webkit-font-smoothing: antialiased; /* OS X subpixel AA bleed bug */
+        text-rendering: optimizeLegibility;
+        font-size: 24px;
+        font-weight: 400;
+        letter-spacing: -0.012em;
+        /* end paper-font-headline style */
       }
       ha-markdown {
         display: block;
@@ -92,7 +96,6 @@ export class HuiMarkdownCard extends LitElement implements LovelaceCard {
       ha-markdown img {
         max-width: 100%;
       }
-      </style>
     `;
   }
 }
@@ -102,5 +105,3 @@ declare global {
     "hui-markdown-card": HuiMarkdownCard;
   }
 }
-
-customElements.define("hui-markdown-card", HuiMarkdownCard);

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

@@ -1,8 +1,11 @@
 import {
   html,
   LitElement,
-  PropertyDeclarations,
   TemplateResult,
+  customElement,
+  property,
+  css,
+  CSSResult,
 } from "lit-element";
 
 import "../../../components/ha-card";
@@ -20,6 +23,7 @@ export interface Config extends LovelaceCardConfig {
   hold_action?: ActionConfig;
 }
 
+@customElement("hui-picture-card")
 export class HuiPictureCard extends LitElement implements LovelaceCard {
   public static async getConfigElement(): Promise<LovelaceCardEditor> {
     await import(/* webpackChunkName: "hui-picture-card-editor" */ "../editor/config-elements/hui-picture-card-editor");
@@ -35,11 +39,8 @@ export class HuiPictureCard extends LitElement implements LovelaceCard {
   }
 
   public hass?: HomeAssistant;
-  protected _config?: Config;
 
-  static get properties(): PropertyDeclarations {
+  @property() protected _config?: Config;
-    return { _config: {} };
-  }
 
   public getCardSize(): number {
     return 3;
@@ -59,7 +60,6 @@ export class HuiPictureCard extends LitElement implements LovelaceCard {
     }
 
     return html`
-      ${this.renderStyle()}
       <ha-card
         @ha-click="${this._handleTap}"
         @ha-hold="${this._handleHold}"
@@ -75,20 +75,20 @@ export class HuiPictureCard extends LitElement implements LovelaceCard {
     `;
   }
 
-  private renderStyle(): TemplateResult {
+  static get styles(): CSSResult {
-    return html`
+    return css`
-      <style>
       ha-card {
         overflow: hidden;
       }
+
       ha-card.clickable {
         cursor: pointer;
       }
+
       img {
         display: block;
         width: 100%;
       }
-      </style>
     `;
   }
 
@@ -106,5 +106,3 @@ declare global {
     "hui-picture-card": HuiPictureCard;
   }
 }
-
-customElements.define("hui-picture-card", HuiPictureCard);

src/panels/lovelace/cards/hui-picture-elements-card.ts

@@ -1,4 +1,12 @@
-import { html, LitElement, TemplateResult } from "lit-element";
+import {
+  html,
+  LitElement,
+  TemplateResult,
+  property,
+  customElement,
+  css,
+  CSSResult,
+} from "lit-element";
 
 import { createStyledHuiElement } from "./picture-elements/create-styled-hui-element";
 
@@ -17,15 +25,11 @@ interface Config extends LovelaceCardConfig {
   elements: LovelaceElementConfig[];
 }
 
+@customElement("hui-picture-elements-card")
 class HuiPictureElementsCard extends LitElement implements LovelaceCard {
-  private _config?: Config;
+  @property() private _config?: Config;
-  private _hass?: HomeAssistant;
 
-  static get properties() {
+  private _hass?: HomeAssistant;
-    return {
-      _config: {},
-    };
-  }
 
   set hass(hass: HomeAssistant) {
     this._hass = hass;
@@ -60,7 +64,6 @@ class HuiPictureElementsCard extends LitElement implements LovelaceCard {
     }
 
     return html`
-      ${this.renderStyle()}
       <ha-card .header="${this._config.title}">
         <div id="root">
           <hui-image
@@ -84,20 +87,20 @@ class HuiPictureElementsCard extends LitElement implements LovelaceCard {
     `;
   }
 
-  private renderStyle(): TemplateResult {
+  static get styles(): CSSResult {
-    return html`
+    return css`
-      <style>
       #root {
         position: relative;
       }
+
       .element {
         position: absolute;
         transform: translate(-50%, -50%);
       }
+
       ha-card {
         overflow: hidden;
       }
-      </style>
     `;
   }
 }
@@ -107,5 +110,3 @@ declare global {
     "hui-picture-elements-card": HuiPictureElementsCard;
   }
 }
-
-customElements.define("hui-picture-elements-card", HuiPictureElementsCard);

src/panels/lovelace/cards/hui-picture-entity-card.ts

@@ -1,8 +1,11 @@
 import {
   html,
   LitElement,
-  PropertyDeclarations,
   TemplateResult,
+  customElement,
+  property,
+  css,
+  CSSResult,
 } from "lit-element";
 import { classMap } from "lit-html/directives/class-map";
 
@@ -34,16 +37,11 @@ interface Config extends LovelaceCardConfig {
   show_state?: boolean;
 }
 
+@customElement("hui-picture-entity-card")
 class HuiPictureEntityCard extends LitElement implements LovelaceCard {
-  public hass?: HomeAssistant;
+  @property() public hass?: HomeAssistant;
-  private _config?: Config;
 
-  static get properties(): PropertyDeclarations {
+  @property() private _config?: Config;
-    return {
-      hass: {},
-      _config: {},
-    };
-  }
 
   public getCardSize(): number {
     return 3;
@@ -109,7 +107,6 @@ class HuiPictureEntityCard extends LitElement implements LovelaceCard {
     }
 
     return html`
-      ${this.renderStyle()}
       <ha-card>
         <hui-image
           .hass="${this.hass}"
@@ -132,19 +129,25 @@ class HuiPictureEntityCard extends LitElement implements LovelaceCard {
     `;
   }
 
-  private renderStyle(): TemplateResult {
+  static get styles(): CSSResult {
-    return html`
+    return css`
-      <style>
       ha-card {
         min-height: 75px;
         overflow: hidden;
         position: relative;
       }
+
       hui-image.clickable {
         cursor: pointer;
       }
+
       .footer {
-          @apply --paper-font-common-nowrap;
+        /* start paper-font-common-nowrap style */
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        /* end paper-font-common-nowrap style */
+
         position: absolute;
         left: 0;
         right: 0;
@@ -155,14 +158,15 @@ class HuiPictureEntityCard extends LitElement implements LovelaceCard {
         line-height: 16px;
         color: white;
       }
+
       .both {
         display: flex;
         justify-content: space-between;
       }
+
       .state {
         text-align: right;
       }
-      </style>
     `;
   }
 
@@ -180,5 +184,3 @@ declare global {
     "hui-picture-entity-card": HuiPictureEntityCard;
   }
 }
-
-customElements.define("hui-picture-entity-card", HuiPictureEntityCard);

src/panels/lovelace/cards/hui-picture-glance-card.ts

@@ -1,8 +1,11 @@
 import {
   html,
   LitElement,
-  PropertyDeclarations,
   TemplateResult,
+  customElement,
+  property,
+  css,
+  CSSResult,
 } from "lit-element";
 import { classMap } from "lit-html/directives/class-map";
 
@@ -39,18 +42,15 @@ interface Config extends LovelaceCardConfig {
   hold_action?: ActionConfig;
 }
 
+@customElement("hui-picture-glance-card")
 class HuiPictureGlanceCard extends LitElement implements LovelaceCard {
-  public hass?: HomeAssistant;
+  @property() public hass?: HomeAssistant;
-  private _config?: Config;
-  private _entitiesDialog?: EntityConfig[];
-  private _entitiesToggle?: EntityConfig[];
 
-  static get properties(): PropertyDeclarations {
+  @property() private _config?: Config;
-    return {
+
-      hass: {},
+  private _entitiesDialog?: EntityConfig[];
-      _config: {},
+
-    };
+  private _entitiesToggle?: EntityConfig[];
-  }
 
   public getCardSize(): number {
     return 3;
@@ -91,7 +91,6 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard {
     }
 
     return html`
-      ${this.renderStyle()}
       <ha-card>
         <hui-image
           class="${classMap({
@@ -177,19 +176,25 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard {
     toggleEntity(this.hass!, (ev.target as any).entity);
   }
 
-  private renderStyle(): TemplateResult {
+  static get styles(): CSSResult {
-    return html`
+    return css`
-      <style>
       ha-card {
         position: relative;
         min-height: 48px;
         overflow: hidden;
       }
+
       hui-image.clickable {
         cursor: pointer;
       }
+
       .box {
-          @apply --paper-font-common-nowrap;
+        /* start paper-font-common-nowrap style */
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        /* end paper-font-common-nowrap style */
+
         position: absolute;
         left: 0;
         right: 0;
@@ -202,19 +207,21 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard {
         display: flex;
         justify-content: space-between;
       }
+
       .box .title {
         font-weight: 500;
         margin-left: 8px;
       }
+
       ha-icon {
         cursor: pointer;
         padding: 8px;
         color: #a9a9a9;
       }
+
       ha-icon.state-on {
         color: white;
       }
-      </style>
     `;
   }
 }
@@ -224,5 +231,3 @@ declare global {
     "hui-picture-glance-card": HuiPictureGlanceCard;
   }
 }
-
-customElements.define("hui-picture-glance-card", HuiPictureGlanceCard);

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

@@ -2,9 +2,12 @@ import {
   html,
   svg,
   LitElement,
-  PropertyDeclarations,
   PropertyValues,
   TemplateResult,
+  customElement,
+  property,
+  css,
+  CSSResult,
 } from "lit-element";
 import "@polymer/paper-spinner/paper-spinner";
 
@@ -145,6 +148,7 @@ export interface Config extends LovelaceCardConfig {
   hours_to_show?: number;
 }
 
+@customElement("hui-sensor-card")
 class HuiSensorCard extends LitElement implements LovelaceCard {
   public static async getConfigElement(): Promise<LovelaceCardEditor> {
     await import(/* webpackChunkName: "hui-sensor-card-editor" */ "../editor/config-elements/hui-sensor-card-editor");
@@ -155,18 +159,13 @@ class HuiSensorCard extends LitElement implements LovelaceCard {
     return {};
   }
 
-  public hass?: HomeAssistant;
+  @property() public hass?: HomeAssistant;
-  private _config?: Config;
-  private _history?: any;
-  private _date?: Date;
 
-  static get properties(): PropertyDeclarations {
+  @property() private _config?: Config;
-    return {
+
-      hass: {},
+  @property() private _history?: any;
-      _config: {},
+
-      _history: {},
+  private _date?: Date;
-    };
-  }
 
   public setConfig(config: Config): void {
     if (!config.entity || config.entity.split(".")[0] !== "sensor") {
@@ -244,7 +243,6 @@ class HuiSensorCard extends LitElement implements LovelaceCard {
       graph = "";
     }
     return html`
-      ${this.renderStyle()}
       <ha-card @click="${this._handleClick}">
         <div class="flex">
           <div class="icon">
@@ -324,13 +322,13 @@ class HuiSensorCard extends LitElement implements LovelaceCard {
     this._date = new Date();
   }
 
-  private renderStyle(): TemplateResult {
+  static get styles(): CSSResult {
-    return html`
+    return css`
-      <style>
       :host {
         display: flex;
         flex-direction: column;
       }
+
       ha-card {
         display: flex;
         flex-direction: column;
@@ -339,9 +337,11 @@ class HuiSensorCard extends LitElement implements LovelaceCard {
         position: relative;
         cursor: pointer;
       }
+
       .flex {
         display: flex;
       }
+
       .header {
         align-items: center;
         display: flex;
@@ -349,6 +349,7 @@ class HuiSensorCard extends LitElement implements LovelaceCard {
         opacity: 0.8;
         position: relative;
       }
+
       .name {
         display: block;
         display: -webkit-box;
@@ -364,6 +365,7 @@ class HuiSensorCard extends LitElement implements LovelaceCard {
         word-wrap: break-word;
         word-break: break-all;
       }
+
       .icon {
         color: var(--paper-item-icon-color, #44739e);
         display: inline-block;
@@ -373,10 +375,12 @@ class HuiSensorCard extends LitElement implements LovelaceCard {
         text-align: center;
         width: 40px;
       }
+
       .info {
         flex-wrap: wrap;
         margin: 16px 0 16px 8px;
       }
+
       #value {
         display: inline-block;
         font-size: 2rem;
@@ -384,6 +388,7 @@ class HuiSensorCard extends LitElement implements LovelaceCard {
         line-height: 1em;
         margin-right: 4px;
       }
+
       #measurement {
         align-self: flex-end;
         display: inline-block;
@@ -393,6 +398,7 @@ class HuiSensorCard extends LitElement implements LovelaceCard {
         opacity: 0.6;
         vertical-align: bottom;
       }
+
       .graph {
         align-self: flex-end;
         margin: auto;
@@ -400,11 +406,11 @@ class HuiSensorCard extends LitElement implements LovelaceCard {
         position: relative;
         width: 100%;
       }
+
       .graph > div {
         align-self: flex-end;
         margin: auto 8px;
       }
-      </style>
     `;
   }
 }
@@ -414,5 +420,3 @@ declare global {
     "hui-sensor-card": HuiSensorCard;
   }
 }
-
-customElements.define("hui-sensor-card", HuiSensorCard);

src/panels/lovelace/cards/hui-shopping-list-card.ts

@@ -5,6 +5,7 @@ import {
   css,
   CSSResult,
   property,
+  customElement,
 } from "lit-element";
 import { repeat } from "lit-html/directives/repeat";
 import { PaperInputElement } from "@polymer/paper-input/paper-input";
@@ -28,6 +29,7 @@ export interface Config extends LovelaceCardConfig {
   title?: string;
 }
 
+@customElement("hui-shopping-list-card")
 class HuiShoppingListCard extends LitElement implements LovelaceCard {
   public static async getConfigElement(): Promise<LovelaceCardEditor> {
     await import(/* webpackChunkName: "hui-shopping-list-editor" */ "../editor/config-elements/hui-shopping-list-editor");
@@ -39,9 +41,13 @@ class HuiShoppingListCard extends LitElement implements LovelaceCard {
   }
 
   @property() public hass?: HomeAssistant;
+
   @property() private _config?: Config;
+
   @property() private _uncheckedItems?: ShoppingListItem[];
+
   @property() private _checkedItems?: ShoppingListItem[];
+
   private _unsubEvents?: Promise<() => Promise<void>>;
 
   public getCardSize(): number {
@@ -178,24 +184,27 @@ class HuiShoppingListCard extends LitElement implements LovelaceCard {
     `;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResult {
-    return [
+    return css`
-      css`
       .editRow,
       .addRow {
         display: flex;
         flex-direction: row;
       }
+
       .addButton {
         padding: 9px 15px 11px 15px;
         cursor: pointer;
       }
+
       paper-item-body {
         width: 75%;
       }
+
       paper-checkbox {
         padding: 11px 11px 11px 18px;
       }
+
       paper-input {
         --paper-input-container-underline: {
           display: none;
@@ -209,30 +218,34 @@ class HuiShoppingListCard extends LitElement implements LovelaceCard {
         position: relative;
         top: 1px;
       }
+
       .checked {
         margin-left: 17px;
         margin-bottom: 11px;
         margin-top: 11px;
       }
+
       .label {
         color: var(--primary-color);
       }
+
       .divider {
         height: 1px;
         background-color: var(--divider-color);
         margin: 10px;
       }
+
       .clearall {
         cursor: pointer;
         margin-bottom: 3px;
         float: right;
         padding-right: 10px;
       }
+
       .addRow > ha-icon {
         color: var(--secondary-text-color);
       }
-      `,
+    `;
-    ];
   }
 
   private async _fetchData(): Promise<void> {
@@ -301,5 +314,3 @@ declare global {
     "hui-shopping-list-card": HuiShoppingListCard;
   }
 }
-
-customElements.define("hui-shopping-list-card", HuiShoppingListCard);

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

@@ -1,9 +1,10 @@
 import {
   html,
   LitElement,
-  PropertyDeclarations,
   PropertyValues,
   TemplateResult,
+  customElement,
+  property,
 } from "lit-element";
 import { classMap } from "lit-html/directives/class-map";
 import "@polymer/paper-icon-button/paper-icon-button";
@@ -52,6 +53,7 @@ export interface Config extends LovelaceCardConfig {
   name?: string;
 }
 
+@customElement("hui-thermostat-card")
 export class HuiThermostatCard extends LitElement implements LovelaceCard {
   public static async getConfigElement(): Promise<LovelaceCardEditor> {
     await import(/* webpackChunkName: "hui-thermostat-card-editor" */ "../editor/config-elements/hui-thermostat-card-editor");
@@ -62,22 +64,19 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
     return { entity: "" };
   }
 
-  public hass?: HomeAssistant;
+  @property() public hass?: HomeAssistant;
-  private _config?: Config;
-  private _roundSliderStyle?: TemplateResult;
-  private _jQuery?: any;
-  private _broadCard?: boolean;
-  private _loaded?: boolean;
-  private _updated?: boolean;
 
-  static get properties(): PropertyDeclarations {
+  @property() private _config?: Config;
-    return {
+
-      hass: {},
+  @property() private _roundSliderStyle?: TemplateResult;
-      _config: {},
+
-      roundSliderStyle: {},
+  @property() private _jQuery?: any;
-      _jQuery: {},
+
-    };
+  private _broadCard?: boolean;
-  }
+
+  private _loaded?: boolean;
+
+  private _updated?: boolean;
 
   public getCardSize(): number {
     return 4;
@@ -574,5 +573,3 @@ declare global {
     "hui-thermostat-card": HuiThermostatCard;
   }
 }
-
-customElements.define("hui-thermostat-card", HuiThermostatCard);