Convert ha-card to LitElement and TypeScript (#2701)

* Convert ha-card to LitElement and TypeScript

* CSS away the header instead

* Travis fixes

* Remove duplicate styles

src/components/ha-card.js

@@ -1,42 +0,0 @@
-import "@polymer/paper-styles/element-styles/paper-material-styles";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-class HaCard extends PolymerElement {
-  static get template() {
-    return html`
-      <style include="paper-material-styles">
-        :host {
-          @apply --paper-material-elevation-1;
-          display: block;
-          border-radius: var(--ha-card-border-radius, 2px);
-          transition: all 0.3s ease-out;
-          background: var(
-            --ha-card-background,
-            var(--paper-card-background-color, white)
-          );
-          color: var(--primary-text-color);
-        }
-        .header {
-          @apply --paper-font-headline;
-          @apply --paper-font-common-expensive-kerning;
-          opacity: var(--dark-primary-opacity);
-          padding: 24px 16px 16px;
-        }
-      </style>
-
-      <template is="dom-if" if="[[header]]">
-        <div class="header">[[header]]</div>
-      </template>
-      <slot></slot>
-    `;
-  }
-
-  static get properties() {
-    return {
-      header: String,
-    };
-  }
-}
-
-customElements.define("ha-card", HaCard);

src/components/ha-card.ts

@@ -0,0 +1,45 @@
+import {
+  css,
+  CSSResult,
+  html,
+  LitElement,
+  property,
+  TemplateResult,
+} from "lit-element";
+
+class HaCard extends LitElement {
+  @property() public header?: string;
+
+  static get styles(): CSSResult {
+    return css`
+      :host {
+        background: var(
+          --ha-card-background,
+          var(--paper-card-background-color, white)
+        );
+        border-radius: var(--ha-card-border-radius, 2px);
+        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
+          0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
+        color: var(--primary-text-color);
+        display: block;
+        transition: all 0.3s ease-out;
+      }
+      .header:not(:empty) {
+        font-size: 24px;
+        letter-spacing: -0.012em;
+        line-height: 32px;
+        opacity: 0.87;
+        padding: 24px 16px 16px;
+      }
+    `;
+  }
+
+  protected render(): TemplateResult {
+    return html`
+      <div class="header">${this.header}</div>
+      <slot></slot>
+    `;
+  }
+}
+
+customElements.define("ha-card", HaCard);