Convert gallery elements to LitElement (#8088)

gallery/src/demos/demo-hui-alarm-panel-card.ts

@@ -1,6 +1,11 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
+import {
-/* eslint-plugin-disable lit */
+  html,
-import { PolymerElement } from "@polymer/polymer/polymer-element";
+  LitElement,
+  customElement,
+  PropertyValues,
+  query,
+  TemplateResult,
+} from "lit-element";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -71,28 +76,19 @@ const CONFIGS = [
   },
 ];
 
-class DemoAlarmPanelEntity extends PolymerElement {
+@customElement("demo-hui-alarm-panel-card")
-  static get template() {
+class DemoAlarmPanelEntity extends LitElement {
-    return html` <demo-cards id="demos" configs="[[_configs]]"></demo-cards> `;
+  @query("#demos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  static get properties() {
+  protected firstUpdated(changedProperties: PropertyValues) {
-    return {
+    super.firstUpdated(changedProperties);
-      _configs: {
+    const hass = provideHass(this._demoRoot);
-        type: Object,
+    hass.updateTranslations(null, "en");
-        value: CONFIGS,
+    hass.updateTranslations("lovelace", "en");
-      },
-    };
-  }
-
-  public ready() {
-    super.ready();
-    this._setupDemo();
-  }
-
-  private async _setupDemo() {
-    const hass = provideHass(this.$.demos);
-    await hass.updateTranslations(null, "en");
     hass.addEntities(ENTITIES);
   }
 }

gallery/src/demos/demo-hui-conditional-card.ts

@@ -1,6 +1,11 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
+import {
-/* eslint-plugin-disable lit */
+  html,
-import { PolymerElement } from "@polymer/polymer/polymer-element";
+  LitElement,
+  customElement,
+  PropertyValues,
+  query,
+  TemplateResult,
+} from "lit-element";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -53,24 +58,19 @@ const CONFIGS = [
   },
 ];
 
-class DemoConditional extends PolymerElement {
+@customElement("demo-hui-conditional-card")
-  static get template() {
+class DemoConditional extends LitElement {
-    return html` <demo-cards id="demos" configs="[[_configs]]"></demo-cards> `;
+  @query("#demos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  static get properties() {
+  protected firstUpdated(changedProperties: PropertyValues) {
-    return {
+    super.firstUpdated(changedProperties);
-      _configs: {
+    const hass = provideHass(this._demoRoot);
-        type: Object,
-        value: CONFIGS,
-      },
-    };
-  }
-
-  public ready() {
-    super.ready();
-    const hass = provideHass(this.$.demos);
     hass.updateTranslations(null, "en");
+    hass.updateTranslations("lovelace", "en");
     hass.addEntities(ENTITIES);
   }
 }

gallery/src/demos/demo-hui-entities-card.ts

@@ -1,6 +1,11 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
+import {
-/* eslint-plugin-disable lit */
+  html,
-import { PolymerElement } from "@polymer/polymer/polymer-element";
+  LitElement,
+  customElement,
+  PropertyValues,
+  query,
+  TemplateResult,
+} from "lit-element";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -217,24 +222,19 @@ const CONFIGS = [
   },
 ];
 
-class DemoEntities extends PolymerElement {
+@customElement("demo-hui-entities-card")
-  static get template() {
+class DemoEntities extends LitElement {
-    return html` <demo-cards id="demos" configs="[[_configs]]"></demo-cards> `;
+  @query("#demos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  static get properties() {
+  protected firstUpdated(changedProperties: PropertyValues) {
-    return {
+    super.firstUpdated(changedProperties);
-      _configs: {
+    const hass = provideHass(this._demoRoot);
-        type: Object,
-        value: CONFIGS,
-      },
-    };
-  }
-
-  public ready() {
-    super.ready();
-    const hass = provideHass(this.$.demos);
     hass.updateTranslations(null, "en");
+    hass.updateTranslations("lovelace", "en");
     hass.addEntities(ENTITIES);
   }
 }

gallery/src/demos/demo-hui-entity-button-card.ts

@@ -1,6 +1,11 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
+import {
-/* eslint-plugin-disable lit */
+  html,
-import { PolymerElement } from "@polymer/polymer/polymer-element";
+  LitElement,
+  customElement,
+  PropertyValues,
+  query,
+  TemplateResult,
+} from "lit-element";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -69,24 +74,19 @@ const CONFIGS = [
   },
 ];
 
-class DemoButtonEntity extends PolymerElement {
+@customElement("demo-hui-entity-button-card")
-  static get template() {
+class DemoButtonEntity extends LitElement {
-    return html` <demo-cards id="demos" configs="[[_configs]]"></demo-cards> `;
+  @query("#demos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  static get properties() {
+  protected firstUpdated(changedProperties: PropertyValues) {
-    return {
+    super.firstUpdated(changedProperties);
-      _configs: {
+    const hass = provideHass(this._demoRoot);
-        type: Object,
-        value: CONFIGS,
-      },
-    };
-  }
-
-  public ready() {
-    super.ready();
-    const hass = provideHass(this.$.demos);
     hass.updateTranslations(null, "en");
+    hass.updateTranslations("lovelace", "en");
     hass.addEntities(ENTITIES);
   }
 }

gallery/src/demos/demo-hui-entity-filter-card.ts

@@ -1,6 +1,11 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
+import {
-/* eslint-plugin-disable lit */
+  html,
-import { PolymerElement } from "@polymer/polymer/polymer-element";
+  LitElement,
+  customElement,
+  PropertyValues,
+  query,
+  TemplateResult,
+} from "lit-element";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -89,26 +94,21 @@ const CONFIGS = [
   },
 ];
 
-class DemoFilter extends PolymerElement {
+@customElement("demo-hui-entity-filter-card")
-  static get template() {
+class DemoEntityFilter extends LitElement {
-    return html` <demo-cards id="demos" configs="[[_configs]]"></demo-cards> `;
+  @query("#demos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  static get properties() {
+  protected firstUpdated(changedProperties: PropertyValues) {
-    return {
+    super.firstUpdated(changedProperties);
-      _configs: {
+    const hass = provideHass(this._demoRoot);
-        type: Object,
-        value: CONFIGS,
-      },
-    };
-  }
-
-  public ready() {
-    super.ready();
-    const hass = provideHass(this.$.demos);
     hass.updateTranslations(null, "en");
+    hass.updateTranslations("lovelace", "en");
     hass.addEntities(ENTITIES);
   }
 }
 
-customElements.define("demo-hui-entity-filter-card", DemoFilter);
+customElements.define("demo-hui-entity-filter-card", DemoEntityFilter);

gallery/src/demos/demo-hui-gauge-card.ts

@@ -1,6 +1,11 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
+import {
-/* eslint-plugin-disable lit */
+  html,
-import { PolymerElement } from "@polymer/polymer/polymer-element";
+  LitElement,
+  customElement,
+  PropertyValues,
+  query,
+  TemplateResult,
+} from "lit-element";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -107,24 +112,19 @@ const CONFIGS = [
   },
 ];
 
-class DemoGaugeEntity extends PolymerElement {
+@customElement("demo-hui-gauge-card")
-  static get template() {
+class DemoGaugeEntity extends LitElement {
-    return html` <demo-cards id="demos" configs="[[_configs]]"></demo-cards> `;
+  @query("#demos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  static get properties() {
+  protected firstUpdated(changedProperties: PropertyValues) {
-    return {
+    super.firstUpdated(changedProperties);
-      _configs: {
+    const hass = provideHass(this._demoRoot);
-        type: Object,
-        value: CONFIGS,
-      },
-    };
-  }
-
-  public ready() {
-    super.ready();
-    const hass = provideHass(this.$.demos);
     hass.updateTranslations(null, "en");
+    hass.updateTranslations("lovelace", "en");
     hass.addEntities(ENTITIES);
   }
 }

gallery/src/demos/demo-hui-glance-card.ts

@@ -1,6 +1,11 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
+import {
-/* eslint-plugin-disable lit */
+  html,
-import { PolymerElement } from "@polymer/polymer/polymer-element";
+  LitElement,
+  customElement,
+  PropertyValues,
+  query,
+  TemplateResult,
+} from "lit-element";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -218,24 +223,19 @@ const CONFIGS = [
   },
 ];
 
-class DemoGlanceEntity extends PolymerElement {
+@customElement("demo-hui-glance-card")
-  static get template() {
+class DemoGlanceEntity extends LitElement {
-    return html` <demo-cards id="demos" configs="[[_configs]]"></demo-cards> `;
+  @query("#demos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  static get properties() {
+  protected firstUpdated(changedProperties: PropertyValues) {
-    return {
+    super.firstUpdated(changedProperties);
-      _configs: {
+    const hass = provideHass(this._demoRoot);
-        type: Object,
-        value: CONFIGS,
-      },
-    };
-  }
-
-  public ready() {
-    super.ready();
-    const hass = provideHass(this.$.demos);
     hass.updateTranslations(null, "en");
+    hass.updateTranslations("lovelace", "en");
     hass.addEntities(ENTITIES);
   }
 }

gallery/src/demos/demo-hui-iframe-card.ts

@@ -1,6 +1,4 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { html, LitElement, customElement, TemplateResult } from "lit-element";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
 import "../components/demo-cards";
 
 const CONFIGS = [
@@ -37,18 +35,10 @@ const CONFIGS = [
   },
 ];
 
-class DemoIframe extends PolymerElement {
+@customElement("demo-hui-iframe-card")
-  static get template() {
+class DemoIframe extends LitElement {
-    return html` <demo-cards configs="[[_configs]]"></demo-cards> `;
+  protected render(): TemplateResult {
-  }
+    return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
-
-  static get properties() {
-    return {
-      _configs: {
-        type: Object,
-        value: CONFIGS,
-      },
-    };
   }
 }
 

gallery/src/demos/demo-hui-light-card.ts

@@ -1,6 +1,11 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
+import {
-/* eslint-plugin-disable lit */
+  html,
-import { PolymerElement } from "@polymer/polymer/polymer-element";
+  LitElement,
+  customElement,
+  PropertyValues,
+  query,
+  TemplateResult,
+} from "lit-element";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -63,24 +68,19 @@ const CONFIGS = [
   },
 ];
 
-class DemoLightEntity extends PolymerElement {
+@customElement("demo-hui-light-card")
-  static get template() {
+class DemoLightEntity extends LitElement {
-    return html` <demo-cards id="demos" configs="[[_configs]]"></demo-cards> `;
+  @query("#demos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  static get properties() {
+  protected firstUpdated(changedProperties: PropertyValues) {
-    return {
+    super.firstUpdated(changedProperties);
-      _configs: {
+    const hass = provideHass(this._demoRoot);
-        type: Object,
-        value: CONFIGS,
-      },
-    };
-  }
-
-  public ready() {
-    super.ready();
-    const hass = provideHass(this.$.demos);
     hass.updateTranslations(null, "en");
+    hass.updateTranslations("lovelace", "en");
     hass.addEntities(ENTITIES);
   }
 }

gallery/src/demos/demo-hui-map-card.ts

@@ -1,6 +1,11 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
+import {
-/* eslint-plugin-disable lit */
+  html,
-import { PolymerElement } from "@polymer/polymer/polymer-element";
+  LitElement,
+  customElement,
+  PropertyValues,
+  query,
+  TemplateResult,
+} from "lit-element";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -161,24 +166,19 @@ const CONFIGS = [
   },
 ];
 
-class DemoMap extends PolymerElement {
+@customElement("demo-hui-map-card")
-  static get template() {
+class DemoMap extends LitElement {
-    return html` <demo-cards id="demos" configs="[[_configs]]"></demo-cards> `;
+  @query("#demos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  static get properties() {
+  protected firstUpdated(changedProperties: PropertyValues) {
-    return {
+    super.firstUpdated(changedProperties);
-      _configs: {
+    const hass = provideHass(this._demoRoot);
-        type: Object,
-        value: CONFIGS,
-      },
-    };
-  }
-
-  public ready() {
-    super.ready();
-    const hass = provideHass(this.$.demos);
     hass.updateTranslations(null, "en");
+    hass.updateTranslations("lovelace", "en");
     hass.addEntities(ENTITIES);
   }
 }

gallery/src/demos/demo-hui-markdown-card.ts

@@ -1,6 +1,11 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
+import {
-/* eslint-plugin-disable lit */
+  html,
-import { PolymerElement } from "@polymer/polymer/polymer-element";
+  LitElement,
+  customElement,
+  PropertyValues,
+  query,
+  TemplateResult,
+} from "lit-element";
 import { mockTemplate } from "../../../demo/src/stubs/template";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -254,23 +259,19 @@ const CONFIGS = [
   },
 ];
 
-class DemoMarkdown extends PolymerElement {
+@customElement("demo-hui-markdown-card")
-  static get template() {
+class DemoMarkdown extends LitElement {
-    return html` <demo-cards id="demos" configs="[[_configs]]"></demo-cards> `;
+  @query("#demos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  static get properties() {
+  protected firstUpdated(changedProperties: PropertyValues) {
-    return {
+    super.firstUpdated(changedProperties);
-      _configs: {
+    const hass = provideHass(this._demoRoot);
-        type: Object,
+    hass.updateTranslations(null, "en");
-        value: CONFIGS,
+    hass.updateTranslations("lovelace", "en");
-      },
-    };
-  }
-
-  public ready() {
-    super.ready();
-    const hass = provideHass(this.$.demos);
     mockTemplate(hass);
   }
 }

gallery/src/demos/demo-hui-media-control-card.ts

@@ -1,6 +1,11 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
+import {
-/* eslint-plugin-disable lit */
+  html,
-import { PolymerElement } from "@polymer/polymer/polymer-element";
+  LitElement,
+  customElement,
+  PropertyValues,
+  query,
+  TemplateResult,
+} from "lit-element";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
 import { createMediaPlayerEntities } from "../data/media_players";
@@ -158,26 +163,21 @@ const CONFIGS = [
   },
 ];
 
-class DemoHuiMediControlCard extends PolymerElement {
+@customElement("demo-hui-media-control-card")
-  static get template() {
+class DemoHuiMediaControlCard extends LitElement {
-    return html` <demo-cards id="demos" configs="[[_configs]]"></demo-cards> `;
+  @query("#demos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  static get properties() {
+  protected firstUpdated(changedProperties: PropertyValues) {
-    return {
+    super.firstUpdated(changedProperties);
-      _configs: {
+    const hass = provideHass(this._demoRoot);
-        type: Object,
-        value: CONFIGS,
-      },
-    };
-  }
-
-  public ready() {
-    super.ready();
-    const hass = provideHass(this.$.demos);
     hass.updateTranslations(null, "en");
+    hass.updateTranslations("lovelace", "en");
     hass.addEntities(createMediaPlayerEntities());
   }
 }
 
-customElements.define("demo-hui-media-control-card", DemoHuiMediControlCard);
+customElements.define("demo-hui-media-control-card", DemoHuiMediaControlCard);

gallery/src/demos/demo-hui-media-player-rows.ts

@@ -1,6 +1,11 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
+import {
-/* eslint-plugin-disable lit */
+  html,
-import { PolymerElement } from "@polymer/polymer/polymer-element";
+  LitElement,
+  customElement,
+  PropertyValues,
+  query,
+  TemplateResult,
+} from "lit-element";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
 import { createMediaPlayerEntities } from "../data/media_players";
@@ -55,26 +60,21 @@ const CONFIGS = [
   },
 ];
 
-class DemoHuiMediaPlayerRows extends PolymerElement {
+@customElement("demo-hui-media-player-row")
-  static get template() {
+class DemoHuiMediaPlayerRow extends LitElement {
-    return html` <demo-cards id="demos" configs="[[_configs]]"></demo-cards> `;
+  @query("#demos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  static get properties() {
+  protected firstUpdated(changedProperties: PropertyValues) {
-    return {
+    super.firstUpdated(changedProperties);
-      _configs: {
+    const hass = provideHass(this._demoRoot);
-        type: Object,
-        value: CONFIGS,
-      },
-    };
-  }
-
-  public ready() {
-    super.ready();
-    const hass = provideHass(this.$.demos);
     hass.updateTranslations(null, "en");
+    hass.updateTranslations("lovelace", "en");
     hass.addEntities(createMediaPlayerEntities());
   }
 }
 
-customElements.define("demo-hui-media-player-rows", DemoHuiMediaPlayerRows);
+customElements.define("demo-hui-media-player-row", DemoHuiMediaPlayerRow);

gallery/src/demos/demo-hui-picture-elements-card.ts

@@ -1,6 +1,11 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
+import {
-/* eslint-plugin-disable lit */
+  html,
-import { PolymerElement } from "@polymer/polymer/polymer-element";
+  LitElement,
+  customElement,
+  PropertyValues,
+  query,
+  TemplateResult,
+} from "lit-element";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -125,26 +130,21 @@ const CONFIGS = [
   },
 ];
 
-class DemoPicElements extends PolymerElement {
+@customElement("demo-hui-picture-elements-card")
-  static get template() {
+class DemoPictureElements extends LitElement {
-    return html` <demo-cards id="demos" configs="[[_configs]]"></demo-cards> `;
+  @query("#demos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  static get properties() {
+  protected firstUpdated(changedProperties: PropertyValues) {
-    return {
+    super.firstUpdated(changedProperties);
-      _configs: {
+    const hass = provideHass(this._demoRoot);
-        type: Object,
-        value: CONFIGS,
-      },
-    };
-  }
-
-  public ready() {
-    super.ready();
-    const hass = provideHass(this.$.demos);
     hass.updateTranslations(null, "en");
+    hass.updateTranslations("lovelace", "en");
     hass.addEntities(ENTITIES);
   }
 }
 
-customElements.define("demo-hui-picture-elements-card", DemoPicElements);
+customElements.define("demo-hui-picture-elements-card", DemoPictureElements);

gallery/src/demos/demo-hui-picture-entity-card.ts

@@ -1,6 +1,11 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
+import {
-/* eslint-plugin-disable lit */
+  html,
-import { PolymerElement } from "@polymer/polymer/polymer-element";
+  LitElement,
+  customElement,
+  PropertyValues,
+  query,
+  TemplateResult,
+} from "lit-element";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -80,26 +85,21 @@ const CONFIGS = [
   },
 ];
 
-class DemoPicEntity extends PolymerElement {
+@customElement("demo-hui-picture-entity-card")
-  static get template() {
+class DemoPictureEntity extends LitElement {
-    return html` <demo-cards id="demos" configs="[[_configs]]"></demo-cards> `;
+  @query("#demos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  static get properties() {
+  protected firstUpdated(changedProperties: PropertyValues) {
-    return {
+    super.firstUpdated(changedProperties);
-      _configs: {
+    const hass = provideHass(this._demoRoot);
-        type: Object,
-        value: CONFIGS,
-      },
-    };
-  }
-
-  public ready() {
-    super.ready();
-    const hass = provideHass(this.$.demos);
     hass.updateTranslations(null, "en");
+    hass.updateTranslations("lovelace", "en");
     hass.addEntities(ENTITIES);
   }
 }
 
-customElements.define("demo-hui-picture-entity-card", DemoPicEntity);
+customElements.define("demo-hui-picture-entity-card", DemoPictureEntity);

gallery/src/demos/demo-hui-picture-glance-card.ts

@@ -1,6 +1,11 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
+import {
-/* eslint-plugin-disable lit */
+  html,
-import { PolymerElement } from "@polymer/polymer/polymer-element";
+  LitElement,
+  customElement,
+  PropertyValues,
+  query,
+  TemplateResult,
+} from "lit-element";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -121,26 +126,21 @@ const CONFIGS = [
   },
 ];
 
-class DemoPicGlance extends PolymerElement {
+@customElement("demo-hui-picture-glance-card")
-  static get template() {
+class DemoPictureGlance extends LitElement {
-    return html` <demo-cards id="demos" configs="[[_configs]]"></demo-cards> `;
+  @query("#demos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  static get properties() {
+  protected firstUpdated(changedProperties: PropertyValues) {
-    return {
+    super.firstUpdated(changedProperties);
-      _configs: {
+    const hass = provideHass(this._demoRoot);
-        type: Object,
-        value: CONFIGS,
-      },
-    };
-  }
-
-  public ready() {
-    super.ready();
-    const hass = provideHass(this.$.demos);
     hass.updateTranslations(null, "en");
+    hass.updateTranslations("lovelace", "en");
     hass.addEntities(ENTITIES);
   }
 }
 
-customElements.define("demo-hui-picture-glance-card", DemoPicGlance);
+customElements.define("demo-hui-picture-glance-card", DemoPictureGlance);

gallery/src/demos/demo-hui-plant-card.ts

@@ -1,6 +1,11 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
+import {
-/* eslint-plugin-disable lit */
+  html,
-import { PolymerElement } from "@polymer/polymer/polymer-element";
+  LitElement,
+  customElement,
+  PropertyValues,
+  query,
+  TemplateResult,
+} from "lit-element";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
 import { createPlantEntities } from "../data/plants";
@@ -30,24 +35,19 @@ const CONFIGS = [
   },
 ];
 
-class DemoPlantEntity extends PolymerElement {
+@customElement("demo-hui-plant-card")
-  static get template() {
+export class DemoPlantEntity extends LitElement {
-    return html`<demo-cards id="demos" configs="[[_configs]]"></demo-cards>`;
+  @query("#demos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  static get properties() {
+  protected firstUpdated(changedProperties: PropertyValues) {
-    return {
+    super.firstUpdated(changedProperties);
-      _configs: {
+    const hass = provideHass(this._demoRoot);
-        type: Object,
-        value: CONFIGS,
-      },
-    };
-  }
-
-  public ready() {
-    super.ready();
-    const hass = provideHass(this.$.demos);
     hass.updateTranslations(null, "en");
+    hass.updateTranslations("lovelace", "en");
     hass.addEntities(createPlantEntities());
   }
 }

gallery/src/demos/demo-hui-shopping-list-card.ts

@@ -1,6 +1,11 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
+import {
-/* eslint-plugin-disable lit */
+  html,
-import { PolymerElement } from "@polymer/polymer/polymer-element";
+  LitElement,
+  customElement,
+  PropertyValues,
+  query,
+  TemplateResult,
+} from "lit-element";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
 
@@ -20,24 +25,19 @@ const CONFIGS = [
   },
 ];
 
-class DemoShoppingListEntity extends PolymerElement {
+@customElement("demo-hui-shopping-list-card")
-  static get template() {
+class DemoShoppingListEntity extends LitElement {
-    return html` <demo-cards id="demos" configs="[[_configs]]"></demo-cards> `;
+  @query("#demos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  static get properties() {
+  protected firstUpdated(changedProperties: PropertyValues) {
-    return {
+    super.firstUpdated(changedProperties);
-      _configs: {
+    const hass = provideHass(this._demoRoot);
-        type: Object,
-        value: CONFIGS,
-      },
-    };
-  }
-
-  public ready() {
-    super.ready();
-    const hass = provideHass(this.$.demos);
     hass.updateTranslations(null, "en");
+    hass.updateTranslations("lovelace", "en");
 
     hass.mockAPI("shopping_list", () => [
       { name: "list", id: 1, complete: false },

gallery/src/demos/demo-hui-stack-card.ts

@@ -1,6 +1,11 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
+import {
-/* eslint-plugin-disable lit */
+  html,
-import { PolymerElement } from "@polymer/polymer/polymer-element";
+  LitElement,
+  customElement,
+  PropertyValues,
+  query,
+  TemplateResult,
+} from "lit-element";
 import { mockHistory } from "../../../demo/src/stubs/history";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
@@ -132,24 +137,19 @@ const CONFIGS = [
   },
 ];
 
-class DemoStack extends PolymerElement {
+@customElement("demo-hui-stack-card")
-  static get template() {
+class DemoStack extends LitElement {
-    return html` <demo-cards id="demos" configs="[[_configs]]"></demo-cards> `;
+  @query("#demos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  static get properties() {
+  protected firstUpdated(changedProperties: PropertyValues) {
-    return {
+    super.firstUpdated(changedProperties);
-      _configs: {
+    const hass = provideHass(this._demoRoot);
-        type: Object,
-        value: CONFIGS,
-      },
-    };
-  }
-
-  public ready() {
-    super.ready();
-    const hass = provideHass(this.$.demos);
     hass.updateTranslations(null, "en");
+    hass.updateTranslations("lovelace", "en");
     hass.addEntities(ENTITIES);
     mockHistory(hass);
   }

gallery/src/demos/demo-hui-thermostat-card.ts

@@ -1,6 +1,11 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
+import {
-/* eslint-plugin-disable lit */
+  html,
-import { PolymerElement } from "@polymer/polymer/polymer-element";
+  LitElement,
+  customElement,
+  PropertyValues,
+  query,
+  TemplateResult,
+} from "lit-element";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -74,24 +79,19 @@ const CONFIGS = [
   },
 ];
 
-class DemoThermostatEntity extends PolymerElement {
+@customElement("demo-hui-thermostat-card")
-  static get template() {
+class DemoThermostatEntity extends LitElement {
-    return html` <demo-cards id="demos" configs="[[_configs]]"></demo-cards> `;
+  @query("#demos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
   }
 
-  static get properties() {
+  protected firstUpdated(changedProperties: PropertyValues) {
-    return {
+    super.firstUpdated(changedProperties);
-      _configs: {
+    const hass = provideHass(this._demoRoot);
-        type: Object,
-        value: CONFIGS,
-      },
-    };
-  }
-
-  public ready() {
-    super.ready();
-    const hass = provideHass(this.$.demos);
     hass.updateTranslations(null, "en");
+    hass.updateTranslations("lovelace", "en");
     hass.addEntities(ENTITIES);
   }
 }

gallery/src/demos/demo-more-info-light.ts

@@ -1,6 +1,12 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
+import {
-/* eslint-plugin-disable lit */
+  html,
-import { PolymerElement } from "@polymer/polymer/polymer-element";
+  LitElement,
+  customElement,
+  property,
+  PropertyValues,
+  query,
+  TemplateResult,
+} from "lit-element";
 import "../../../src/components/ha-card";
 import {
   SUPPORT_BRIGHTNESS,
@@ -12,7 +18,10 @@ import {
   SUPPORT_WHITE_VALUE,
 } from "../../../src/data/light";
 import { getEntity } from "../../../src/fake_data/entity";
-import { provideHass } from "../../../src/fake_data/provide_hass";
+import {
+  provideHass,
+  MockHomeAssistant,
+} from "../../../src/fake_data/provide_hass";
 import "../components/demo-more-infos";
 import "../../../src/dialogs/more-info/more-info-content";
 
@@ -49,33 +58,25 @@ const ENTITIES = [
   }),
 ];
 
-class DemoMoreInfoLight extends PolymerElement {
+@customElement("demo-more-info-light")
-  static get template() {
+class DemoMoreInfoLight extends LitElement {
+  @property() public hass!: MockHomeAssistant;
+
+  @query("demo-more-infos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
     return html`
       <demo-more-infos
-        hass="[[hass]]"
+        .hass=${this.hass}
-        entities="[[_entities]]"
+        .entities=${ENTITIES.map((ent) => ent.entityId)}
       ></demo-more-infos>
     `;
   }
 
-  static get properties() {
+  protected firstUpdated(changedProperties: PropertyValues) {
-    return {
+    super.firstUpdated(changedProperties);
-      _entities: {
+    const hass = provideHass(this._demoRoot);
-        type: Array,
+    hass.updateTranslations(null, "en");
-        value: ENTITIES.map((ent) => ent.entityId),
-      },
-    };
-  }
-
-  public ready() {
-    super.ready();
-    this._setupDemo();
-  }
-
-  private async _setupDemo() {
-    const hass = provideHass(this);
-    await hass.updateTranslations(null, "en");
     hass.addEntities(ENTITIES);
   }
 }

gallery/src/demos/demo-util-long-press.ts

@@ -1,9 +1,10 @@
 import "@material/mwc-button";
-import { html, LitElement, TemplateResult } from "lit-element";
+import { customElement, html, LitElement, TemplateResult } from "lit-element";
 import "../../../src/components/ha-card";
 import { ActionHandlerEvent } from "../../../src/data/lovelace";
 import { actionHandler } from "../../../src/panels/lovelace/common/directives/action-handler-directive";
 
+@customElement("demo-util-long-press")
 export class DemoUtilLongPress extends LitElement {
   protected render(): TemplateResult {
     return html`
@@ -20,7 +21,7 @@ export class DemoUtilLongPress extends LitElement {
 
             <textarea></textarea>
 
-            <div>(try pressing and scrolling too!)</div>
+            <div>Try pressing and scrolling too!</div>
           </ha-card>
         `
       )}
@@ -62,5 +63,3 @@ export class DemoUtilLongPress extends LitElement {
     `;
   }
 }
-
-customElements.define("demo-util-long-press", DemoUtilLongPress);

gallery/src/ha-gallery.js

@@ -14,8 +14,6 @@ import "../../src/styles/polymer-ha-style";
 // eslint-disable-next-line import/extensions
 import { DEMOS } from "../build/import-demos";
 
-const fixPath = (path) => path.substr(2, path.length - 5);
-
 class HaGallery extends PolymerElement {
   static get template() {
     return html`