${this._switching
- ? html`
-
- `
+ ? html`
`
: until(
selectedDemoConfig.then(
(conf) => html`
diff --git a/demo/src/entrypoint.ts b/demo/src/entrypoint.ts
index bacc0978a8cd..20fdcb71aba9 100644
--- a/demo/src/entrypoint.ts
+++ b/demo/src/entrypoint.ts
@@ -1,12 +1,10 @@
import "@polymer/paper-styles/typography";
import "@polymer/polymer/lib/elements/dom-if";
import "@polymer/polymer/lib/elements/dom-repeat";
-
-import "../../src/resources/hass-icons";
+import "../../src/components/ha-iconset-svg";
import "../../src/resources/ha-style";
+import "../../src/resources/hass-icons";
import "../../src/resources/roboto";
-import "../../src/components/ha-iconset-svg";
-
import "./ha-demo";
import "./resources/hademo-icons";
diff --git a/demo/src/ha-demo.ts b/demo/src/ha-demo.ts
index 6eb383eb2230..6fd33b7f5792 100644
--- a/demo/src/ha-demo.ts
+++ b/demo/src/ha-demo.ts
@@ -1,23 +1,23 @@
-import { HomeAssistantAppEl } from "../../src/layouts/home-assistant";
+import { isNavigationClick } from "../../src/common/dom/is-navigation-click";
+import { navigate } from "../../src/common/navigate";
import {
- provideHass,
MockHomeAssistant,
+ provideHass,
} from "../../src/fake_data/provide_hass";
-import { navigate } from "../../src/common/navigate";
-import { mockLovelace } from "./stubs/lovelace";
-import { mockAuth } from "./stubs/auth";
+import { HomeAssistantAppEl } from "../../src/layouts/home-assistant";
+import { HomeAssistant } from "../../src/types";
import { selectedDemoConfig } from "./configs/demo-configs";
-import { mockTranslations } from "./stubs/translations";
+import { mockAuth } from "./stubs/auth";
+import { mockEvents } from "./stubs/events";
+import { mockFrontend } from "./stubs/frontend";
import { mockHistory } from "./stubs/history";
+import { mockLovelace } from "./stubs/lovelace";
+import { mockMediaPlayer } from "./stubs/media_player";
+import { mockPersistentNotification } from "./stubs/persistent_notification";
import { mockShoppingList } from "./stubs/shopping_list";
import { mockSystemLog } from "./stubs/system_log";
import { mockTemplate } from "./stubs/template";
-import { mockEvents } from "./stubs/events";
-import { mockMediaPlayer } from "./stubs/media_player";
-import { HomeAssistant } from "../../src/types";
-import { mockFrontend } from "./stubs/frontend";
-import { mockPersistentNotification } from "./stubs/persistent_notification";
-import { isNavigationClick } from "../../src/common/dom/is-navigation-click";
+import { mockTranslations } from "./stubs/translations";
class HaDemo extends HomeAssistantAppEl {
protected async _initialize() {
diff --git a/demo/src/html/index.html.template b/demo/src/html/index.html.template
index efd18b224fe3..a9decd45029d 100644
--- a/demo/src/html/index.html.template
+++ b/demo/src/html/index.html.template
@@ -1,5 +1,5 @@
-
+
diff --git a/demo/src/stubs/history.ts b/demo/src/stubs/history.ts
index 84ef96619aaf..96fd7870376b 100644
--- a/demo/src/stubs/history.ts
+++ b/demo/src/stubs/history.ts
@@ -1,5 +1,5 @@
-import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
import { HassEntity } from "home-assistant-js-websocket";
+import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
interface HistoryQueryParams {
filter_entity_id: string;
@@ -95,7 +95,7 @@ export const mockHistory = (mockHass: MockHomeAssistant) => {
const numberState = Number(state.state);
if (isNaN(numberState)) {
- // tslint:disable-next-line
+ // eslint-disable-next-line
console.log(
"Ignoring state with unparsable state but with a unit",
entityId,
diff --git a/demo/src/stubs/lovelace.ts b/demo/src/stubs/lovelace.ts
index 138a15aff48e..3928e5eaf097 100644
--- a/demo/src/stubs/lovelace.ts
+++ b/demo/src/stubs/lovelace.ts
@@ -1,11 +1,9 @@
-import "../custom-cards/ha-demo-card";
-import "../custom-cards/cast-demo-row";
-// Not duplicate, one is for typing.
-// tslint:disable-next-line
-import { HADemoCard } from "../custom-cards/ha-demo-card";
-import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+import type { LocalizeFunc } from "../../../src/common/translations/localize";
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
import { selectedDemoConfig } from "../configs/demo-configs";
-import { LocalizeFunc } from "../../../src/common/translations/localize";
+import "../custom-cards/cast-demo-row";
+import "../custom-cards/ha-demo-card";
+import type { HADemoCard } from "../custom-cards/ha-demo-card";
export const mockLovelace = (
hass: MockHomeAssistant,
@@ -22,12 +20,12 @@ export const mockLovelace = (
};
customElements.whenDefined("hui-view").then(() => {
- // tslint:disable-next-line
+ // eslint-disable-next-line
const HUIView = customElements.get("hui-view");
// Patch HUI-VIEW to make the lovelace object available to the demo card
const oldCreateCard = HUIView.prototype.createCardElement;
- HUIView.prototype.createCardElement = function(config) {
+ HUIView.prototype.createCardElement = function (config) {
const el = oldCreateCard.call(this, config);
if (el.tagName === "HA-DEMO-CARD") {
(el as HADemoCard).lovelace = this.lovelace;
diff --git a/demo/src/stubs/persistent_notification.ts b/demo/src/stubs/persistent_notification.ts
index 2dcd4f61bdf8..b5a2d7223d11 100644
--- a/demo/src/stubs/persistent_notification.ts
+++ b/demo/src/stubs/persistent_notification.ts
@@ -1,5 +1,5 @@
-import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
import { PersistentNotification } from "../../../src/data/persistent_notification";
+import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
export const mockPersistentNotification = (hass: MockHomeAssistant) => {
hass.mockWS("persistent_notification/get", () =>
diff --git a/demo/src/stubs/shopping_list.ts b/demo/src/stubs/shopping_list.ts
index 44864e09cd89..7b714a6e0199 100644
--- a/demo/src/stubs/shopping_list.ts
+++ b/demo/src/stubs/shopping_list.ts
@@ -1,5 +1,5 @@
-import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
import { ShoppingListItem } from "../../../src/data/shopping-list";
+import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
let items: ShoppingListItem[] = [
{
diff --git a/gallery/src/components/demo-card.js b/gallery/src/components/demo-card.js
index c5b7846f3984..6a88200a6c07 100644
--- a/gallery/src/components/demo-card.js
+++ b/gallery/src/components/demo-card.js
@@ -1,7 +1,7 @@
import { html } from "@polymer/polymer/lib/utils/html-tag";
+/* eslint-plugin-disable lit */
import { PolymerElement } from "@polymer/polymer/polymer-element";
import { safeLoad } from "js-yaml";
-
import { createCardElement } from "../../../src/panels/lovelace/create-element/create-card-element";
class DemoCard extends PolymerElement {
@@ -59,9 +59,6 @@ class DemoCard extends PolymerElement {
ready() {
super.ready();
- this.addEventListener("ll-rebuild", () => {
- this._configChanged(this.config);
- });
}
_configChanged(config) {
@@ -70,11 +67,31 @@ class DemoCard extends PolymerElement {
card.removeChild(card.lastChild);
}
- const el = createCardElement(safeLoad(config.config)[0]);
- el.hass = this.hass;
+ const el = this._createCardElement(safeLoad(config.config)[0]);
card.appendChild(el);
}
+ _createCardElement(cardConfig) {
+ const element = createCardElement(cardConfig);
+ if (this.hass) {
+ element.hass = this.hass;
+ }
+ element.addEventListener(
+ "ll-rebuild",
+ (ev) => {
+ ev.stopPropagation();
+ this._rebuildCard(element, cardConfig);
+ },
+ { once: true }
+ );
+ return element;
+ }
+
+ _rebuildCard(cardElToReplace, config) {
+ const newCardEl = this._createCardElement(config);
+ cardElToReplace.parentElement.replaceChild(newCardEl, cardElToReplace);
+ }
+
_hassChanged(hass) {
const card = this.$.card.lastChild;
if (card) card.hass = hass;
diff --git a/gallery/src/components/demo-cards.js b/gallery/src/components/demo-cards.js
index db01c7fe1317..5b1c8123adaf 100644
--- a/gallery/src/components/demo-cards.js
+++ b/gallery/src/components/demo-cards.js
@@ -1,9 +1,9 @@
+import "@polymer/app-layout/app-toolbar/app-toolbar";
import { html } from "@polymer/polymer/lib/utils/html-tag";
+/* eslint-plugin-disable lit */
import { PolymerElement } from "@polymer/polymer/polymer-element";
-import "@polymer/app-layout/app-toolbar/app-toolbar";
-
-import "./demo-card";
import "../../../src/components/ha-switch";
+import "./demo-card";
class DemoCards extends PolymerElement {
static get template() {
diff --git a/gallery/src/components/demo-more-info.js b/gallery/src/components/demo-more-info.js
index ce5fda13d886..c1cac68c8b50 100644
--- a/gallery/src/components/demo-more-info.js
+++ b/gallery/src/components/demo-more-info.js
@@ -1,9 +1,9 @@
import { html } from "@polymer/polymer/lib/utils/html-tag";
+/* eslint-plugin-disable lit */
import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import "../../../src/state-summary/state-card-content";
-import "../../../src/dialogs/more-info/controls/more-info-content";
import "../../../src/components/ha-card";
+import "../../../src/dialogs/more-info/controls/more-info-content";
+import "../../../src/state-summary/state-card-content";
class DemoMoreInfo extends PolymerElement {
static get template() {
diff --git a/gallery/src/components/demo-more-infos.js b/gallery/src/components/demo-more-infos.js
index 8f82e2a8abbf..f1de5f0908d3 100644
--- a/gallery/src/components/demo-more-infos.js
+++ b/gallery/src/components/demo-more-infos.js
@@ -1,9 +1,9 @@
+import "@polymer/app-layout/app-toolbar/app-toolbar";
import { html } from "@polymer/polymer/lib/utils/html-tag";
+/* eslint-plugin-disable lit */
import { PolymerElement } from "@polymer/polymer/polymer-element";
-import "@polymer/app-layout/app-toolbar/app-toolbar";
-
-import "./demo-more-info";
import "../../../src/components/ha-switch";
+import "./demo-more-info";
class DemoMoreInfos extends PolymerElement {
static get template() {
diff --git a/gallery/src/demos/demo-hui-alarm-panel-card.ts b/gallery/src/demos/demo-hui-alarm-panel-card.ts
index ac8b7e5defb1..12b5f130b4e1 100644
--- a/gallery/src/demos/demo-hui-alarm-panel-card.ts
+++ b/gallery/src/demos/demo-hui-alarm-panel-card.ts
@@ -1,6 +1,6 @@
import { html } from "@polymer/polymer/lib/utils/html-tag";
+/* eslint-plugin-disable lit */
import { PolymerElement } from "@polymer/polymer/polymer-element";
-
import { getEntity } from "../../../src/fake_data/entity";
import { provideHass } from "../../../src/fake_data/provide_hass";
import "../components/demo-cards";
@@ -12,6 +12,9 @@ const ENTITIES = [
getEntity("alarm_control_panel", "alarm_armed", "armed_home", {
friendly_name: "Alarm",
}),
+ getEntity("alarm_control_panel", "unavailable", "unavailable", {
+ friendly_name: "Alarm",
+ }),
];
const CONFIGS = [
@@ -39,6 +42,15 @@ const CONFIGS = [
- arm_home
`,
},
+ {
+ heading: "Unavailable",
+ config: `
+- type: alarm-panel
+ entity: alarm_control_panel.unavailable
+ states:
+ - arm_home
+ `,
+ },
{
heading: "Invalid Entity",
config: `
@@ -72,6 +84,7 @@ class DemoAlarmPanelEntity extends PolymerElement {
public ready() {
super.ready();
const hass = provideHass(this.$.demos);
+ hass.updateTranslations(null, "en");
hass.addEntities(ENTITIES);
}
}
diff --git a/gallery/src/demos/demo-hui-conditional-card.ts b/gallery/src/demos/demo-hui-conditional-card.ts
index d2fe9d88c09c..e5ce595f915f 100644
--- a/gallery/src/demos/demo-hui-conditional-card.ts
+++ b/gallery/src/demos/demo-hui-conditional-card.ts
@@ -1,6 +1,6 @@
import { html } from "@polymer/polymer/lib/utils/html-tag";
+/* eslint-plugin-disable lit */
import { PolymerElement } from "@polymer/polymer/polymer-element";
-
import { getEntity } from "../../../src/fake_data/entity";
import { provideHass } from "../../../src/fake_data/provide_hass";
import "../components/demo-cards";
@@ -77,6 +77,7 @@ class DemoConditional extends PolymerElement {
public ready() {
super.ready();
const hass = provideHass(this.$.demos);
+ hass.updateTranslations(null, "en");
hass.addEntities(ENTITIES);
}
}
diff --git a/gallery/src/demos/demo-hui-entities-card.ts b/gallery/src/demos/demo-hui-entities-card.ts
index 7e1e680763d3..bb0261e9d509 100644
--- a/gallery/src/demos/demo-hui-entities-card.ts
+++ b/gallery/src/demos/demo-hui-entities-card.ts
@@ -1,6 +1,6 @@
import { html } from "@polymer/polymer/lib/utils/html-tag";
+/* eslint-plugin-disable lit */
import { PolymerElement } from "@polymer/polymer/polymer-element";
-
import { getEntity } from "../../../src/fake_data/entity";
import { provideHass } from "../../../src/fake_data/provide_hass";
import "../components/demo-cards";
@@ -60,6 +60,36 @@ const ENTITIES = [
friendly_name: "Allowed Noise",
icon: "mdi:bell-ring",
}),
+ getEntity("light", "unavailable", "unavailable", {
+ friendly_name: "Bed Light",
+ }),
+ getEntity("lock", "unavailable", "unavailable", {
+ friendly_name: "Kitchen Door",
+ }),
+ getEntity("cover", "unavailable", "unavailable", {
+ friendly_name: "Kitchen Window",
+ supported_features: 11,
+ }),
+ getEntity("scene", "unavailable", "unavailable", {
+ friendly_name: "Romantic lights",
+ }),
+ getEntity("device_tracker", "unavailable", "unavailable", {
+ friendly_name: "Paulus",
+ }),
+ getEntity("climate", "unavailable", "unavailable", {
+ unit_of_measurement: "°F",
+ friendly_name: "Ecobee",
+ supported_features: 1014,
+ }),
+ getEntity("input_number", "unavailable", "unavailable", {
+ friendly_name: "Allowed Noise",
+ icon: "mdi:bell-ring",
+ }),
+ getEntity("input_select", "unavailable", "unavailable", {
+ unit_of_measurement: "dB",
+ friendly_name: "Who cooks",
+ icon: "mdi:cheff",
+ }),
];
const CONFIGS = [
@@ -121,6 +151,21 @@ const CONFIGS = [
title: Random group
`,
},
+ {
+ heading: "Unavailable",
+ config: `
+- type: entities
+ entities:
+ - scene.unavailable
+ - device_tracker.unavailable
+ - cover.unavailable
+ - lock.unavailable
+ - light.unavailable
+ - climate.unavailable
+ - input_number.unavailable
+ - input_select.unavailable
+ `,
+ },
{
heading: "Custom name, secondary info, custom icon",
config: `
@@ -174,9 +219,7 @@ const CONFIGS = [
class DemoEntities extends PolymerElement {
static get template() {
- return html`
-
- `;
+ return html`
`;
}
static get properties() {
@@ -191,6 +234,7 @@ class DemoEntities extends PolymerElement {
public ready() {
super.ready();
const hass = provideHass(this.$.demos);
+ hass.updateTranslations(null, "en");
hass.addEntities(ENTITIES);
}
}
diff --git a/gallery/src/demos/demo-hui-entity-button-card.ts b/gallery/src/demos/demo-hui-entity-button-card.ts
index 254dc3f006a8..8c4c77e100a8 100644
--- a/gallery/src/demos/demo-hui-entity-button-card.ts
+++ b/gallery/src/demos/demo-hui-entity-button-card.ts
@@ -1,6 +1,6 @@
import { html } from "@polymer/polymer/lib/utils/html-tag";
+/* eslint-plugin-disable lit */
import { PolymerElement } from "@polymer/polymer/polymer-element";
-
import { getEntity } from "../../../src/fake_data/entity";
import { provideHass } from "../../../src/fake_data/provide_hass";
import "../components/demo-cards";
@@ -93,6 +93,7 @@ class DemoButtonEntity extends PolymerElement {
public ready() {
super.ready();
const hass = provideHass(this.$.demos);
+ hass.updateTranslations(null, "en");
hass.addEntities(ENTITIES);
}
}
diff --git a/gallery/src/demos/demo-hui-entity-filter-card.ts b/gallery/src/demos/demo-hui-entity-filter-card.ts
index a428330f8e0c..66a0c08b706f 100644
--- a/gallery/src/demos/demo-hui-entity-filter-card.ts
+++ b/gallery/src/demos/demo-hui-entity-filter-card.ts
@@ -1,6 +1,6 @@
import { html } from "@polymer/polymer/lib/utils/html-tag";
+/* eslint-plugin-disable lit */
import { PolymerElement } from "@polymer/polymer/polymer-element";
-
import { getEntity } from "../../../src/fake_data/entity";
import { provideHass } from "../../../src/fake_data/provide_hass";
import "../components/demo-cards";
@@ -91,9 +91,7 @@ const CONFIGS = [
class DemoFilter extends PolymerElement {
static get template() {
- return html`
-
- `;
+ return html`
`;
}
static get properties() {
@@ -108,6 +106,7 @@ class DemoFilter extends PolymerElement {
public ready() {
super.ready();
const hass = provideHass(this.$.demos);
+ hass.updateTranslations(null, "en");
hass.addEntities(ENTITIES);
}
}
diff --git a/gallery/src/demos/demo-hui-gauge-card.ts b/gallery/src/demos/demo-hui-gauge-card.ts
index 5f5e43644f32..2963cab22876 100644
--- a/gallery/src/demos/demo-hui-gauge-card.ts
+++ b/gallery/src/demos/demo-hui-gauge-card.ts
@@ -1,9 +1,9 @@
import { html } from "@polymer/polymer/lib/utils/html-tag";
+/* eslint-plugin-disable lit */
import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import "../components/demo-cards";
import { getEntity } from "../../../src/fake_data/entity";
import { provideHass } from "../../../src/fake_data/provide_hass";
+import "../components/demo-cards";
const ENTITIES = [
getEntity("sensor", "brightness", "12", {}),
@@ -78,9 +78,7 @@ const CONFIGS = [
class DemoGaugeEntity extends PolymerElement {
static get template() {
- return html`
-
- `;
+ return html`
`;
}
static get properties() {
@@ -95,6 +93,7 @@ class DemoGaugeEntity extends PolymerElement {
public ready() {
super.ready();
const hass = provideHass(this.$.demos);
+ hass.updateTranslations(null, "en");
hass.addEntities(ENTITIES);
}
}
diff --git a/gallery/src/demos/demo-hui-glance-card.ts b/gallery/src/demos/demo-hui-glance-card.ts
index 98ef7b0be3ad..5455232a3d73 100644
--- a/gallery/src/demos/demo-hui-glance-card.ts
+++ b/gallery/src/demos/demo-hui-glance-card.ts
@@ -1,6 +1,6 @@
import { html } from "@polymer/polymer/lib/utils/html-tag";
+/* eslint-plugin-disable lit */
import { PolymerElement } from "@polymer/polymer/polymer-element";
-
import { getEntity } from "../../../src/fake_data/entity";
import { provideHass } from "../../../src/fake_data/provide_hass";
import "../components/demo-cards";
@@ -220,9 +220,7 @@ const CONFIGS = [
class DemoPicEntity extends PolymerElement {
static get template() {
- return html`
-
- `;
+ return html`
`;
}
static get properties() {
@@ -237,6 +235,7 @@ class DemoPicEntity extends PolymerElement {
public ready() {
super.ready();
const hass = provideHass(this.$.demos);
+ hass.updateTranslations(null, "en");
hass.addEntities(ENTITIES);
}
}
diff --git a/gallery/src/demos/demo-hui-iframe-card.ts b/gallery/src/demos/demo-hui-iframe-card.ts
index d7651473b188..596f6d302f11 100644
--- a/gallery/src/demos/demo-hui-iframe-card.ts
+++ b/gallery/src/demos/demo-hui-iframe-card.ts
@@ -1,6 +1,6 @@
import { html } from "@polymer/polymer/lib/utils/html-tag";
+/* eslint-plugin-disable lit */
import { PolymerElement } from "@polymer/polymer/polymer-element";
-
import "../components/demo-cards";
const CONFIGS = [
@@ -39,9 +39,7 @@ const CONFIGS = [
class DemoIframe extends PolymerElement {
static get template() {
- return html`
-
- `;
+ return html`
`;
}
static get properties() {
diff --git a/gallery/src/demos/demo-hui-light-card.ts b/gallery/src/demos/demo-hui-light-card.ts
index 775d7423c3de..552bb2b0df52 100644
--- a/gallery/src/demos/demo-hui-light-card.ts
+++ b/gallery/src/demos/demo-hui-light-card.ts
@@ -1,6 +1,6 @@
import { html } from "@polymer/polymer/lib/utils/html-tag";
+/* eslint-plugin-disable lit */
import { PolymerElement } from "@polymer/polymer/polymer-element";
-
import { getEntity } from "../../../src/fake_data/entity";
import { provideHass } from "../../../src/fake_data/provide_hass";
import "../components/demo-cards";
@@ -10,6 +10,12 @@ const ENTITIES = [
friendly_name: "Bed Light",
brightness: 130,
}),
+ getEntity("light", "dim", "off", {
+ supported_features: 1,
+ }),
+ getEntity("light", "unavailable", "unavailable", {
+ supported_features: 1,
+ }),
];
const CONFIGS = [
@@ -20,13 +26,32 @@ const CONFIGS = [
entity: light.bed_light
`,
},
+ {
+ heading: "Dim",
+ config: `
+- type: light
+ entity: light.dim
+ `,
+ },
+ {
+ heading: "Unavailable",
+ config: `
+- type: light
+ entity: light.unavailable
+ `,
+ },
+ {
+ heading: "Non existing",
+ config: `
+- type: light
+ entity: light.nonexisting
+ `,
+ },
];
class DemoLightEntity extends PolymerElement {
static get template() {
- return html`
-
- `;
+ return html`
`;
}
static get properties() {
@@ -41,6 +66,7 @@ class DemoLightEntity extends PolymerElement {
public ready() {
super.ready();
const hass = provideHass(this.$.demos);
+ hass.updateTranslations(null, "en");
hass.addEntities(ENTITIES);
}
}
diff --git a/gallery/src/demos/demo-hui-map-card.ts b/gallery/src/demos/demo-hui-map-card.ts
index 5979cdb39397..df4c8844db59 100644
--- a/gallery/src/demos/demo-hui-map-card.ts
+++ b/gallery/src/demos/demo-hui-map-card.ts
@@ -1,6 +1,6 @@
import { html } from "@polymer/polymer/lib/utils/html-tag";
+/* eslint-plugin-disable lit */
import { PolymerElement } from "@polymer/polymer/polymer-element";
-
import { getEntity } from "../../../src/fake_data/entity";
import { provideHass } from "../../../src/fake_data/provide_hass";
import "../components/demo-cards";
@@ -185,6 +185,7 @@ class DemoMap extends PolymerElement {
public ready() {
super.ready();
const hass = provideHass(this.$.demos);
+ hass.updateTranslations(null, "en");
hass.addEntities(ENTITIES);
}
}
diff --git a/gallery/src/demos/demo-hui-markdown-card.ts b/gallery/src/demos/demo-hui-markdown-card.ts
index fe0ca6d175ca..07e974316e81 100644
--- a/gallery/src/demos/demo-hui-markdown-card.ts
+++ b/gallery/src/demos/demo-hui-markdown-card.ts
@@ -1,6 +1,6 @@
import { html } from "@polymer/polymer/lib/utils/html-tag";
+/* eslint-plugin-disable lit */
import { PolymerElement } from "@polymer/polymer/polymer-element";
-
import "../components/demo-cards";
const CONFIGS = [
@@ -254,9 +254,7 @@ const CONFIGS = [
class DemoMarkdown extends PolymerElement {
static get template() {
- return html`
-
- `;
+ return html`
`;
}
static get properties() {
diff --git a/gallery/src/demos/demo-hui-media-control-card.ts b/gallery/src/demos/demo-hui-media-control-card.ts
index f79284a13fec..a26a13a8a3ee 100644
--- a/gallery/src/demos/demo-hui-media-control-card.ts
+++ b/gallery/src/demos/demo-hui-media-control-card.ts
@@ -1,6 +1,6 @@
import { html } from "@polymer/polymer/lib/utils/html-tag";
+/* eslint-plugin-disable lit */
import { PolymerElement } from "@polymer/polymer/polymer-element";
-
import { provideHass } from "../../../src/fake_data/provide_hass";
import "../components/demo-cards";
import { createMediaPlayerEntities } from "../data/media_players";
@@ -109,6 +109,7 @@ class DemoHuiMediControlCard extends PolymerElement {
public ready() {
super.ready();
const hass = provideHass(this.$.demos);
+ hass.updateTranslations(null, "en");
hass.addEntities(createMediaPlayerEntities());
}
}
diff --git a/gallery/src/demos/demo-hui-media-player-rows.ts b/gallery/src/demos/demo-hui-media-player-rows.ts
index 5cf708cb9f2d..1077e7a7b8a6 100644
--- a/gallery/src/demos/demo-hui-media-player-rows.ts
+++ b/gallery/src/demos/demo-hui-media-player-rows.ts
@@ -1,6 +1,6 @@
import { html } from "@polymer/polymer/lib/utils/html-tag";
+/* eslint-plugin-disable lit */
import { PolymerElement } from "@polymer/polymer/polymer-element";
-
import { provideHass } from "../../../src/fake_data/provide_hass";
import "../components/demo-cards";
import { createMediaPlayerEntities } from "../data/media_players";
@@ -57,6 +57,7 @@ class DemoHuiMediaPlayerRows extends PolymerElement {
public ready() {
super.ready();
const hass = provideHass(this.$.demos);
+ hass.updateTranslations(null, "en");
hass.addEntities(createMediaPlayerEntities());
}
}
diff --git a/gallery/src/demos/demo-hui-picture-elements-card.ts b/gallery/src/demos/demo-hui-picture-elements-card.ts
index f231efc86092..bed6be4c47b4 100644
--- a/gallery/src/demos/demo-hui-picture-elements-card.ts
+++ b/gallery/src/demos/demo-hui-picture-elements-card.ts
@@ -1,6 +1,6 @@
import { html } from "@polymer/polymer/lib/utils/html-tag";
+/* eslint-plugin-disable lit */
import { PolymerElement } from "@polymer/polymer/polymer-element";
-
import { getEntity } from "../../../src/fake_data/entity";
import { provideHass } from "../../../src/fake_data/provide_hass";
import "../components/demo-cards";
@@ -129,9 +129,7 @@ const CONFIGS = [
class DemoPicElements extends PolymerElement {
static get template() {
- return html`
-
- `;
+ return html`
`;
}
static get properties() {
@@ -146,6 +144,7 @@ class DemoPicElements extends PolymerElement {
public ready() {
super.ready();
const hass = provideHass(this.$.demos);
+ hass.updateTranslations(null, "en");
hass.addEntities(ENTITIES);
}
}
diff --git a/gallery/src/demos/demo-hui-picture-entity-card.ts b/gallery/src/demos/demo-hui-picture-entity-card.ts
index 1378707e45a9..d4df8f31f4cc 100644
--- a/gallery/src/demos/demo-hui-picture-entity-card.ts
+++ b/gallery/src/demos/demo-hui-picture-entity-card.ts
@@ -1,9 +1,9 @@
import { html } from "@polymer/polymer/lib/utils/html-tag";
+/* eslint-plugin-disable lit */
import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import "../components/demo-cards";
-import { provideHass } from "../../../src/fake_data/provide_hass";
import { getEntity } from "../../../src/fake_data/entity";
+import { provideHass } from "../../../src/fake_data/provide_hass";
+import "../components/demo-cards";
const ENTITIES = [
getEntity("light", "kitchen_lights", "on", {
@@ -82,9 +82,7 @@ const CONFIGS = [
class DemoPicEntity extends PolymerElement {
static get template() {
- return html`
-
- `;
+ return html`
`;
}
static get properties() {
@@ -99,6 +97,7 @@ class DemoPicEntity extends PolymerElement {
public ready() {
super.ready();
const hass = provideHass(this.$.demos);
+ hass.updateTranslations(null, "en");
hass.addEntities(ENTITIES);
}
}
diff --git a/gallery/src/demos/demo-hui-picture-glance-card.ts b/gallery/src/demos/demo-hui-picture-glance-card.ts
index faae58bd7bdc..684aaa2071f6 100644
--- a/gallery/src/demos/demo-hui-picture-glance-card.ts
+++ b/gallery/src/demos/demo-hui-picture-glance-card.ts
@@ -1,9 +1,9 @@
import { html } from "@polymer/polymer/lib/utils/html-tag";
+/* eslint-plugin-disable lit */
import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import "../components/demo-cards";
import { getEntity } from "../../../src/fake_data/entity";
import { provideHass } from "../../../src/fake_data/provide_hass";
+import "../components/demo-cards";
const ENTITIES = [
getEntity("switch", "decorative_lights", "on", {
@@ -123,9 +123,7 @@ const CONFIGS = [
class DemoPicGlance extends PolymerElement {
static get template() {
- return html`
-
- `;
+ return html`
`;
}
static get properties() {
@@ -140,6 +138,7 @@ class DemoPicGlance extends PolymerElement {
public ready() {
super.ready();
const hass = provideHass(this.$.demos);
+ hass.updateTranslations(null, "en");
hass.addEntities(ENTITIES);
}
}
diff --git a/gallery/src/demos/demo-hui-shopping-list-card.ts b/gallery/src/demos/demo-hui-shopping-list-card.ts
index 8d62b438382b..9abb1afc1e93 100644
--- a/gallery/src/demos/demo-hui-shopping-list-card.ts
+++ b/gallery/src/demos/demo-hui-shopping-list-card.ts
@@ -1,6 +1,6 @@
import { html } from "@polymer/polymer/lib/utils/html-tag";
+/* eslint-plugin-disable lit */
import { PolymerElement } from "@polymer/polymer/polymer-element";
-
import { provideHass } from "../../../src/fake_data/provide_hass";
import "../components/demo-cards";
@@ -22,9 +22,7 @@ const CONFIGS = [
class DemoShoppingListEntity extends PolymerElement {
static get template() {
- return html`
-
- `;
+ return html`
`;
}
static get properties() {
@@ -39,6 +37,7 @@ class DemoShoppingListEntity extends PolymerElement {
public ready() {
super.ready();
const hass = provideHass(this.$.demos);
+ hass.updateTranslations(null, "en");
hass.mockAPI("shopping_list", () => [
{ name: "list", id: 1, complete: false },
diff --git a/gallery/src/demos/demo-hui-stack-card.ts b/gallery/src/demos/demo-hui-stack-card.ts
index e34911f93948..b746888dc19c 100644
--- a/gallery/src/demos/demo-hui-stack-card.ts
+++ b/gallery/src/demos/demo-hui-stack-card.ts
@@ -1,6 +1,6 @@
import { html } from "@polymer/polymer/lib/utils/html-tag";
+/* eslint-plugin-disable lit */
import { PolymerElement } from "@polymer/polymer/polymer-element";
-
import { getEntity } from "../../../src/fake_data/entity";
import { provideHass } from "../../../src/fake_data/provide_hass";
import "../components/demo-cards";
@@ -93,9 +93,7 @@ const CONFIGS = [
class DemoStack extends PolymerElement {
static get template() {
- return html`
-
- `;
+ return html`
`;
}
static get properties() {
@@ -110,6 +108,7 @@ class DemoStack extends PolymerElement {
public ready() {
super.ready();
const hass = provideHass(this.$.demos);
+ hass.updateTranslations(null, "en");
hass.addEntities(ENTITIES);
}
}
diff --git a/gallery/src/demos/demo-hui-thermostat-card.ts b/gallery/src/demos/demo-hui-thermostat-card.ts
index 45124374e097..81b344e6895e 100644
--- a/gallery/src/demos/demo-hui-thermostat-card.ts
+++ b/gallery/src/demos/demo-hui-thermostat-card.ts
@@ -1,6 +1,6 @@
import { html } from "@polymer/polymer/lib/utils/html-tag";
+/* eslint-plugin-disable lit */
import { PolymerElement } from "@polymer/polymer/polymer-element";
-
import { getEntity } from "../../../src/fake_data/entity";
import { provideHass } from "../../../src/fake_data/provide_hass";
import "../components/demo-cards";
@@ -36,6 +36,9 @@ const ENTITIES = [
friendly_name: "Nest",
supported_features: 43,
}),
+ getEntity("climate", "unavailable", "unavailable", {
+ supported_features: 43,
+ }),
];
const CONFIGS = [
@@ -55,13 +58,25 @@ const CONFIGS = [
entity: climate.nest
`,
},
+ {
+ heading: "Unavailable",
+ config: `
+- type: thermostat
+ entity: climate.unavailable
+ `,
+ },
+ {
+ heading: "Non existing",
+ config: `
+- type: thermostat
+ entity: climate.nonexisting
+ `,
+ },
];
class DemoThermostatEntity extends PolymerElement {
static get template() {
- return html`
-
- `;
+ return html`
`;
}
static get properties() {
@@ -76,6 +91,7 @@ class DemoThermostatEntity extends PolymerElement {
public ready() {
super.ready();
const hass = provideHass(this.$.demos);
+ hass.updateTranslations(null, "en");
hass.addEntities(ENTITIES);
}
}
diff --git a/gallery/src/demos/demo-more-info-light.ts b/gallery/src/demos/demo-more-info-light.ts
index 07d9526007eb..67cd631b8749 100644
--- a/gallery/src/demos/demo-more-info-light.ts
+++ b/gallery/src/demos/demo-more-info-light.ts
@@ -1,14 +1,12 @@
import { html } from "@polymer/polymer/lib/utils/html-tag";
+/* eslint-plugin-disable lit */
import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import "../../../src/dialogs/more-info/controls/more-info-content";
import "../../../src/components/ha-card";
-
+import { SUPPORT_BRIGHTNESS } from "../../../src/data/light";
+import "../../../src/dialogs/more-info/controls/more-info-content";
import { getEntity } from "../../../src/fake_data/entity";
import { provideHass } from "../../../src/fake_data/provide_hass";
-
import "../components/demo-more-infos";
-import { SUPPORT_BRIGHTNESS } from "../../../src/data/light";
const ENTITIES = [
getEntity("light", "bed_light", "on", {
@@ -43,6 +41,7 @@ class DemoMoreInfoLight extends PolymerElement {
public ready() {
super.ready();
const hass = provideHass(this);
+ hass.updateTranslations(null, "en");
hass.addEntities(ENTITIES);
}
}
diff --git a/gallery/src/demos/demo-util-long-press.ts b/gallery/src/demos/demo-util-long-press.ts
index b1da49043ecd..518af1df39c2 100644
--- a/gallery/src/demos/demo-util-long-press.ts
+++ b/gallery/src/demos/demo-util-long-press.ts
@@ -1,9 +1,8 @@
-import { html, LitElement, TemplateResult } from "lit-element";
import "@material/mwc-button";
-
+import { html, LitElement, TemplateResult } from "lit-element";
import "../../../src/components/ha-card";
-import { actionHandler } from "../../../src/panels/lovelace/common/directives/action-handler-directive";
import { ActionHandlerEvent } from "../../../src/data/lovelace";
+import { actionHandler } from "../../../src/panels/lovelace/common/directives/action-handler-directive";
export class DemoUtilLongPress extends LitElement {
protected render(): TemplateResult {
diff --git a/gallery/src/entrypoint.js b/gallery/src/entrypoint.js
index 6e656edc989a..4cf309e612f4 100644
--- a/gallery/src/entrypoint.js
+++ b/gallery/src/entrypoint.js
@@ -1,12 +1,10 @@
import "@polymer/paper-styles/typography";
import "@polymer/polymer/lib/elements/dom-if";
import "@polymer/polymer/lib/elements/dom-repeat";
-
-import "../../src/resources/hass-icons";
+import "../../src/components/ha-iconset-svg";
import "../../src/resources/ha-style";
+import "../../src/resources/hass-icons";
import "../../src/resources/roboto";
-import "../../src/components/ha-iconset-svg";
-
import "./ha-gallery";
document.body.appendChild(document.createElement("ha-gallery"));
diff --git a/gallery/src/ha-gallery.js b/gallery/src/ha-gallery.js
index a53fa66462dd..1c68e07e3386 100644
--- a/gallery/src/ha-gallery.js
+++ b/gallery/src/ha-gallery.js
@@ -2,15 +2,16 @@ import "@polymer/app-layout/app-header-layout/app-header-layout";
import "@polymer/app-layout/app-header/app-header";
import "@polymer/app-layout/app-toolbar/app-toolbar";
import "@polymer/iron-icon/iron-icon";
+import "@polymer/paper-icon-button/paper-icon-button";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-item/paper-item-body";
-import "@polymer/paper-icon-button/paper-icon-button";
import { html } from "@polymer/polymer/lib/utils/html-tag";
+/* eslint-plugin-disable lit */
import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import "../../src/managers/notification-manager";
import "../../src/components/ha-card";
+import "../../src/managers/notification-manager";
+// eslint-disable-next-line no-undef
const DEMOS = require.context("./demos", true, /^(.*\.(ts$))[^.]*$/im);
const fixPath = (path) => path.substr(2, path.length - 5);
diff --git a/hassio/src/addon-store/hassio-addon-repository.ts b/hassio/src/addon-store/hassio-addon-repository.ts
index 5ff2ee32eebd..080d4a3d77fd 100644
--- a/hassio/src/addon-store/hassio-addon-repository.ts
+++ b/hassio/src/addon-store/hassio-addon-repository.ts
@@ -1,29 +1,31 @@
+import "@polymer/paper-card/paper-card";
import {
css,
- TemplateResult,
+ CSSResultArray,
html,
LitElement,
property,
- CSSResultArray,
+ TemplateResult,
} from "lit-element";
-import "@polymer/paper-card/paper-card";
import memoizeOne from "memoize-one";
-
-import "../components/hassio-card-content";
-import { hassioStyle } from "../resources/hassio-style";
-import { HomeAssistant } from "../../../src/types";
+import { atLeastVersion } from "../../../src/common/config/version";
+import { navigate } from "../../../src/common/navigate";
import {
HassioAddonInfo,
HassioAddonRepository,
} from "../../../src/data/hassio/addon";
-import { navigate } from "../../../src/common/navigate";
+import { HomeAssistant } from "../../../src/types";
+import "../components/hassio-card-content";
import { filterAndSort } from "../components/hassio-filter-addons";
-import { atLeastVersion } from "../../../src/common/config/version";
+import { hassioStyle } from "../resources/hassio-style";
class HassioAddonRepositoryEl extends LitElement {
@property() public hass!: HomeAssistant;
+
@property() public repo!: HassioAddonRepository;
+
@property() public addons!: HassioAddonInfo[];
+
@property() public filter!: string;
private _getAddons = memoizeOne(
@@ -64,52 +66,57 @@ class HassioAddonRepositoryEl extends LitElement {
${addons.map(
(addon) => html`
-
-
-
-
-
+ ${addon.advanced && !this.hass.userData?.showAdvanced
+ ? ""
+ : html`
+
+
+
+
+
+ `}
`
)}
diff --git a/hassio/src/addon-store/hassio-addon-store.ts b/hassio/src/addon-store/hassio-addon-store.ts
index 628ef2bef9cb..5d9093c90c9a 100644
--- a/hassio/src/addon-store/hassio-addon-store.ts
+++ b/hassio/src/addon-store/hassio-addon-store.ts
@@ -1,22 +1,22 @@
-import "./hassio-addon-repository";
-import "./hassio-repositories-editor";
-import { TemplateResult, html } from "lit-html";
import {
- LitElement,
- CSSResult,
css,
+ CSSResult,
+ LitElement,
property,
PropertyValues,
} from "lit-element";
-import { HomeAssistant } from "../../../src/types";
+import { html, TemplateResult } from "lit-html";
import {
- HassioAddonRepository,
- HassioAddonInfo,
fetchHassioAddonsInfo,
+ HassioAddonInfo,
+ HassioAddonRepository,
reloadHassioAddons,
} from "../../../src/data/hassio/addon";
import "../../../src/layouts/loading-screen";
+import { HomeAssistant } from "../../../src/types";
import "../components/hassio-search-input";
+import "./hassio-addon-repository";
+import "./hassio-repositories-editor";
const sortRepos = (a: HassioAddonRepository, b: HassioAddonRepository) => {
if (a.slug === "local") {
@@ -36,8 +36,11 @@ const sortRepos = (a: HassioAddonRepository, b: HassioAddonRepository) => {
class HassioAddonStore extends LitElement {
@property() public hass!: HomeAssistant;
+
@property() private _addons?: HassioAddonInfo[];
+
@property() private _repos?: HassioAddonRepository[];
+
@property() private _filter?: string;
public async refreshData() {
@@ -50,9 +53,7 @@ class HassioAddonStore extends LitElement {
protected render(): TemplateResult {
if (!this._addons || !this._repos) {
- return html`
-
- `;
+ return html`
`;
}
const repos: TemplateResult[] = [];
diff --git a/hassio/src/addon-store/hassio-repositories-editor.ts b/hassio/src/addon-store/hassio-repositories-editor.ts
index 27241482b4c4..1a23949cdf51 100644
--- a/hassio/src/addon-store/hassio-repositories-editor.ts
+++ b/hassio/src/addon-store/hassio-repositories-editor.ts
@@ -1,30 +1,31 @@
+import "@polymer/iron-icon/iron-icon";
+import "@polymer/paper-card/paper-card";
+import "@polymer/paper-input/paper-input";
import {
- LitElement,
- html,
- CSSResultArray,
css,
- property,
- TemplateResult,
+ CSSResultArray,
customElement,
+ html,
+ LitElement,
+ property,
PropertyValues,
+ TemplateResult,
} from "lit-element";
-import "@polymer/iron-icon/iron-icon";
-import "@polymer/paper-card/paper-card";
-import "@polymer/paper-input/paper-input";
+import { repeat } from "lit-html/directives/repeat";
import memoizeOne from "memoize-one";
-
import "../../../src/components/buttons/ha-call-api-button";
-import "../components/hassio-card-content";
-import { hassioStyle } from "../resources/hassio-style";
-import { HomeAssistant } from "../../../src/types";
import { HassioAddonRepository } from "../../../src/data/hassio/addon";
import { PolymerChangedEvent } from "../../../src/polymer-types";
-import { repeat } from "lit-html/directives/repeat";
+import { HomeAssistant } from "../../../src/types";
+import "../components/hassio-card-content";
+import { hassioStyle } from "../resources/hassio-style";
@customElement("hassio-repositories-editor")
class HassioRepositoriesEditor extends LitElement {
@property() public hass!: HomeAssistant;
+
@property() public repos!: HassioAddonRepository[];
+
@property() private _repoUrl = "";
private _sortedRepos = memoizeOne((repos: HassioAddonRepository[]) =>
diff --git a/hassio/src/addon-view/hassio-addon-audio.ts b/hassio/src/addon-view/hassio-addon-audio.ts
index eeda1084a5a2..2a087ff35101 100644
--- a/hassio/src/addon-view/hassio-addon-audio.ts
+++ b/hassio/src/addon-view/hassio-addon-audio.ts
@@ -1,5 +1,3 @@
-import "web-animations-js/web-animations-next-lite.min";
-
import "@material/mwc-button";
import "@polymer/paper-card/paper-card";
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
@@ -15,39 +13,41 @@ import {
PropertyValues,
TemplateResult,
} from "lit-element";
-
-import { HomeAssistant } from "../../../src/types";
+import "web-animations-js/web-animations-next-lite.min";
import {
HassioAddonDetails,
- setHassioAddonOption,
HassioAddonSetOptionParams,
+ setHassioAddonOption,
} from "../../../src/data/hassio/addon";
import {
- HassioHardwareAudioDevice,
fetchHassioHardwareAudio,
+ HassioHardwareAudioDevice,
} from "../../../src/data/hassio/hardware";
-import { hassioStyle } from "../resources/hassio-style";
import { haStyle } from "../../../src/resources/styles";
+import { HomeAssistant } from "../../../src/types";
+import { hassioStyle } from "../resources/hassio-style";
@customElement("hassio-addon-audio")
class HassioAddonAudio extends LitElement {
@property() public hass!: HomeAssistant;
+
@property() public addon!: HassioAddonDetails;
+
@property() private _error?: string;
+
@property() private _inputDevices?: HassioHardwareAudioDevice[];
+
@property() private _outputDevices?: HassioHardwareAudioDevice[];
+
@property() private _selectedInput!: null | string;
+
@property() private _selectedOutput!: null | string;
protected render(): TemplateResult {
return html`
- ${this._error
- ? html`
-
${this._error}
- `
- : ""}
+ ${this._error ? html`
${this._error}
` : ""}
${this._inputDevices &&
- this._inputDevices.map((item) => {
- return html`
- ${item.name}
- `;
- })}
+ this._inputDevices.map((item) => {
+ return html`
+ ${item.name}
+ `;
+ })}
${this._outputDevices &&
- this._outputDevices.map((item) => {
- return html`
- ${item.name}
- `;
- })}
+ this._outputDevices.map((item) => {
+ return html`
+ ${item.name}
+ `;
+ })}
${this._error}
- `
- : ""}
- ${valid
- ? ""
- : html`
- Invalid YAML
- `}
+ ${this._error ? html` ${this._error}
` : ""}
+ ${valid ? "" : html` Invalid YAML
`}
+
+