Convert gallery elements to LitElement (#8088)

This commit is contained in:
Philip Allgaier 2021-01-05 13:29:21 +01:00 committed by GitHub
parent bfe8346ced
commit cb2c6d8560
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
23 changed files with 384 additions and 399 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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