From ba49d47938d884844061d9ca99d9ab063a61ce1e Mon Sep 17 00:00:00 2001 From: Philip Allgaier Date: Mon, 4 Jan 2021 22:58:20 +0100 Subject: [PATCH 1/4] Convert gallery elements to Lit --- .../src/demos/demo-hui-alarm-panel-card.ts | 43 +++++++------- .../src/demos/demo-hui-conditional-card.ts | 39 ++++++------- gallery/src/demos/demo-hui-entities-card.ts | 39 ++++++------- .../src/demos/demo-hui-entity-button-card.ts | 39 ++++++------- .../src/demos/demo-hui-entity-filter-card.ts | 39 ++++++------- gallery/src/demos/demo-hui-gauge-card.ts | 39 ++++++------- gallery/src/demos/demo-hui-glance-card.ts | 39 ++++++------- gallery/src/demos/demo-hui-iframe-card.ts | 28 ++++----- gallery/src/demos/demo-hui-light-card.ts | 39 ++++++------- gallery/src/demos/demo-hui-map-card.ts | 39 ++++++------- gallery/src/demos/demo-hui-markdown-card.ts | 40 ++++++------- .../src/demos/demo-hui-media-control-card.ts | 39 ++++++------- .../src/demos/demo-hui-media-player-rows.ts | 39 ++++++------- .../demos/demo-hui-picture-elements-card.ts | 39 ++++++------- .../src/demos/demo-hui-picture-entity-card.ts | 39 ++++++------- .../src/demos/demo-hui-picture-glance-card.ts | 39 ++++++------- gallery/src/demos/demo-hui-plant-card.ts | 39 ++++++------- .../src/demos/demo-hui-shopping-list-card.ts | 39 ++++++------- gallery/src/demos/demo-hui-stack-card.ts | 39 ++++++------- gallery/src/demos/demo-hui-thermostat-card.ts | 39 ++++++------- gallery/src/demos/demo-more-info-light.ts | 57 ++++++++++--------- gallery/src/demos/demo-util-long-press.ts | 7 +-- gallery/src/ha-gallery.js | 2 - 23 files changed, 426 insertions(+), 414 deletions(-) diff --git a/gallery/src/demos/demo-hui-alarm-panel-card.ts b/gallery/src/demos/demo-hui-alarm-panel-card.ts index efeacf5f191b..34d343483df2 100644 --- a/gallery/src/demos/demo-hui-alarm-panel-card.ts +++ b/gallery/src/demos/demo-hui-alarm-panel-card.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, + internalProperty, + 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,30 +77,21 @@ const CONFIGS = [ }, ]; -class DemoAlarmPanelEntity extends PolymerElement { - static get template() { - return html` `; - } +@customElement("demo-hui-alarm-panel-card") +class DemoAlarmPanelEntity extends LitElement { + @internalProperty() private _configs = CONFIGS; - static get properties() { - return { - _configs: { - type: Object, - value: CONFIGS, - }, - }; - } + @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); } } - -customElements.define("demo-hui-alarm-panel-card", DemoAlarmPanelEntity); diff --git a/gallery/src/demos/demo-hui-conditional-card.ts b/gallery/src/demos/demo-hui-conditional-card.ts index 561ad45376f1..d27f3c4c9f28 100644 --- a/gallery/src/demos/demo-hui-conditional-card.ts +++ b/gallery/src/demos/demo-hui-conditional-card.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, + internalProperty, + 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,26 +59,21 @@ const CONFIGS = [ }, ]; -class DemoConditional extends PolymerElement { - static get template() { - return html` `; - } +@customElement("demo-hui-conditional-card") +class DemoConditional extends LitElement { + @internalProperty() private _configs = CONFIGS; + + @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-conditional-card", DemoConditional); diff --git a/gallery/src/demos/demo-hui-entities-card.ts b/gallery/src/demos/demo-hui-entities-card.ts index bb0261e9d509..bbdf56e51b7f 100644 --- a/gallery/src/demos/demo-hui-entities-card.ts +++ b/gallery/src/demos/demo-hui-entities-card.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, + internalProperty, + 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,26 +223,21 @@ const CONFIGS = [ }, ]; -class DemoEntities extends PolymerElement { - static get template() { - return html` `; - } +@customElement("demo-hui-entities-card") +class DemoEntities extends LitElement { + @internalProperty() private _configs = CONFIGS; + + @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-entities-card", DemoEntities); diff --git a/gallery/src/demos/demo-hui-entity-button-card.ts b/gallery/src/demos/demo-hui-entity-button-card.ts index 5c9430bf6431..84119370d9a1 100644 --- a/gallery/src/demos/demo-hui-entity-button-card.ts +++ b/gallery/src/demos/demo-hui-entity-button-card.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, + internalProperty, + 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,26 +75,21 @@ const CONFIGS = [ }, ]; -class DemoButtonEntity extends PolymerElement { - static get template() { - return html` `; - } +@customElement("demo-hui-entity-button-card") +class DemoButtonEntity extends LitElement { + @internalProperty() private _configs = CONFIGS; + + @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-button-card", DemoButtonEntity); diff --git a/gallery/src/demos/demo-hui-entity-filter-card.ts b/gallery/src/demos/demo-hui-entity-filter-card.ts index 66a0c08b706f..194bd28a7a77 100644 --- a/gallery/src/demos/demo-hui-entity-filter-card.ts +++ b/gallery/src/demos/demo-hui-entity-filter-card.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, + internalProperty, + 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 +95,21 @@ const CONFIGS = [ }, ]; -class DemoFilter extends PolymerElement { - static get template() { - return html` `; - } +@customElement("demo-hui-entity-filter-card") +class DemoEntityFilter extends LitElement { + @internalProperty() private _configs = CONFIGS; + + @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); diff --git a/gallery/src/demos/demo-hui-gauge-card.ts b/gallery/src/demos/demo-hui-gauge-card.ts index 1704d31f6ed1..6d644cb31bf3 100644 --- a/gallery/src/demos/demo-hui-gauge-card.ts +++ b/gallery/src/demos/demo-hui-gauge-card.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, + internalProperty, + 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,26 +113,21 @@ const CONFIGS = [ }, ]; -class DemoGaugeEntity extends PolymerElement { - static get template() { - return html` `; - } +@customElement("demo-hui-gauge-card") +class DemoGaugeEntity extends LitElement { + @internalProperty() private _configs = CONFIGS; + + @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-gauge-card", DemoGaugeEntity); diff --git a/gallery/src/demos/demo-hui-glance-card.ts b/gallery/src/demos/demo-hui-glance-card.ts index f28c4ef7b4c6..211b0e4f9b97 100644 --- a/gallery/src/demos/demo-hui-glance-card.ts +++ b/gallery/src/demos/demo-hui-glance-card.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, + internalProperty, + 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,26 +224,21 @@ const CONFIGS = [ }, ]; -class DemoGlanceEntity extends PolymerElement { - static get template() { - return html` `; - } +@customElement("demo-hui-glance-card") +class DemoGlanceEntity extends LitElement { + @internalProperty() private _configs = CONFIGS; + + @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-glance-card", DemoGlanceEntity); diff --git a/gallery/src/demos/demo-hui-iframe-card.ts b/gallery/src/demos/demo-hui-iframe-card.ts index 596f6d302f11..99756b985ffe 100644 --- a/gallery/src/demos/demo-hui-iframe-card.ts +++ b/gallery/src/demos/demo-hui-iframe-card.ts @@ -1,6 +1,10 @@ -import { html } from "@polymer/polymer/lib/utils/html-tag"; -/* eslint-plugin-disable lit */ -import { PolymerElement } from "@polymer/polymer/polymer-element"; +import { + html, + LitElement, + customElement, + internalProperty, + TemplateResult, +} from "lit-element"; import "../components/demo-cards"; const CONFIGS = [ @@ -37,19 +41,11 @@ const CONFIGS = [ }, ]; -class DemoIframe extends PolymerElement { - static get template() { - return html` `; - } +@customElement("demo-hui-iframe-card") +class DemoIframe extends LitElement { + @internalProperty() private _configs = CONFIGS; - static get properties() { - return { - _configs: { - type: Object, - value: CONFIGS, - }, - }; + protected render(): TemplateResult { + return html``; } } - -customElements.define("demo-hui-iframe-card", DemoIframe); diff --git a/gallery/src/demos/demo-hui-light-card.ts b/gallery/src/demos/demo-hui-light-card.ts index 97808f930a1e..2309272b793a 100644 --- a/gallery/src/demos/demo-hui-light-card.ts +++ b/gallery/src/demos/demo-hui-light-card.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, + internalProperty, + 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,26 +69,21 @@ const CONFIGS = [ }, ]; -class DemoLightEntity extends PolymerElement { - static get template() { - return html` `; - } +@customElement("demo-hui-light-card") +class DemoLightEntity extends LitElement { + @internalProperty() private _configs = CONFIGS; + + @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-light-card", DemoLightEntity); diff --git a/gallery/src/demos/demo-hui-map-card.ts b/gallery/src/demos/demo-hui-map-card.ts index 392826fb9356..1625e0c3f950 100644 --- a/gallery/src/demos/demo-hui-map-card.ts +++ b/gallery/src/demos/demo-hui-map-card.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, + internalProperty, + 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,26 +167,21 @@ const CONFIGS = [ }, ]; -class DemoMap extends PolymerElement { - static get template() { - return html` `; - } +@customElement("demo-hui-map-card") +class DemoMap extends LitElement { + @internalProperty() private _configs = CONFIGS; + + @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-map-card", DemoMap); diff --git a/gallery/src/demos/demo-hui-markdown-card.ts b/gallery/src/demos/demo-hui-markdown-card.ts index 1ae6b5f0f7f1..c010168a6062 100644 --- a/gallery/src/demos/demo-hui-markdown-card.ts +++ b/gallery/src/demos/demo-hui-markdown-card.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, + internalProperty, + 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,25 +260,21 @@ const CONFIGS = [ }, ]; -class DemoMarkdown extends PolymerElement { - static get template() { - return html` `; - } +@customElement("demo-hui-markdown-card") +class DemoMarkdown extends LitElement { + @internalProperty() private _configs = CONFIGS; - static get properties() { - return { - _configs: { - type: Object, - value: CONFIGS, - }, - }; + @query("#demos") private _demoRoot!: HTMLElement; + + 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); } } - -customElements.define("demo-hui-markdown-card", DemoMarkdown); diff --git a/gallery/src/demos/demo-hui-media-control-card.ts b/gallery/src/demos/demo-hui-media-control-card.ts index 1f12c851bc3d..2049d31381ff 100644 --- a/gallery/src/demos/demo-hui-media-control-card.ts +++ b/gallery/src/demos/demo-hui-media-control-card.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, + internalProperty, + 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 +164,21 @@ const CONFIGS = [ }, ]; -class DemoHuiMediControlCard extends PolymerElement { - static get template() { - return html` `; - } +@customElement("demo-hui-media-control-card") +class DemoHuiMediControlCard extends LitElement { + @internalProperty() private _configs = CONFIGS; + + @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); diff --git a/gallery/src/demos/demo-hui-media-player-rows.ts b/gallery/src/demos/demo-hui-media-player-rows.ts index 147f36985ed1..f35545d9dddf 100644 --- a/gallery/src/demos/demo-hui-media-player-rows.ts +++ b/gallery/src/demos/demo-hui-media-player-rows.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, + internalProperty, + 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 +61,21 @@ const CONFIGS = [ }, ]; -class DemoHuiMediaPlayerRows extends PolymerElement { - static get template() { - return html` `; - } +@customElement("demo-hui-media-player-card") +class DemoHuiMediaPlayerRows extends LitElement { + @internalProperty() private _configs = CONFIGS; + + @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); diff --git a/gallery/src/demos/demo-hui-picture-elements-card.ts b/gallery/src/demos/demo-hui-picture-elements-card.ts index 6e0ec3360a1c..b525eed73297 100644 --- a/gallery/src/demos/demo-hui-picture-elements-card.ts +++ b/gallery/src/demos/demo-hui-picture-elements-card.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, + internalProperty, + 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 +131,21 @@ const CONFIGS = [ }, ]; -class DemoPicElements extends PolymerElement { - static get template() { - return html` `; - } +@customElement("demo-hui-picture-elements-card") +class DemoPicElements extends LitElement { + @internalProperty() private _configs = CONFIGS; + + @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); diff --git a/gallery/src/demos/demo-hui-picture-entity-card.ts b/gallery/src/demos/demo-hui-picture-entity-card.ts index d4df8f31f4cc..45aba95beefe 100644 --- a/gallery/src/demos/demo-hui-picture-entity-card.ts +++ b/gallery/src/demos/demo-hui-picture-entity-card.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, + internalProperty, + 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 +86,21 @@ const CONFIGS = [ }, ]; -class DemoPicEntity extends PolymerElement { - static get template() { - return html` `; - } +@customElement("demo-hui-picture-entity-card") +class DemoPicEntity extends LitElement { + @internalProperty() private _configs = CONFIGS; + + @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); diff --git a/gallery/src/demos/demo-hui-picture-glance-card.ts b/gallery/src/demos/demo-hui-picture-glance-card.ts index 684aaa2071f6..0ea1ea5c639e 100644 --- a/gallery/src/demos/demo-hui-picture-glance-card.ts +++ b/gallery/src/demos/demo-hui-picture-glance-card.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, + internalProperty, + 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 +127,21 @@ const CONFIGS = [ }, ]; -class DemoPicGlance extends PolymerElement { - static get template() { - return html` `; - } +@customElement("demo-hui-picture-glance-card") +class DemoPicGlance extends LitElement { + @internalProperty() private _configs = CONFIGS; + + @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); diff --git a/gallery/src/demos/demo-hui-plant-card.ts b/gallery/src/demos/demo-hui-plant-card.ts index 7df7f1c9f27b..3599473f829d 100644 --- a/gallery/src/demos/demo-hui-plant-card.ts +++ b/gallery/src/demos/demo-hui-plant-card.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, + internalProperty, + PropertyValues, + query, + TemplateResult, +} from "lit-element"; import { provideHass } from "../../../src/fake_data/provide_hass"; import "../components/demo-cards"; import { createPlantEntities } from "../data/plants"; @@ -30,26 +36,21 @@ const CONFIGS = [ }, ]; -class DemoPlantEntity extends PolymerElement { - static get template() { - return html``; - } +@customElement("demo-hui-plant-card") +export class DemoPlantEntity extends LitElement { + @internalProperty() private _configs = CONFIGS; + + @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()); } } - -customElements.define("demo-hui-plant-card", DemoPlantEntity); diff --git a/gallery/src/demos/demo-hui-shopping-list-card.ts b/gallery/src/demos/demo-hui-shopping-list-card.ts index 9abb1afc1e93..386eca75b6b5 100644 --- a/gallery/src/demos/demo-hui-shopping-list-card.ts +++ b/gallery/src/demos/demo-hui-shopping-list-card.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, + internalProperty, + PropertyValues, + query, + TemplateResult, +} from "lit-element"; import { provideHass } from "../../../src/fake_data/provide_hass"; import "../components/demo-cards"; @@ -20,24 +26,21 @@ const CONFIGS = [ }, ]; -class DemoShoppingListEntity extends PolymerElement { - static get template() { - return html` `; - } +@customElement("demo-hui-shopping-list-card") +class DemoShoppingListEntity extends LitElement { + @internalProperty() private _configs = CONFIGS; + + @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 }, @@ -47,5 +50,3 @@ class DemoShoppingListEntity extends PolymerElement { ]); } } - -customElements.define("demo-hui-shopping-list-card", DemoShoppingListEntity); diff --git a/gallery/src/demos/demo-hui-stack-card.ts b/gallery/src/demos/demo-hui-stack-card.ts index 982eab4f2564..8914e1a31eb4 100644 --- a/gallery/src/demos/demo-hui-stack-card.ts +++ b/gallery/src/demos/demo-hui-stack-card.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, + internalProperty, + 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,27 +138,22 @@ const CONFIGS = [ }, ]; -class DemoStack extends PolymerElement { - static get template() { - return html` `; - } +@customElement("demo-hui-stack-card") +class DemoStack extends LitElement { + @internalProperty() private _configs = CONFIGS; + + @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); } } - -customElements.define("demo-hui-stack-card", DemoStack); diff --git a/gallery/src/demos/demo-hui-thermostat-card.ts b/gallery/src/demos/demo-hui-thermostat-card.ts index 81b344e6895e..10aed4709423 100644 --- a/gallery/src/demos/demo-hui-thermostat-card.ts +++ b/gallery/src/demos/demo-hui-thermostat-card.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, + internalProperty, + 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,26 +80,21 @@ const CONFIGS = [ }, ]; -class DemoThermostatEntity extends PolymerElement { - static get template() { - return html` `; - } +@customElement("demo-hui-thermostat-card") +class DemoThermostatEntity extends LitElement { + @internalProperty() private _configs = CONFIGS; + + @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-thermostat-card", DemoThermostatEntity); diff --git a/gallery/src/demos/demo-more-info-light.ts b/gallery/src/demos/demo-more-info-light.ts index 6cad59bfc52c..3d0a26724ce3 100644 --- a/gallery/src/demos/demo-more-info-light.ts +++ b/gallery/src/demos/demo-more-info-light.ts @@ -1,6 +1,13 @@ -import { html } from "@polymer/polymer/lib/utils/html-tag"; -/* eslint-plugin-disable lit */ -import { PolymerElement } from "@polymer/polymer/polymer-element"; +import { + html, + LitElement, + customElement, + internalProperty, + property, + PropertyValues, + query, + TemplateResult, +} from "lit-element"; import "../../../src/components/ha-card"; import { SUPPORT_BRIGHTNESS, @@ -12,7 +19,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,35 +59,28 @@ const ENTITIES = [ }), ]; -class DemoMoreInfoLight extends PolymerElement { - static get template() { +@customElement("demo-more-info-light") +class DemoMoreInfoLight extends LitElement { + @property() public hass!: MockHomeAssistant; + + @internalProperty() private _entities = ENTITIES.map((ent) => ent.entityId); + + @query("demo-more-infos") private _demoRoot!: HTMLElement; + + protected render(): TemplateResult { return html` `; } - 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.updateTranslations("lovelace", "en"); hass.addEntities(ENTITIES); } } - -customElements.define("demo-more-info-light", DemoMoreInfoLight); 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` From 0a8c7b47a7d61a42684e969d356ff240243f51b1 Mon Sep 17 00:00:00 2001 From: Philip Allgaier Date: Tue, 5 Jan 2021 00:18:46 +0100 Subject: [PATCH 2/4] customElements definitions --- gallery/src/demos/demo-hui-alarm-panel-card.ts | 2 ++ gallery/src/demos/demo-hui-conditional-card.ts | 2 ++ gallery/src/demos/demo-hui-entities-card.ts | 2 ++ gallery/src/demos/demo-hui-entity-button-card.ts | 2 ++ gallery/src/demos/demo-hui-entity-filter-card.ts | 2 ++ gallery/src/demos/demo-hui-gauge-card.ts | 2 ++ gallery/src/demos/demo-hui-glance-card.ts | 2 ++ gallery/src/demos/demo-hui-iframe-card.ts | 2 ++ gallery/src/demos/demo-hui-light-card.ts | 2 ++ gallery/src/demos/demo-hui-map-card.ts | 2 ++ gallery/src/demos/demo-hui-markdown-card.ts | 2 ++ gallery/src/demos/demo-hui-media-control-card.ts | 4 +++- gallery/src/demos/demo-hui-media-player-rows.ts | 2 ++ gallery/src/demos/demo-hui-picture-elements-card.ts | 4 +++- gallery/src/demos/demo-hui-picture-entity-card.ts | 4 +++- gallery/src/demos/demo-hui-picture-glance-card.ts | 4 +++- gallery/src/demos/demo-hui-plant-card.ts | 2 ++ gallery/src/demos/demo-hui-shopping-list-card.ts | 2 ++ gallery/src/demos/demo-hui-stack-card.ts | 2 ++ gallery/src/demos/demo-hui-thermostat-card.ts | 2 ++ gallery/src/demos/demo-more-info-light.ts | 2 ++ 21 files changed, 46 insertions(+), 4 deletions(-) diff --git a/gallery/src/demos/demo-hui-alarm-panel-card.ts b/gallery/src/demos/demo-hui-alarm-panel-card.ts index 34d343483df2..23074dcb25d1 100644 --- a/gallery/src/demos/demo-hui-alarm-panel-card.ts +++ b/gallery/src/demos/demo-hui-alarm-panel-card.ts @@ -95,3 +95,5 @@ class DemoAlarmPanelEntity extends LitElement { hass.addEntities(ENTITIES); } } + +customElements.define("demo-hui-alarm-panel-card", DemoAlarmPanelEntity); diff --git a/gallery/src/demos/demo-hui-conditional-card.ts b/gallery/src/demos/demo-hui-conditional-card.ts index d27f3c4c9f28..894a144d8daf 100644 --- a/gallery/src/demos/demo-hui-conditional-card.ts +++ b/gallery/src/demos/demo-hui-conditional-card.ts @@ -77,3 +77,5 @@ class DemoConditional extends LitElement { hass.addEntities(ENTITIES); } } + +customElements.define("demo-hui-conditional-card", DemoConditional); diff --git a/gallery/src/demos/demo-hui-entities-card.ts b/gallery/src/demos/demo-hui-entities-card.ts index bbdf56e51b7f..9056ea7acd02 100644 --- a/gallery/src/demos/demo-hui-entities-card.ts +++ b/gallery/src/demos/demo-hui-entities-card.ts @@ -241,3 +241,5 @@ class DemoEntities extends LitElement { hass.addEntities(ENTITIES); } } + +customElements.define("demo-hui-entities-card", DemoEntities); diff --git a/gallery/src/demos/demo-hui-entity-button-card.ts b/gallery/src/demos/demo-hui-entity-button-card.ts index 84119370d9a1..dae1253c51e9 100644 --- a/gallery/src/demos/demo-hui-entity-button-card.ts +++ b/gallery/src/demos/demo-hui-entity-button-card.ts @@ -93,3 +93,5 @@ class DemoButtonEntity extends LitElement { hass.addEntities(ENTITIES); } } + +customElements.define("demo-hui-entity-button-card", DemoButtonEntity); diff --git a/gallery/src/demos/demo-hui-entity-filter-card.ts b/gallery/src/demos/demo-hui-entity-filter-card.ts index 194bd28a7a77..fbac5ffb5641 100644 --- a/gallery/src/demos/demo-hui-entity-filter-card.ts +++ b/gallery/src/demos/demo-hui-entity-filter-card.ts @@ -113,3 +113,5 @@ class DemoEntityFilter extends LitElement { hass.addEntities(ENTITIES); } } + +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 6d644cb31bf3..d2aab93941a0 100644 --- a/gallery/src/demos/demo-hui-gauge-card.ts +++ b/gallery/src/demos/demo-hui-gauge-card.ts @@ -131,3 +131,5 @@ class DemoGaugeEntity extends LitElement { hass.addEntities(ENTITIES); } } + +customElements.define("demo-hui-gauge-card", DemoGaugeEntity); diff --git a/gallery/src/demos/demo-hui-glance-card.ts b/gallery/src/demos/demo-hui-glance-card.ts index 211b0e4f9b97..d17e64ea03ef 100644 --- a/gallery/src/demos/demo-hui-glance-card.ts +++ b/gallery/src/demos/demo-hui-glance-card.ts @@ -242,3 +242,5 @@ class DemoGlanceEntity extends LitElement { hass.addEntities(ENTITIES); } } + +customElements.define("demo-hui-glance-card", DemoGlanceEntity); diff --git a/gallery/src/demos/demo-hui-iframe-card.ts b/gallery/src/demos/demo-hui-iframe-card.ts index 99756b985ffe..91dded3e4743 100644 --- a/gallery/src/demos/demo-hui-iframe-card.ts +++ b/gallery/src/demos/demo-hui-iframe-card.ts @@ -49,3 +49,5 @@ class DemoIframe extends LitElement { return html``; } } + +customElements.define("demo-hui-iframe-card", DemoIframe); diff --git a/gallery/src/demos/demo-hui-light-card.ts b/gallery/src/demos/demo-hui-light-card.ts index 2309272b793a..1c7bffc58668 100644 --- a/gallery/src/demos/demo-hui-light-card.ts +++ b/gallery/src/demos/demo-hui-light-card.ts @@ -87,3 +87,5 @@ class DemoLightEntity extends LitElement { hass.addEntities(ENTITIES); } } + +customElements.define("demo-hui-light-card", DemoLightEntity); diff --git a/gallery/src/demos/demo-hui-map-card.ts b/gallery/src/demos/demo-hui-map-card.ts index 1625e0c3f950..e8f6e9938f2c 100644 --- a/gallery/src/demos/demo-hui-map-card.ts +++ b/gallery/src/demos/demo-hui-map-card.ts @@ -185,3 +185,5 @@ class DemoMap extends LitElement { hass.addEntities(ENTITIES); } } + +customElements.define("demo-hui-map-card", DemoMap); diff --git a/gallery/src/demos/demo-hui-markdown-card.ts b/gallery/src/demos/demo-hui-markdown-card.ts index c010168a6062..a5823927ce9a 100644 --- a/gallery/src/demos/demo-hui-markdown-card.ts +++ b/gallery/src/demos/demo-hui-markdown-card.ts @@ -278,3 +278,5 @@ class DemoMarkdown extends LitElement { mockTemplate(hass); } } + +customElements.define("demo-hui-markdown-card", DemoMarkdown); diff --git a/gallery/src/demos/demo-hui-media-control-card.ts b/gallery/src/demos/demo-hui-media-control-card.ts index 2049d31381ff..95ea220fac18 100644 --- a/gallery/src/demos/demo-hui-media-control-card.ts +++ b/gallery/src/demos/demo-hui-media-control-card.ts @@ -165,7 +165,7 @@ const CONFIGS = [ ]; @customElement("demo-hui-media-control-card") -class DemoHuiMediControlCard extends LitElement { +class DemoHuiMediaControlCard extends LitElement { @internalProperty() private _configs = CONFIGS; @query("#demos") private _demoRoot!: HTMLElement; @@ -182,3 +182,5 @@ class DemoHuiMediControlCard extends LitElement { hass.addEntities(createMediaPlayerEntities()); } } + +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 f35545d9dddf..5d63973dc8b2 100644 --- a/gallery/src/demos/demo-hui-media-player-rows.ts +++ b/gallery/src/demos/demo-hui-media-player-rows.ts @@ -79,3 +79,5 @@ class DemoHuiMediaPlayerRows extends LitElement { hass.addEntities(createMediaPlayerEntities()); } } + +customElements.define("demo-hui-media-player-card", DemoHuiMediaPlayerRows); diff --git a/gallery/src/demos/demo-hui-picture-elements-card.ts b/gallery/src/demos/demo-hui-picture-elements-card.ts index b525eed73297..f16649223b71 100644 --- a/gallery/src/demos/demo-hui-picture-elements-card.ts +++ b/gallery/src/demos/demo-hui-picture-elements-card.ts @@ -132,7 +132,7 @@ const CONFIGS = [ ]; @customElement("demo-hui-picture-elements-card") -class DemoPicElements extends LitElement { +class DemoPictureElements extends LitElement { @internalProperty() private _configs = CONFIGS; @query("#demos") private _demoRoot!: HTMLElement; @@ -149,3 +149,5 @@ class DemoPicElements extends LitElement { hass.addEntities(ENTITIES); } } + +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 45aba95beefe..15e1e8ab05ee 100644 --- a/gallery/src/demos/demo-hui-picture-entity-card.ts +++ b/gallery/src/demos/demo-hui-picture-entity-card.ts @@ -87,7 +87,7 @@ const CONFIGS = [ ]; @customElement("demo-hui-picture-entity-card") -class DemoPicEntity extends LitElement { +class DemoPictureEntity extends LitElement { @internalProperty() private _configs = CONFIGS; @query("#demos") private _demoRoot!: HTMLElement; @@ -104,3 +104,5 @@ class DemoPicEntity extends LitElement { hass.addEntities(ENTITIES); } } + +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 0ea1ea5c639e..5a9d5b98d693 100644 --- a/gallery/src/demos/demo-hui-picture-glance-card.ts +++ b/gallery/src/demos/demo-hui-picture-glance-card.ts @@ -128,7 +128,7 @@ const CONFIGS = [ ]; @customElement("demo-hui-picture-glance-card") -class DemoPicGlance extends LitElement { +class DemoPictureGlance extends LitElement { @internalProperty() private _configs = CONFIGS; @query("#demos") private _demoRoot!: HTMLElement; @@ -145,3 +145,5 @@ class DemoPicGlance extends LitElement { hass.addEntities(ENTITIES); } } + +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 3599473f829d..ac29c0961c0f 100644 --- a/gallery/src/demos/demo-hui-plant-card.ts +++ b/gallery/src/demos/demo-hui-plant-card.ts @@ -54,3 +54,5 @@ export class DemoPlantEntity extends LitElement { hass.addEntities(createPlantEntities()); } } + +customElements.define("demo-hui-plant-card", DemoPlantEntity); diff --git a/gallery/src/demos/demo-hui-shopping-list-card.ts b/gallery/src/demos/demo-hui-shopping-list-card.ts index 386eca75b6b5..c1ebc0c1638c 100644 --- a/gallery/src/demos/demo-hui-shopping-list-card.ts +++ b/gallery/src/demos/demo-hui-shopping-list-card.ts @@ -50,3 +50,5 @@ class DemoShoppingListEntity extends LitElement { ]); } } + +customElements.define("demo-hui-shopping-list-card", DemoShoppingListEntity); diff --git a/gallery/src/demos/demo-hui-stack-card.ts b/gallery/src/demos/demo-hui-stack-card.ts index 8914e1a31eb4..a3a07b2e1740 100644 --- a/gallery/src/demos/demo-hui-stack-card.ts +++ b/gallery/src/demos/demo-hui-stack-card.ts @@ -157,3 +157,5 @@ class DemoStack extends LitElement { mockHistory(hass); } } + +customElements.define("demo-hui-stack-card", DemoStack); diff --git a/gallery/src/demos/demo-hui-thermostat-card.ts b/gallery/src/demos/demo-hui-thermostat-card.ts index 10aed4709423..375bddd94bca 100644 --- a/gallery/src/demos/demo-hui-thermostat-card.ts +++ b/gallery/src/demos/demo-hui-thermostat-card.ts @@ -98,3 +98,5 @@ class DemoThermostatEntity extends LitElement { hass.addEntities(ENTITIES); } } + +customElements.define("demo-hui-thermostat-card", DemoThermostatEntity); diff --git a/gallery/src/demos/demo-more-info-light.ts b/gallery/src/demos/demo-more-info-light.ts index 3d0a26724ce3..24d5b12b8857 100644 --- a/gallery/src/demos/demo-more-info-light.ts +++ b/gallery/src/demos/demo-more-info-light.ts @@ -84,3 +84,5 @@ class DemoMoreInfoLight extends LitElement { hass.addEntities(ENTITIES); } } + +customElements.define("demo-more-info-light", DemoMoreInfoLight); From 3faa212d7bbbf9bb887eb33e1233a6f347fa393c Mon Sep 17 00:00:00 2001 From: Philip Allgaier Date: Tue, 5 Jan 2021 12:41:58 +0100 Subject: [PATCH 3/4] Changes from review --- gallery/src/demos/demo-hui-alarm-panel-card.ts | 4 +--- gallery/src/demos/demo-hui-conditional-card.ts | 4 +--- gallery/src/demos/demo-hui-entities-card.ts | 4 +--- gallery/src/demos/demo-hui-entity-button-card.ts | 4 +--- gallery/src/demos/demo-hui-entity-filter-card.ts | 4 +--- gallery/src/demos/demo-hui-gauge-card.ts | 4 +--- gallery/src/demos/demo-hui-glance-card.ts | 4 +--- gallery/src/demos/demo-hui-iframe-card.ts | 2 +- gallery/src/demos/demo-hui-light-card.ts | 4 +--- gallery/src/demos/demo-hui-map-card.ts | 4 +--- gallery/src/demos/demo-hui-markdown-card.ts | 4 +--- gallery/src/demos/demo-hui-media-control-card.ts | 4 +--- gallery/src/demos/demo-hui-media-player-rows.ts | 10 ++++------ gallery/src/demos/demo-hui-picture-elements-card.ts | 4 +--- gallery/src/demos/demo-hui-picture-entity-card.ts | 4 +--- gallery/src/demos/demo-hui-picture-glance-card.ts | 4 +--- gallery/src/demos/demo-hui-plant-card.ts | 4 +--- gallery/src/demos/demo-hui-shopping-list-card.ts | 4 +--- gallery/src/demos/demo-hui-stack-card.ts | 4 +--- gallery/src/demos/demo-hui-thermostat-card.ts | 4 +--- gallery/src/demos/demo-more-info-light.ts | 1 - 21 files changed, 23 insertions(+), 62 deletions(-) diff --git a/gallery/src/demos/demo-hui-alarm-panel-card.ts b/gallery/src/demos/demo-hui-alarm-panel-card.ts index 23074dcb25d1..2747f799048a 100644 --- a/gallery/src/demos/demo-hui-alarm-panel-card.ts +++ b/gallery/src/demos/demo-hui-alarm-panel-card.ts @@ -79,12 +79,10 @@ const CONFIGS = [ @customElement("demo-hui-alarm-panel-card") class DemoAlarmPanelEntity extends LitElement { - @internalProperty() private _configs = CONFIGS; - @query("#demos") private _demoRoot!: HTMLElement; protected render(): TemplateResult { - return html``; + return html``; } protected firstUpdated(changedProperties: PropertyValues) { diff --git a/gallery/src/demos/demo-hui-conditional-card.ts b/gallery/src/demos/demo-hui-conditional-card.ts index 894a144d8daf..4f944841f548 100644 --- a/gallery/src/demos/demo-hui-conditional-card.ts +++ b/gallery/src/demos/demo-hui-conditional-card.ts @@ -61,12 +61,10 @@ const CONFIGS = [ @customElement("demo-hui-conditional-card") class DemoConditional extends LitElement { - @internalProperty() private _configs = CONFIGS; - @query("#demos") private _demoRoot!: HTMLElement; protected render(): TemplateResult { - return html``; + return html``; } protected firstUpdated(changedProperties: PropertyValues) { diff --git a/gallery/src/demos/demo-hui-entities-card.ts b/gallery/src/demos/demo-hui-entities-card.ts index 9056ea7acd02..07bf196e6eff 100644 --- a/gallery/src/demos/demo-hui-entities-card.ts +++ b/gallery/src/demos/demo-hui-entities-card.ts @@ -225,12 +225,10 @@ const CONFIGS = [ @customElement("demo-hui-entities-card") class DemoEntities extends LitElement { - @internalProperty() private _configs = CONFIGS; - @query("#demos") private _demoRoot!: HTMLElement; protected render(): TemplateResult { - return html``; + return html``; } protected firstUpdated(changedProperties: PropertyValues) { diff --git a/gallery/src/demos/demo-hui-entity-button-card.ts b/gallery/src/demos/demo-hui-entity-button-card.ts index dae1253c51e9..890b18cea812 100644 --- a/gallery/src/demos/demo-hui-entity-button-card.ts +++ b/gallery/src/demos/demo-hui-entity-button-card.ts @@ -77,12 +77,10 @@ const CONFIGS = [ @customElement("demo-hui-entity-button-card") class DemoButtonEntity extends LitElement { - @internalProperty() private _configs = CONFIGS; - @query("#demos") private _demoRoot!: HTMLElement; protected render(): TemplateResult { - return html``; + return html``; } protected firstUpdated(changedProperties: PropertyValues) { diff --git a/gallery/src/demos/demo-hui-entity-filter-card.ts b/gallery/src/demos/demo-hui-entity-filter-card.ts index fbac5ffb5641..309c5e3879f5 100644 --- a/gallery/src/demos/demo-hui-entity-filter-card.ts +++ b/gallery/src/demos/demo-hui-entity-filter-card.ts @@ -97,12 +97,10 @@ const CONFIGS = [ @customElement("demo-hui-entity-filter-card") class DemoEntityFilter extends LitElement { - @internalProperty() private _configs = CONFIGS; - @query("#demos") private _demoRoot!: HTMLElement; protected render(): TemplateResult { - return html``; + return html``; } protected firstUpdated(changedProperties: PropertyValues) { diff --git a/gallery/src/demos/demo-hui-gauge-card.ts b/gallery/src/demos/demo-hui-gauge-card.ts index d2aab93941a0..a8f809e63912 100644 --- a/gallery/src/demos/demo-hui-gauge-card.ts +++ b/gallery/src/demos/demo-hui-gauge-card.ts @@ -115,12 +115,10 @@ const CONFIGS = [ @customElement("demo-hui-gauge-card") class DemoGaugeEntity extends LitElement { - @internalProperty() private _configs = CONFIGS; - @query("#demos") private _demoRoot!: HTMLElement; protected render(): TemplateResult { - return html``; + return html``; } protected firstUpdated(changedProperties: PropertyValues) { diff --git a/gallery/src/demos/demo-hui-glance-card.ts b/gallery/src/demos/demo-hui-glance-card.ts index d17e64ea03ef..11e1caf5bbfe 100644 --- a/gallery/src/demos/demo-hui-glance-card.ts +++ b/gallery/src/demos/demo-hui-glance-card.ts @@ -226,12 +226,10 @@ const CONFIGS = [ @customElement("demo-hui-glance-card") class DemoGlanceEntity extends LitElement { - @internalProperty() private _configs = CONFIGS; - @query("#demos") private _demoRoot!: HTMLElement; protected render(): TemplateResult { - return html``; + return html``; } protected firstUpdated(changedProperties: PropertyValues) { diff --git a/gallery/src/demos/demo-hui-iframe-card.ts b/gallery/src/demos/demo-hui-iframe-card.ts index 91dded3e4743..c80caa138884 100644 --- a/gallery/src/demos/demo-hui-iframe-card.ts +++ b/gallery/src/demos/demo-hui-iframe-card.ts @@ -46,7 +46,7 @@ class DemoIframe extends LitElement { @internalProperty() private _configs = CONFIGS; protected render(): TemplateResult { - return html``; + return html``; } } diff --git a/gallery/src/demos/demo-hui-light-card.ts b/gallery/src/demos/demo-hui-light-card.ts index 1c7bffc58668..927a79e2008f 100644 --- a/gallery/src/demos/demo-hui-light-card.ts +++ b/gallery/src/demos/demo-hui-light-card.ts @@ -71,12 +71,10 @@ const CONFIGS = [ @customElement("demo-hui-light-card") class DemoLightEntity extends LitElement { - @internalProperty() private _configs = CONFIGS; - @query("#demos") private _demoRoot!: HTMLElement; protected render(): TemplateResult { - return html``; + return html``; } protected firstUpdated(changedProperties: PropertyValues) { diff --git a/gallery/src/demos/demo-hui-map-card.ts b/gallery/src/demos/demo-hui-map-card.ts index e8f6e9938f2c..3c480905fbd2 100644 --- a/gallery/src/demos/demo-hui-map-card.ts +++ b/gallery/src/demos/demo-hui-map-card.ts @@ -169,12 +169,10 @@ const CONFIGS = [ @customElement("demo-hui-map-card") class DemoMap extends LitElement { - @internalProperty() private _configs = CONFIGS; - @query("#demos") private _demoRoot!: HTMLElement; protected render(): TemplateResult { - return html``; + return html``; } protected firstUpdated(changedProperties: PropertyValues) { diff --git a/gallery/src/demos/demo-hui-markdown-card.ts b/gallery/src/demos/demo-hui-markdown-card.ts index a5823927ce9a..59cf02450b82 100644 --- a/gallery/src/demos/demo-hui-markdown-card.ts +++ b/gallery/src/demos/demo-hui-markdown-card.ts @@ -262,12 +262,10 @@ const CONFIGS = [ @customElement("demo-hui-markdown-card") class DemoMarkdown extends LitElement { - @internalProperty() private _configs = CONFIGS; - @query("#demos") private _demoRoot!: HTMLElement; protected render(): TemplateResult { - return html``; + return html``; } protected firstUpdated(changedProperties: PropertyValues) { diff --git a/gallery/src/demos/demo-hui-media-control-card.ts b/gallery/src/demos/demo-hui-media-control-card.ts index 95ea220fac18..927105679df5 100644 --- a/gallery/src/demos/demo-hui-media-control-card.ts +++ b/gallery/src/demos/demo-hui-media-control-card.ts @@ -166,12 +166,10 @@ const CONFIGS = [ @customElement("demo-hui-media-control-card") class DemoHuiMediaControlCard extends LitElement { - @internalProperty() private _configs = CONFIGS; - @query("#demos") private _demoRoot!: HTMLElement; protected render(): TemplateResult { - return html``; + return html``; } protected firstUpdated(changedProperties: PropertyValues) { diff --git a/gallery/src/demos/demo-hui-media-player-rows.ts b/gallery/src/demos/demo-hui-media-player-rows.ts index 5d63973dc8b2..bd8db425139c 100644 --- a/gallery/src/demos/demo-hui-media-player-rows.ts +++ b/gallery/src/demos/demo-hui-media-player-rows.ts @@ -61,14 +61,12 @@ const CONFIGS = [ }, ]; -@customElement("demo-hui-media-player-card") -class DemoHuiMediaPlayerRows extends LitElement { - @internalProperty() private _configs = CONFIGS; - +@customElement("demo-hui-media-player-row") +class DemoHuiMediaPlayerRow extends LitElement { @query("#demos") private _demoRoot!: HTMLElement; protected render(): TemplateResult { - return html``; + return html``; } protected firstUpdated(changedProperties: PropertyValues) { @@ -80,4 +78,4 @@ class DemoHuiMediaPlayerRows extends LitElement { } } -customElements.define("demo-hui-media-player-card", 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 f16649223b71..7ffe8e55a7c7 100644 --- a/gallery/src/demos/demo-hui-picture-elements-card.ts +++ b/gallery/src/demos/demo-hui-picture-elements-card.ts @@ -133,12 +133,10 @@ const CONFIGS = [ @customElement("demo-hui-picture-elements-card") class DemoPictureElements extends LitElement { - @internalProperty() private _configs = CONFIGS; - @query("#demos") private _demoRoot!: HTMLElement; protected render(): TemplateResult { - return html``; + return html``; } protected firstUpdated(changedProperties: PropertyValues) { diff --git a/gallery/src/demos/demo-hui-picture-entity-card.ts b/gallery/src/demos/demo-hui-picture-entity-card.ts index 15e1e8ab05ee..770f1118f64b 100644 --- a/gallery/src/demos/demo-hui-picture-entity-card.ts +++ b/gallery/src/demos/demo-hui-picture-entity-card.ts @@ -88,12 +88,10 @@ const CONFIGS = [ @customElement("demo-hui-picture-entity-card") class DemoPictureEntity extends LitElement { - @internalProperty() private _configs = CONFIGS; - @query("#demos") private _demoRoot!: HTMLElement; protected render(): TemplateResult { - return html``; + return html``; } protected firstUpdated(changedProperties: PropertyValues) { diff --git a/gallery/src/demos/demo-hui-picture-glance-card.ts b/gallery/src/demos/demo-hui-picture-glance-card.ts index 5a9d5b98d693..ae4bda476f21 100644 --- a/gallery/src/demos/demo-hui-picture-glance-card.ts +++ b/gallery/src/demos/demo-hui-picture-glance-card.ts @@ -129,12 +129,10 @@ const CONFIGS = [ @customElement("demo-hui-picture-glance-card") class DemoPictureGlance extends LitElement { - @internalProperty() private _configs = CONFIGS; - @query("#demos") private _demoRoot!: HTMLElement; protected render(): TemplateResult { - return html``; + return html``; } protected firstUpdated(changedProperties: PropertyValues) { diff --git a/gallery/src/demos/demo-hui-plant-card.ts b/gallery/src/demos/demo-hui-plant-card.ts index ac29c0961c0f..3a8059bf29e6 100644 --- a/gallery/src/demos/demo-hui-plant-card.ts +++ b/gallery/src/demos/demo-hui-plant-card.ts @@ -38,12 +38,10 @@ const CONFIGS = [ @customElement("demo-hui-plant-card") export class DemoPlantEntity extends LitElement { - @internalProperty() private _configs = CONFIGS; - @query("#demos") private _demoRoot!: HTMLElement; protected render(): TemplateResult { - return html``; + return html``; } protected firstUpdated(changedProperties: PropertyValues) { diff --git a/gallery/src/demos/demo-hui-shopping-list-card.ts b/gallery/src/demos/demo-hui-shopping-list-card.ts index c1ebc0c1638c..2e6907b23ffc 100644 --- a/gallery/src/demos/demo-hui-shopping-list-card.ts +++ b/gallery/src/demos/demo-hui-shopping-list-card.ts @@ -28,12 +28,10 @@ const CONFIGS = [ @customElement("demo-hui-shopping-list-card") class DemoShoppingListEntity extends LitElement { - @internalProperty() private _configs = CONFIGS; - @query("#demos") private _demoRoot!: HTMLElement; protected render(): TemplateResult { - return html``; + return html``; } protected firstUpdated(changedProperties: PropertyValues) { diff --git a/gallery/src/demos/demo-hui-stack-card.ts b/gallery/src/demos/demo-hui-stack-card.ts index a3a07b2e1740..dcda0735b23a 100644 --- a/gallery/src/demos/demo-hui-stack-card.ts +++ b/gallery/src/demos/demo-hui-stack-card.ts @@ -140,12 +140,10 @@ const CONFIGS = [ @customElement("demo-hui-stack-card") class DemoStack extends LitElement { - @internalProperty() private _configs = CONFIGS; - @query("#demos") private _demoRoot!: HTMLElement; protected render(): TemplateResult { - return html``; + return html``; } protected firstUpdated(changedProperties: PropertyValues) { diff --git a/gallery/src/demos/demo-hui-thermostat-card.ts b/gallery/src/demos/demo-hui-thermostat-card.ts index 375bddd94bca..d93efc6e1c8e 100644 --- a/gallery/src/demos/demo-hui-thermostat-card.ts +++ b/gallery/src/demos/demo-hui-thermostat-card.ts @@ -82,12 +82,10 @@ const CONFIGS = [ @customElement("demo-hui-thermostat-card") class DemoThermostatEntity extends LitElement { - @internalProperty() private _configs = CONFIGS; - @query("#demos") private _demoRoot!: HTMLElement; protected render(): TemplateResult { - return html``; + return html``; } protected firstUpdated(changedProperties: PropertyValues) { diff --git a/gallery/src/demos/demo-more-info-light.ts b/gallery/src/demos/demo-more-info-light.ts index 24d5b12b8857..17629aa9d6e2 100644 --- a/gallery/src/demos/demo-more-info-light.ts +++ b/gallery/src/demos/demo-more-info-light.ts @@ -80,7 +80,6 @@ class DemoMoreInfoLight extends LitElement { super.firstUpdated(changedProperties); const hass = provideHass(this._demoRoot); hass.updateTranslations(null, "en"); - hass.updateTranslations("lovelace", "en"); hass.addEntities(ENTITIES); } } From baa2b5cb2e8e9c659b45a1570061979101a12439 Mon Sep 17 00:00:00 2001 From: Philip Allgaier Date: Tue, 5 Jan 2021 13:13:50 +0100 Subject: [PATCH 4/4] Lint --- gallery/src/demos/demo-hui-alarm-panel-card.ts | 1 - gallery/src/demos/demo-hui-conditional-card.ts | 1 - gallery/src/demos/demo-hui-entities-card.ts | 1 - gallery/src/demos/demo-hui-entity-button-card.ts | 1 - gallery/src/demos/demo-hui-entity-filter-card.ts | 1 - gallery/src/demos/demo-hui-gauge-card.ts | 1 - gallery/src/demos/demo-hui-glance-card.ts | 1 - gallery/src/demos/demo-hui-iframe-card.ts | 10 +--------- gallery/src/demos/demo-hui-light-card.ts | 1 - gallery/src/demos/demo-hui-map-card.ts | 1 - gallery/src/demos/demo-hui-markdown-card.ts | 1 - gallery/src/demos/demo-hui-media-control-card.ts | 1 - gallery/src/demos/demo-hui-media-player-rows.ts | 1 - gallery/src/demos/demo-hui-picture-elements-card.ts | 1 - gallery/src/demos/demo-hui-picture-entity-card.ts | 1 - gallery/src/demos/demo-hui-picture-glance-card.ts | 1 - gallery/src/demos/demo-hui-plant-card.ts | 1 - gallery/src/demos/demo-hui-shopping-list-card.ts | 1 - gallery/src/demos/demo-hui-stack-card.ts | 1 - gallery/src/demos/demo-hui-thermostat-card.ts | 1 - gallery/src/demos/demo-more-info-light.ts | 5 +---- 21 files changed, 2 insertions(+), 32 deletions(-) diff --git a/gallery/src/demos/demo-hui-alarm-panel-card.ts b/gallery/src/demos/demo-hui-alarm-panel-card.ts index 2747f799048a..839533f6bcdf 100644 --- a/gallery/src/demos/demo-hui-alarm-panel-card.ts +++ b/gallery/src/demos/demo-hui-alarm-panel-card.ts @@ -2,7 +2,6 @@ import { html, LitElement, customElement, - internalProperty, PropertyValues, query, TemplateResult, diff --git a/gallery/src/demos/demo-hui-conditional-card.ts b/gallery/src/demos/demo-hui-conditional-card.ts index 4f944841f548..c0c7dce2c64e 100644 --- a/gallery/src/demos/demo-hui-conditional-card.ts +++ b/gallery/src/demos/demo-hui-conditional-card.ts @@ -2,7 +2,6 @@ import { html, LitElement, customElement, - internalProperty, PropertyValues, query, TemplateResult, diff --git a/gallery/src/demos/demo-hui-entities-card.ts b/gallery/src/demos/demo-hui-entities-card.ts index 07bf196e6eff..c43160610af7 100644 --- a/gallery/src/demos/demo-hui-entities-card.ts +++ b/gallery/src/demos/demo-hui-entities-card.ts @@ -2,7 +2,6 @@ import { html, LitElement, customElement, - internalProperty, PropertyValues, query, TemplateResult, diff --git a/gallery/src/demos/demo-hui-entity-button-card.ts b/gallery/src/demos/demo-hui-entity-button-card.ts index 890b18cea812..a3abad9af81d 100644 --- a/gallery/src/demos/demo-hui-entity-button-card.ts +++ b/gallery/src/demos/demo-hui-entity-button-card.ts @@ -2,7 +2,6 @@ import { html, LitElement, customElement, - internalProperty, PropertyValues, query, TemplateResult, diff --git a/gallery/src/demos/demo-hui-entity-filter-card.ts b/gallery/src/demos/demo-hui-entity-filter-card.ts index 309c5e3879f5..d23482127fbb 100644 --- a/gallery/src/demos/demo-hui-entity-filter-card.ts +++ b/gallery/src/demos/demo-hui-entity-filter-card.ts @@ -2,7 +2,6 @@ import { html, LitElement, customElement, - internalProperty, PropertyValues, query, TemplateResult, diff --git a/gallery/src/demos/demo-hui-gauge-card.ts b/gallery/src/demos/demo-hui-gauge-card.ts index a8f809e63912..863341f08e86 100644 --- a/gallery/src/demos/demo-hui-gauge-card.ts +++ b/gallery/src/demos/demo-hui-gauge-card.ts @@ -2,7 +2,6 @@ import { html, LitElement, customElement, - internalProperty, PropertyValues, query, TemplateResult, diff --git a/gallery/src/demos/demo-hui-glance-card.ts b/gallery/src/demos/demo-hui-glance-card.ts index 11e1caf5bbfe..8da21ddbf59e 100644 --- a/gallery/src/demos/demo-hui-glance-card.ts +++ b/gallery/src/demos/demo-hui-glance-card.ts @@ -2,7 +2,6 @@ import { html, LitElement, customElement, - internalProperty, PropertyValues, query, TemplateResult, diff --git a/gallery/src/demos/demo-hui-iframe-card.ts b/gallery/src/demos/demo-hui-iframe-card.ts index c80caa138884..b99e2fee8155 100644 --- a/gallery/src/demos/demo-hui-iframe-card.ts +++ b/gallery/src/demos/demo-hui-iframe-card.ts @@ -1,10 +1,4 @@ -import { - html, - LitElement, - customElement, - internalProperty, - TemplateResult, -} from "lit-element"; +import { html, LitElement, customElement, TemplateResult } from "lit-element"; import "../components/demo-cards"; const CONFIGS = [ @@ -43,8 +37,6 @@ const CONFIGS = [ @customElement("demo-hui-iframe-card") class DemoIframe extends LitElement { - @internalProperty() private _configs = CONFIGS; - 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 927a79e2008f..9847cb8ea399 100644 --- a/gallery/src/demos/demo-hui-light-card.ts +++ b/gallery/src/demos/demo-hui-light-card.ts @@ -2,7 +2,6 @@ import { html, LitElement, customElement, - internalProperty, PropertyValues, query, TemplateResult, diff --git a/gallery/src/demos/demo-hui-map-card.ts b/gallery/src/demos/demo-hui-map-card.ts index 3c480905fbd2..fc2afef75284 100644 --- a/gallery/src/demos/demo-hui-map-card.ts +++ b/gallery/src/demos/demo-hui-map-card.ts @@ -2,7 +2,6 @@ import { html, LitElement, customElement, - internalProperty, PropertyValues, query, TemplateResult, diff --git a/gallery/src/demos/demo-hui-markdown-card.ts b/gallery/src/demos/demo-hui-markdown-card.ts index 59cf02450b82..8a26cb566b84 100644 --- a/gallery/src/demos/demo-hui-markdown-card.ts +++ b/gallery/src/demos/demo-hui-markdown-card.ts @@ -2,7 +2,6 @@ import { html, LitElement, customElement, - internalProperty, PropertyValues, query, TemplateResult, diff --git a/gallery/src/demos/demo-hui-media-control-card.ts b/gallery/src/demos/demo-hui-media-control-card.ts index 927105679df5..c43388b3ddea 100644 --- a/gallery/src/demos/demo-hui-media-control-card.ts +++ b/gallery/src/demos/demo-hui-media-control-card.ts @@ -2,7 +2,6 @@ import { html, LitElement, customElement, - internalProperty, PropertyValues, query, TemplateResult, diff --git a/gallery/src/demos/demo-hui-media-player-rows.ts b/gallery/src/demos/demo-hui-media-player-rows.ts index bd8db425139c..1cf419d91fb9 100644 --- a/gallery/src/demos/demo-hui-media-player-rows.ts +++ b/gallery/src/demos/demo-hui-media-player-rows.ts @@ -2,7 +2,6 @@ import { html, LitElement, customElement, - internalProperty, PropertyValues, query, TemplateResult, diff --git a/gallery/src/demos/demo-hui-picture-elements-card.ts b/gallery/src/demos/demo-hui-picture-elements-card.ts index 7ffe8e55a7c7..ccd5aebcceee 100644 --- a/gallery/src/demos/demo-hui-picture-elements-card.ts +++ b/gallery/src/demos/demo-hui-picture-elements-card.ts @@ -2,7 +2,6 @@ import { html, LitElement, customElement, - internalProperty, PropertyValues, query, TemplateResult, diff --git a/gallery/src/demos/demo-hui-picture-entity-card.ts b/gallery/src/demos/demo-hui-picture-entity-card.ts index 770f1118f64b..a277686e8a53 100644 --- a/gallery/src/demos/demo-hui-picture-entity-card.ts +++ b/gallery/src/demos/demo-hui-picture-entity-card.ts @@ -2,7 +2,6 @@ import { html, LitElement, customElement, - internalProperty, PropertyValues, query, TemplateResult, diff --git a/gallery/src/demos/demo-hui-picture-glance-card.ts b/gallery/src/demos/demo-hui-picture-glance-card.ts index ae4bda476f21..f5d61326a47a 100644 --- a/gallery/src/demos/demo-hui-picture-glance-card.ts +++ b/gallery/src/demos/demo-hui-picture-glance-card.ts @@ -2,7 +2,6 @@ import { html, LitElement, customElement, - internalProperty, PropertyValues, query, TemplateResult, diff --git a/gallery/src/demos/demo-hui-plant-card.ts b/gallery/src/demos/demo-hui-plant-card.ts index 3a8059bf29e6..88f8d3bfb16a 100644 --- a/gallery/src/demos/demo-hui-plant-card.ts +++ b/gallery/src/demos/demo-hui-plant-card.ts @@ -2,7 +2,6 @@ import { html, LitElement, customElement, - internalProperty, PropertyValues, query, TemplateResult, diff --git a/gallery/src/demos/demo-hui-shopping-list-card.ts b/gallery/src/demos/demo-hui-shopping-list-card.ts index 2e6907b23ffc..fa16c165391e 100644 --- a/gallery/src/demos/demo-hui-shopping-list-card.ts +++ b/gallery/src/demos/demo-hui-shopping-list-card.ts @@ -2,7 +2,6 @@ import { html, LitElement, customElement, - internalProperty, PropertyValues, query, TemplateResult, diff --git a/gallery/src/demos/demo-hui-stack-card.ts b/gallery/src/demos/demo-hui-stack-card.ts index dcda0735b23a..b0c2d10a4c78 100644 --- a/gallery/src/demos/demo-hui-stack-card.ts +++ b/gallery/src/demos/demo-hui-stack-card.ts @@ -2,7 +2,6 @@ import { html, LitElement, customElement, - internalProperty, PropertyValues, query, TemplateResult, diff --git a/gallery/src/demos/demo-hui-thermostat-card.ts b/gallery/src/demos/demo-hui-thermostat-card.ts index d93efc6e1c8e..1fc117dc00d6 100644 --- a/gallery/src/demos/demo-hui-thermostat-card.ts +++ b/gallery/src/demos/demo-hui-thermostat-card.ts @@ -2,7 +2,6 @@ import { html, LitElement, customElement, - internalProperty, PropertyValues, query, TemplateResult, diff --git a/gallery/src/demos/demo-more-info-light.ts b/gallery/src/demos/demo-more-info-light.ts index 17629aa9d6e2..46fe969412ec 100644 --- a/gallery/src/demos/demo-more-info-light.ts +++ b/gallery/src/demos/demo-more-info-light.ts @@ -2,7 +2,6 @@ import { html, LitElement, customElement, - internalProperty, property, PropertyValues, query, @@ -63,15 +62,13 @@ const ENTITIES = [ class DemoMoreInfoLight extends LitElement { @property() public hass!: MockHomeAssistant; - @internalProperty() private _entities = ENTITIES.map((ent) => ent.entityId); - @query("demo-more-infos") private _demoRoot!: HTMLElement; protected render(): TemplateResult { return html` ent.entityId)} > `; }