diff --git a/gallery/src/demos/demo-hui-alarm-panel-card.ts b/gallery/src/demos/demo-hui-alarm-panel-card.ts index efeacf5f191b..839533f6bcdf 100644 --- a/gallery/src/demos/demo-hui-alarm-panel-card.ts +++ b/gallery/src/demos/demo-hui-alarm-panel-card.ts @@ -1,6 +1,11 @@ -import { html } from "@polymer/polymer/lib/utils/html-tag"; -/* eslint-plugin-disable lit */ -import { PolymerElement } from "@polymer/polymer/polymer-element"; +import { + html, + 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 { - static get template() { - return html` `; - } - - static get properties() { - return { - _configs: { - type: Object, - value: CONFIGS, - }, - }; - } +@customElement("demo-hui-alarm-panel-card") +class DemoAlarmPanelEntity extends LitElement { + @query("#demos") private _demoRoot!: HTMLElement; - public ready() { - super.ready(); - this._setupDemo(); + protected render(): TemplateResult { + return html``; } - private async _setupDemo() { - const hass = provideHass(this.$.demos); - await hass.updateTranslations(null, "en"); + protected firstUpdated(changedProperties: PropertyValues) { + super.firstUpdated(changedProperties); + const hass = provideHass(this._demoRoot); + hass.updateTranslations(null, "en"); + hass.updateTranslations("lovelace", "en"); hass.addEntities(ENTITIES); } } diff --git a/gallery/src/demos/demo-hui-conditional-card.ts b/gallery/src/demos/demo-hui-conditional-card.ts index 561ad45376f1..c0c7dce2c64e 100644 --- a/gallery/src/demos/demo-hui-conditional-card.ts +++ b/gallery/src/demos/demo-hui-conditional-card.ts @@ -1,6 +1,11 @@ -import { html } from "@polymer/polymer/lib/utils/html-tag"; -/* eslint-plugin-disable lit */ -import { PolymerElement } from "@polymer/polymer/polymer-element"; +import { + html, + 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 { - static get template() { - return html` `; - } +@customElement("demo-hui-conditional-card") +class DemoConditional extends LitElement { + @query("#demos") private _demoRoot!: HTMLElement; - static get properties() { - return { - _configs: { - type: Object, - value: CONFIGS, - }, - }; + protected render(): TemplateResult { + return html``; } - public ready() { - super.ready(); - const hass = provideHass(this.$.demos); + protected firstUpdated(changedProperties: PropertyValues) { + super.firstUpdated(changedProperties); + const hass = provideHass(this._demoRoot); hass.updateTranslations(null, "en"); + hass.updateTranslations("lovelace", "en"); hass.addEntities(ENTITIES); } } diff --git a/gallery/src/demos/demo-hui-entities-card.ts b/gallery/src/demos/demo-hui-entities-card.ts index bb0261e9d509..c43160610af7 100644 --- a/gallery/src/demos/demo-hui-entities-card.ts +++ b/gallery/src/demos/demo-hui-entities-card.ts @@ -1,6 +1,11 @@ -import { html } from "@polymer/polymer/lib/utils/html-tag"; -/* eslint-plugin-disable lit */ -import { PolymerElement } from "@polymer/polymer/polymer-element"; +import { + html, + 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 { - static get template() { - return html` `; - } +@customElement("demo-hui-entities-card") +class DemoEntities extends LitElement { + @query("#demos") private _demoRoot!: HTMLElement; - static get properties() { - return { - _configs: { - type: Object, - value: CONFIGS, - }, - }; + protected render(): TemplateResult { + return html``; } - public ready() { - super.ready(); - const hass = provideHass(this.$.demos); + protected firstUpdated(changedProperties: PropertyValues) { + super.firstUpdated(changedProperties); + const hass = provideHass(this._demoRoot); hass.updateTranslations(null, "en"); + hass.updateTranslations("lovelace", "en"); hass.addEntities(ENTITIES); } } diff --git a/gallery/src/demos/demo-hui-entity-button-card.ts b/gallery/src/demos/demo-hui-entity-button-card.ts index 5c9430bf6431..a3abad9af81d 100644 --- a/gallery/src/demos/demo-hui-entity-button-card.ts +++ b/gallery/src/demos/demo-hui-entity-button-card.ts @@ -1,6 +1,11 @@ -import { html } from "@polymer/polymer/lib/utils/html-tag"; -/* eslint-plugin-disable lit */ -import { PolymerElement } from "@polymer/polymer/polymer-element"; +import { + html, + 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 { - static get template() { - return html` `; - } +@customElement("demo-hui-entity-button-card") +class DemoButtonEntity extends LitElement { + @query("#demos") private _demoRoot!: HTMLElement; - static get properties() { - return { - _configs: { - type: Object, - value: CONFIGS, - }, - }; + protected render(): TemplateResult { + return html``; } - public ready() { - super.ready(); - const hass = provideHass(this.$.demos); + protected firstUpdated(changedProperties: PropertyValues) { + super.firstUpdated(changedProperties); + const hass = provideHass(this._demoRoot); hass.updateTranslations(null, "en"); + hass.updateTranslations("lovelace", "en"); hass.addEntities(ENTITIES); } } diff --git a/gallery/src/demos/demo-hui-entity-filter-card.ts b/gallery/src/demos/demo-hui-entity-filter-card.ts index 66a0c08b706f..d23482127fbb 100644 --- a/gallery/src/demos/demo-hui-entity-filter-card.ts +++ b/gallery/src/demos/demo-hui-entity-filter-card.ts @@ -1,6 +1,11 @@ -import { html } from "@polymer/polymer/lib/utils/html-tag"; -/* eslint-plugin-disable lit */ -import { PolymerElement } from "@polymer/polymer/polymer-element"; +import { + html, + 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 { - static get template() { - return html` `; - } +@customElement("demo-hui-entity-filter-card") +class DemoEntityFilter extends LitElement { + @query("#demos") private _demoRoot!: HTMLElement; - static get properties() { - return { - _configs: { - type: Object, - value: CONFIGS, - }, - }; + protected render(): TemplateResult { + return html``; } - public ready() { - super.ready(); - const hass = provideHass(this.$.demos); + protected firstUpdated(changedProperties: PropertyValues) { + super.firstUpdated(changedProperties); + const hass = provideHass(this._demoRoot); 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); diff --git a/gallery/src/demos/demo-hui-gauge-card.ts b/gallery/src/demos/demo-hui-gauge-card.ts index 1704d31f6ed1..863341f08e86 100644 --- a/gallery/src/demos/demo-hui-gauge-card.ts +++ b/gallery/src/demos/demo-hui-gauge-card.ts @@ -1,6 +1,11 @@ -import { html } from "@polymer/polymer/lib/utils/html-tag"; -/* eslint-plugin-disable lit */ -import { PolymerElement } from "@polymer/polymer/polymer-element"; +import { + html, + 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 { - static get template() { - return html` `; - } +@customElement("demo-hui-gauge-card") +class DemoGaugeEntity extends LitElement { + @query("#demos") private _demoRoot!: HTMLElement; - static get properties() { - return { - _configs: { - type: Object, - value: CONFIGS, - }, - }; + protected render(): TemplateResult { + return html``; } - public ready() { - super.ready(); - const hass = provideHass(this.$.demos); + protected firstUpdated(changedProperties: PropertyValues) { + super.firstUpdated(changedProperties); + const hass = provideHass(this._demoRoot); hass.updateTranslations(null, "en"); + hass.updateTranslations("lovelace", "en"); hass.addEntities(ENTITIES); } } diff --git a/gallery/src/demos/demo-hui-glance-card.ts b/gallery/src/demos/demo-hui-glance-card.ts index f28c4ef7b4c6..8da21ddbf59e 100644 --- a/gallery/src/demos/demo-hui-glance-card.ts +++ b/gallery/src/demos/demo-hui-glance-card.ts @@ -1,6 +1,11 @@ -import { html } from "@polymer/polymer/lib/utils/html-tag"; -/* eslint-plugin-disable lit */ -import { PolymerElement } from "@polymer/polymer/polymer-element"; +import { + html, + 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 { - static get template() { - return html` `; - } +@customElement("demo-hui-glance-card") +class DemoGlanceEntity extends LitElement { + @query("#demos") private _demoRoot!: HTMLElement; - static get properties() { - return { - _configs: { - type: Object, - value: CONFIGS, - }, - }; + protected render(): TemplateResult { + return html``; } - public ready() { - super.ready(); - const hass = provideHass(this.$.demos); + protected firstUpdated(changedProperties: PropertyValues) { + super.firstUpdated(changedProperties); + const hass = provideHass(this._demoRoot); hass.updateTranslations(null, "en"); + hass.updateTranslations("lovelace", "en"); hass.addEntities(ENTITIES); } } diff --git a/gallery/src/demos/demo-hui-iframe-card.ts b/gallery/src/demos/demo-hui-iframe-card.ts index 596f6d302f11..b99e2fee8155 100644 --- a/gallery/src/demos/demo-hui-iframe-card.ts +++ b/gallery/src/demos/demo-hui-iframe-card.ts @@ -1,6 +1,4 @@ -import { html } from "@polymer/polymer/lib/utils/html-tag"; -/* eslint-plugin-disable lit */ -import { PolymerElement } from "@polymer/polymer/polymer-element"; +import { html, LitElement, customElement, TemplateResult } from "lit-element"; import "../components/demo-cards"; const CONFIGS = [ @@ -37,18 +35,10 @@ const CONFIGS = [ }, ]; -class DemoIframe extends PolymerElement { - static get template() { - return html` `; - } - - static get properties() { - return { - _configs: { - type: Object, - value: CONFIGS, - }, - }; +@customElement("demo-hui-iframe-card") +class DemoIframe extends LitElement { + protected render(): TemplateResult { + return html``; } } diff --git a/gallery/src/demos/demo-hui-light-card.ts b/gallery/src/demos/demo-hui-light-card.ts index 97808f930a1e..9847cb8ea399 100644 --- a/gallery/src/demos/demo-hui-light-card.ts +++ b/gallery/src/demos/demo-hui-light-card.ts @@ -1,6 +1,11 @@ -import { html } from "@polymer/polymer/lib/utils/html-tag"; -/* eslint-plugin-disable lit */ -import { PolymerElement } from "@polymer/polymer/polymer-element"; +import { + html, + 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 { - static get template() { - return html` `; - } +@customElement("demo-hui-light-card") +class DemoLightEntity extends LitElement { + @query("#demos") private _demoRoot!: HTMLElement; - static get properties() { - return { - _configs: { - type: Object, - value: CONFIGS, - }, - }; + protected render(): TemplateResult { + return html``; } - public ready() { - super.ready(); - const hass = provideHass(this.$.demos); + protected firstUpdated(changedProperties: PropertyValues) { + super.firstUpdated(changedProperties); + const hass = provideHass(this._demoRoot); hass.updateTranslations(null, "en"); + hass.updateTranslations("lovelace", "en"); hass.addEntities(ENTITIES); } } diff --git a/gallery/src/demos/demo-hui-map-card.ts b/gallery/src/demos/demo-hui-map-card.ts index 392826fb9356..fc2afef75284 100644 --- a/gallery/src/demos/demo-hui-map-card.ts +++ b/gallery/src/demos/demo-hui-map-card.ts @@ -1,6 +1,11 @@ -import { html } from "@polymer/polymer/lib/utils/html-tag"; -/* eslint-plugin-disable lit */ -import { PolymerElement } from "@polymer/polymer/polymer-element"; +import { + html, + 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 { - static get template() { - return html` `; - } +@customElement("demo-hui-map-card") +class DemoMap extends LitElement { + @query("#demos") private _demoRoot!: HTMLElement; - static get properties() { - return { - _configs: { - type: Object, - value: CONFIGS, - }, - }; + protected render(): TemplateResult { + return html``; } - public ready() { - super.ready(); - const hass = provideHass(this.$.demos); + protected firstUpdated(changedProperties: PropertyValues) { + super.firstUpdated(changedProperties); + const hass = provideHass(this._demoRoot); hass.updateTranslations(null, "en"); + hass.updateTranslations("lovelace", "en"); hass.addEntities(ENTITIES); } } diff --git a/gallery/src/demos/demo-hui-markdown-card.ts b/gallery/src/demos/demo-hui-markdown-card.ts index 1ae6b5f0f7f1..8a26cb566b84 100644 --- a/gallery/src/demos/demo-hui-markdown-card.ts +++ b/gallery/src/demos/demo-hui-markdown-card.ts @@ -1,6 +1,11 @@ -import { html } from "@polymer/polymer/lib/utils/html-tag"; -/* eslint-plugin-disable lit */ -import { PolymerElement } from "@polymer/polymer/polymer-element"; +import { + html, + 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 { - static get template() { - return html` `; - } +@customElement("demo-hui-markdown-card") +class DemoMarkdown extends LitElement { + @query("#demos") private _demoRoot!: HTMLElement; - static get properties() { - return { - _configs: { - type: Object, - value: CONFIGS, - }, - }; + protected render(): TemplateResult { + return html``; } - public ready() { - super.ready(); - const hass = provideHass(this.$.demos); + protected firstUpdated(changedProperties: PropertyValues) { + super.firstUpdated(changedProperties); + const hass = provideHass(this._demoRoot); + hass.updateTranslations(null, "en"); + hass.updateTranslations("lovelace", "en"); mockTemplate(hass); } } diff --git a/gallery/src/demos/demo-hui-media-control-card.ts b/gallery/src/demos/demo-hui-media-control-card.ts index 1f12c851bc3d..c43388b3ddea 100644 --- a/gallery/src/demos/demo-hui-media-control-card.ts +++ b/gallery/src/demos/demo-hui-media-control-card.ts @@ -1,6 +1,11 @@ -import { html } from "@polymer/polymer/lib/utils/html-tag"; -/* eslint-plugin-disable lit */ -import { PolymerElement } from "@polymer/polymer/polymer-element"; +import { + html, + 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 { - static get template() { - return html` `; - } +@customElement("demo-hui-media-control-card") +class DemoHuiMediaControlCard extends LitElement { + @query("#demos") private _demoRoot!: HTMLElement; - static get properties() { - return { - _configs: { - type: Object, - value: CONFIGS, - }, - }; + protected render(): TemplateResult { + return html``; } - public ready() { - super.ready(); - const hass = provideHass(this.$.demos); + protected firstUpdated(changedProperties: PropertyValues) { + super.firstUpdated(changedProperties); + const hass = provideHass(this._demoRoot); 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); diff --git a/gallery/src/demos/demo-hui-media-player-rows.ts b/gallery/src/demos/demo-hui-media-player-rows.ts index 147f36985ed1..1cf419d91fb9 100644 --- a/gallery/src/demos/demo-hui-media-player-rows.ts +++ b/gallery/src/demos/demo-hui-media-player-rows.ts @@ -1,6 +1,11 @@ -import { html } from "@polymer/polymer/lib/utils/html-tag"; -/* eslint-plugin-disable lit */ -import { PolymerElement } from "@polymer/polymer/polymer-element"; +import { + html, + 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 { - static get template() { - return html` `; - } +@customElement("demo-hui-media-player-row") +class DemoHuiMediaPlayerRow extends LitElement { + @query("#demos") private _demoRoot!: HTMLElement; - static get properties() { - return { - _configs: { - type: Object, - value: CONFIGS, - }, - }; + protected render(): TemplateResult { + return html``; } - public ready() { - super.ready(); - const hass = provideHass(this.$.demos); + protected firstUpdated(changedProperties: PropertyValues) { + super.firstUpdated(changedProperties); + const hass = provideHass(this._demoRoot); 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); diff --git a/gallery/src/demos/demo-hui-picture-elements-card.ts b/gallery/src/demos/demo-hui-picture-elements-card.ts index 6e0ec3360a1c..ccd5aebcceee 100644 --- a/gallery/src/demos/demo-hui-picture-elements-card.ts +++ b/gallery/src/demos/demo-hui-picture-elements-card.ts @@ -1,6 +1,11 @@ -import { html } from "@polymer/polymer/lib/utils/html-tag"; -/* eslint-plugin-disable lit */ -import { PolymerElement } from "@polymer/polymer/polymer-element"; +import { + html, + 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 { - static get template() { - return html` `; - } +@customElement("demo-hui-picture-elements-card") +class DemoPictureElements extends LitElement { + @query("#demos") private _demoRoot!: HTMLElement; - static get properties() { - return { - _configs: { - type: Object, - value: CONFIGS, - }, - }; + protected render(): TemplateResult { + return html``; } - public ready() { - super.ready(); - const hass = provideHass(this.$.demos); + protected firstUpdated(changedProperties: PropertyValues) { + super.firstUpdated(changedProperties); + const hass = provideHass(this._demoRoot); 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); diff --git a/gallery/src/demos/demo-hui-picture-entity-card.ts b/gallery/src/demos/demo-hui-picture-entity-card.ts index d4df8f31f4cc..a277686e8a53 100644 --- a/gallery/src/demos/demo-hui-picture-entity-card.ts +++ b/gallery/src/demos/demo-hui-picture-entity-card.ts @@ -1,6 +1,11 @@ -import { html } from "@polymer/polymer/lib/utils/html-tag"; -/* eslint-plugin-disable lit */ -import { PolymerElement } from "@polymer/polymer/polymer-element"; +import { + html, + 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 { - static get template() { - return html` `; - } +@customElement("demo-hui-picture-entity-card") +class DemoPictureEntity extends LitElement { + @query("#demos") private _demoRoot!: HTMLElement; - static get properties() { - return { - _configs: { - type: Object, - value: CONFIGS, - }, - }; + protected render(): TemplateResult { + return html``; } - public ready() { - super.ready(); - const hass = provideHass(this.$.demos); + protected firstUpdated(changedProperties: PropertyValues) { + super.firstUpdated(changedProperties); + const hass = provideHass(this._demoRoot); 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); diff --git a/gallery/src/demos/demo-hui-picture-glance-card.ts b/gallery/src/demos/demo-hui-picture-glance-card.ts index 684aaa2071f6..f5d61326a47a 100644 --- a/gallery/src/demos/demo-hui-picture-glance-card.ts +++ b/gallery/src/demos/demo-hui-picture-glance-card.ts @@ -1,6 +1,11 @@ -import { html } from "@polymer/polymer/lib/utils/html-tag"; -/* eslint-plugin-disable lit */ -import { PolymerElement } from "@polymer/polymer/polymer-element"; +import { + html, + 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 { - static get template() { - return html` `; - } +@customElement("demo-hui-picture-glance-card") +class DemoPictureGlance extends LitElement { + @query("#demos") private _demoRoot!: HTMLElement; - static get properties() { - return { - _configs: { - type: Object, - value: CONFIGS, - }, - }; + protected render(): TemplateResult { + return html``; } - public ready() { - super.ready(); - const hass = provideHass(this.$.demos); + protected firstUpdated(changedProperties: PropertyValues) { + super.firstUpdated(changedProperties); + const hass = provideHass(this._demoRoot); 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); diff --git a/gallery/src/demos/demo-hui-plant-card.ts b/gallery/src/demos/demo-hui-plant-card.ts index 7df7f1c9f27b..88f8d3bfb16a 100644 --- a/gallery/src/demos/demo-hui-plant-card.ts +++ b/gallery/src/demos/demo-hui-plant-card.ts @@ -1,6 +1,11 @@ -import { html } from "@polymer/polymer/lib/utils/html-tag"; -/* eslint-plugin-disable lit */ -import { PolymerElement } from "@polymer/polymer/polymer-element"; +import { + html, + 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 { - static get template() { - return html``; - } +@customElement("demo-hui-plant-card") +export class DemoPlantEntity extends LitElement { + @query("#demos") private _demoRoot!: HTMLElement; - static get properties() { - return { - _configs: { - type: Object, - value: CONFIGS, - }, - }; + protected render(): TemplateResult { + return html``; } - public ready() { - super.ready(); - const hass = provideHass(this.$.demos); + protected firstUpdated(changedProperties: PropertyValues) { + super.firstUpdated(changedProperties); + const hass = provideHass(this._demoRoot); hass.updateTranslations(null, "en"); + hass.updateTranslations("lovelace", "en"); hass.addEntities(createPlantEntities()); } } diff --git a/gallery/src/demos/demo-hui-shopping-list-card.ts b/gallery/src/demos/demo-hui-shopping-list-card.ts index 9abb1afc1e93..fa16c165391e 100644 --- a/gallery/src/demos/demo-hui-shopping-list-card.ts +++ b/gallery/src/demos/demo-hui-shopping-list-card.ts @@ -1,6 +1,11 @@ -import { html } from "@polymer/polymer/lib/utils/html-tag"; -/* eslint-plugin-disable lit */ -import { PolymerElement } from "@polymer/polymer/polymer-element"; +import { + html, + 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 { - static get template() { - return html` `; - } +@customElement("demo-hui-shopping-list-card") +class DemoShoppingListEntity extends LitElement { + @query("#demos") private _demoRoot!: HTMLElement; - static get properties() { - return { - _configs: { - type: Object, - value: CONFIGS, - }, - }; + protected render(): TemplateResult { + return html``; } - public ready() { - super.ready(); - const hass = provideHass(this.$.demos); + protected firstUpdated(changedProperties: PropertyValues) { + super.firstUpdated(changedProperties); + const hass = provideHass(this._demoRoot); hass.updateTranslations(null, "en"); + hass.updateTranslations("lovelace", "en"); hass.mockAPI("shopping_list", () => [ { name: "list", id: 1, complete: false }, diff --git a/gallery/src/demos/demo-hui-stack-card.ts b/gallery/src/demos/demo-hui-stack-card.ts index 982eab4f2564..b0c2d10a4c78 100644 --- a/gallery/src/demos/demo-hui-stack-card.ts +++ b/gallery/src/demos/demo-hui-stack-card.ts @@ -1,6 +1,11 @@ -import { html } from "@polymer/polymer/lib/utils/html-tag"; -/* eslint-plugin-disable lit */ -import { PolymerElement } from "@polymer/polymer/polymer-element"; +import { + html, + 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 { - static get template() { - return html` `; - } +@customElement("demo-hui-stack-card") +class DemoStack extends LitElement { + @query("#demos") private _demoRoot!: HTMLElement; - static get properties() { - return { - _configs: { - type: Object, - value: CONFIGS, - }, - }; + protected render(): TemplateResult { + return html``; } - public ready() { - super.ready(); - const hass = provideHass(this.$.demos); + protected firstUpdated(changedProperties: PropertyValues) { + super.firstUpdated(changedProperties); + const hass = provideHass(this._demoRoot); hass.updateTranslations(null, "en"); + hass.updateTranslations("lovelace", "en"); hass.addEntities(ENTITIES); mockHistory(hass); } diff --git a/gallery/src/demos/demo-hui-thermostat-card.ts b/gallery/src/demos/demo-hui-thermostat-card.ts index 81b344e6895e..1fc117dc00d6 100644 --- a/gallery/src/demos/demo-hui-thermostat-card.ts +++ b/gallery/src/demos/demo-hui-thermostat-card.ts @@ -1,6 +1,11 @@ -import { html } from "@polymer/polymer/lib/utils/html-tag"; -/* eslint-plugin-disable lit */ -import { PolymerElement } from "@polymer/polymer/polymer-element"; +import { + html, + 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 { - static get template() { - return html` `; - } +@customElement("demo-hui-thermostat-card") +class DemoThermostatEntity extends LitElement { + @query("#demos") private _demoRoot!: HTMLElement; - static get properties() { - return { - _configs: { - type: Object, - value: CONFIGS, - }, - }; + protected render(): TemplateResult { + return html``; } - public ready() { - super.ready(); - const hass = provideHass(this.$.demos); + protected firstUpdated(changedProperties: PropertyValues) { + super.firstUpdated(changedProperties); + const hass = provideHass(this._demoRoot); hass.updateTranslations(null, "en"); + hass.updateTranslations("lovelace", "en"); hass.addEntities(ENTITIES); } } diff --git a/gallery/src/demos/demo-more-info-light.ts b/gallery/src/demos/demo-more-info-light.ts index 6cad59bfc52c..46fe969412ec 100644 --- a/gallery/src/demos/demo-more-info-light.ts +++ b/gallery/src/demos/demo-more-info-light.ts @@ -1,6 +1,12 @@ -import { html } from "@polymer/polymer/lib/utils/html-tag"; -/* eslint-plugin-disable lit */ -import { PolymerElement } from "@polymer/polymer/polymer-element"; +import { + html, + 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 { - static get template() { +@customElement("demo-more-info-light") +class DemoMoreInfoLight extends LitElement { + @property() public hass!: MockHomeAssistant; + + @query("demo-more-infos") private _demoRoot!: HTMLElement; + + protected render(): TemplateResult { return html` ent.entityId)} > `; } - static get properties() { - return { - _entities: { - type: Array, - value: ENTITIES.map((ent) => ent.entityId), - }, - }; - } - - public ready() { - super.ready(); - this._setupDemo(); - } - - private async _setupDemo() { - const hass = provideHass(this); - await hass.updateTranslations(null, "en"); + protected firstUpdated(changedProperties: PropertyValues) { + super.firstUpdated(changedProperties); + const hass = provideHass(this._demoRoot); + hass.updateTranslations(null, "en"); hass.addEntities(ENTITIES); } } diff --git a/gallery/src/demos/demo-util-long-press.ts b/gallery/src/demos/demo-util-long-press.ts index 518af1df39c2..9fa774918f99 100644 --- a/gallery/src/demos/demo-util-long-press.ts +++ b/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 { -
(try pressing and scrolling too!)
+
Try pressing and scrolling too!
` )} @@ -62,5 +63,3 @@ export class DemoUtilLongPress extends LitElement { `; } } - -customElements.define("demo-util-long-press", DemoUtilLongPress); diff --git a/gallery/src/ha-gallery.js b/gallery/src/ha-gallery.js index 779790b632de..c1de40203da8 100644 --- a/gallery/src/ha-gallery.js +++ b/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`