diff --git a/cast/src/launcher/layout/hc-cast.ts b/cast/src/launcher/layout/hc-cast.ts index 099c7f70be..1a00cd62dd 100644 --- a/cast/src/launcher/layout/hc-cast.ts +++ b/cast/src/launcher/layout/hc-cast.ts @@ -8,6 +8,7 @@ import { html, LitElement, property, + internalProperty, TemplateResult, } from "lit-element"; import { CastManager } from "../../../../src/cast/cast_manager"; @@ -28,7 +29,7 @@ import { getLovelaceCollection, LovelaceConfig, } from "../../../../src/data/lovelace"; -import "../../../../src/layouts/loading-screen"; +import "../../../../src/layouts/hass-loading-screen"; import { generateDefaultViewConfig } from "../../../../src/panels/lovelace/common/generate-lovelace-config"; import "./hc-layout"; import "@material/mwc-button/mwc-button"; @@ -41,13 +42,13 @@ class HcCast extends LitElement { @property() public castManager!: CastManager; - @property() private askWrite = false; + @internalProperty() private askWrite = false; - @property() private lovelaceConfig?: LovelaceConfig | null; + @internalProperty() private lovelaceConfig?: LovelaceConfig | null; protected render(): TemplateResult { if (this.lovelaceConfig === undefined) { - return html` > `; + return html` > `; } const error = diff --git a/cast/src/launcher/layout/hc-connect.ts b/cast/src/launcher/layout/hc-connect.ts index 048a69f403..8f3e1272ee 100644 --- a/cast/src/launcher/layout/hc-connect.ts +++ b/cast/src/launcher/layout/hc-connect.ts @@ -17,8 +17,8 @@ import { customElement, html, LitElement, - property, TemplateResult, + internalProperty, } from "lit-element"; import { CastManager, getCastManager } from "../../../../src/cast/cast_manager"; import { castSendShowDemo } from "../../../../src/cast/receiver_messages"; @@ -27,7 +27,7 @@ import { saveTokens, } from "../../../../src/common/auth/token_storage"; import "../../../../src/components/ha-icon"; -import "../../../../src/layouts/loading-screen"; +import "../../../../src/layouts/hass-loading-screen"; import { registerServiceWorker } from "../../../../src/util/register-service-worker"; import "./hc-layout"; @@ -60,19 +60,19 @@ const INTRO = html` @customElement("hc-connect") export class HcConnect extends LitElement { - @property() private loading = false; + @internalProperty() private loading = false; // If we had stored credentials but we cannot connect, // show a screen asking retry or logout. - @property() private cannotConnect = false; + @internalProperty() private cannotConnect = false; - @property() private error?: string | TemplateResult; + @internalProperty() private error?: string | TemplateResult; - @property() private auth?: Auth; + @internalProperty() private auth?: Auth; - @property() private connection?: Connection; + @internalProperty() private connection?: Connection; - @property() private castManager?: CastManager | null; + @internalProperty() private castManager?: CastManager | null; private openDemo = false; @@ -98,7 +98,7 @@ export class HcConnect extends LitElement { } if (this.castManager === undefined || this.loading) { - return html` `; + return html` `; } if (this.castManager === null) { diff --git a/cast/src/receiver/layout/hc-demo.ts b/cast/src/receiver/layout/hc-demo.ts index b3c0fcab0e..5852111743 100644 --- a/cast/src/receiver/layout/hc-demo.ts +++ b/cast/src/receiver/layout/hc-demo.ts @@ -1,4 +1,10 @@ -import { customElement, html, property, TemplateResult } from "lit-element"; +import { + customElement, + html, + property, + internalProperty, + TemplateResult, +} from "lit-element"; import { mockHistory } from "../../../../demo/src/stubs/history"; import { LovelaceConfig } from "../../../../src/data/lovelace"; import { @@ -13,9 +19,9 @@ import "./hc-lovelace"; @customElement("hc-demo") class HcDemo extends HassElement { - @property() public lovelacePath!: string; + @property({ attribute: false }) public lovelacePath!: string; - @property() private _lovelaceConfig?: LovelaceConfig; + @internalProperty() private _lovelaceConfig?: LovelaceConfig; protected render(): TemplateResult { if (!this._lovelaceConfig) { diff --git a/cast/src/receiver/layout/hc-launch-screen.ts b/cast/src/receiver/layout/hc-launch-screen.ts index b2d729bf65..603f70f655 100644 --- a/cast/src/receiver/layout/hc-launch-screen.ts +++ b/cast/src/receiver/layout/hc-launch-screen.ts @@ -11,7 +11,7 @@ import { HomeAssistant } from "../../../../src/types"; @customElement("hc-launch-screen") class HcLaunchScreen extends LitElement { - @property() public hass?: HomeAssistant; + @property({ attribute: false }) public hass?: HomeAssistant; @property() public error?: string; diff --git a/cast/src/receiver/layout/hc-lovelace.ts b/cast/src/receiver/layout/hc-lovelace.ts index b8478cc370..bb3272c033 100644 --- a/cast/src/receiver/layout/hc-lovelace.ts +++ b/cast/src/receiver/layout/hc-lovelace.ts @@ -16,9 +16,9 @@ import "./hc-launch-screen"; @customElement("hc-lovelace") class HcLovelace extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; - @property() public lovelaceConfig!: LovelaceConfig; + @property({ attribute: false }) public lovelaceConfig!: LovelaceConfig; @property() public viewPath?: string | number; diff --git a/cast/src/receiver/layout/hc-main.ts b/cast/src/receiver/layout/hc-main.ts index d5f462ad1b..974c941d8b 100644 --- a/cast/src/receiver/layout/hc-main.ts +++ b/cast/src/receiver/layout/hc-main.ts @@ -3,7 +3,12 @@ import { getAuth, UnsubscribeFunc, } from "home-assistant-js-websocket"; -import { customElement, html, property, TemplateResult } from "lit-element"; +import { + customElement, + html, + internalProperty, + TemplateResult, +} from "lit-element"; import { CAST_NS } from "../../../../src/cast/const"; import { ConnectMessage, @@ -31,13 +36,13 @@ let resourcesLoaded = false; @customElement("hc-main") export class HcMain extends HassElement { - @property() private _showDemo = false; + @internalProperty() private _showDemo = false; - @property() private _lovelaceConfig?: LovelaceConfig; + @internalProperty() private _lovelaceConfig?: LovelaceConfig; - @property() private _lovelacePath: string | number | null = null; + @internalProperty() private _lovelacePath: string | number | null = null; - @property() private _error?: string; + @internalProperty() private _error?: string; private _unsubLovelace?: UnsubscribeFunc; diff --git a/demo/src/custom-cards/cast-demo-row.ts b/demo/src/custom-cards/cast-demo-row.ts index 746a0a2eae..04a0630418 100644 --- a/demo/src/custom-cards/cast-demo-row.ts +++ b/demo/src/custom-cards/cast-demo-row.ts @@ -4,7 +4,7 @@ import { customElement, html, LitElement, - property, + internalProperty, TemplateResult, } from "lit-element"; import { CastManager } from "../../../src/cast/cast_manager"; @@ -20,7 +20,7 @@ import { HomeAssistant } from "../../../src/types"; class CastDemoRow extends LitElement implements LovelaceRow { public hass!: HomeAssistant; - @property() private _castManager?: CastManager | null; + @internalProperty() private _castManager?: CastManager | null; public setConfig(_config: CastConfig): void { // No config possible. @@ -52,7 +52,6 @@ class CastDemoRow extends LitElement implements LovelaceRow { }); mgr.castContext.addEventListener( // eslint-disable-next-line no-undef - // @ts-ignore cast.framework.CastContextEventType.SESSION_STATE_CHANGED, (ev) => { // On Android, opening a new session always results in SESSION_RESUMED. diff --git a/demo/src/custom-cards/ha-demo-card.ts b/demo/src/custom-cards/ha-demo-card.ts index f2cfa88a47..ad909a4e4f 100644 --- a/demo/src/custom-cards/ha-demo-card.ts +++ b/demo/src/custom-cards/ha-demo-card.ts @@ -5,6 +5,7 @@ import { html, LitElement, property, + internalProperty, TemplateResult, } from "lit-element"; import { until } from "lit-html/directives/until"; @@ -21,11 +22,11 @@ import { } from "../configs/demo-configs"; export class HADemoCard extends LitElement implements LovelaceCard { - @property() public lovelace?: Lovelace; + @property({ attribute: false }) public lovelace?: Lovelace; - @property() public hass!: MockHomeAssistant; + @property({ attribute: false }) public hass!: MockHomeAssistant; - @property() private _switching?: boolean; + @internalProperty() private _switching?: boolean; private _hidden = localStorage.hide_demo_card; diff --git a/gallery/src/data/demo_states.js b/gallery/src/data/demo_states.js index a00841ffc4..060ce56e29 100644 --- a/gallery/src/data/demo_states.js +++ b/gallery/src/data/demo_states.js @@ -420,15 +420,6 @@ export default { last_changed: "2018-07-19T10:44:46.105940+00:00", last_updated: "2018-07-19T10:44:46.105940+00:00", }, - "weblink.router": { - entity_id: "weblink.router", - state: "http://192.168.1.1", - attributes: { - friendly_name: "Router", - }, - last_changed: "2018-07-19T10:44:46.107286+00:00", - last_updated: "2018-07-19T10:44:46.107286+00:00", - }, "group.all_plants": { entity_id: "group.all_plants", state: "ok", @@ -1090,18 +1081,6 @@ export default { last_changed: "2018-07-19T10:44:46.510448+00:00", last_updated: "2018-07-19T10:44:46.510448+00:00", }, - "history_graph.recent_switches": { - entity_id: "history_graph.recent_switches", - state: "unknown", - attributes: { - hours_to_show: 1, - refresh: 60, - entity_id: ["switch.ac", "switch.decorative_lights"], - friendly_name: "Recent Switches", - }, - last_changed: "2018-07-19T10:44:46.512351+00:00", - last_updated: "2018-07-19T10:44:46.512351+00:00", - }, "scene.switch_on_and_off": { entity_id: "scene.switch_on_and_off", state: "scening", diff --git a/hassio/src/addon-store/hassio-addon-repository.ts b/hassio/src/addon-store/hassio-addon-repository.ts index 9f78190a4c..c188e516b7 100644 --- a/hassio/src/addon-store/hassio-addon-repository.ts +++ b/hassio/src/addon-store/hassio-addon-repository.ts @@ -21,7 +21,7 @@ import { filterAndSort } from "../components/hassio-filter-addons"; import { hassioStyle } from "../resources/hassio-style"; class HassioAddonRepositoryEl extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public repo!: HassioAddonRepository; diff --git a/hassio/src/addon-store/hassio-addon-store.ts b/hassio/src/addon-store/hassio-addon-store.ts index 80f210b6e3..b4b68d2691 100644 --- a/hassio/src/addon-store/hassio-addon-store.ts +++ b/hassio/src/addon-store/hassio-addon-store.ts @@ -6,6 +6,7 @@ import { CSSResult, LitElement, property, + internalProperty, PropertyValues, } from "lit-element"; import { html, TemplateResult } from "lit-html"; @@ -19,7 +20,7 @@ import { reloadHassioAddons, } from "../../../src/data/hassio/addon"; import "../../../src/layouts/hass-tabs-subpage"; -import "../../../src/layouts/loading-screen"; +import "../../../src/layouts/hass-loading-screen"; import { HomeAssistant, Route } from "../../../src/types"; import { showRepositoriesDialog } from "../dialogs/repositories/show-dialog-repositories"; import { supervisorTabs } from "../hassio-tabs"; @@ -52,7 +53,7 @@ class HassioAddonStore extends LitElement { @property({ attribute: false }) private _repos?: HassioAddonRepository[]; - @property() private _filter?: string; + @internalProperty() private _filter?: string; public async refreshData() { this._repos = undefined; @@ -100,15 +101,15 @@ class HassioAddonStore extends LitElement { - + Repositories - + Reload ${repos.length === 0 - ? html`` + ? html`` : html`
{ super.connectedCallback(); @@ -44,7 +45,7 @@ class HassioAddonDocumentationDashboard extends LitElement {
${this._content ? html`` - : html``} + : html``}
diff --git a/hassio/src/addon-view/info/hassio-addon-info.ts b/hassio/src/addon-view/info/hassio-addon-info.ts index 22a708d38e..89a2426199 100644 --- a/hassio/src/addon-view/info/hassio-addon-info.ts +++ b/hassio/src/addon-view/info/hassio-addon-info.ts @@ -23,6 +23,7 @@ import { html, LitElement, property, + internalProperty, TemplateResult, } from "lit-element"; import { classMap } from "lit-html/directives/class-map"; @@ -124,7 +125,7 @@ class HassioAddonInfo extends LitElement { @property({ attribute: false }) public addon!: HassioAddonDetails; - @property() private _error?: string; + @internalProperty() private _error?: string; @property({ type: Boolean }) private _installing = false; diff --git a/hassio/src/addon-view/log/hassio-addon-logs.ts b/hassio/src/addon-view/log/hassio-addon-logs.ts index 069b5f6c7a..e9f6703c2c 100644 --- a/hassio/src/addon-view/log/hassio-addon-logs.ts +++ b/hassio/src/addon-view/log/hassio-addon-logs.ts @@ -6,6 +6,7 @@ import { html, LitElement, property, + internalProperty, TemplateResult, } from "lit-element"; import "../../../../src/components/ha-card"; @@ -24,9 +25,9 @@ class HassioAddonLogs extends LitElement { @property({ attribute: false }) public addon!: HassioAddonDetails; - @property() private _error?: string; + @internalProperty() private _error?: string; - @property() private _content?: string; + @internalProperty() private _content?: string; public async connectedCallback(): Promise { super.connectedCallback(); diff --git a/hassio/src/components/hassio-card-content.ts b/hassio/src/components/hassio-card-content.ts index 015e131bd2..ee57a98ab8 100644 --- a/hassio/src/components/hassio-card-content.ts +++ b/hassio/src/components/hassio-card-content.ts @@ -14,7 +14,7 @@ import { HomeAssistant } from "../../../src/types"; @customElement("hassio-card-content") class HassioCardContent extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public title!: string; diff --git a/hassio/src/dashboard/hassio-addons.ts b/hassio/src/dashboard/hassio-addons.ts index 1ed58c2435..31e7450bb2 100644 --- a/hassio/src/dashboard/hassio-addons.ts +++ b/hassio/src/dashboard/hassio-addons.ts @@ -19,7 +19,7 @@ import { hassioStyle } from "../resources/hassio-style"; @customElement("hassio-addons") class HassioAddons extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public addons?: HassioAddonInfo[]; diff --git a/hassio/src/dashboard/hassio-update.ts b/hassio/src/dashboard/hassio-update.ts index 31e97cb8b2..2fee6b61dc 100644 --- a/hassio/src/dashboard/hassio-update.ts +++ b/hassio/src/dashboard/hassio-update.ts @@ -7,6 +7,7 @@ import { html, LitElement, property, + internalProperty, TemplateResult, } from "lit-element"; import "../../../src/components/buttons/ha-call-api-button"; @@ -23,15 +24,15 @@ import { hassioStyle } from "../resources/hassio-style"; @customElement("hassio-update") export class HassioUpdate extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; - @property() public hassInfo: HassioHomeAssistantInfo; + @property({ attribute: false }) public hassInfo: HassioHomeAssistantInfo; - @property() public hassOsInfo?: HassioHassOSInfo; + @property({ attribute: false }) public hassOsInfo?: HassioHassOSInfo; @property() public supervisorInfo: HassioSupervisorInfo; - @property() private _error?: string; + @internalProperty() private _error?: string; protected render(): TemplateResult { const updatesAvailable: number = [ diff --git a/hassio/src/dialogs/markdown/dialog-hassio-markdown.ts b/hassio/src/dialogs/markdown/dialog-hassio-markdown.ts index 8feae8e709..907904c8a3 100644 --- a/hassio/src/dialogs/markdown/dialog-hassio-markdown.ts +++ b/hassio/src/dialogs/markdown/dialog-hassio-markdown.ts @@ -5,6 +5,7 @@ import { html, LitElement, property, + internalProperty, TemplateResult, } from "lit-element"; import { createCloseHeading } from "../../../../src/components/ha-dialog"; @@ -16,13 +17,13 @@ import { HassioMarkdownDialogParams } from "./show-dialog-hassio-markdown"; @customElement("dialog-hassio-markdown") class HassioMarkdownDialog extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public title!: string; @property() public content!: string; - @property() private _opened = false; + @internalProperty() private _opened = false; public showDialog(params: HassioMarkdownDialogParams) { this.title = params.title; diff --git a/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts b/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts index d32bfd756c..0f9f42f860 100644 --- a/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts +++ b/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts @@ -13,6 +13,7 @@ import { html, LitElement, property, + internalProperty, query, TemplateResult, } from "lit-element"; @@ -39,11 +40,11 @@ class HassioRepositoriesDialog extends LitElement { @query("#repository_input") private _optionInput?: PaperInputElement; - @property() private _opened = false; + @internalProperty() private _opened = false; - @property() private _prosessing = false; + @internalProperty() private _prosessing = false; - @property() private _error?: string; + @internalProperty() private _error?: string; public async showDialog(_dialogParams: any): Promise { this._dialogParams = _dialogParams; diff --git a/hassio/src/dialogs/snapshot/dialog-hassio-snapshot.ts b/hassio/src/dialogs/snapshot/dialog-hassio-snapshot.ts index 589878b7aa..ff427aca5b 100755 --- a/hassio/src/dialogs/snapshot/dialog-hassio-snapshot.ts +++ b/hassio/src/dialogs/snapshot/dialog-hassio-snapshot.ts @@ -9,6 +9,7 @@ import { html, LitElement, property, + internalProperty, TemplateResult, } from "lit-element"; import { createCloseHeading } from "../../../../src/components/ha-dialog"; @@ -68,21 +69,21 @@ interface FolderItem { @customElement("dialog-hassio-snapshot") class HassioSnapshotDialog extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; - @property() private _error?: string; + @internalProperty() private _error?: string; - @property() private _snapshot?: HassioSnapshotDetail; + @internalProperty() private _snapshot?: HassioSnapshotDetail; - @property() private _folders!: FolderItem[]; + @internalProperty() private _folders!: FolderItem[]; - @property() private _addons!: AddonItem[]; + @internalProperty() private _addons!: AddonItem[]; - @property() private _dialogParams?: HassioSnapshotDialogParams; + @internalProperty() private _dialogParams?: HassioSnapshotDialogParams; - @property() private _snapshotPassword!: string; + @internalProperty() private _snapshotPassword!: string; - @property() private _restoreHass: boolean | null | undefined = true; + @internalProperty() private _restoreHass: boolean | null | undefined = true; public async showDialog(params: HassioSnapshotDialogParams) { this._snapshot = await fetchHassioSnapshotInfo(this.hass, params.slug); diff --git a/hassio/src/hassio-main.ts b/hassio/src/hassio-main.ts index 37abf78279..14d6833bed 100644 --- a/hassio/src/hassio-main.ts +++ b/hassio/src/hassio-main.ts @@ -1,5 +1,10 @@ import { PolymerElement } from "@polymer/polymer"; -import { customElement, property, PropertyValues } from "lit-element"; +import { + customElement, + property, + internalProperty, + PropertyValues, +} from "lit-element"; import { applyThemesOnElement } from "../../src/common/dom/apply_themes_on_element"; import { fireEvent } from "../../src/common/dom/fire_event"; import { navigate } from "../../src/common/navigate"; @@ -37,7 +42,7 @@ import "./hassio-panel"; @customElement("hassio-main") class HassioMain extends ProvideHassLitMixin(HassRouterPage) { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public panel!: HassioPanelInfo; @@ -73,15 +78,15 @@ class HassioMain extends ProvideHassLitMixin(HassRouterPage) { }, }; - @property() private _supervisorInfo: HassioSupervisorInfo; + @internalProperty() private _supervisorInfo: HassioSupervisorInfo; - @property() private _hostInfo: HassioHostInfo; + @internalProperty() private _hostInfo: HassioHostInfo; - @property() private _hassioInfo?: HassioInfo; + @internalProperty() private _hassioInfo?: HassioInfo; - @property() private _hassOsInfo?: HassioHassOSInfo; + @internalProperty() private _hassOsInfo?: HassioHassOSInfo; - @property() private _hassInfo: HassioHomeAssistantInfo; + @internalProperty() private _hassInfo: HassioHomeAssistantInfo; protected firstUpdated(changedProps: PropertyValues) { super.firstUpdated(changedProps); diff --git a/hassio/src/ingress-view/hassio-ingress-view.ts b/hassio/src/ingress-view/hassio-ingress-view.ts index a064f69a54..42cf1b373a 100644 --- a/hassio/src/ingress-view/hassio-ingress-view.ts +++ b/hassio/src/ingress-view/hassio-ingress-view.ts @@ -5,6 +5,7 @@ import { html, LitElement, property, + internalProperty, PropertyValues, TemplateResult, } from "lit-element"; @@ -19,11 +20,11 @@ import { HomeAssistant, Route } from "../../../src/types"; @customElement("hassio-ingress-view") class HassioIngressView extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public route!: Route; - @property() private _addon?: HassioAddonDetails; + @internalProperty() private _addon?: HassioAddonDetails; protected render(): TemplateResult { if (!this._addon) { diff --git a/hassio/src/snapshots/hassio-snapshots.ts b/hassio/src/snapshots/hassio-snapshots.ts index b26ef91157..79c8f35b2f 100644 --- a/hassio/src/snapshots/hassio-snapshots.ts +++ b/hassio/src/snapshots/hassio-snapshots.ts @@ -15,6 +15,7 @@ import { html, LitElement, property, + internalProperty, PropertyValues, TemplateResult, } from "lit-element"; @@ -56,19 +57,19 @@ class HassioSnapshots extends LitElement { @property({ attribute: false }) public supervisorInfo!: HassioSupervisorInfo; - @property() private _snapshotName = ""; + @internalProperty() private _snapshotName = ""; - @property() private _snapshotPassword = ""; + @internalProperty() private _snapshotPassword = ""; - @property() private _snapshotHasPassword = false; + @internalProperty() private _snapshotHasPassword = false; - @property() private _snapshotType: HassioSnapshot["type"] = "full"; + @internalProperty() private _snapshotType: HassioSnapshot["type"] = "full"; - @property() private _snapshots?: HassioSnapshot[] = []; + @internalProperty() private _snapshots?: HassioSnapshot[] = []; - @property() private _addonList: CheckboxItem[] = []; + @internalProperty() private _addonList: CheckboxItem[] = []; - @property() private _folderList: CheckboxItem[] = [ + @internalProperty() private _folderList: CheckboxItem[] = [ { slug: "homeassistant", name: "Home Assistant configuration", @@ -79,9 +80,9 @@ class HassioSnapshots extends LitElement { { slug: "addons/local", name: "Local add-ons", checked: true }, ]; - @property() private _creatingSnapshot = false; + @internalProperty() private _creatingSnapshot = false; - @property() private _error = ""; + @internalProperty() private _error = ""; public async refreshData() { await reloadHassioSnapshots(this.hass); diff --git a/hassio/src/system/hassio-host-info.ts b/hassio/src/system/hassio-host-info.ts index be0596122c..3a53925ddb 100644 --- a/hassio/src/system/hassio-host-info.ts +++ b/hassio/src/system/hassio-host-info.ts @@ -6,6 +6,7 @@ import { html, LitElement, property, + internalProperty, TemplateResult, } from "lit-element"; import "../../../src/components/buttons/ha-call-api-button"; @@ -32,15 +33,15 @@ import { hassioStyle } from "../resources/hassio-style"; @customElement("hassio-host-info") class HassioHostInfo extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public hostInfo!: HassioHostInfoType; @property({ attribute: false }) public hassioInfo!: HassioInfo; - @property() public hassOsInfo!: HassioHassOSInfo; + @property({ attribute: false }) public hassOsInfo!: HassioHassOSInfo; - @property() private _errors?: string; + @internalProperty() private _errors?: string; public render(): TemplateResult | void { return html` diff --git a/hassio/src/system/hassio-supervisor-info.ts b/hassio/src/system/hassio-supervisor-info.ts index 51a45c18b2..1843cb4058 100644 --- a/hassio/src/system/hassio-supervisor-info.ts +++ b/hassio/src/system/hassio-supervisor-info.ts @@ -6,6 +6,7 @@ import { html, LitElement, property, + internalProperty, TemplateResult, } from "lit-element"; import { fireEvent } from "../../../src/common/dom/fire_event"; @@ -23,11 +24,11 @@ import { hassioStyle } from "../resources/hassio-style"; @customElement("hassio-supervisor-info") class HassioSupervisorInfo extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public supervisorInfo!: HassioSupervisorInfoType; - @property() private _errors?: string; + @internalProperty() private _errors?: string; public render(): TemplateResult | void { return html` diff --git a/hassio/src/system/hassio-supervisor-log.ts b/hassio/src/system/hassio-supervisor-log.ts index af3b94665d..ec2dbe7031 100644 --- a/hassio/src/system/hassio-supervisor-log.ts +++ b/hassio/src/system/hassio-supervisor-log.ts @@ -9,11 +9,12 @@ import { html, LitElement, property, + internalProperty, TemplateResult, } from "lit-element"; import "../../../src/components/ha-card"; import { fetchHassioLogs } from "../../../src/data/hassio/supervisor"; -import "../../../src/layouts/loading-screen"; +import "../../../src/layouts/hass-loading-screen"; import { haStyle } from "../../../src/resources/styles"; import { HomeAssistant } from "../../../src/types"; import "../components/hassio-ansi-to-html"; @@ -55,11 +56,11 @@ const logProviders: LogProvider[] = [ class HassioSupervisorLog extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; - @property() private _error?: string; + @internalProperty() private _error?: string; - @property() private _selectedLogProvider = "supervisor"; + @internalProperty() private _selectedLogProvider = "supervisor"; - @property() private _content?: string; + @internalProperty() private _content?: string; public async connectedCallback(): Promise { super.connectedCallback(); @@ -98,7 +99,7 @@ class HassioSupervisorLog extends LitElement { ? html`` - : html``} + : html``}
Refresh diff --git a/package.json b/package.json index 9f61f7eba7..c1660b1bbf 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,7 @@ "lint:prettier": "prettier '**/src/**/*.{js,ts,json,css,md}' --check", "format:prettier": "prettier '**/src/**/*.{js,ts,json,css,md}' --write", "lint:types": "tsc", - "lint:lit": "lit-analyzer '**/src/**/*.ts'", + "lint:lit": "lit-analyzer '**/src/**/*.ts' --format markdown --outFile result.md", "lint": "npm run lint:eslint && npm run lint:prettier && npm run lint:types", "format": "npm run format:eslint && npm run format:prettier", "mocha": "node_modules/.bin/ts-mocha -p test-mocha/tsconfig.test.json --opts test-mocha/mocha.opts", @@ -74,6 +74,7 @@ "@polymer/paper-tooltip": "^3.0.1", "@polymer/polymer": "3.1.0", "@thomasloven/round-slider": "0.5.0", + "@types/chromecast-caf-sender": "^1.0.3", "@vaadin/vaadin-combo-box": "^5.0.10", "@vaadin/vaadin-date-picker": "^4.0.7", "@vue/web-component-wrapper": "^1.2.0", @@ -170,7 +171,7 @@ "html-minifier": "^4.0.0", "husky": "^1.3.1", "lint-staged": "^8.1.5", - "lit-analyzer": "^1.1.10", + "lit-analyzer": "^1.2.0", "lodash.template": "^4.5.0", "magic-string": "^0.25.7", "map-stream": "^0.0.7", @@ -191,7 +192,7 @@ "source-map-url": "^0.4.0", "systemjs": "^6.3.2", "terser-webpack-plugin": "^3.0.6", - "ts-lit-plugin": "^1.1.10", + "ts-lit-plugin": "^1.2.0", "ts-mocha": "^6.0.0", "typescript": "^3.8.3", "vinyl-buffer": "^1.0.1", diff --git a/setup.py b/setup.py index 904d1ff62f..c068657406 100644 --- a/setup.py +++ b/setup.py @@ -2,7 +2,7 @@ from setuptools import setup, find_packages setup( name="home-assistant-frontend", - version="20200702.0", + version="20200716.0", description="The Home Assistant frontend", url="https://github.com/home-assistant/home-assistant-polymer", author="The Home Assistant Authors", diff --git a/src/auth/ha-auth-flow.ts b/src/auth/ha-auth-flow.ts index 88afcbedae..4ad4b3330b 100644 --- a/src/auth/ha-auth-flow.ts +++ b/src/auth/ha-auth-flow.ts @@ -5,6 +5,7 @@ import { html, LitElement, property, + internalProperty, PropertyValues, TemplateResult, } from "lit-element"; @@ -28,13 +29,13 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) { @property() public oauth2State?: string; - @property() private _state: State = "loading"; + @internalProperty() private _state: State = "loading"; - @property() private _stepData: any = {}; + @internalProperty() private _stepData: any = {}; - @property() private _step?: DataEntryFlowStep; + @internalProperty() private _step?: DataEntryFlowStep; - @property() private _errorMessage?: string; + @internalProperty() private _errorMessage?: string; protected render() { return html` diff --git a/src/auth/ha-authorize.ts b/src/auth/ha-authorize.ts index b96eac0aff..989525cb23 100644 --- a/src/auth/ha-authorize.ts +++ b/src/auth/ha-authorize.ts @@ -4,6 +4,7 @@ import { html, LitElement, property, + internalProperty, PropertyValues, } from "lit-element"; import { @@ -25,9 +26,9 @@ class HaAuthorize extends litLocalizeLiteMixin(LitElement) { @property() public oauth2State?: string; - @property() private _authProvider?: AuthProvider; + @internalProperty() private _authProvider?: AuthProvider; - @property() private _authProviders?: AuthProvider[]; + @internalProperty() private _authProviders?: AuthProvider[]; constructor() { super(); diff --git a/src/cards/ha-history_graph-card.js b/src/cards/ha-history_graph-card.js deleted file mode 100644 index 33e2472d82..0000000000 --- a/src/cards/ha-history_graph-card.js +++ /dev/null @@ -1,131 +0,0 @@ -import "@polymer/paper-card/paper-card"; -import { html } from "@polymer/polymer/lib/utils/html-tag"; -/* eslint-plugin-disable lit */ -import { PolymerElement } from "@polymer/polymer/polymer-element"; -import { computeStateName } from "../common/entity/compute_state_name"; -import "../components/state-history-charts"; -import "../data/ha-state-history-data"; -import { EventsMixin } from "../mixins/events-mixin"; - -/* - * @appliesMixin EventsMixin - */ -class HaHistoryGraphCard extends EventsMixin(PolymerElement) { - static get template() { - return html` - - - -
[[computeTitle(stateObj)]]
-
- - -
- - `; - } - - static get properties() { - return { - hass: Object, - stateObj: { - type: Object, - observer: "stateObjObserver", - }, - inDialog: { - type: Boolean, - value: false, - }, - stateHistory: Object, - stateHistoryLoading: Boolean, - cacheConfig: { - type: Object, - value: { - refresh: 0, - cacheKey: null, - hoursToShow: 24, - }, - }, - }; - } - - stateObjObserver(stateObj) { - if (!stateObj) return; - if ( - this.cacheConfig.cacheKey !== stateObj.entity_id || - this.cacheConfig.refresh !== (stateObj.attributes.refresh || 0) || - this.cacheConfig.hoursToShow !== (stateObj.attributes.hours_to_show || 24) - ) { - this.cacheConfig = { - refresh: stateObj.attributes.refresh || 0, - cacheKey: stateObj.entity_id, - hoursToShow: stateObj.attributes.hours_to_show || 24, - }; - } - } - - computeTitle(stateObj) { - return computeStateName(stateObj); - } - - computeContentClass(inDialog) { - return inDialog ? "" : "content"; - } - - computeHistoryEntities(stateObj) { - return stateObj.attributes.entity_id; - } - - computeElevation(inDialog) { - return inDialog ? 0 : 1; - } - - cardTapped(ev) { - const mq = window.matchMedia("(min-width: 610px) and (min-height: 550px)"); - if (mq.matches) { - ev.stopPropagation(); - this.fire("hass-more-info", { entityId: this.stateObj.entity_id }); - } - } -} -customElements.define("ha-history_graph-card", HaHistoryGraphCard); diff --git a/src/cast/cast_manager.ts b/src/cast/cast_manager.ts index 6c4fcf13f4..f41811cde1 100644 --- a/src/cast/cast_manager.ts +++ b/src/cast/cast_manager.ts @@ -1,4 +1,8 @@ /* eslint-disable no-undef, no-console */ +import { + CastStateEventData, + SessionStateEventData, +} from "chromecast-caf-receiver/cast.framework"; import { Auth } from "home-assistant-js-websocket"; import { castApiAvailable } from "./cast_framework"; import { CAST_APP_ID, CAST_DEV, CAST_NS } from "./const"; @@ -40,16 +44,13 @@ export class CastManager { const context = this.castContext; context.setOptions({ receiverApplicationId: CAST_APP_ID, - // @ts-ignore autoJoinPolicy: chrome.cast.AutoJoinPolicy.ORIGIN_SCOPED, }); context.addEventListener( - // @ts-ignore cast.framework.CastContextEventType.SESSION_STATE_CHANGED, (ev) => this._sessionStateChanged(ev) ); context.addEventListener( - // @ts-ignore cast.framework.CastContextEventType.CAST_STATE_CHANGED, (ev) => this._castStateChanged(ev) ); @@ -118,7 +119,7 @@ export class CastManager { } } - private _sessionStateChanged(ev) { + private _sessionStateChanged(ev: SessionStateEventData) { if (__DEV__) { console.log("Cast session state changed", ev.sessionState); } @@ -141,7 +142,7 @@ export class CastManager { } } - private _castStateChanged(ev) { + private _castStateChanged(ev: CastStateEventData) { if (__DEV__) { console.log("Cast state changed", ev.castState); } diff --git a/src/common/const.ts b/src/common/const.ts index b801ae37fc..dc2bf20595 100644 --- a/src/common/const.ts +++ b/src/common/const.ts @@ -22,7 +22,6 @@ export const DOMAINS_WITH_CARD = [ "timer", "vacuum", "water_heater", - "weblink", ]; /** Domains with separate more info dialog. */ @@ -36,7 +35,6 @@ export const DOMAINS_WITH_MORE_INFO = [ "cover", "fan", "group", - "history_graph", "humidifier", "input_datetime", "light", @@ -58,16 +56,10 @@ export const DOMAINS_HIDE_MORE_INFO = [ "input_select", "input_text", "scene", - "weblink", ]; /** Domains that should have the history hidden in the more info dialog. */ -export const DOMAINS_MORE_INFO_NO_HISTORY = [ - "camera", - "configurator", - "history_graph", - "scene", -]; +export const DOMAINS_MORE_INFO_NO_HISTORY = ["camera", "configurator", "scene"]; /** States that we consider "off". */ export const STATES_OFF = ["closed", "locked", "off"]; diff --git a/src/common/dom/load_resource.ts b/src/common/dom/load_resource.ts index 670afddc9e..c4933ed8e5 100644 --- a/src/common/dom/load_resource.ts +++ b/src/common/dom/load_resource.ts @@ -23,7 +23,8 @@ const _load = ( if (type) { (element as HTMLScriptElement).type = type; // https://github.com/home-assistant/frontend/pull/6328 - (element as HTMLScriptElement).crossOrigin = url.substr(0, 1) === "/" ? "use-credentials" : "anonymous"; + (element as HTMLScriptElement).crossOrigin = + url.substr(0, 1) === "/" ? "use-credentials" : "anonymous"; } break; case "link": diff --git a/src/common/entity/domain_icon.ts b/src/common/entity/domain_icon.ts index 866b3a5afc..82b8795454 100644 --- a/src/common/entity/domain_icon.ts +++ b/src/common/entity/domain_icon.ts @@ -20,7 +20,6 @@ const fixedIcons = { fan: "hass:fan", google_assistant: "hass:google-assistant", group: "hass:google-circles-communities", - history_graph: "hass:chart-line", homeassistant: "hass:home-assistant", homekit: "hass:home-automation", humidifier: "hass:air-humidifier", @@ -49,7 +48,6 @@ const fixedIcons = { vacuum: "hass:robot-vacuum", water_heater: "hass:thermometer", weather: "hass:weather-cloudy", - weblink: "hass:open-in-new", zone: "hass:map-marker-radius", }; diff --git a/src/common/string/slugify.ts b/src/common/string/slugify.ts index 05c6f3352c..a5f0c134cb 100644 --- a/src/common/string/slugify.ts +++ b/src/common/string/slugify.ts @@ -1,19 +1,19 @@ // https://gist.github.com/hagemann/382adfc57adbd5af078dc93feef01fe1 -export const slugify = (value: string) => { +export const slugify = (value: string, delimiter = "-") => { const a = "àáäâãåăæąçćčđďèéěėëêęğǵḧìíïîįłḿǹńňñòóöôœøṕŕřßşśšșťțùúüûǘůűūųẃẍÿýźžż·/_,:;"; - const b = - "aaaaaaaaacccddeeeeeeegghiiiiilmnnnnooooooprrsssssttuuuuuuuuuwxyyzzz------"; + const b = `aaaaaaaaacccddeeeeeeegghiiiiilmnnnnooooooprrsssssttuuuuuuuuuwxyyzzz${delimiter}${delimiter}${delimiter}${delimiter}${delimiter}${delimiter}`; const p = new RegExp(a.split("").join("|"), "g"); return value .toString() .toLowerCase() - .replace(/\s+/g, "-") // Replace spaces with - + .replace(/\s+/g, delimiter) // Replace spaces with delimiter .replace(p, (c) => b.charAt(a.indexOf(c))) // Replace special characters - .replace(/&/g, "-and-") // Replace & with 'and' + .replace(/&/g, `${delimiter}and${delimiter}`) // Replace & with 'and' .replace(/[^\w-]+/g, "") // Remove all non-word characters - .replace(/--+/g, "-") // Replace multiple - with single - - .replace(/^-+/, "") // Trim - from start of text - .replace(/-+$/, ""); // Trim - from end of text + .replace(/-/, delimiter) // Replace - with delimiter + .replace(new RegExp(`/${delimiter}${delimiter}+/`, "g"), delimiter) // Replace multiple delimiters with single delimiter + .replace(new RegExp(`/^${delimiter}+/`), "") // Trim delimiter from start of text + .replace(new RegExp(`/-+$/`), ""); // Trim delimiter from end of text }; diff --git a/src/common/style/icon_color_css.ts b/src/common/style/icon_color_css.ts index b2bb4e5d95..8f55eba461 100644 --- a/src/common/style/icon_color_css.ts +++ b/src/common/style/icon_color_css.ts @@ -19,7 +19,13 @@ export const iconColorCSS = css` ha-icon[data-domain="sun"][data-state="above_horizon"], ha-icon[data-domain="switch"][data-state="on"], ha-icon[data-domain="timer"][data-state="active"], - ha-icon[data-domain="vacuum"][data-state="cleaning"] { + ha-icon[data-domain="vacuum"][data-state="cleaning"], + ha-icon[data-domain="group"][data-state="on"], + ha-icon[data-domain="group"][data-state="home"], + ha-icon[data-domain="group"][data-state="open"], + ha-icon[data-domain="group"][data-state="locked"], + ha-icon[data-domain="group"][data-state="problem"] + { color: var(--paper-item-icon-active-color, #fdd835); } diff --git a/src/components/data-table/ha-data-table.ts b/src/components/data-table/ha-data-table.ts index 3ec2aba13a..05283fb7db 100644 --- a/src/components/data-table/ha-data-table.ts +++ b/src/components/data-table/ha-data-table.ts @@ -6,11 +6,11 @@ import { html, LitElement, property, + internalProperty, PropertyValues, query, TemplateResult, eventOptions, - internalProperty, } from "lit-element"; import { classMap } from "lit-html/directives/class-map"; import { ifDefined } from "lit-html/directives/if-defined"; diff --git a/src/components/device/ha-area-devices-picker.ts b/src/components/device/ha-area-devices-picker.ts index 3a0804e637..9a974c88f1 100644 --- a/src/components/device/ha-area-devices-picker.ts +++ b/src/components/device/ha-area-devices-picker.ts @@ -13,6 +13,7 @@ import { html, LitElement, property, + internalProperty, PropertyValues, TemplateResult, } from "lit-element"; @@ -87,7 +88,7 @@ const rowRenderer = ( @customElement("ha-area-devices-picker") export class HaAreaDevicesPicker extends SubscribeMixin(LitElement) { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public label?: string; @@ -124,13 +125,13 @@ export class HaAreaDevicesPicker extends SubscribeMixin(LitElement) { @property({ type: Boolean }) private _opened?: boolean; - @property() private _areaPicker = true; + @internalProperty() private _areaPicker = true; - @property() private _devices?: DeviceRegistryEntry[]; + @internalProperty() private _devices?: DeviceRegistryEntry[]; - @property() private _areas?: AreaRegistryEntry[]; + @internalProperty() private _areas?: AreaRegistryEntry[]; - @property() private _entities?: EntityRegistryEntry[]; + @internalProperty() private _entities?: EntityRegistryEntry[]; private _selectedDevices: string[] = []; diff --git a/src/components/device/ha-device-automation-picker.ts b/src/components/device/ha-device-automation-picker.ts index b32446710a..5f05069dd1 100644 --- a/src/components/device/ha-device-automation-picker.ts +++ b/src/components/device/ha-device-automation-picker.ts @@ -8,6 +8,7 @@ import { html, LitElement, property, + internalProperty, TemplateResult, } from "lit-element"; import { fireEvent } from "../../common/dom/fire_event"; @@ -24,7 +25,7 @@ const UNKNOWN_AUTOMATION_KEY = "UNKNOWN_AUTOMATION"; export abstract class HaDeviceAutomationPicker< T extends DeviceAutomation > extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public label?: string; @@ -36,11 +37,11 @@ export abstract class HaDeviceAutomationPicker< protected UNKNOWN_AUTOMATION_TEXT = "Unknown automation"; - @property() private _automations: T[] = []; + @internalProperty() private _automations: T[] = []; // Trigger an empty render so we start with a clean DOM. // paper-listbox does not like changing things around. - @property() private _renderEmpty = false; + @internalProperty() private _renderEmpty = false; private _localizeDeviceAutomation: ( hass: HomeAssistant, diff --git a/src/components/device/ha-device-picker.ts b/src/components/device/ha-device-picker.ts index be4fb6bbe4..4b5e60f936 100644 --- a/src/components/device/ha-device-picker.ts +++ b/src/components/device/ha-device-picker.ts @@ -66,7 +66,7 @@ const rowRenderer = (root: HTMLElement, _owner, model: { item: Device }) => { @customElement("ha-device-picker") export class HaDevicePicker extends SubscribeMixin(LitElement) { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public label?: string; diff --git a/src/components/device/ha-devices-picker.ts b/src/components/device/ha-devices-picker.ts index 4abf6c4eda..9106521d1d 100644 --- a/src/components/device/ha-devices-picker.ts +++ b/src/components/device/ha-devices-picker.ts @@ -12,7 +12,7 @@ import "./ha-device-picker"; @customElement("ha-devices-picker") class HaDevicesPicker extends LitElement { - @property() public hass?: HomeAssistant; + @property({ attribute: false }) public hass?: HomeAssistant; @property() public value?: string[]; diff --git a/src/components/entity/ha-battery-icon.ts b/src/components/entity/ha-battery-icon.ts index 19429bd20c..1838f6af5e 100644 --- a/src/components/entity/ha-battery-icon.ts +++ b/src/components/entity/ha-battery-icon.ts @@ -3,7 +3,7 @@ import "../ha-icon"; import { customElement, html, property, LitElement } from "lit-element"; @customElement("ha-battery-icon") -class HaBatteryIcon extends LitElement { +export class HaBatteryIcon extends LitElement { @property() public batteryStateObj; @property() public batteryChargingStateObj; @@ -16,5 +16,3 @@ class HaBatteryIcon extends LitElement { `; } } - -customElements.define("ha-battery-icon", HaBatteryIcon); diff --git a/src/components/entity/ha-entities-picker.ts b/src/components/entity/ha-entities-picker.ts index 6f03e48f01..0ac66ed8fa 100644 --- a/src/components/entity/ha-entities-picker.ts +++ b/src/components/entity/ha-entities-picker.ts @@ -15,7 +15,7 @@ import type { HaEntityPickerEntityFilterFunc } from "./ha-entity-picker"; @customElement("ha-entities-picker") class HaEntitiesPickerLight extends LitElement { - @property() public hass?: HomeAssistant; + @property({ attribute: false }) public hass?: HomeAssistant; @property() public value?: string[]; diff --git a/src/components/entity/ha-entity-picker.ts b/src/components/entity/ha-entity-picker.ts index 231914cecf..300ae57a79 100644 --- a/src/components/entity/ha-entity-picker.ts +++ b/src/components/entity/ha-entity-picker.ts @@ -59,7 +59,7 @@ class HaEntityPicker extends LitElement { @property({ type: Boolean, attribute: "allow-custom-entity" }) public allowCustomEntity; - @property() public hass?: HomeAssistant; + @property({ attribute: false }) public hass?: HomeAssistant; @property() public label?: string; diff --git a/src/components/entity/ha-entity-toggle.ts b/src/components/entity/ha-entity-toggle.ts index 587f299641..ca46ad32b0 100644 --- a/src/components/entity/ha-entity-toggle.ts +++ b/src/components/entity/ha-entity-toggle.ts @@ -6,6 +6,7 @@ import { html, LitElement, property, + internalProperty, PropertyValues, TemplateResult, } from "lit-element"; @@ -28,7 +29,7 @@ export class HaEntityToggle extends LitElement { @property() public stateObj?: HassEntity; - @property() private _isOn = false; + @internalProperty() private _isOn = false; protected render(): TemplateResult { if (!this.stateObj) { diff --git a/src/components/entity/ha-state-label-badge.ts b/src/components/entity/ha-state-label-badge.ts index 1c812a6065..2fb7b688bd 100644 --- a/src/components/entity/ha-state-label-badge.ts +++ b/src/components/entity/ha-state-label-badge.ts @@ -6,6 +6,7 @@ import { html, LitElement, property, + internalProperty, PropertyValues, TemplateResult, } from "lit-element"; @@ -22,7 +23,7 @@ import "../ha-label-badge"; @customElement("ha-state-label-badge") export class HaStateLabelBadge extends LitElement { - @property() public hass?: HomeAssistant; + @property({ attribute: false }) public hass?: HomeAssistant; @property() public state?: HassEntity; @@ -32,7 +33,7 @@ export class HaStateLabelBadge extends LitElement { @property() public image?: string; - @property() private _timerTimeRemaining?: number; + @internalProperty() private _timerTimeRemaining?: number; private _connected?: boolean; diff --git a/src/components/entity/state-badge.ts b/src/components/entity/state-badge.ts index 1c840ed278..d621d6c590 100644 --- a/src/components/entity/state-badge.ts +++ b/src/components/entity/state-badge.ts @@ -6,6 +6,7 @@ import { html, LitElement, property, + internalProperty, PropertyValues, TemplateResult, } from "lit-element"; @@ -31,7 +32,7 @@ export class StateBadge extends LitElement { @property({ type: Boolean, reflect: true, attribute: "icon" }) private _showIcon = true; - @property() private _iconStyle: { [name: string]: string } = {}; + @internalProperty() private _iconStyle: { [name: string]: string } = {}; protected render(): TemplateResult { const stateObj = this.stateObj; diff --git a/src/components/ha-area-picker.ts b/src/components/ha-area-picker.ts index 77a86a6dae..0a12ecd0d8 100644 --- a/src/components/ha-area-picker.ts +++ b/src/components/ha-area-picker.ts @@ -12,6 +12,7 @@ import { html, LitElement, property, + internalProperty, TemplateResult, } from "lit-element"; import { fireEvent } from "../common/dom/fire_event"; @@ -61,7 +62,7 @@ const rowRenderer = ( @customElement("ha-area-picker") export class HaAreaPicker extends SubscribeMixin(LitElement) { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public label?: string; @@ -72,7 +73,7 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) { @property({ type: Boolean, attribute: "no-add" }) public noAdd?: boolean; - @property() private _opened?: boolean; + @internalProperty() private _opened?: boolean; public hassSubscribe(): UnsubscribeFunc[] { return [ diff --git a/src/components/ha-attributes.ts b/src/components/ha-attributes.ts index abef729cf6..a92d4912b6 100644 --- a/src/components/ha-attributes.ts +++ b/src/components/ha-attributes.ts @@ -17,7 +17,7 @@ let jsYamlPromise: Promise; class HaAttributes extends LitElement { @property() public stateObj?: HassEntity; - @property() public extraFilters?: string; + @property({ attribute: "extra-filters" }) public extraFilters?: string; protected render(): TemplateResult { if (!this.stateObj) { diff --git a/src/components/ha-button-menu.ts b/src/components/ha-button-menu.ts index 31f9105d93..2abf8d9625 100644 --- a/src/components/ha-button-menu.ts +++ b/src/components/ha-button-menu.ts @@ -10,7 +10,6 @@ import { } from "lit-element"; import "@material/mwc-button"; import "@material/mwc-menu"; -import "@material/mwc-list/mwc-list-item"; import type { Menu, Corner } from "@material/mwc-menu"; import "./ha-icon-button"; diff --git a/src/components/ha-camera-stream.ts b/src/components/ha-camera-stream.ts index 89d1330234..61b3d89d96 100644 --- a/src/components/ha-camera-stream.ts +++ b/src/components/ha-camera-stream.ts @@ -5,6 +5,7 @@ import { html, LitElement, property, + internalProperty, PropertyValues, TemplateResult, } from "lit-element"; @@ -22,17 +23,17 @@ type HLSModule = typeof import("hls.js"); @customElement("ha-camera-stream") class HaCameraStream extends LitElement { - @property() public hass?: HomeAssistant; + @property({ attribute: false }) public hass?: HomeAssistant; @property() public stateObj?: CameraEntity; @property({ type: Boolean }) public showControls = false; - @property() private _attached = false; + @internalProperty() private _attached = false; // We keep track if we should force MJPEG with a string // that way it automatically resets if we change entity. - @property() private _forceMJPEG: string | undefined = undefined; + @internalProperty() private _forceMJPEG: string | undefined = undefined; private _hlsPolyfillInstance?: Hls; diff --git a/src/components/ha-card.ts b/src/components/ha-card.ts index 9d48bca2cb..1c8fc43c97 100644 --- a/src/components/ha-card.ts +++ b/src/components/ha-card.ts @@ -9,7 +9,7 @@ import { } from "lit-element"; @customElement("ha-card") -class HaCard extends LitElement { +export class HaCard extends LitElement { @property() public header?: string; @property({ type: Boolean, reflect: true }) public outlined = false; @@ -19,7 +19,7 @@ class HaCard extends LitElement { :host { background: var( --ha-card-background, - var(--paper-card-background-color, white) + var(--card-background-color, white) ); border-radius: var(--ha-card-border-radius, 4px); box-shadow: var( diff --git a/src/components/ha-code-editor.ts b/src/components/ha-code-editor.ts index eee7214179..aac917e31a 100644 --- a/src/components/ha-code-editor.ts +++ b/src/components/ha-code-editor.ts @@ -2,6 +2,7 @@ import { Editor } from "codemirror"; import { customElement, property, + internalProperty, PropertyValues, UpdatingElement, } from "lit-element"; @@ -28,7 +29,7 @@ export class HaCodeEditor extends UpdatingElement { @property() public error = false; - @property() private _value = ""; + @internalProperty() private _value = ""; public set value(value: string) { this._value = value; diff --git a/src/components/ha-date-range-picker.ts b/src/components/ha-date-range-picker.ts index 3c9d2d70ec..c1deb1517f 100644 --- a/src/components/ha-date-range-picker.ts +++ b/src/components/ha-date-range-picker.ts @@ -25,7 +25,7 @@ export interface DateRangePickerRanges { @customElement("ha-date-range-picker") export class HaDateRangePicker extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public startDate!: Date; @@ -84,8 +84,7 @@ export class HaDateRangePicker extends LitElement { slot="ranges" class="date-range-ranges" .dir=${this._rtlDirection} - > - + ${Object.entries(this.ranges).map( ([name, dates]) => html` { + const percentage = getValueInPercentage(normalize(value, min, max), min, max); + return (percentage * 180) / 100; +}; + +const normalize = (value: number, min: number, max: number) => { + if (value > max) return max; + if (value < min) return min; + return value; +}; + +const getValueInPercentage = (value: number, min: number, max: number) => { + const newMax = max - min; + const newVal = value - min; + return (100 * newVal) / newMax; +}; + +@customElement("ha-gauge") +export class Gauge extends LitElement { + @property({ type: Number }) public min = 0; + + @property({ type: Number }) public max = 100; + + @property({ type: Number }) public value = 0; + + @property() public label = ""; + + @internalProperty() private _angle = 0; + + @internalProperty() private _updated = false; + + protected firstUpdated(changedProperties: PropertyValues) { + super.firstUpdated(changedProperties); + // Wait for the first render for the initial animation to work + afterNextRender(() => { + this._updated = true; + this._angle = getAngle(this.value, this.min, this.max); + this._rescale_svg(); + }); + } + + protected updated(changedProperties: PropertyValues) { + super.updated(changedProperties); + if (!this._updated || !changedProperties.has("value")) { + return; + } + this._angle = getAngle(this.value, this.min, this.max); + this._rescale_svg(); + } + + protected render() { + return svg` + + + + + + + ${this.value} ${this.label} + + `; + } + + private _rescale_svg() { + // Set the viewbox of the SVG containing the value to perfectly + // fit the text + // That way it will auto-scale correctly + const svgRoot = this.shadowRoot!.querySelector(".text")!; + const box = svgRoot.querySelector("text")!.getBBox()!; + svgRoot.setAttribute( + "viewBox", + `${box.x} ${box!.y} ${box.width} ${box.height}` + ); + } + + static get styles() { + return css` + :host { + position: relative; + } + .dial { + fill: none; + stroke: var(--primary-background-color); + stroke-width: 15; + } + .value { + fill: none; + stroke-width: 15; + stroke: var(--gauge-color); + transition: all 1000ms ease 0s; + transform-origin: 50% 100%; + } + .gauge { + display: block; + } + .text { + position: absolute; + max-height: 40%; + max-width: 55%; + left: 50%; + bottom: -6%; + transform: translate(-50%, 0%); + } + .value-text { + font-size: 50px; + fill: var(--primary-text-color); + text-anchor: middle; + } + `; + } +} diff --git a/src/components/ha-icon-button-arrow-next.ts b/src/components/ha-icon-button-arrow-next.ts index 150f5b4b2d..4d84add488 100644 --- a/src/components/ha-icon-button-arrow-next.ts +++ b/src/components/ha-icon-button-arrow-next.ts @@ -1,6 +1,7 @@ import { LitElement, property, + internalProperty, TemplateResult, html, customElement, @@ -13,7 +14,7 @@ import "./ha-svg-icon"; export class HaIconButtonArrowNext extends LitElement { @property({ type: Boolean }) public disabled = false; - @property() private _icon = mdiArrowRight; + @internalProperty() private _icon = mdiArrowRight; public connectedCallback() { super.connectedCallback(); diff --git a/src/components/ha-icon-button-arrow-prev.ts b/src/components/ha-icon-button-arrow-prev.ts index 06e97b290c..07c8265bb2 100644 --- a/src/components/ha-icon-button-arrow-prev.ts +++ b/src/components/ha-icon-button-arrow-prev.ts @@ -1,6 +1,7 @@ import { LitElement, property, + internalProperty, TemplateResult, html, customElement, @@ -13,7 +14,7 @@ import "./ha-svg-icon"; export class HaIconButtonArrowPrev extends LitElement { @property({ type: Boolean }) public disabled = false; - @property() private _icon = mdiArrowLeft; + @internalProperty() private _icon = mdiArrowLeft; public connectedCallback() { super.connectedCallback(); diff --git a/src/components/ha-icon-button-next.ts b/src/components/ha-icon-button-next.ts index 6e37d1c764..e328c4ff1e 100644 --- a/src/components/ha-icon-button-next.ts +++ b/src/components/ha-icon-button-next.ts @@ -1,6 +1,7 @@ import { LitElement, property, + internalProperty, TemplateResult, html, customElement, @@ -13,7 +14,7 @@ import "./ha-svg-icon"; export class HaIconButtonNext extends LitElement { @property({ type: Boolean }) public disabled = false; - @property() private _icon = mdiChevronRight; + @internalProperty() private _icon = mdiChevronRight; public connectedCallback() { super.connectedCallback(); diff --git a/src/components/ha-icon-button-prev.ts b/src/components/ha-icon-button-prev.ts index 7548004c02..077b5a03bf 100644 --- a/src/components/ha-icon-button-prev.ts +++ b/src/components/ha-icon-button-prev.ts @@ -1,6 +1,7 @@ import { LitElement, property, + internalProperty, TemplateResult, html, customElement, @@ -13,7 +14,7 @@ import "./ha-svg-icon"; export class HaIconButtonPrev extends LitElement { @property({ type: Boolean }) public disabled = false; - @property() private _icon = mdiChevronLeft; + @internalProperty() private _icon = mdiChevronLeft; public connectedCallback() { super.connectedCallback(); diff --git a/src/components/ha-icon.ts b/src/components/ha-icon.ts index c89b1d2f51..bd5092a806 100644 --- a/src/components/ha-icon.ts +++ b/src/components/ha-icon.ts @@ -3,6 +3,7 @@ import { customElement, LitElement, property, + internalProperty, PropertyValues, html, TemplateResult, @@ -88,7 +89,7 @@ const mdiRenameMapping = { "library-movie": "filmstrip-box-multiple", "library-music": "music-box-multiple", "library-music-outline": "music-box-multiple-outline", - "library-video": "play-box-mutiple", + "library-video": "play-box-multiple", markdown: "language-markdown", "markdown-outline": "language-markdown-outline", "message-settings-variant": "message-cog", @@ -150,6 +151,8 @@ const mdiRenameMapping = { "textbox-lock": "form-textbox-lock", "textbox-password": "form-textbox-password", "syllabary-katakana-half-width": "syllabary-katakana-halfwidth", + "visual-studio-code": "microsoft-visual-studio-code", + "visual-studio": "microsoft-visual-studio", }; const mdiRemovedIcons = new Set([ @@ -233,11 +236,11 @@ const cachedIcons: { [key: string]: string } = {}; export class HaIcon extends LitElement { @property() public icon?: string; - @property() private _path?: string; + @internalProperty() private _path?: string; - @property() private _viewBox?; + @internalProperty() private _viewBox?; - @property() private _legacy = false; + @internalProperty() private _legacy = false; protected updated(changedProps: PropertyValues) { if (changedProps.has("icon")) { diff --git a/src/components/ha-labeled-slider.js b/src/components/ha-labeled-slider.js index 9939db3d1b..ef49e80077 100644 --- a/src/components/ha-labeled-slider.js +++ b/src/components/ha-labeled-slider.js @@ -15,7 +15,7 @@ class HaLabeledSlider extends PolymerElement { .title { margin-bottom: 16px; - opacity: var(--dark-primary-opacity); + color: var(--secondary-text-color); } .slider-container { @@ -24,7 +24,7 @@ class HaLabeledSlider extends PolymerElement { ha-icon { margin-top: 4px; - opacity: var(--dark-secondary-opacity); + color: var(--secondary-text-color); } ha-paper-slider { diff --git a/src/components/ha-menu-button.ts b/src/components/ha-menu-button.ts index 985678b03b..7531c989d9 100644 --- a/src/components/ha-menu-button.ts +++ b/src/components/ha-menu-button.ts @@ -8,6 +8,7 @@ import { html, LitElement, property, + internalProperty, TemplateResult, } from "lit-element"; import { fireEvent } from "../common/dom/fire_event"; @@ -22,9 +23,9 @@ class HaMenuButton extends LitElement { @property() public narrow!: boolean; - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; - @property() private _hasNotifications = false; + @internalProperty() private _hasNotifications = false; private _alwaysVisible = false; diff --git a/src/components/ha-related-items.ts b/src/components/ha-related-items.ts index 3e4df6d4e5..35a24a8479 100644 --- a/src/components/ha-related-items.ts +++ b/src/components/ha-related-items.ts @@ -6,6 +6,7 @@ import { html, LitElement, property, + internalProperty, PropertyValues, TemplateResult, } from "lit-element"; @@ -27,19 +28,19 @@ import "./ha-switch"; @customElement("ha-related-items") export class HaRelatedItems extends SubscribeMixin(LitElement) { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public itemType!: ItemType; @property() public itemId!: string; - @property() private _entries?: ConfigEntry[]; + @internalProperty() private _entries?: ConfigEntry[]; - @property() private _devices?: DeviceRegistryEntry[]; + @internalProperty() private _devices?: DeviceRegistryEntry[]; - @property() private _areas?: AreaRegistryEntry[]; + @internalProperty() private _areas?: AreaRegistryEntry[]; - @property() private _related?: RelatedResult; + @internalProperty() private _related?: RelatedResult; public hassSubscribe(): UnsubscribeFunc[] { return [ @@ -96,7 +97,6 @@ export class HaRelatedItems extends SubscribeMixin(LitElement) { ${this.hass.localize(`component.${entry.domain}.title`)}: ${entry.title} @@ -116,10 +116,7 @@ export class HaRelatedItems extends SubscribeMixin(LitElement) {

${this.hass.localize("ui.components.related-items.device")}:

- + ${device.name_by_user || device.name} `; @@ -137,7 +134,9 @@ export class HaRelatedItems extends SubscribeMixin(LitElement) {

${this.hass.localize("ui.components.related-items.area")}:

- ${area.name} + + ${area.name} + `; }) : ""} @@ -290,10 +289,6 @@ export class HaRelatedItems extends SubscribeMixin(LitElement) { fireEvent(this, "hass-more-info", { entityId }); } - private _close() { - fireEvent(this, "close-dialog"); - } - static get styles(): CSSResult { return css` a { diff --git a/src/components/ha-sidebar.ts b/src/components/ha-sidebar.ts index 549b77c19f..41cfb119ca 100644 --- a/src/components/ha-sidebar.ts +++ b/src/components/ha-sidebar.ts @@ -18,6 +18,7 @@ import { customElement, LitElement, property, + internalProperty, PropertyValues, } from "lit-element"; import { classMap } from "lit-html/directives/class-map"; @@ -111,7 +112,7 @@ const computePanels = (hass: HomeAssistant): [PanelInfo[], PanelInfo[]] => { @customElement("ha-sidebar") class HaSidebar extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public narrow!: boolean; @@ -119,9 +120,9 @@ class HaSidebar extends LitElement { @property({ type: Boolean, reflect: true }) public expanded = false; - @property() private _externalConfig?: ExternalConfig; + @internalProperty() private _externalConfig?: ExternalConfig; - @property() private _notifications?: PersistentNotification[]; + @internalProperty() private _notifications?: PersistentNotification[]; // property used only in css // @ts-ignore diff --git a/src/components/ha-tab.ts b/src/components/ha-tab.ts index e58f820303..cc052052d9 100644 --- a/src/components/ha-tab.ts +++ b/src/components/ha-tab.ts @@ -4,10 +4,10 @@ import { customElement, LitElement, property, + internalProperty, TemplateResult, html, queryAsync, - internalProperty, eventOptions, } from "lit-element"; import "@material/mwc-ripple/mwc-ripple"; diff --git a/src/components/ha-yaml-editor.ts b/src/components/ha-yaml-editor.ts index e49c0bd043..83c909003b 100644 --- a/src/components/ha-yaml-editor.ts +++ b/src/components/ha-yaml-editor.ts @@ -4,6 +4,7 @@ import { html, LitElement, property, + internalProperty, query, TemplateResult, } from "lit-element"; @@ -41,7 +42,7 @@ export class HaYamlEditor extends LitElement { @property() public label?: string; - @property() private _yaml = ""; + @internalProperty() private _yaml = ""; @query("ha-code-editor") private _editor?: HaCodeEditor; diff --git a/src/components/map/ha-map.ts b/src/components/map/ha-map.ts index e39b636261..8d25d5011a 100644 --- a/src/components/map/ha-map.ts +++ b/src/components/map/ha-map.ts @@ -22,7 +22,7 @@ import { HomeAssistant } from "../../types"; @customElement("ha-map") class HaMap extends LitElement { - @property() public hass?: HomeAssistant; + @property({ attribute: false }) public hass?: HomeAssistant; @property() public entities?: string[]; diff --git a/src/data/config_flow.ts b/src/data/config_flow.ts index 983d6a52d0..a06f8f42ec 100644 --- a/src/data/config_flow.ts +++ b/src/data/config_flow.ts @@ -5,7 +5,13 @@ import { HomeAssistant } from "../types"; import { DataEntryFlowProgress, DataEntryFlowStep } from "./data_entry_flow"; import { domainToName } from "./integration"; -export const DISCOVERY_SOURCES = ["unignore", "homekit", "ssdp", "zeroconf", "discovery"]; +export const DISCOVERY_SOURCES = [ + "unignore", + "homekit", + "ssdp", + "zeroconf", + "discovery", +]; export const createConfigFlow = (hass: HomeAssistant, handler: string) => hass.callApi("POST", "config/config_entries/flow", { diff --git a/src/data/entity.ts b/src/data/entity.ts index 80f4e7c820..f8dc2efe42 100644 --- a/src/data/entity.ts +++ b/src/data/entity.ts @@ -17,7 +17,6 @@ export const ENTITY_COMPONENT_DOMAINS = [ "fan", "geo_location", "group", - "history_graph", "image_processing", "input_boolean", "input_datetime", diff --git a/src/data/ha-state-history-data.js b/src/data/ha-state-history-data.js deleted file mode 100644 index bcce4509f8..0000000000 --- a/src/data/ha-state-history-data.js +++ /dev/null @@ -1,178 +0,0 @@ -import { timeOut } from "@polymer/polymer/lib/utils/async"; -import { Debouncer } from "@polymer/polymer/lib/utils/debounce"; -/* eslint-plugin-disable lit */ -import { PolymerElement } from "@polymer/polymer/polymer-element"; -import LocalizeMixin from "../mixins/localize-mixin"; -import { getRecent, getRecentWithCache } from "./cached-history"; -import { computeHistory, fetchDate } from "./history"; - -/* - * @appliesMixin LocalizeMixin - */ -class HaStateHistoryData extends LocalizeMixin(PolymerElement) { - static get properties() { - return { - hass: { - type: Object, - observer: "hassChanged", - }, - - filterType: String, - - cacheConfig: Object, - - startTime: Date, - endTime: Date, - - entityId: String, - - isLoading: { - type: Boolean, - value: true, - readOnly: true, - notify: true, - }, - - data: { - type: Object, - value: null, - readOnly: true, - notify: true, - }, - }; - } - - static get observers() { - return [ - "filterChangedDebouncer(filterType, entityId, startTime, endTime, cacheConfig, localize)", - ]; - } - - connectedCallback() { - super.connectedCallback(); - this.filterChangedDebouncer( - this.filterType, - this.entityId, - this.startTime, - this.endTime, - this.cacheConfig, - this.localize - ); - } - - disconnectedCallback() { - if (this._refreshTimeoutId) { - window.clearInterval(this._refreshTimeoutId); - this._refreshTimeoutId = null; - } - super.disconnectedCallback(); - } - - hassChanged(newHass, oldHass) { - if (!oldHass && !this._madeFirstCall) { - this.filterChangedDebouncer( - this.filterType, - this.entityId, - this.startTime, - this.endTime, - this.cacheConfig, - this.localize - ); - } - } - - filterChangedDebouncer(...args) { - this._debounceFilterChanged = Debouncer.debounce( - this._debounceFilterChanged, - timeOut.after(0), - () => { - this.filterChanged(...args); - } - ); - } - - filterChanged( - filterType, - entityId, - startTime, - endTime, - cacheConfig, - localize - ) { - if (!this.hass) { - return; - } - if (cacheConfig && !cacheConfig.cacheKey) { - return; - } - if (!localize) { - return; - } - this._madeFirstCall = true; - const language = this.hass.language; - let data; - - if (filterType === "date") { - if (!startTime || !endTime) return; - - data = fetchDate(this.hass, startTime, endTime).then((dateHistory) => - computeHistory(this.hass, dateHistory, localize, language) - ); - } else if (filterType === "recent-entity") { - if (!entityId) return; - if (cacheConfig) { - data = this.getRecentWithCacheRefresh( - entityId, - cacheConfig, - localize, - language - ); - } else { - data = getRecent( - this.hass, - entityId, - startTime, - endTime, - localize, - language - ); - } - } else { - return; - } - this._setIsLoading(true); - - data.then((stateHistory) => { - this._setData(stateHistory); - this._setIsLoading(false); - }); - } - - getRecentWithCacheRefresh(entityId, cacheConfig, localize, language) { - if (this._refreshTimeoutId) { - window.clearInterval(this._refreshTimeoutId); - this._refreshTimeoutId = null; - } - if (cacheConfig.refresh) { - this._refreshTimeoutId = window.setInterval(() => { - getRecentWithCache( - this.hass, - entityId, - cacheConfig, - localize, - language - ).then((stateHistory) => { - this._setData({ ...stateHistory }); - }); - }, cacheConfig.refresh * 1000); - } - return getRecentWithCache( - this.hass, - entityId, - cacheConfig, - localize, - language - ); - } -} -customElements.define("ha-state-history-data", HaStateHistoryData); diff --git a/src/data/scene.ts b/src/data/scene.ts index c0245a4f24..6b029412c4 100644 --- a/src/data/scene.ts +++ b/src/data/scene.ts @@ -40,6 +40,7 @@ export interface SceneEntity extends HassEntityBase { export interface SceneConfig { name: string; + icon?: string; entities: SceneEntities; } diff --git a/src/data/script.ts b/src/data/script.ts index 5fdbbcfa46..2a2cf1912c 100644 --- a/src/data/script.ts +++ b/src/data/script.ts @@ -7,15 +7,22 @@ import { navigate } from "../common/navigate"; import { HomeAssistant } from "../types"; import { Condition } from "./automation"; +export const MODES = ["single", "restart", "queued", "parallel"]; +export const MODES_MAX = ["queued", "parallel"]; + export interface ScriptEntity extends HassEntityBase { attributes: HassEntityAttributeBase & { last_triggered: string; + mode: "single" | "restart" | "queued" | "parallel"; + current?: number; + max?: number; }; } export interface ScriptConfig { alias: string; sequence: Action[]; + icon?: string; mode?: "single" | "restart" | "queued" | "parallel"; max?: number; } @@ -66,6 +73,20 @@ export const triggerScript = ( variables?: {} ) => hass.callService("script", computeObjectId(entityId), variables); +export const canExcecute = (state: ScriptEntity) => { + if (state.state === "off") { + return true; + } + if ( + state.state === "on" && + MODES_MAX.includes(state.attributes.mode) && + state.attributes.current! < state.attributes.max! + ) { + return true; + } + return false; +}; + export const deleteScript = (hass: HomeAssistant, objectId: string) => hass.callApi("DELETE", `config/script/config/${objectId}`); diff --git a/src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts b/src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts index 915eb18556..a57abebb7d 100644 --- a/src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts +++ b/src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts @@ -7,6 +7,7 @@ import { html, LitElement, property, + internalProperty, TemplateResult, } from "lit-element"; import "../../components/dialog/ha-paper-dialog"; @@ -26,17 +27,17 @@ import { computeRTLDirection } from "../../common/util/compute_rtl"; @customElement("dialog-config-entry-system-options") class DialogConfigEntrySystemOptions extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; - @property() private _disableNewEntities!: boolean; + @internalProperty() private _disableNewEntities!: boolean; - @property() private _error?: string; + @internalProperty() private _error?: string; - @property() private _params?: ConfigEntrySystemOptionsDialogParams; + @internalProperty() private _params?: ConfigEntrySystemOptionsDialogParams; - @property() private _loading?: boolean; + @internalProperty() private _loading?: boolean; - @property() private _submitting?: boolean; + @internalProperty() private _submitting?: boolean; public async showDialog( params: ConfigEntrySystemOptionsDialogParams diff --git a/src/dialogs/config-flow/dialog-data-entry-flow.ts b/src/dialogs/config-flow/dialog-data-entry-flow.ts index 9ad6c60a4b..976a98d301 100644 --- a/src/dialogs/config-flow/dialog-data-entry-flow.ts +++ b/src/dialogs/config-flow/dialog-data-entry-flow.ts @@ -10,7 +10,7 @@ import { customElement, html, LitElement, - property, + internalProperty, PropertyValues, TemplateResult, } from "lit-element"; @@ -54,23 +54,23 @@ declare global { class DataEntryFlowDialog extends LitElement { public hass!: HomeAssistant; - @property() private _params?: DataEntryFlowDialogParams; + @internalProperty() private _params?: DataEntryFlowDialogParams; - @property() private _loading = true; + @internalProperty() private _loading = true; private _instance = instance; - @property() private _step: + @internalProperty() private _step: | DataEntryFlowStep | undefined // Null means we need to pick a config flow | null; - @property() private _devices?: DeviceRegistryEntry[]; + @internalProperty() private _devices?: DeviceRegistryEntry[]; - @property() private _areas?: AreaRegistryEntry[]; + @internalProperty() private _areas?: AreaRegistryEntry[]; - @property() private _handlers?: string[]; + @internalProperty() private _handlers?: string[]; private _unsubAreas?: UnsubscribeFunc; diff --git a/src/dialogs/config-flow/step-flow-pick-handler.ts b/src/dialogs/config-flow/step-flow-pick-handler.ts index 930b067b17..c875a58218 100644 --- a/src/dialogs/config-flow/step-flow-pick-handler.ts +++ b/src/dialogs/config-flow/step-flow-pick-handler.ts @@ -8,6 +8,7 @@ import { html, LitElement, property, + internalProperty, TemplateResult, } from "lit-element"; import { classMap } from "lit-html/directives/class-map"; @@ -31,13 +32,13 @@ interface HandlerObj { class StepFlowPickHandler extends LitElement { public flowConfig!: FlowConfig; - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public handlers!: string[]; @property() public showAdvanced?: boolean; - @property() private filter?: string; + @internalProperty() private filter?: string; private _width?: number; diff --git a/src/dialogs/device-registry-detail/dialog-device-registry-detail.ts b/src/dialogs/device-registry-detail/dialog-device-registry-detail.ts index 9386b900d9..f949d810db 100644 --- a/src/dialogs/device-registry-detail/dialog-device-registry-detail.ts +++ b/src/dialogs/device-registry-detail/dialog-device-registry-detail.ts @@ -11,6 +11,7 @@ import { html, LitElement, property, + internalProperty, TemplateResult, } from "lit-element"; import "../../components/dialog/ha-paper-dialog"; @@ -23,15 +24,15 @@ import { DeviceRegistryDetailDialogParams } from "./show-dialog-device-registry- @customElement("dialog-device-registry-detail") class DialogDeviceRegistryDetail extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; - @property() private _nameByUser!: string; + @internalProperty() private _nameByUser!: string; - @property() private _error?: string; + @internalProperty() private _error?: string; - @property() private _params?: DeviceRegistryDetailDialogParams; + @internalProperty() private _params?: DeviceRegistryDetailDialogParams; - @property() private _areaId?: string; + @internalProperty() private _areaId?: string; private _submitting?: boolean; diff --git a/src/dialogs/domain-toggler/dialog-domain-toggler.ts b/src/dialogs/domain-toggler/dialog-domain-toggler.ts index d3b7e7a06a..326fb40c01 100644 --- a/src/dialogs/domain-toggler/dialog-domain-toggler.ts +++ b/src/dialogs/domain-toggler/dialog-domain-toggler.ts @@ -5,7 +5,7 @@ import { customElement, html, LitElement, - property, + internalProperty, TemplateResult, } from "lit-element"; import "../../components/dialog/ha-paper-dialog"; @@ -19,7 +19,7 @@ import { HaDomainTogglerDialogParams } from "./show-dialog-domain-toggler"; class DomainTogglerDialog extends LitElement { public hass!: HomeAssistant; - @property() private _params?: HaDomainTogglerDialogParams; + @internalProperty() private _params?: HaDomainTogglerDialogParams; public async showDialog(params: HaDomainTogglerDialogParams): Promise { this._params = params; diff --git a/src/dialogs/generic/dialog-box.ts b/src/dialogs/generic/dialog-box.ts index d0511b22df..0663b6bfe7 100644 --- a/src/dialogs/generic/dialog-box.ts +++ b/src/dialogs/generic/dialog-box.ts @@ -7,6 +7,7 @@ import { html, LitElement, property, + internalProperty, TemplateResult, } from "lit-element"; import { classMap } from "lit-html/directives/class-map"; @@ -20,11 +21,11 @@ import { fireEvent } from "../../common/dom/fire_event"; @customElement("dialog-box") class DialogBox extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; - @property() private _params?: DialogParams; + @internalProperty() private _params?: DialogParams; - @property() private _value?: string; + @internalProperty() private _value?: string; public async showDialog(params: DialogParams): Promise { this._params = params; diff --git a/src/dialogs/make-dialog-manager.ts b/src/dialogs/make-dialog-manager.ts index 5baf4d3e65..7e975ca204 100644 --- a/src/dialogs/make-dialog-manager.ts +++ b/src/dialogs/make-dialog-manager.ts @@ -15,7 +15,8 @@ declare global { } } -interface HassDialog extends HTMLElement { +export interface HassDialog + extends HTMLElement { showDialog(params: T); closeDialog?: () => boolean | void; } diff --git a/src/dialogs/more-info/controls/more-info-automation.ts b/src/dialogs/more-info/controls/more-info-automation.ts index 7e2651ec24..8a25e93fe4 100644 --- a/src/dialogs/more-info/controls/more-info-automation.ts +++ b/src/dialogs/more-info/controls/more-info-automation.ts @@ -15,7 +15,7 @@ import { HomeAssistant } from "../../../types"; @customElement("more-info-automation") class MoreInfoAutomation extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public stateObj?: HassEntity; diff --git a/src/dialogs/more-info/controls/more-info-camera.ts b/src/dialogs/more-info/controls/more-info-camera.ts index 55623f58d5..d990cf25a0 100644 --- a/src/dialogs/more-info/controls/more-info-camera.ts +++ b/src/dialogs/more-info/controls/more-info-camera.ts @@ -6,6 +6,7 @@ import { html, LitElement, property, + internalProperty, PropertyValues, TemplateResult, } from "lit-element"; @@ -20,13 +21,13 @@ import { import type { CameraEntity, HomeAssistant } from "../../../types"; class MoreInfoCamera extends LitElement { - @property() public hass?: HomeAssistant; + @property({ attribute: false }) public hass?: HomeAssistant; @property() public stateObj?: CameraEntity; - @property() private _cameraPrefs?: CameraPreferences; + @internalProperty() private _cameraPrefs?: CameraPreferences; - @property() private _attached = false; + @internalProperty() private _attached = false; public connectedCallback() { super.connectedCallback(); diff --git a/src/dialogs/more-info/controls/more-info-climate.ts b/src/dialogs/more-info/controls/more-info-climate.ts index c093944d62..e0436cea81 100644 --- a/src/dialogs/more-info/controls/more-info-climate.ts +++ b/src/dialogs/more-info/controls/more-info-climate.ts @@ -32,7 +32,7 @@ import { import { HomeAssistant } from "../../../types"; class MoreInfoClimate extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public stateObj?: ClimateEntity; diff --git a/src/dialogs/more-info/controls/more-info-counter.ts b/src/dialogs/more-info/controls/more-info-counter.ts index 2ec001a01a..7be5eb5ab6 100644 --- a/src/dialogs/more-info/controls/more-info-counter.ts +++ b/src/dialogs/more-info/controls/more-info-counter.ts @@ -13,7 +13,7 @@ import { HomeAssistant } from "../../../types"; @customElement("more-info-counter") class MoreInfoCounter extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public stateObj?: HassEntity; diff --git a/src/dialogs/more-info/controls/more-info-default.ts b/src/dialogs/more-info/controls/more-info-default.ts index c9a3c49d71..443b39ed43 100644 --- a/src/dialogs/more-info/controls/more-info-default.ts +++ b/src/dialogs/more-info/controls/more-info-default.ts @@ -11,7 +11,7 @@ import { HomeAssistant } from "../../../types"; @customElement("more-info-default") class MoreInfoDefault extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public stateObj?: HassEntity; diff --git a/src/dialogs/more-info/controls/more-info-history_graph.js b/src/dialogs/more-info/controls/more-info-history_graph.js deleted file mode 100644 index febd00b62f..0000000000 --- a/src/dialogs/more-info/controls/more-info-history_graph.js +++ /dev/null @@ -1,33 +0,0 @@ -import { html } from "@polymer/polymer/lib/utils/html-tag"; -/* eslint-plugin-disable lit */ -import { PolymerElement } from "@polymer/polymer/polymer-element"; -import "../../../cards/ha-history_graph-card"; -import "../../../components/ha-attributes"; - -class MoreInfoHistoryGraph extends PolymerElement { - static get template() { - return html` - - - - - `; - } - - static get properties() { - return { - hass: Object, - stateObj: Object, - }; - } -} -customElements.define("more-info-history_graph", MoreInfoHistoryGraph); diff --git a/src/dialogs/more-info/controls/more-info-humidifier.ts b/src/dialogs/more-info/controls/more-info-humidifier.ts index 6a3bbc1aad..bfb4642a4a 100644 --- a/src/dialogs/more-info/controls/more-info-humidifier.ts +++ b/src/dialogs/more-info/controls/more-info-humidifier.ts @@ -24,7 +24,7 @@ import { import { HomeAssistant } from "../../../types"; class MoreInfoHumidifier extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public stateObj?: HumidifierEntity; diff --git a/src/dialogs/more-info/controls/more-info-light.js b/src/dialogs/more-info/controls/more-info-light.js index f961c9c6a8..860e3c5454 100644 --- a/src/dialogs/more-info/controls/more-info-light.js +++ b/src/dialogs/more-info/controls/more-info-light.js @@ -68,26 +68,15 @@ class MoreInfoLight extends LocalizeMixin(EventsMixin(PolymerElement)) { } .segmentationButton { + display: none; position: absolute; - top: 11%; + top: 5%; transform: translate(0%, 0%); - padding: 0px; - max-height: 0px; - width: 23px; - height: 23px; - opacity: var(--dark-secondary-opacity); - overflow: hidden; - transition: max-height 0.5s ease-in; + color: var(--secondary-text-color); } - .has-color.is-on .segmentationContainer .segmentationButton { - position: absolute; - top: 11%; - transform: translate(0%, 0%); - width: 23px; - height: 23px; - padding: 0px; - opacity: var(--dark-secondary-opacity); + .has-color.is-on .segmentationButton { + display: inline-block; } .has-effect_list.is-on .effect_list, @@ -108,11 +97,6 @@ class MoreInfoLight extends LocalizeMixin(EventsMixin(PolymerElement)) { padding-top: 16px; } - .has-color.is-on .segmentationButton { - max-height: 100px; - overflow: visible; - } - .has-color.is-on ha-color-picker { max-height: 500px; overflow: visible; @@ -189,7 +173,7 @@ class MoreInfoLight extends LocalizeMixin(EventsMixin(PolymerElement)) {
@@ -217,7 +201,7 @@ class MoreInfoLight extends LocalizeMixin(EventsMixin(PolymerElement)) { `; diff --git a/src/dialogs/more-info/controls/more-info-person.ts b/src/dialogs/more-info/controls/more-info-person.ts index 31def98ccf..ef8b3f803b 100644 --- a/src/dialogs/more-info/controls/more-info-person.ts +++ b/src/dialogs/more-info/controls/more-info-person.ts @@ -18,7 +18,7 @@ import { HomeAssistant } from "../../../types"; @customElement("more-info-person") class MoreInfoPerson extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public stateObj?: HassEntity; diff --git a/src/dialogs/more-info/controls/more-info-script.ts b/src/dialogs/more-info/controls/more-info-script.ts index 83d7ccd31e..735d41429f 100644 --- a/src/dialogs/more-info/controls/more-info-script.ts +++ b/src/dialogs/more-info/controls/more-info-script.ts @@ -11,7 +11,7 @@ import { HomeAssistant } from "../../../types"; @customElement("more-info-script") class MoreInfoScript extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public stateObj?: HassEntity; diff --git a/src/dialogs/more-info/controls/more-info-sun.ts b/src/dialogs/more-info/controls/more-info-sun.ts index 10b832f260..a611e521cf 100644 --- a/src/dialogs/more-info/controls/more-info-sun.ts +++ b/src/dialogs/more-info/controls/more-info-sun.ts @@ -14,7 +14,7 @@ import { HomeAssistant } from "../../../types"; @customElement("more-info-sun") class MoreInfoSun extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public stateObj?: HassEntity; diff --git a/src/dialogs/more-info/controls/more-info-timer.ts b/src/dialogs/more-info/controls/more-info-timer.ts index 4a1dbeb40a..809d697c70 100644 --- a/src/dialogs/more-info/controls/more-info-timer.ts +++ b/src/dialogs/more-info/controls/more-info-timer.ts @@ -14,7 +14,7 @@ import { HomeAssistant } from "../../../types"; @customElement("more-info-timer") class MoreInfoTimer extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public stateObj?: TimerEntity; diff --git a/src/dialogs/more-info/controls/more-info-vacuum.ts b/src/dialogs/more-info/controls/more-info-vacuum.ts index d39786ae7f..0c131333f1 100644 --- a/src/dialogs/more-info/controls/more-info-vacuum.ts +++ b/src/dialogs/more-info/controls/more-info-vacuum.ts @@ -90,7 +90,7 @@ const VACUUM_COMMANDS: VacuumCommand[] = [ @customElement("more-info-vacuum") class MoreInfoVacuum extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public stateObj?: VacuumEntity; diff --git a/src/dialogs/more-info/controls/more-info-weather.ts b/src/dialogs/more-info/controls/more-info-weather.ts index 0019a83b43..8d7a4ca5f3 100644 --- a/src/dialogs/more-info/controls/more-info-weather.ts +++ b/src/dialogs/more-info/controls/more-info-weather.ts @@ -51,7 +51,7 @@ const weatherIcons = { @customElement("more-info-weather") class MoreInfoWeather extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public stateObj?: HassEntity; diff --git a/src/dialogs/more-info/ha-more-info-dialog.ts b/src/dialogs/more-info/ha-more-info-dialog.ts index 2ce4617e80..06d5a1289c 100644 --- a/src/dialogs/more-info/ha-more-info-dialog.ts +++ b/src/dialogs/more-info/ha-more-info-dialog.ts @@ -18,9 +18,9 @@ import { customElement, LitElement, property, + internalProperty, css, html, - internalProperty, } from "lit-element"; import { haStyleDialog } from "../../resources/styles"; import { HomeAssistant } from "../../types"; @@ -29,7 +29,7 @@ import { computeDomain } from "../../common/entity/compute_domain"; import { mdiClose, mdiCog, mdiPencil } from "@mdi/js"; import { HistoryResult } from "../../data/history"; -const DOMAINS_NO_INFO = ["camera", "configurator", "history_graph"]; +const DOMAINS_NO_INFO = ["camera", "configurator"]; const EDITABLE_DOMAINS_WITH_ID = ["scene", "automation"]; const EDITABLE_DOMAINS = ["script"]; @@ -39,7 +39,7 @@ export interface MoreInfoDialogParams { @customElement("ha-more-info-dialog") export class MoreInfoDialog extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property({ type: Boolean, reflect: true }) public large = false; @@ -156,14 +156,16 @@ export class MoreInfoDialog extends LitElement { > ${stateObj.attributes.restored - ? html`${this.hass.localize( - "ui.dialogs.more_info_control.restored.not_provided" - )} -
- ${this.hass.localize( - "ui.dialogs.more_info_control.restored.remove_intro" - )} -
+ ? html`

+ ${this.hass.localize( + "ui.dialogs.more_info_control.restored.not_provided" + )} +

+

+ ${this.hass.localize( + "ui.dialogs.more_info_control.restored.remove_intro" + )} +

${this.hass.localize( "ui.dialogs.more_info_control.restored.remove_action" @@ -246,6 +248,7 @@ export class MoreInfoDialog extends LitElement { haStyleDialog, css` ha-dialog { + --dialog-surface-position: static; --dialog-content-position: static; } @@ -270,39 +273,44 @@ export class MoreInfoDialog extends LitElement { --mdc-dialog-max-width: 90vw; } - ha-dialog:not([data-domain="camera"]) app-toolbar { - max-width: 368px; - } - .content { width: 352px; } + ha-header-bar { + width: 400px; + } + .main-title { + overflow: hidden; + text-overflow: ellipsis; cursor: default; } - ha-dialog[data-domain="camera"] .content { + ha-dialog[data-domain="camera"] .content, + ha-dialog[data-domain="camera"] ha-header-bar { width: auto; } - ha-dialog[data-domain="history_graph"] .content, :host([large]) .content { width: calc(90vw - 48px); } - :host([large]) app-toolbar { - max-width: calc(90vw - 32px); + :host([large]) ha-dialog[data-domain="camera"] .content, + :host([large]) ha-header-bar { + width: 90vw; } } - state-history-charts { - margin-top: 16px 0; - } - ha-dialog[data-domain="camera"] { --dialog-content-padding: 0; } + + state-card-content, + state-history-charts { + display: block; + margin-bottom: 16px; + } `, ]; } diff --git a/src/dialogs/more-info/more-info-content.ts b/src/dialogs/more-info/more-info-content.ts index ceee8e630f..369d9e8d4f 100644 --- a/src/dialogs/more-info/more-info-content.ts +++ b/src/dialogs/more-info/more-info-content.ts @@ -13,7 +13,6 @@ import "./controls/more-info-cover"; import "./controls/more-info-default"; import "./controls/more-info-fan"; import "./controls/more-info-group"; -import "./controls/more-info-history_graph"; import "./controls/more-info-humidifier"; import "./controls/more-info-input_datetime"; import "./controls/more-info-light"; @@ -28,7 +27,7 @@ import "./controls/more-info-water_heater"; import "./controls/more-info-weather"; class MoreInfoContent extends UpdatingElement { - @property() public hass?: HomeAssistant; + @property({ attribute: false }) public hass?: HomeAssistant; @property() public stateObj?: HassEntity; diff --git a/src/dialogs/notifications/configurator-notification-item.ts b/src/dialogs/notifications/configurator-notification-item.ts index 296ead9767..a29f1db335 100644 --- a/src/dialogs/notifications/configurator-notification-item.ts +++ b/src/dialogs/notifications/configurator-notification-item.ts @@ -15,7 +15,7 @@ import "./notification-item-template"; @customElement("configurator-notification-item") export class HuiConfiguratorNotificationItem extends LitElement { - @property() public hass?: HomeAssistant; + @property({ attribute: false }) public hass?: HomeAssistant; @property() public notification?: PersitentNotificationEntity; diff --git a/src/dialogs/notifications/notification-item.ts b/src/dialogs/notifications/notification-item.ts index f540571965..41207b1db4 100644 --- a/src/dialogs/notifications/notification-item.ts +++ b/src/dialogs/notifications/notification-item.ts @@ -14,7 +14,7 @@ import "./persistent-notification-item"; @customElement("notification-item") export class HuiNotificationItem extends LitElement { - @property() public hass?: HomeAssistant; + @property({ attribute: false }) public hass?: HomeAssistant; @property() public notification?: HassEntity | PersistentNotification; diff --git a/src/dialogs/notifications/persistent-notification-item.ts b/src/dialogs/notifications/persistent-notification-item.ts index fa705a3900..a8f2a20777 100644 --- a/src/dialogs/notifications/persistent-notification-item.ts +++ b/src/dialogs/notifications/persistent-notification-item.ts @@ -17,7 +17,7 @@ import "./notification-item-template"; @customElement("persistent-notification-item") export class HuiPersistentNotificationItem extends LitElement { - @property() public hass?: HomeAssistant; + @property({ attribute: false }) public hass?: HomeAssistant; @property() public notification?: PersistentNotification; diff --git a/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts b/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts index 4b57035a8a..226bebba07 100644 --- a/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts +++ b/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts @@ -10,6 +10,7 @@ import { html, LitElement, property, + internalProperty, PropertyValues, query, TemplateResult, @@ -41,20 +42,20 @@ interface Results { @customElement("ha-voice-command-dialog") export class HaVoiceCommandDialog extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public results: Results | null = null; - @property() private _conversation: Message[] = [ + @internalProperty() private _conversation: Message[] = [ { who: "hass", text: "", }, ]; - @property() private _opened = false; + @internalProperty() private _opened = false; - @property() private _agentInfo?: AgentInfo; + @internalProperty() private _agentInfo?: AgentInfo; @query("#messages") private messages!: PaperDialogScrollableElement; diff --git a/src/entrypoints/app.ts b/src/entrypoints/app.ts index 934affb498..bb4b54b6e7 100644 --- a/src/entrypoints/app.ts +++ b/src/entrypoints/app.ts @@ -5,8 +5,6 @@ import "../layouts/home-assistant"; import "../util/legacy-support"; setPassiveTouchGestures(true); -/* LastPass createElement workaround. See #428 */ -document.createElement = Document.prototype.createElement; (window as any).frontendVersion = __VERSION__; diff --git a/src/layouts/hass-error-screen.ts b/src/layouts/hass-error-screen.ts index f8838eff85..eab453b29e 100644 --- a/src/layouts/hass-error-screen.ts +++ b/src/layouts/hass-error-screen.ts @@ -12,29 +12,56 @@ import "./hass-subpage"; @customElement("hass-error-screen") class HassErrorScreen extends LitElement { - @property() - public error?: string; + @property({ type: Boolean }) public toolbar = true; + + @property() public error?: string; protected render(): TemplateResult { return html` - -
-

${this.error}

- - go back - -
- + ${this.toolbar + ? html`
+ +
` + : ""} +
+

${this.error}

+ + go back + +
`; } - private _backTapped(): void { + private _handleBack(): void { history.back(); } static get styles(): CSSResultArray { return [ css` + :host { + display: block; + height: 100%; + background-color: var(--primary-background-color); + } + .toolbar { + display: flex; + align-items: center; + font-size: 20px; + height: 65px; + padding: 0 16px; + pointer-events: none; + background-color: var(--app-header-background-color); + font-weight: 400; + color: var(--app-header-text-color, white); + border-bottom: var(--app-header-border-bottom, none); + box-sizing: border-box; + } + ha-icon-button-arrow-prev { + pointer-events: auto; + } .content { height: calc(100% - 64px); display: flex; diff --git a/src/layouts/hass-loading-screen.ts b/src/layouts/hass-loading-screen.ts index 83021927d9..f0b01c96b1 100644 --- a/src/layouts/hass-loading-screen.ts +++ b/src/layouts/hass-loading-screen.ts @@ -16,28 +16,33 @@ import { HomeAssistant } from "../types"; @customElement("hass-loading-screen") class HassLoadingScreen extends LitElement { - @property({ type: Boolean }) public rootnav? = false; + @property({ type: Boolean, attribute: "no-toolbar" }) + public noToolbar = false; - @property() public hass?: HomeAssistant; + @property({ type: Boolean }) public rootnav = false; + + @property({ attribute: false }) public hass?: HomeAssistant; @property() public narrow?: boolean; protected render(): TemplateResult { return html` - - ${this.rootnav - ? html` - - ` - : html` - - `} - + ${this.noToolbar + ? "" + : html`
+ ${this.rootnav + ? html` + + ` + : html` + + `} +
`}
@@ -57,6 +62,23 @@ class HassLoadingScreen extends LitElement { height: 100%; background-color: var(--primary-background-color); } + .toolbar { + display: flex; + align-items: center; + font-size: 20px; + height: 65px; + padding: 0 16px; + pointer-events: none; + background-color: var(--app-header-background-color); + font-weight: 400; + color: var(--app-header-text-color, white); + border-bottom: var(--app-header-border-bottom, none); + box-sizing: border-box; + } + ha-menu-button, + ha-icon-button-arrow-prev { + pointer-events: auto; + } .content { height: calc(100% - 64px); display: flex; diff --git a/src/layouts/hass-router-page.ts b/src/layouts/hass-router-page.ts index d463b86ca6..450e331a73 100644 --- a/src/layouts/hass-router-page.ts +++ b/src/layouts/hass-router-page.ts @@ -169,9 +169,9 @@ export class HassRouterPage extends UpdatingElement { } // Show error screen - const errorEl = document.createElement("hass-error-screen"); - errorEl.error = `Error while loading page ${newPage}.`; - this.appendChild(errorEl); + this.appendChild( + this.createErrorScreen(`Error while loading page ${newPage}.`) + ); }); // If we don't show loading screen, just show the panel. @@ -252,6 +252,12 @@ export class HassRouterPage extends UpdatingElement { return document.createElement("hass-loading-screen"); } + protected createErrorScreen(error: string) { + const errorEl = document.createElement("hass-error-screen"); + errorEl.error = error; + return errorEl; + } + /** * Rebuild the current panel. * diff --git a/src/layouts/hass-subpage.ts b/src/layouts/hass-subpage.ts index 4eb7a3153e..2039b7654f 100644 --- a/src/layouts/hass-subpage.ts +++ b/src/layouts/hass-subpage.ts @@ -36,7 +36,7 @@ class HassSubpage extends LitElement { class=${classMap({ hidden: !this.showBackButton })} > -
${this.header}
+
${this.header}
@@ -74,7 +74,6 @@ class HassSubpage extends LitElement { box-sizing: border-box; } - ha-menu-button, ha-icon-button-arrow-prev, ::slotted([slot="toolbar-icon"]) { pointer-events: auto; @@ -84,7 +83,7 @@ class HassSubpage extends LitElement { visibility: hidden; } - [main-title] { + .main-title { margin: 0 0 0 24px; line-height: 20px; flex-grow: 1; diff --git a/src/layouts/hass-tabs-subpage-data-table.ts b/src/layouts/hass-tabs-subpage-data-table.ts index b504b29947..e5e497d054 100644 --- a/src/layouts/hass-tabs-subpage-data-table.ts +++ b/src/layouts/hass-tabs-subpage-data-table.ts @@ -24,7 +24,7 @@ import { computeRTLDirection } from "../common/util/compute_rtl"; @customElement("hass-tabs-subpage-data-table") export class HaTabsSubpageDataTable extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public isWide!: boolean; diff --git a/src/layouts/hass-tabs-subpage.ts b/src/layouts/hass-tabs-subpage.ts index ebb3a8e4b8..44cdf6a4d6 100644 --- a/src/layouts/hass-tabs-subpage.ts +++ b/src/layouts/hass-tabs-subpage.ts @@ -6,6 +6,7 @@ import { html, LitElement, property, + internalProperty, PropertyValues, TemplateResult, eventOptions, @@ -36,7 +37,7 @@ export interface PageNavigation { @customElement("hass-tabs-subpage") class HassTabsSubpage extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property({ type: Boolean }) public hassio = false; @@ -52,7 +53,7 @@ class HassTabsSubpage extends LitElement { @property({ type: Boolean, reflect: true }) public narrow = false; - @property() private _activeTab?: PageNavigation; + @internalProperty() private _activeTab?: PageNavigation; // @ts-ignore @restoreScroll(".content") private _savedScrollPos?: number; diff --git a/src/layouts/home-assistant-main.ts b/src/layouts/home-assistant-main.ts index 5055c7d258..589f6208b5 100644 --- a/src/layouts/home-assistant-main.ts +++ b/src/layouts/home-assistant-main.ts @@ -31,7 +31,7 @@ declare global { @customElement("home-assistant-main") class HomeAssistantMain extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public route?: Route; diff --git a/src/layouts/home-assistant.ts b/src/layouts/home-assistant.ts index d4ea24beab..b1f95abd52 100644 --- a/src/layouts/home-assistant.ts +++ b/src/layouts/home-assistant.ts @@ -1,5 +1,10 @@ import "@polymer/app-route/app-location"; -import { html, property, PropertyValues, customElement } from "lit-element"; +import { + html, + internalProperty, + PropertyValues, + customElement, +} from "lit-element"; import { navigate } from "../common/navigate"; import { getStorageDefaultPanelUrlPath } from "../data/panel"; import "../resources/custom-card-support"; @@ -15,11 +20,11 @@ import { storeState } from "../util/ha-pref-storage"; @customElement("home-assistant") export class HomeAssistantAppEl extends HassElement { - @property() private _route?: Route; + @internalProperty() private _route?: Route; - @property() private _error = false; + @internalProperty() private _error = false; - @property() private _panelUrl?: string; + @internalProperty() private _panelUrl?: string; private _haVersion?: string; diff --git a/src/layouts/loading-screen.ts b/src/layouts/loading-screen.ts deleted file mode 100644 index 5d0270c261..0000000000 --- a/src/layouts/loading-screen.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { - css, - CSSResult, - customElement, - html, - LitElement, - TemplateResult, -} from "lit-element"; -import "../components/ha-circular-progress"; - -@customElement("loading-screen") -class LoadingScreen extends LitElement { - protected render(): TemplateResult { - return html` `; - } - - static get styles(): CSSResult { - return css` - :host { - height: 100%; - display: flex; - align-items: center; - justify-content: center; - } - `; - } -} - -declare global { - interface HTMLElementTagNameMap { - "loading-screen": LoadingScreen; - } -} diff --git a/src/layouts/partial-panel-resolver.ts b/src/layouts/partial-panel-resolver.ts index 0d9838cb19..280a32eb16 100644 --- a/src/layouts/partial-panel-resolver.ts +++ b/src/layouts/partial-panel-resolver.ts @@ -87,7 +87,7 @@ const getRoutes = (panels: Panels): RouterOptions => { @customElement("partial-panel-resolver") class PartialPanelResolver extends HassRouterPage { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public narrow?: boolean; diff --git a/src/managers/notification-manager.ts b/src/managers/notification-manager.ts index 1607fadc20..2e4bed3c13 100644 --- a/src/managers/notification-manager.ts +++ b/src/managers/notification-manager.ts @@ -5,6 +5,7 @@ import { html, LitElement, property, + internalProperty, query, TemplateResult, } from "lit-element"; @@ -26,11 +27,11 @@ export interface ToastActionParams { } class NotificationManager extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; - @property() private _action?: ToastActionParams; + @internalProperty() private _action?: ToastActionParams; - @property() private _noCancelOnOutsideClick = false; + @internalProperty() private _noCancelOnOutsideClick = false; @query("ha-toast") private _toast!: HaToast; diff --git a/src/mixins/subscribe-mixin.ts b/src/mixins/subscribe-mixin.ts index 466e945af3..88c54eaf3c 100644 --- a/src/mixins/subscribe-mixin.ts +++ b/src/mixins/subscribe-mixin.ts @@ -10,7 +10,7 @@ export const SubscribeMixin = >( superClass: T ) => { class SubscribeClass extends superClass { - @property() public hass?: HomeAssistant; + @property({ attribute: false }) public hass?: HomeAssistant; private __unsubs?: Array>; diff --git a/src/onboarding/ha-onboarding.ts b/src/onboarding/ha-onboarding.ts index 3dfc002f02..cdd1a3af02 100644 --- a/src/onboarding/ha-onboarding.ts +++ b/src/onboarding/ha-onboarding.ts @@ -9,6 +9,7 @@ import { customElement, html, property, + internalProperty, PropertyValues, TemplateResult, } from "lit-element"; @@ -55,13 +56,13 @@ declare global { @customElement("ha-onboarding") class HaOnboarding extends litLocalizeLiteMixin(HassElement) { - @property() public hass?: HomeAssistant; + @property({ attribute: false }) public hass?: HomeAssistant; public translationFragment = "page-onboarding"; - @property() private _loading = false; + @internalProperty() private _loading = false; - @property() private _steps?: OnboardingStep[]; + @internalProperty() private _steps?: OnboardingStep[]; protected render(): TemplateResult { const step = this._curStep()!; diff --git a/src/onboarding/onboarding-core-config.ts b/src/onboarding/onboarding-core-config.ts index 0f69b3c03b..4b72d0d8e6 100644 --- a/src/onboarding/onboarding-core-config.ts +++ b/src/onboarding/onboarding-core-config.ts @@ -10,6 +10,7 @@ import { html, LitElement, property, + internalProperty, TemplateResult, } from "lit-element"; import { fireEvent } from "../common/dom/fire_event"; @@ -29,21 +30,21 @@ const amsterdam = [52.3731339, 4.8903147]; @customElement("onboarding-core-config") class OnboardingCoreConfig extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public onboardingLocalize!: LocalizeFunc; - @property() private _working = false; + @internalProperty() private _working = false; - @property() private _name!: ConfigUpdateValues["location_name"]; + @internalProperty() private _name!: ConfigUpdateValues["location_name"]; - @property() private _location!: [number, number]; + @internalProperty() private _location!: [number, number]; - @property() private _elevation!: string; + @internalProperty() private _elevation!: string; - @property() private _unitSystem!: ConfigUpdateValues["unit_system"]; + @internalProperty() private _unitSystem!: ConfigUpdateValues["unit_system"]; - @property() private _timeZone!: string; + @internalProperty() private _timeZone!: string; protected render(): TemplateResult { return html` diff --git a/src/onboarding/onboarding-create-user.ts b/src/onboarding/onboarding-create-user.ts index c1b6d16149..d12fcd97ce 100644 --- a/src/onboarding/onboarding-create-user.ts +++ b/src/onboarding/onboarding-create-user.ts @@ -8,6 +8,7 @@ import { html, LitElement, property, + internalProperty, PropertyValues, TemplateResult, } from "lit-element"; @@ -22,17 +23,17 @@ class OnboardingCreateUser extends LitElement { @property() public language!: string; - @property() private _name = ""; + @internalProperty() private _name = ""; - @property() private _username = ""; + @internalProperty() private _username = ""; - @property() private _password = ""; + @internalProperty() private _password = ""; - @property() private _passwordConfirm = ""; + @internalProperty() private _passwordConfirm = ""; - @property() private _loading = false; + @internalProperty() private _loading = false; - @property() private _errorMsg?: string = undefined; + @internalProperty() private _errorMsg?: string = undefined; protected render(): TemplateResult { return html` diff --git a/src/onboarding/onboarding-integrations.ts b/src/onboarding/onboarding-integrations.ts index 5213f024bd..e2ac111b9f 100644 --- a/src/onboarding/onboarding-integrations.ts +++ b/src/onboarding/onboarding-integrations.ts @@ -6,6 +6,7 @@ import { html, LitElement, property, + internalProperty, PropertyValues, TemplateResult, } from "lit-element"; @@ -30,13 +31,13 @@ import "./integration-badge"; @customElement("onboarding-integrations") class OnboardingIntegrations extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public onboardingLocalize!: LocalizeFunc; - @property() private _entries?: ConfigEntry[]; + @internalProperty() private _entries?: ConfigEntry[]; - @property() private _discovered?: DataEntryFlowProgress[]; + @internalProperty() private _discovered?: DataEntryFlowProgress[]; private _unsubEvents?: () => void; diff --git a/src/panels/calendar/ha-full-calendar.ts b/src/panels/calendar/ha-full-calendar.ts index 50c9da53a4..1a511028e0 100644 --- a/src/panels/calendar/ha-full-calendar.ts +++ b/src/panels/calendar/ha-full-calendar.ts @@ -1,5 +1,6 @@ import { property, + internalProperty, PropertyValues, LitElement, CSSResult, @@ -56,9 +57,9 @@ class HAFullCalendar extends LitElement { @property({ type: Boolean, reflect: true }) public narrow!: boolean; - @property() private calendar?: Calendar; + @internalProperty() private calendar?: Calendar; - @property() private _activeView = "dayGridMonth"; + @internalProperty() private _activeView = "dayGridMonth"; protected render(): TemplateResult { return html` diff --git a/src/panels/calendar/ha-panel-calendar.ts b/src/panels/calendar/ha-panel-calendar.ts index 7c4232bfa3..8f8133cc76 100644 --- a/src/panels/calendar/ha-panel-calendar.ts +++ b/src/panels/calendar/ha-panel-calendar.ts @@ -2,6 +2,7 @@ import { customElement, LitElement, property, + internalProperty, CSSResultArray, css, TemplateResult, @@ -33,14 +34,14 @@ import { getCalendars, fetchCalendarEvents } from "../../data/calendar"; @customElement("ha-panel-calendar") class PanelCalendar extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property({ type: Boolean, reflect: true }) public narrow!: boolean; - @property() private _calendars: SelectedCalendar[] = []; + @internalProperty() private _calendars: SelectedCalendar[] = []; - @property() private _events: CalendarEvent[] = []; + @internalProperty() private _events: CalendarEvent[] = []; private _start?: Date; diff --git a/src/panels/config/areas/dialog-area-registry-detail.ts b/src/panels/config/areas/dialog-area-registry-detail.ts index 78c5a522df..de7574b00c 100644 --- a/src/panels/config/areas/dialog-area-registry-detail.ts +++ b/src/panels/config/areas/dialog-area-registry-detail.ts @@ -7,6 +7,7 @@ import { html, LitElement, property, + internalProperty, TemplateResult, } from "lit-element"; import "../../../components/dialog/ha-paper-dialog"; @@ -17,15 +18,15 @@ import { HomeAssistant } from "../../../types"; import { AreaRegistryDetailDialogParams } from "./show-dialog-area-registry-detail"; class DialogAreaDetail extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; - @property() private _name!: string; + @internalProperty() private _name!: string; - @property() private _error?: string; + @internalProperty() private _error?: string; - @property() private _params?: AreaRegistryDetailDialogParams; + @internalProperty() private _params?: AreaRegistryDetailDialogParams; - @property() private _submitting?: boolean; + @internalProperty() private _submitting?: boolean; public async showDialog( params: AreaRegistryDetailDialogParams diff --git a/src/panels/config/areas/ha-config-area-page.ts b/src/panels/config/areas/ha-config-area-page.ts index d77c073ff3..41bd615b2d 100644 --- a/src/panels/config/areas/ha-config-area-page.ts +++ b/src/panels/config/areas/ha-config-area-page.ts @@ -1,6 +1,4 @@ import "@material/mwc-button"; -import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable"; -import "@polymer/paper-input/paper-input"; import { css, CSSResult, @@ -8,13 +6,14 @@ import { html, LitElement, property, + internalProperty, TemplateResult, } from "lit-element"; import { ifDefined } from "lit-html/directives/if-defined"; import memoizeOne from "memoize-one"; import { isComponentLoaded } from "../../../common/config/is_component_loaded"; import { computeStateName } from "../../../common/entity/compute_state_name"; -import "../../../components/dialog/ha-paper-dialog"; +import "../../../components/ha-card"; import { AreaRegistryEntry, deleteAreaRegistryEntry, @@ -37,7 +36,7 @@ import { @customElement("ha-config-area-page") class HaConfigAreaPage extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public areaId!: string; @@ -53,7 +52,7 @@ class HaConfigAreaPage extends LitElement { @property() public route!: Route; - @property() private _related?: RelatedResult; + @internalProperty() private _related?: RelatedResult; private _area = memoizeOne((areaId: string, areas: AreaRegistryEntry[]): | AreaRegistryEntry diff --git a/src/panels/config/areas/ha-config-areas-dashboard.ts b/src/panels/config/areas/ha-config-areas-dashboard.ts index 2e0e56e9f2..6a80eabf20 100644 --- a/src/panels/config/areas/ha-config-areas-dashboard.ts +++ b/src/panels/config/areas/ha-config-areas-dashboard.ts @@ -42,7 +42,7 @@ import { computeRTL } from "../../../common/util/compute_rtl"; @customElement("ha-config-areas-dashboard") export class HaConfigAreasDashboard extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public isWide?: boolean; diff --git a/src/panels/config/areas/ha-config-areas.ts b/src/panels/config/areas/ha-config-areas.ts index 3e4bf1c0f4..1c00eb4f98 100644 --- a/src/panels/config/areas/ha-config-areas.ts +++ b/src/panels/config/areas/ha-config-areas.ts @@ -1,5 +1,10 @@ import { UnsubscribeFunc } from "home-assistant-js-websocket"; -import { customElement, property, PropertyValues } from "lit-element"; +import { + customElement, + property, + internalProperty, + PropertyValues, +} from "lit-element"; import { compare } from "../../../common/string/compare"; import { AreaRegistryEntry, @@ -20,7 +25,7 @@ import "./ha-config-areas-dashboard"; @customElement("ha-config-areas") class HaConfigAreas extends HassRouterPage { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public narrow!: boolean; @@ -41,11 +46,12 @@ class HaConfigAreas extends HassRouterPage { }, }; - @property() private _configEntries: ConfigEntry[] = []; + @internalProperty() private _configEntries: ConfigEntry[] = []; - @property() private _deviceRegistryEntries: DeviceRegistryEntry[] = []; + @internalProperty() + private _deviceRegistryEntries: DeviceRegistryEntry[] = []; - @property() private _areas: AreaRegistryEntry[] = []; + @internalProperty() private _areas: AreaRegistryEntry[] = []; private _unsubs?: UnsubscribeFunc[]; diff --git a/src/panels/config/automation/action/ha-automation-action-row.ts b/src/panels/config/automation/action/ha-automation-action-row.ts index 2cd6158fd3..c282c9f3da 100644 --- a/src/panels/config/automation/action/ha-automation-action-row.ts +++ b/src/panels/config/automation/action/ha-automation-action-row.ts @@ -14,6 +14,7 @@ import { html, LitElement, property, + internalProperty, } from "lit-element"; import { dynamicElement } from "../../../../common/dom/dynamic-element-directive"; import { fireEvent } from "../../../../common/dom/fire_event"; @@ -78,7 +79,7 @@ export const handleChangeEvent = (element: ActionElement, ev: CustomEvent) => { @customElement("ha-automation-action-row") export default class HaAutomationActionRow extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public action!: Action; @@ -86,7 +87,7 @@ export default class HaAutomationActionRow extends LitElement { @property() public totalActions!: number; - @property() private _yamlMode = false; + @internalProperty() private _yamlMode = false; protected render() { const type = getType(this.action); @@ -135,7 +136,7 @@ export default class HaAutomationActionRow extends LitElement { > ${yamlMode @@ -151,7 +152,7 @@ export default class HaAutomationActionRow extends LitElement { "ui.panel.config.automation.editor.actions.duplicate" )} - + ${this.hass.localize( "ui.panel.config.automation.editor.actions.delete" )} diff --git a/src/panels/config/automation/action/ha-automation-action.ts b/src/panels/config/automation/action/ha-automation-action.ts index 35369a26df..d6e815ea63 100644 --- a/src/panels/config/automation/action/ha-automation-action.ts +++ b/src/panels/config/automation/action/ha-automation-action.ts @@ -16,7 +16,7 @@ import { HaDeviceAction } from "./types/ha-automation-action-device_id"; @customElement("ha-automation-action") export default class HaAutomationAction extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public actions!: Action[]; diff --git a/src/panels/config/automation/action/types/ha-automation-action-condition.ts b/src/panels/config/automation/action/types/ha-automation-action-condition.ts index 195e716804..8849117902 100644 --- a/src/panels/config/automation/action/types/ha-automation-action-condition.ts +++ b/src/panels/config/automation/action/types/ha-automation-action-condition.ts @@ -7,7 +7,7 @@ import { ActionElement } from "../ha-automation-action-row"; @customElement("ha-automation-action-condition") export class HaConditionAction extends LitElement implements ActionElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public action!: Condition; diff --git a/src/panels/config/automation/action/types/ha-automation-action-delay.ts b/src/panels/config/automation/action/types/ha-automation-action-delay.ts index 5067408ec2..f6380e99bd 100644 --- a/src/panels/config/automation/action/types/ha-automation-action-delay.ts +++ b/src/panels/config/automation/action/types/ha-automation-action-delay.ts @@ -8,7 +8,7 @@ import { ActionElement, handleChangeEvent } from "../ha-automation-action-row"; @customElement("ha-automation-action-delay") export class HaDelayAction extends LitElement implements ActionElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public action!: DelayAction; diff --git a/src/panels/config/automation/action/types/ha-automation-action-device_id.ts b/src/panels/config/automation/action/types/ha-automation-action-device_id.ts index 059d1835eb..da08f8d9de 100644 --- a/src/panels/config/automation/action/types/ha-automation-action-device_id.ts +++ b/src/panels/config/automation/action/types/ha-automation-action-device_id.ts @@ -1,4 +1,10 @@ -import { customElement, html, LitElement, property } from "lit-element"; +import { + customElement, + html, + LitElement, + property, + internalProperty, +} from "lit-element"; import memoizeOne from "memoize-one"; import { fireEvent } from "../../../../../common/dom/fire_event"; import "../../../../../components/device/ha-device-action-picker"; @@ -13,13 +19,13 @@ import { HomeAssistant } from "../../../../../types"; @customElement("ha-automation-action-device_id") export class HaDeviceAction extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public action!: DeviceAction; - @property() private _deviceId?: string; + @internalProperty() private _deviceId?: string; - @property() private _capabilities?; + @internalProperty() private _capabilities?; private _origAction?: DeviceAction; diff --git a/src/panels/config/automation/action/types/ha-automation-action-event.ts b/src/panels/config/automation/action/types/ha-automation-action-event.ts index dc876a9fdd..3cb54dbb42 100644 --- a/src/panels/config/automation/action/types/ha-automation-action-event.ts +++ b/src/panels/config/automation/action/types/ha-automation-action-event.ts @@ -17,7 +17,7 @@ import { ActionElement, handleChangeEvent } from "../ha-automation-action-row"; @customElement("ha-automation-action-event") export class HaEventAction extends LitElement implements ActionElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public action!: EventAction; diff --git a/src/panels/config/automation/action/types/ha-automation-action-scene.ts b/src/panels/config/automation/action/types/ha-automation-action-scene.ts index b69808c522..9b0610b187 100644 --- a/src/panels/config/automation/action/types/ha-automation-action-scene.ts +++ b/src/panels/config/automation/action/types/ha-automation-action-scene.ts @@ -10,7 +10,7 @@ const includeDomains = ["scene"]; @customElement("ha-automation-action-scene") export class HaSceneAction extends LitElement implements ActionElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public action!: SceneAction; diff --git a/src/panels/config/automation/action/types/ha-automation-action-service.ts b/src/panels/config/automation/action/types/ha-automation-action-service.ts index 3cdbc811e2..97b2a7bf17 100644 --- a/src/panels/config/automation/action/types/ha-automation-action-service.ts +++ b/src/panels/config/automation/action/types/ha-automation-action-service.ts @@ -22,7 +22,7 @@ import { ActionElement, handleChangeEvent } from "../ha-automation-action-row"; @customElement("ha-automation-action-service") export class HaServiceAction extends LitElement implements ActionElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public action!: ServiceAction; diff --git a/src/panels/config/automation/action/types/ha-automation-action-wait_template.ts b/src/panels/config/automation/action/types/ha-automation-action-wait_template.ts index 6924787d4b..e585d52032 100644 --- a/src/panels/config/automation/action/types/ha-automation-action-wait_template.ts +++ b/src/panels/config/automation/action/types/ha-automation-action-wait_template.ts @@ -8,7 +8,7 @@ import { ActionElement, handleChangeEvent } from "../ha-automation-action-row"; @customElement("ha-automation-action-wait_template") export class HaWaitAction extends LitElement implements ActionElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public action!: WaitAction; diff --git a/src/panels/config/automation/condition/ha-automation-condition-editor.ts b/src/panels/config/automation/condition/ha-automation-condition-editor.ts index 242f5b2085..ecc54fdfd1 100644 --- a/src/panels/config/automation/condition/ha-automation-condition-editor.ts +++ b/src/panels/config/automation/condition/ha-automation-condition-editor.ts @@ -35,7 +35,7 @@ const OPTIONS = [ @customElement("ha-automation-condition-editor") export default class HaAutomationConditionEditor extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public condition!: Condition; diff --git a/src/panels/config/automation/condition/ha-automation-condition-row.ts b/src/panels/config/automation/condition/ha-automation-condition-row.ts index be81fda127..701c5d1b74 100644 --- a/src/panels/config/automation/condition/ha-automation-condition-row.ts +++ b/src/panels/config/automation/condition/ha-automation-condition-row.ts @@ -10,6 +10,7 @@ import { html, LitElement, property, + internalProperty, } from "lit-element"; import { fireEvent } from "../../../../common/dom/fire_event"; import "../../../../components/ha-card"; @@ -49,11 +50,11 @@ export const handleChangeEvent = ( @customElement("ha-automation-condition-row") export default class HaAutomationConditionRow extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public condition!: Condition; - @property() private _yamlMode = false; + @internalProperty() private _yamlMode = false; protected render() { if (!this.condition) { @@ -70,7 +71,7 @@ export default class HaAutomationConditionRow extends LitElement { slot="trigger" > - + ${this._yamlMode ? this.hass.localize( "ui.panel.config.automation.editor.edit_ui" @@ -84,7 +85,7 @@ export default class HaAutomationConditionRow extends LitElement { "ui.panel.config.automation.editor.actions.duplicate" )} - + ${this.hass.localize( "ui.panel.config.automation.editor.actions.delete" )} diff --git a/src/panels/config/automation/condition/ha-automation-condition.ts b/src/panels/config/automation/condition/ha-automation-condition.ts index c65502bfa4..05367bd6a2 100644 --- a/src/panels/config/automation/condition/ha-automation-condition.ts +++ b/src/panels/config/automation/condition/ha-automation-condition.ts @@ -16,7 +16,7 @@ import { HaDeviceCondition } from "./types/ha-automation-condition-device"; @customElement("ha-automation-condition") export default class HaAutomationCondition extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public conditions!: Condition[]; diff --git a/src/panels/config/automation/condition/types/ha-automation-condition-device.ts b/src/panels/config/automation/condition/types/ha-automation-condition-device.ts index 40eca3eb45..d3c728a5c1 100644 --- a/src/panels/config/automation/condition/types/ha-automation-condition-device.ts +++ b/src/panels/config/automation/condition/types/ha-automation-condition-device.ts @@ -1,4 +1,10 @@ -import { customElement, html, LitElement, property } from "lit-element"; +import { + customElement, + html, + LitElement, + property, + internalProperty, +} from "lit-element"; import { fireEvent } from "../../../../../common/dom/fire_event"; import "../../../../../components/device/ha-device-condition-picker"; import "../../../../../components/device/ha-device-picker"; @@ -12,13 +18,13 @@ import { HomeAssistant } from "../../../../../types"; @customElement("ha-automation-condition-device") export class HaDeviceCondition extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public condition!: DeviceCondition; - @property() private _deviceId?: string; + @internalProperty() private _deviceId?: string; - @property() private _capabilities?; + @internalProperty() private _capabilities?; private _origCondition?: DeviceCondition; diff --git a/src/panels/config/automation/condition/types/ha-automation-condition-logical.ts b/src/panels/config/automation/condition/types/ha-automation-condition-logical.ts index d2c4b3e607..6d6fc40f77 100644 --- a/src/panels/config/automation/condition/types/ha-automation-condition-logical.ts +++ b/src/panels/config/automation/condition/types/ha-automation-condition-logical.ts @@ -7,7 +7,7 @@ import { ConditionElement } from "../ha-automation-condition-row"; @customElement("ha-automation-condition-logical") export class HaLogicalCondition extends LitElement implements ConditionElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public condition!: LogicalCondition; diff --git a/src/panels/config/automation/condition/types/ha-automation-condition-numeric_state.ts b/src/panels/config/automation/condition/types/ha-automation-condition-numeric_state.ts index b73e5e4879..1c3adae50d 100644 --- a/src/panels/config/automation/condition/types/ha-automation-condition-numeric_state.ts +++ b/src/panels/config/automation/condition/types/ha-automation-condition-numeric_state.ts @@ -9,7 +9,7 @@ import { handleChangeEvent } from "../ha-automation-condition-row"; @customElement("ha-automation-condition-numeric_state") export default class HaNumericStateCondition extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public condition!: NumericStateCondition; diff --git a/src/panels/config/automation/condition/types/ha-automation-condition-state.ts b/src/panels/config/automation/condition/types/ha-automation-condition-state.ts index 7627c88916..8795dca8ba 100644 --- a/src/panels/config/automation/condition/types/ha-automation-condition-state.ts +++ b/src/panels/config/automation/condition/types/ha-automation-condition-state.ts @@ -12,7 +12,7 @@ import { @customElement("ha-automation-condition-state") export class HaStateCondition extends LitElement implements ConditionElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public condition!: StateCondition; diff --git a/src/panels/config/automation/condition/types/ha-automation-condition-sun.ts b/src/panels/config/automation/condition/types/ha-automation-condition-sun.ts index 99386c1f26..becb62bf8c 100644 --- a/src/panels/config/automation/condition/types/ha-automation-condition-sun.ts +++ b/src/panels/config/automation/condition/types/ha-automation-condition-sun.ts @@ -13,7 +13,7 @@ import { @customElement("ha-automation-condition-sun") export class HaSunCondition extends LitElement implements ConditionElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public condition!: SunCondition; diff --git a/src/panels/config/automation/condition/types/ha-automation-condition-template.ts b/src/panels/config/automation/condition/types/ha-automation-condition-template.ts index c3d06a0355..e226d9534a 100644 --- a/src/panels/config/automation/condition/types/ha-automation-condition-template.ts +++ b/src/panels/config/automation/condition/types/ha-automation-condition-template.ts @@ -6,7 +6,7 @@ import { handleChangeEvent } from "../ha-automation-condition-row"; @customElement("ha-automation-condition-template") export class HaTemplateCondition extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public condition!: TemplateCondition; diff --git a/src/panels/config/automation/condition/types/ha-automation-condition-time.ts b/src/panels/config/automation/condition/types/ha-automation-condition-time.ts index 708624abfd..7f790194fc 100644 --- a/src/panels/config/automation/condition/types/ha-automation-condition-time.ts +++ b/src/panels/config/automation/condition/types/ha-automation-condition-time.ts @@ -9,7 +9,7 @@ import { @customElement("ha-automation-condition-time") export class HaTimeCondition extends LitElement implements ConditionElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public condition!: TimeCondition; diff --git a/src/panels/config/automation/condition/types/ha-automation-condition-zone.ts b/src/panels/config/automation/condition/types/ha-automation-condition-zone.ts index 2f7416f4e1..e84bd7766d 100644 --- a/src/panels/config/automation/condition/types/ha-automation-condition-zone.ts +++ b/src/panels/config/automation/condition/types/ha-automation-condition-zone.ts @@ -16,7 +16,7 @@ const includeDomains = ["zone"]; @customElement("ha-automation-condition-zone") export class HaZoneCondition extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public condition!: ZoneCondition; diff --git a/src/panels/config/automation/ha-automation-editor.ts b/src/panels/config/automation/ha-automation-editor.ts index cc70db4fe5..3321a4956d 100644 --- a/src/panels/config/automation/ha-automation-editor.ts +++ b/src/panels/config/automation/ha-automation-editor.ts @@ -9,6 +9,7 @@ import { html, LitElement, property, + internalProperty, PropertyValues, TemplateResult, } from "lit-element"; @@ -46,11 +47,11 @@ import { HaDeviceTrigger } from "./trigger/types/ha-automation-trigger-device"; import { mdiContentSave } from "@mdi/js"; import { PaperListboxElement } from "@polymer/paper-listbox"; -const MODES = ["parallel", "single", "restart", "queued"]; +const MODES = ["single", "restart", "queued", "parallel"]; const MODES_MAX = ["queued", "parallel"]; export class HaAutomationEditor extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public automationId!: string; @@ -62,13 +63,13 @@ export class HaAutomationEditor extends LitElement { @property() public route!: Route; - @property() private _config?: AutomationConfig; + @internalProperty() private _config?: AutomationConfig; - @property() private _dirty?: boolean; + @internalProperty() private _dirty?: boolean; - @property() private _errors?: string; + @internalProperty() private _errors?: string; - @property() private _entityId?: string; + @internalProperty() private _entityId?: string; protected render(): TemplateResult { const stateObj = this._entityId diff --git a/src/panels/config/automation/ha-automation-picker.ts b/src/panels/config/automation/ha-automation-picker.ts index 30d92aef41..f853558bfb 100644 --- a/src/panels/config/automation/ha-automation-picker.ts +++ b/src/panels/config/automation/ha-automation-picker.ts @@ -35,7 +35,7 @@ import { mdiPlus } from "@mdi/js"; @customElement("ha-automation-picker") class HaAutomationPicker extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public isWide!: boolean; diff --git a/src/panels/config/automation/ha-config-automation.ts b/src/panels/config/automation/ha-config-automation.ts index 3ae487499f..7b0953d0e5 100644 --- a/src/panels/config/automation/ha-config-automation.ts +++ b/src/panels/config/automation/ha-config-automation.ts @@ -21,7 +21,7 @@ const equal = (a: AutomationEntity[], b: AutomationEntity[]): boolean => { @customElement("ha-config-automation") class HaConfigAutomation extends HassRouterPage { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public narrow!: boolean; diff --git a/src/panels/config/automation/thingtalk/dialog-thingtalk.ts b/src/panels/config/automation/thingtalk/dialog-thingtalk.ts index 7bf85c3ff8..60f027fe53 100644 --- a/src/panels/config/automation/thingtalk/dialog-thingtalk.ts +++ b/src/panels/config/automation/thingtalk/dialog-thingtalk.ts @@ -10,6 +10,7 @@ import { html, LitElement, property, + internalProperty, query, TemplateResult, } from "lit-element"; @@ -37,17 +38,17 @@ export interface PlaceholderContainer { @customElement("ha-dialog-thinktalk") class DialogThingtalk extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; - @property() private _error?: string; + @internalProperty() private _error?: string; - @property() private _params?: ThingtalkDialogParams; + @internalProperty() private _params?: ThingtalkDialogParams; - @property() private _submitting = false; + @internalProperty() private _submitting = false; - @property() private _opened = false; + @internalProperty() private _opened = false; - @property() private _placeholders?: PlaceholderContainer; + @internalProperty() private _placeholders?: PlaceholderContainer; @query("#input") private _input?: PaperInputElement; diff --git a/src/panels/config/automation/thingtalk/ha-thingtalk-placeholders.ts b/src/panels/config/automation/thingtalk/ha-thingtalk-placeholders.ts index 3a1d1db4ab..d9cea90ffe 100644 --- a/src/panels/config/automation/thingtalk/ha-thingtalk-placeholders.ts +++ b/src/panels/config/automation/thingtalk/ha-thingtalk-placeholders.ts @@ -6,6 +6,7 @@ import { html, LitElement, property, + internalProperty, PropertyValues, TemplateResult, } from "lit-element"; @@ -63,7 +64,7 @@ interface DeviceEntitiesLookup { @customElement("ha-thingtalk-placeholders") export class ThingTalkPlaceholders extends SubscribeMixin(LitElement) { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public opened!: boolean; @@ -71,13 +72,13 @@ export class ThingTalkPlaceholders extends SubscribeMixin(LitElement) { @property() public placeholders!: PlaceholderContainer; - @property() private _error?: string; + @internalProperty() private _error?: string; private _deviceEntityLookup: DeviceEntitiesLookup = {}; - @property() private _extraInfo: ExtraInfo = {}; + @internalProperty() private _extraInfo: ExtraInfo = {}; - @property() private _placeholderValues: PlaceholderValues = {}; + @internalProperty() private _placeholderValues: PlaceholderValues = {}; private _devices?: DeviceRegistryEntry[]; diff --git a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts index 58444edcd5..2a15e6c35a 100644 --- a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts +++ b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts @@ -13,6 +13,7 @@ import { html, LitElement, property, + internalProperty, } from "lit-element"; import { dynamicElement } from "../../../../common/dom/dynamic-element-directive"; import { fireEvent } from "../../../../common/dom/fire_event"; @@ -78,11 +79,11 @@ export const handleChangeEvent = (element: TriggerElement, ev: CustomEvent) => { @customElement("ha-automation-trigger-row") export default class HaAutomationTriggerRow extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public trigger!: Trigger; - @property() private _yamlMode = false; + @internalProperty() private _yamlMode = false; protected render() { const selected = OPTIONS.indexOf(this.trigger.platform); @@ -100,7 +101,7 @@ export default class HaAutomationTriggerRow extends LitElement { > ${yamlMode @@ -116,7 +117,7 @@ export default class HaAutomationTriggerRow extends LitElement { "ui.panel.config.automation.editor.actions.duplicate" )} - + ${this.hass.localize( "ui.panel.config.automation.editor.actions.delete" )} diff --git a/src/panels/config/automation/trigger/ha-automation-trigger.ts b/src/panels/config/automation/trigger/ha-automation-trigger.ts index 39d8467a1e..a074cbb881 100644 --- a/src/panels/config/automation/trigger/ha-automation-trigger.ts +++ b/src/panels/config/automation/trigger/ha-automation-trigger.ts @@ -16,7 +16,7 @@ import { HaDeviceTrigger } from "./types/ha-automation-trigger-device"; @customElement("ha-automation-trigger") export default class HaAutomationTrigger extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public triggers!: Trigger[]; diff --git a/src/panels/config/automation/trigger/types/ha-automation-trigger-device.ts b/src/panels/config/automation/trigger/types/ha-automation-trigger-device.ts index 1dea9a2391..684696c546 100644 --- a/src/panels/config/automation/trigger/types/ha-automation-trigger-device.ts +++ b/src/panels/config/automation/trigger/types/ha-automation-trigger-device.ts @@ -1,4 +1,10 @@ -import { customElement, html, LitElement, property } from "lit-element"; +import { + customElement, + html, + LitElement, + property, + internalProperty, +} from "lit-element"; import { fireEvent } from "../../../../../common/dom/fire_event"; import "../../../../../components/device/ha-device-picker"; import "../../../../../components/device/ha-device-trigger-picker"; @@ -12,13 +18,13 @@ import { HomeAssistant } from "../../../../../types"; @customElement("ha-automation-trigger-device") export class HaDeviceTrigger extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public trigger!: DeviceTrigger; - @property() private _deviceId?: string; + @internalProperty() private _deviceId?: string; - @property() private _capabilities?; + @internalProperty() private _capabilities?; private _origTrigger?: DeviceTrigger; diff --git a/src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts b/src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts index c8ba2e984e..fd1555c598 100644 --- a/src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts +++ b/src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts @@ -11,7 +11,7 @@ import { @customElement("ha-automation-trigger-event") export class HaEventTrigger extends LitElement implements TriggerElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public trigger!: EventTrigger; diff --git a/src/panels/config/automation/trigger/types/ha-automation-trigger-geo_location.ts b/src/panels/config/automation/trigger/types/ha-automation-trigger-geo_location.ts index 42fe2d0245..b65fac6d92 100644 --- a/src/panels/config/automation/trigger/types/ha-automation-trigger-geo_location.ts +++ b/src/panels/config/automation/trigger/types/ha-automation-trigger-geo_location.ts @@ -12,7 +12,7 @@ const includeDomains = ["zone"]; @customElement("ha-automation-trigger-geo_location") export default class HaGeolocationTrigger extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public trigger!: GeoLocationTrigger; diff --git a/src/panels/config/automation/trigger/types/ha-automation-trigger-homeassistant.ts b/src/panels/config/automation/trigger/types/ha-automation-trigger-homeassistant.ts index e6e2136cca..ec346a1316 100644 --- a/src/panels/config/automation/trigger/types/ha-automation-trigger-homeassistant.ts +++ b/src/panels/config/automation/trigger/types/ha-automation-trigger-homeassistant.ts @@ -8,7 +8,7 @@ import type { HomeAssistant } from "../../../../../types"; @customElement("ha-automation-trigger-homeassistant") export default class HaHassTrigger extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public trigger!: HassTrigger; diff --git a/src/panels/config/automation/trigger/types/ha-automation-trigger-mqtt.ts b/src/panels/config/automation/trigger/types/ha-automation-trigger-mqtt.ts index 2f55a97a9a..0450f37ff2 100644 --- a/src/panels/config/automation/trigger/types/ha-automation-trigger-mqtt.ts +++ b/src/panels/config/automation/trigger/types/ha-automation-trigger-mqtt.ts @@ -9,7 +9,7 @@ import { @customElement("ha-automation-trigger-mqtt") export class HaMQTTTrigger extends LitElement implements TriggerElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public trigger!: MqttTrigger; diff --git a/src/panels/config/automation/trigger/types/ha-automation-trigger-numeric_state.ts b/src/panels/config/automation/trigger/types/ha-automation-trigger-numeric_state.ts index b8d4cffd71..6d10f83c2d 100644 --- a/src/panels/config/automation/trigger/types/ha-automation-trigger-numeric_state.ts +++ b/src/panels/config/automation/trigger/types/ha-automation-trigger-numeric_state.ts @@ -9,7 +9,7 @@ import { handleChangeEvent } from "../ha-automation-trigger-row"; @customElement("ha-automation-trigger-numeric_state") export default class HaNumericStateTrigger extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public trigger!: NumericStateTrigger; diff --git a/src/panels/config/automation/trigger/types/ha-automation-trigger-state.ts b/src/panels/config/automation/trigger/types/ha-automation-trigger-state.ts index 02a9f03c54..838c789b56 100644 --- a/src/panels/config/automation/trigger/types/ha-automation-trigger-state.ts +++ b/src/panels/config/automation/trigger/types/ha-automation-trigger-state.ts @@ -12,7 +12,7 @@ import { @customElement("ha-automation-trigger-state") export class HaStateTrigger extends LitElement implements TriggerElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public trigger!: StateTrigger; diff --git a/src/panels/config/automation/trigger/types/ha-automation-trigger-sun.ts b/src/panels/config/automation/trigger/types/ha-automation-trigger-sun.ts index 349f391842..3c2bb9cf62 100644 --- a/src/panels/config/automation/trigger/types/ha-automation-trigger-sun.ts +++ b/src/panels/config/automation/trigger/types/ha-automation-trigger-sun.ts @@ -13,7 +13,7 @@ import { @customElement("ha-automation-trigger-sun") export class HaSunTrigger extends LitElement implements TriggerElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public trigger!: SunTrigger; diff --git a/src/panels/config/automation/trigger/types/ha-automation-trigger-template.ts b/src/panels/config/automation/trigger/types/ha-automation-trigger-template.ts index 4687229463..c4aacff1bb 100644 --- a/src/panels/config/automation/trigger/types/ha-automation-trigger-template.ts +++ b/src/panels/config/automation/trigger/types/ha-automation-trigger-template.ts @@ -6,7 +6,7 @@ import { handleChangeEvent } from "../ha-automation-trigger-row"; @customElement("ha-automation-trigger-template") export class HaTemplateTrigger extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public trigger!: TemplateTrigger; diff --git a/src/panels/config/automation/trigger/types/ha-automation-trigger-time.ts b/src/panels/config/automation/trigger/types/ha-automation-trigger-time.ts index f308b59187..7ea3043660 100644 --- a/src/panels/config/automation/trigger/types/ha-automation-trigger-time.ts +++ b/src/panels/config/automation/trigger/types/ha-automation-trigger-time.ts @@ -9,7 +9,7 @@ import { @customElement("ha-automation-trigger-time") export class HaTimeTrigger extends LitElement implements TriggerElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public trigger!: TimeTrigger; diff --git a/src/panels/config/automation/trigger/types/ha-automation-trigger-time_pattern.ts b/src/panels/config/automation/trigger/types/ha-automation-trigger-time_pattern.ts index db0b0dc906..1f0f081ad9 100644 --- a/src/panels/config/automation/trigger/types/ha-automation-trigger-time_pattern.ts +++ b/src/panels/config/automation/trigger/types/ha-automation-trigger-time_pattern.ts @@ -9,7 +9,7 @@ import { @customElement("ha-automation-trigger-time_pattern") export class HaTimePatternTrigger extends LitElement implements TriggerElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public trigger!: TimePatternTrigger; diff --git a/src/panels/config/automation/trigger/types/ha-automation-trigger-webhook.ts b/src/panels/config/automation/trigger/types/ha-automation-trigger-webhook.ts index 0ca2a1fe65..3eb56a805e 100644 --- a/src/panels/config/automation/trigger/types/ha-automation-trigger-webhook.ts +++ b/src/panels/config/automation/trigger/types/ha-automation-trigger-webhook.ts @@ -6,7 +6,7 @@ import { handleChangeEvent } from "../ha-automation-trigger-row"; @customElement("ha-automation-trigger-webhook") export class HaWebhookTrigger extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public trigger!: WebhookTrigger; diff --git a/src/panels/config/automation/trigger/types/ha-automation-trigger-zone.ts b/src/panels/config/automation/trigger/types/ha-automation-trigger-zone.ts index 47b140718c..4d93d61f6c 100644 --- a/src/panels/config/automation/trigger/types/ha-automation-trigger-zone.ts +++ b/src/panels/config/automation/trigger/types/ha-automation-trigger-zone.ts @@ -18,7 +18,7 @@ const includeDomains = ["zone"]; @customElement("ha-automation-trigger-zone") export class HaZoneTrigger extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public trigger!: ZoneTrigger; diff --git a/src/panels/config/cloud/account/cloud-alexa-pref.ts b/src/panels/config/cloud/account/cloud-alexa-pref.ts index 8fae8a1895..f8753c34d4 100644 --- a/src/panels/config/cloud/account/cloud-alexa-pref.ts +++ b/src/panels/config/cloud/account/cloud-alexa-pref.ts @@ -5,6 +5,7 @@ import { html, LitElement, property, + internalProperty, TemplateResult, } from "lit-element"; import { fireEvent } from "../../../../common/dom/fire_event"; @@ -16,11 +17,11 @@ import { CloudStatusLoggedIn, updateCloudPref } from "../../../../data/cloud"; import type { HomeAssistant } from "../../../../types"; export class CloudAlexaPref extends LitElement { - @property() public hass?: HomeAssistant; + @property({ attribute: false }) public hass?: HomeAssistant; @property() public cloudStatus?: CloudStatusLoggedIn; - @property() private _syncing = false; + @internalProperty() private _syncing = false; protected render(): TemplateResult { if (!this.cloudStatus) { diff --git a/src/panels/config/cloud/account/cloud-google-pref.ts b/src/panels/config/cloud/account/cloud-google-pref.ts index ed9db0a768..1d47bc2ddc 100644 --- a/src/panels/config/cloud/account/cloud-google-pref.ts +++ b/src/panels/config/cloud/account/cloud-google-pref.ts @@ -18,7 +18,7 @@ import type { HomeAssistant } from "../../../../types"; import { showSaveSuccessToast } from "../../../../util/toast-saved-success"; export class CloudGooglePref extends LitElement { - @property() public hass?: HomeAssistant; + @property({ attribute: false }) public hass?: HomeAssistant; @property() public cloudStatus?: CloudStatusLoggedIn; diff --git a/src/panels/config/cloud/account/cloud-remote-pref.ts b/src/panels/config/cloud/account/cloud-remote-pref.ts index c2c72c1ed7..0df92f38da 100644 --- a/src/panels/config/cloud/account/cloud-remote-pref.ts +++ b/src/panels/config/cloud/account/cloud-remote-pref.ts @@ -24,7 +24,7 @@ import { showCloudCertificateDialog } from "../dialog-cloud-certificate/show-dia @customElement("cloud-remote-pref") export class CloudRemotePref extends LitElement { - @property() public hass?: HomeAssistant; + @property({ attribute: false }) public hass?: HomeAssistant; @property() public cloudStatus?: CloudStatusLoggedIn; diff --git a/src/panels/config/cloud/account/cloud-webhooks.ts b/src/panels/config/cloud/account/cloud-webhooks.ts index bde7ec9f77..8b35052539 100644 --- a/src/panels/config/cloud/account/cloud-webhooks.ts +++ b/src/panels/config/cloud/account/cloud-webhooks.ts @@ -1,7 +1,13 @@ import "@polymer/paper-item/paper-item"; import "@polymer/paper-item/paper-item-body"; import "../../../../components/ha-circular-progress"; -import { html, LitElement, property, PropertyValues } from "lit-element"; +import { + html, + LitElement, + property, + internalProperty, + PropertyValues, +} from "lit-element"; import "../../../../components/ha-card"; import "../../../../components/ha-switch"; import { @@ -15,15 +21,17 @@ import { HomeAssistant, WebhookError } from "../../../../types"; import { showManageCloudhookDialog } from "../dialog-manage-cloudhook/show-dialog-manage-cloudhook"; export class CloudWebhooks extends LitElement { - @property() public hass?: HomeAssistant; + @property({ attribute: false }) public hass?: HomeAssistant; @property() public cloudStatus?: CloudStatusLoggedIn; - @property() private _cloudHooks?: { [webhookId: string]: CloudWebhook }; + @internalProperty() private _cloudHooks?: { + [webhookId: string]: CloudWebhook; + }; - @property() private _localHooks?: Webhook[]; + @internalProperty() private _localHooks?: Webhook[]; - @property() private _progress: string[]; + @internalProperty() private _progress: string[]; constructor() { super(); diff --git a/src/panels/config/cloud/alexa/cloud-alexa.ts b/src/panels/config/cloud/alexa/cloud-alexa.ts index 5a3ae1ebd2..3dd625cc6c 100644 --- a/src/panels/config/cloud/alexa/cloud-alexa.ts +++ b/src/panels/config/cloud/alexa/cloud-alexa.ts @@ -6,6 +6,7 @@ import { html, LitElement, property, + internalProperty, TemplateResult, } from "lit-element"; import memoizeOne from "memoize-one"; @@ -46,14 +47,14 @@ const configIsExposed = (config: AlexaEntityConfig) => @customElement("cloud-alexa") class CloudAlexa extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public cloudStatus!: CloudStatusLoggedIn; @property({ type: Boolean }) public narrow!: boolean; - @property() private _entities?: AlexaEntity[]; + @internalProperty() private _entities?: AlexaEntity[]; @property() private _entityConfigs: CloudPreferences["alexa_entity_configs"] = {}; @@ -323,7 +324,7 @@ class CloudAlexa extends LitElement { color: var(--primary-text-color); background-color: var( --ha-card-background, - var(--paper-card-background-color, white) + var(--card-background-color, white) ); padding: 16px 8px; text-align: center; diff --git a/src/panels/config/cloud/dialog-manage-cloudhook/dialog-manage-cloudhook.ts b/src/panels/config/cloud/dialog-manage-cloudhook/dialog-manage-cloudhook.ts index 2e54752063..b590848f99 100644 --- a/src/panels/config/cloud/dialog-manage-cloudhook/dialog-manage-cloudhook.ts +++ b/src/panels/config/cloud/dialog-manage-cloudhook/dialog-manage-cloudhook.ts @@ -2,7 +2,13 @@ import "@material/mwc-button"; import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable"; import "@polymer/paper-input/paper-input"; import type { PaperInputElement } from "@polymer/paper-input/paper-input"; -import { css, CSSResult, html, LitElement, property } from "lit-element"; +import { + css, + CSSResult, + html, + LitElement, + internalProperty, +} from "lit-element"; import "../../../../components/dialog/ha-paper-dialog"; import type { HaPaperDialog } from "../../../../components/dialog/ha-paper-dialog"; import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box"; @@ -15,7 +21,7 @@ const inputLabel = "Public URL – Click to copy to clipboard"; export class DialogManageCloudhook extends LitElement { protected hass?: HomeAssistant; - @property() private _params?: WebhookDialogParams; + @internalProperty() private _params?: WebhookDialogParams; public async showDialog(params: WebhookDialogParams) { this._params = params; diff --git a/src/panels/config/cloud/forgot-password/cloud-forgot-password.js b/src/panels/config/cloud/forgot-password/cloud-forgot-password.js index 35d3c7969e..68acfeec7e 100644 --- a/src/panels/config/cloud/forgot-password/cloud-forgot-password.js +++ b/src/panels/config/cloud/forgot-password/cloud-forgot-password.js @@ -45,9 +45,13 @@ class CloudForgotPassword extends LocalizeMixin(EventsMixin(PolymerElement)) { display: none; } - +
- +

[[localize('ui.panel.config.cloud.forgot_password.instructions')]] diff --git a/src/panels/config/cloud/google-assistant/cloud-google-assistant.ts b/src/panels/config/cloud/google-assistant/cloud-google-assistant.ts index 84e3c77d1c..bdf23ec5f5 100644 --- a/src/panels/config/cloud/google-assistant/cloud-google-assistant.ts +++ b/src/panels/config/cloud/google-assistant/cloud-google-assistant.ts @@ -6,6 +6,7 @@ import { html, LitElement, property, + internalProperty, TemplateResult, } from "lit-element"; import memoizeOne from "memoize-one"; @@ -50,13 +51,13 @@ const configIsExposed = (config: GoogleEntityConfig) => @customElement("cloud-google-assistant") class CloudGoogleAssistant extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public cloudStatus!: CloudStatusLoggedIn; @property() public narrow!: boolean; - @property() private _entities?: GoogleEntity[]; + @internalProperty() private _entities?: GoogleEntity[]; @property() private _entityConfigs: CloudPreferences["google_entity_configs"] = {}; @@ -361,7 +362,7 @@ class CloudGoogleAssistant extends LitElement { color: var(--primary-text-color); background-color: var( --ha-card-background, - var(--paper-card-background-color, white) + var(--card-background-color, white) ); padding: 16px 8px; text-align: center; diff --git a/src/panels/config/cloud/ha-config-cloud.ts b/src/panels/config/cloud/ha-config-cloud.ts index 93d4bef9fd..333eaff674 100644 --- a/src/panels/config/cloud/ha-config-cloud.ts +++ b/src/panels/config/cloud/ha-config-cloud.ts @@ -1,5 +1,5 @@ import { PolymerElement } from "@polymer/polymer"; -import { customElement, property } from "lit-element"; +import { customElement, property, internalProperty } from "lit-element"; import { navigate } from "../../../common/navigate"; import { CloudStatus } from "../../../data/cloud"; import { @@ -16,7 +16,7 @@ const NOT_LOGGED_IN_URLS = ["login", "register", "forgot-password"]; @customElement("ha-config-cloud") class HaConfigCloud extends HassRouterPage { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public isWide!: boolean; @@ -77,9 +77,9 @@ class HaConfigCloud extends HassRouterPage { }, }; - @property() private _flashMessage = ""; + @internalProperty() private _flashMessage = ""; - @property() private _loginEmail = ""; + @internalProperty() private _loginEmail = ""; private _resolveCloudStatusLoaded!: () => void; diff --git a/src/panels/config/core/ha-config-core-form.ts b/src/panels/config/core/ha-config-core-form.ts index 57dc3327d9..e4b302b139 100644 --- a/src/panels/config/core/ha-config-core-form.ts +++ b/src/panels/config/core/ha-config-core-form.ts @@ -10,6 +10,7 @@ import { html, LitElement, property, + internalProperty, TemplateResult, } from "lit-element"; import { UNIT_C } from "../../../common/const"; @@ -22,17 +23,17 @@ import type { HomeAssistant } from "../../../types"; @customElement("ha-config-core-form") class ConfigCoreForm extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; - @property() private _working = false; + @internalProperty() private _working = false; - @property() private _location!: [number, number]; + @internalProperty() private _location!: [number, number]; - @property() private _elevation!: string; + @internalProperty() private _elevation!: string; - @property() private _unitSystem!: ConfigUpdateValues["unit_system"]; + @internalProperty() private _unitSystem!: ConfigUpdateValues["unit_system"]; - @property() private _timeZone!: string; + @internalProperty() private _timeZone!: string; protected render(): TemplateResult { const canEdit = ["storage", "default"].includes( diff --git a/src/panels/config/core/ha-config-name-form.ts b/src/panels/config/core/ha-config-name-form.ts index 6543546c67..d8315c6104 100644 --- a/src/panels/config/core/ha-config-name-form.ts +++ b/src/panels/config/core/ha-config-name-form.ts @@ -8,6 +8,7 @@ import { html, LitElement, property, + internalProperty, TemplateResult, } from "lit-element"; import "../../../components/ha-card"; @@ -17,11 +18,11 @@ import type { HomeAssistant } from "../../../types"; @customElement("ha-config-name-form") class ConfigNameForm extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; - @property() private _working = false; + @internalProperty() private _working = false; - @property() private _name!: ConfigUpdateValues["location_name"]; + @internalProperty() private _name!: ConfigUpdateValues["location_name"]; protected render(): TemplateResult { const canEdit = ["storage", "default"].includes( diff --git a/src/panels/config/core/ha-config-url-form.ts b/src/panels/config/core/ha-config-url-form.ts index 216cd7b947..e63b256e0c 100644 --- a/src/panels/config/core/ha-config-url-form.ts +++ b/src/panels/config/core/ha-config-url-form.ts @@ -8,6 +8,7 @@ import { html, LitElement, property, + internalProperty, TemplateResult, } from "lit-element"; import "../../../components/ha-card"; @@ -17,15 +18,15 @@ import type { HomeAssistant } from "../../../types"; @customElement("ha-config-url-form") class ConfigUrlForm extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; - @property() private _error?: string; + @internalProperty() private _error?: string; - @property() private _working = false; + @internalProperty() private _working = false; - @property() private _external_url?: string; + @internalProperty() private _external_url?: string; - @property() private _internal_url?: string; + @internalProperty() private _internal_url?: string; protected render(): TemplateResult { const canEdit = ["storage", "default"].includes( diff --git a/src/panels/config/dashboard/ha-config-dashboard.ts b/src/panels/config/dashboard/ha-config-dashboard.ts index 9fdb8add69..33b419c6d5 100644 --- a/src/panels/config/dashboard/ha-config-dashboard.ts +++ b/src/panels/config/dashboard/ha-config-dashboard.ts @@ -24,7 +24,7 @@ import { mdiCloudLock } from "@mdi/js"; @customElement("ha-config-dashboard") class HaConfigDashboard extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property({ type: Boolean, reflect: true }) public narrow!: boolean; diff --git a/src/panels/config/dashboard/ha-config-navigation.ts b/src/panels/config/dashboard/ha-config-navigation.ts index 74c5afcfed..b5ce582e20 100644 --- a/src/panels/config/dashboard/ha-config-navigation.ts +++ b/src/panels/config/dashboard/ha-config-navigation.ts @@ -18,7 +18,7 @@ import { HomeAssistant } from "../../../types"; @customElement("ha-config-navigation") class HaConfigNavigation extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public showAdvanced!: boolean; diff --git a/src/panels/config/devices/device-detail/ha-device-automation-card.ts b/src/panels/config/devices/device-detail/ha-device-automation-card.ts index 3549a9b9b8..ba0a8b7d5a 100644 --- a/src/panels/config/devices/device-detail/ha-device-automation-card.ts +++ b/src/panels/config/devices/device-detail/ha-device-automation-card.ts @@ -16,7 +16,7 @@ import { HomeAssistant } from "../../../../types"; export abstract class HaDeviceAutomationCard< T extends DeviceAutomation > extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public deviceId?: string; diff --git a/src/panels/config/devices/device-detail/ha-device-automation-dialog.ts b/src/panels/config/devices/device-detail/ha-device-automation-dialog.ts index 28a59b03c4..a7a9b2a661 100644 --- a/src/panels/config/devices/device-detail/ha-device-automation-dialog.ts +++ b/src/panels/config/devices/device-detail/ha-device-automation-dialog.ts @@ -4,6 +4,7 @@ import { html, LitElement, property, + internalProperty, TemplateResult, } from "lit-element"; import "../../../../components/ha-dialog"; @@ -24,15 +25,15 @@ import { DeviceAutomationDialogParams } from "./show-dialog-device-automation"; @customElement("dialog-device-automation") export class DialogDeviceAutomation extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; - @property() private _triggers: DeviceTrigger[] = []; + @internalProperty() private _triggers: DeviceTrigger[] = []; - @property() private _conditions: DeviceCondition[] = []; + @internalProperty() private _conditions: DeviceCondition[] = []; - @property() private _actions: DeviceAction[] = []; + @internalProperty() private _actions: DeviceAction[] = []; - @property() private _params?: DeviceAutomationDialogParams; + @internalProperty() private _params?: DeviceAutomationDialogParams; public async showDialog(params: DeviceAutomationDialogParams): Promise { this._params = params; diff --git a/src/panels/config/devices/device-detail/ha-device-entities-card.ts b/src/panels/config/devices/device-detail/ha-device-entities-card.ts index a586d15f5a..d37fd2eaf5 100644 --- a/src/panels/config/devices/device-detail/ha-device-entities-card.ts +++ b/src/panels/config/devices/device-detail/ha-device-entities-card.ts @@ -8,6 +8,7 @@ import { html, LitElement, property, + internalProperty, PropertyValues, TemplateResult, } from "lit-element"; @@ -26,11 +27,11 @@ import { HuiErrorCard } from "../../../lovelace/cards/hui-error-card"; @customElement("ha-device-entities-card") export class HaDeviceEntitiesCard extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public entities!: EntityRegistryStateEntry[]; - @property() private _showDisabled = false; + @internalProperty() private _showDisabled = false; private _entityRows: Array = []; diff --git a/src/panels/config/devices/device-detail/ha-device-info-card.ts b/src/panels/config/devices/device-detail/ha-device-info-card.ts index 8344df94fa..ae81de81c2 100644 --- a/src/panels/config/devices/device-detail/ha-device-info-card.ts +++ b/src/panels/config/devices/device-detail/ha-device-info-card.ts @@ -17,7 +17,7 @@ import { HomeAssistant } from "../../../../types"; @customElement("ha-device-info-card") export class HaDeviceCard extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public device!: DeviceRegistryEntry; diff --git a/src/panels/config/devices/device-detail/integration-elements/mqtt/dialog-mqtt-device-debug-info.ts b/src/panels/config/devices/device-detail/integration-elements/mqtt/dialog-mqtt-device-debug-info.ts index e60a237606..c7173c1a8b 100644 --- a/src/panels/config/devices/device-detail/integration-elements/mqtt/dialog-mqtt-device-debug-info.ts +++ b/src/panels/config/devices/device-detail/integration-elements/mqtt/dialog-mqtt-device-debug-info.ts @@ -5,7 +5,7 @@ import { customElement, html, LitElement, - property, + internalProperty, TemplateResult, } from "lit-element"; import { computeStateName } from "../../../../../../common/entity/compute_state_name"; @@ -29,13 +29,13 @@ import { computeRTLDirection } from "../../../../../../common/util/compute_rtl"; class DialogMQTTDeviceDebugInfo extends LitElement { public hass!: HomeAssistant; - @property() private _params?: MQTTDeviceDebugInfoDialogParams; + @internalProperty() private _params?: MQTTDeviceDebugInfoDialogParams; - @property() private _debugInfo?: MQTTDeviceDebugInfo; + @internalProperty() private _debugInfo?: MQTTDeviceDebugInfo; - @property() private _showAsYaml = true; + @internalProperty() private _showAsYaml = true; - @property() private _showDeserialized = true; + @internalProperty() private _showDeserialized = true; public async showDialog( params: MQTTDeviceDebugInfoDialogParams diff --git a/src/panels/config/devices/device-detail/integration-elements/mqtt/ha-device-actions-mqtt.ts b/src/panels/config/devices/device-detail/integration-elements/mqtt/ha-device-actions-mqtt.ts index fd81b7bbe0..fcdd9bce0c 100644 --- a/src/panels/config/devices/device-detail/integration-elements/mqtt/ha-device-actions-mqtt.ts +++ b/src/panels/config/devices/device-detail/integration-elements/mqtt/ha-device-actions-mqtt.ts @@ -16,7 +16,7 @@ import { HomeAssistant } from "../../../../../../types"; @customElement("ha-device-actions-mqtt") export class HaDeviceActionsMqtt extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public device!: DeviceRegistryEntry; diff --git a/src/panels/config/devices/device-detail/integration-elements/mqtt/mqtt-discovery-payload.ts b/src/panels/config/devices/device-detail/integration-elements/mqtt/mqtt-discovery-payload.ts index d132879149..67be52c126 100644 --- a/src/panels/config/devices/device-detail/integration-elements/mqtt/mqtt-discovery-payload.ts +++ b/src/panels/config/devices/device-detail/integration-elements/mqtt/mqtt-discovery-payload.ts @@ -6,6 +6,7 @@ import { html, LitElement, property, + internalProperty, TemplateResult, } from "lit-element"; import { classMap } from "lit-html/directives/class-map"; @@ -18,7 +19,7 @@ class MQTTDiscoveryPayload extends LitElement { @property() public summary!: string; - @property() private _open = false; + @internalProperty() private _open = false; protected render(): TemplateResult { return html` diff --git a/src/panels/config/devices/device-detail/integration-elements/mqtt/mqtt-messages.ts b/src/panels/config/devices/device-detail/integration-elements/mqtt/mqtt-messages.ts index 08952bfedc..1c6e65a8eb 100644 --- a/src/panels/config/devices/device-detail/integration-elements/mqtt/mqtt-messages.ts +++ b/src/panels/config/devices/device-detail/integration-elements/mqtt/mqtt-messages.ts @@ -6,6 +6,7 @@ import { html, LitElement, property, + internalProperty, TemplateResult, } from "lit-element"; import { classMap } from "lit-html/directives/class-map"; @@ -27,11 +28,11 @@ class MQTTMessages extends LitElement { @property() public summary!: string; - @property() private _open = false; + @internalProperty() private _open = false; - @property() private _payloadsJson = new WeakMap(); + @internalProperty() private _payloadsJson = new WeakMap(); - @property() private _showTopic = false; + @internalProperty() private _showTopic = false; protected firstUpdated(): void { this.messages.forEach((message) => { diff --git a/src/panels/config/devices/device-detail/integration-elements/zha/ha-device-actions-zha.ts b/src/panels/config/devices/device-detail/integration-elements/zha/ha-device-actions-zha.ts index 16d47f8b05..d5d98dc68d 100644 --- a/src/panels/config/devices/device-detail/integration-elements/zha/ha-device-actions-zha.ts +++ b/src/panels/config/devices/device-detail/integration-elements/zha/ha-device-actions-zha.ts @@ -4,6 +4,7 @@ import { html, LitElement, property, + internalProperty, TemplateResult, css, PropertyValues, @@ -23,11 +24,11 @@ import { showZHAClusterDialog } from "../../../../integrations/integration-panel @customElement("ha-device-actions-zha") export class HaDeviceActionsZha extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public device!: DeviceRegistryEntry; - @property() private _zhaDevice?: ZHADevice; + @internalProperty() private _zhaDevice?: ZHADevice; protected updated(changedProperties: PropertyValues) { if (changedProperties.has("device")) { diff --git a/src/panels/config/devices/device-detail/integration-elements/zha/ha-device-info-zha.ts b/src/panels/config/devices/device-detail/integration-elements/zha/ha-device-info-zha.ts index d84e3ecb0c..3005838eb4 100644 --- a/src/panels/config/devices/device-detail/integration-elements/zha/ha-device-info-zha.ts +++ b/src/panels/config/devices/device-detail/integration-elements/zha/ha-device-info-zha.ts @@ -4,6 +4,7 @@ import { html, LitElement, property, + internalProperty, TemplateResult, css, PropertyValues, @@ -16,11 +17,11 @@ import { formatAsPaddedHex } from "../../../../integrations/integration-panels/z @customElement("ha-device-info-zha") export class HaDeviceActionsZha extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public device!: DeviceRegistryEntry; - @property() private _zhaDevice?: ZHADevice; + @internalProperty() private _zhaDevice?: ZHADevice; protected updated(changedProperties: PropertyValues) { if (changedProperties.has("device")) { diff --git a/src/panels/config/devices/ha-config-device-page.ts b/src/panels/config/devices/ha-config-device-page.ts index 9987b894cc..fe49cf76fa 100644 --- a/src/panels/config/devices/ha-config-device-page.ts +++ b/src/panels/config/devices/ha-config-device-page.ts @@ -6,6 +6,7 @@ import { html, LitElement, property, + internalProperty, TemplateResult, } from "lit-element"; import { ifDefined } from "lit-html/directives/if-defined"; @@ -50,7 +51,7 @@ export interface EntityRegistryStateEntry extends EntityRegistryEntry { @customElement("ha-config-device-page") export class HaConfigDevicePage extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public devices!: DeviceRegistryEntry[]; @@ -70,7 +71,7 @@ export class HaConfigDevicePage extends LitElement { @property() public route!: Route; - @property() private _related?: RelatedResult; + @internalProperty() private _related?: RelatedResult; private _device = memoizeOne( ( diff --git a/src/panels/config/devices/ha-config-devices-dashboard.ts b/src/panels/config/devices/ha-config-devices-dashboard.ts index 673d0ff7f3..884c7c16dc 100644 --- a/src/panels/config/devices/ha-config-devices-dashboard.ts +++ b/src/panels/config/devices/ha-config-devices-dashboard.ts @@ -3,6 +3,7 @@ import { html, LitElement, property, + internalProperty, TemplateResult, } from "lit-element"; import memoizeOne from "memoize-one"; @@ -41,7 +42,7 @@ interface DeviceRowData extends DeviceRegistryEntry { @customElement("ha-config-devices-dashboard") export class HaConfigDeviceDashboard extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public narrow = false; @@ -57,7 +58,7 @@ export class HaConfigDeviceDashboard extends LitElement { @property() public route!: Route; - @property() private _searchParms = new URLSearchParams( + @internalProperty() private _searchParms = new URLSearchParams( window.location.search ); diff --git a/src/panels/config/devices/ha-config-devices.ts b/src/panels/config/devices/ha-config-devices.ts index 4b5aca4078..bfdcc55754 100644 --- a/src/panels/config/devices/ha-config-devices.ts +++ b/src/panels/config/devices/ha-config-devices.ts @@ -1,5 +1,10 @@ import { UnsubscribeFunc } from "home-assistant-js-websocket"; -import { customElement, property, PropertyValues } from "lit-element"; +import { + customElement, + property, + internalProperty, + PropertyValues, +} from "lit-element"; import { AreaRegistryEntry, subscribeAreaRegistry, @@ -23,7 +28,7 @@ import "./ha-config-devices-dashboard"; @customElement("ha-config-devices") class HaConfigDevices extends HassRouterPage { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public narrow!: boolean; @@ -44,13 +49,15 @@ class HaConfigDevices extends HassRouterPage { }, }; - @property() private _configEntries: ConfigEntry[] = []; + @internalProperty() private _configEntries: ConfigEntry[] = []; - @property() private _entityRegistryEntries: EntityRegistryEntry[] = []; + @internalProperty() + private _entityRegistryEntries: EntityRegistryEntry[] = []; - @property() private _deviceRegistryEntries: DeviceRegistryEntry[] = []; + @internalProperty() + private _deviceRegistryEntries: DeviceRegistryEntry[] = []; - @property() private _areas: AreaRegistryEntry[] = []; + @internalProperty() private _areas: AreaRegistryEntry[] = []; private _unsubs?: UnsubscribeFunc[]; diff --git a/src/panels/config/entities/dialog-entity-editor.ts b/src/panels/config/entities/dialog-entity-editor.ts index 4dbbb5b607..0403b0ffc5 100644 --- a/src/panels/config/entities/dialog-entity-editor.ts +++ b/src/panels/config/entities/dialog-entity-editor.ts @@ -9,6 +9,7 @@ import { html, LitElement, property, + internalProperty, TemplateResult, } from "lit-element"; import { cache } from "lit-html/directives/cache"; @@ -42,20 +43,20 @@ interface Tab { @customElement("dialog-entity-editor") export class DialogEntityEditor extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; - @property() private _params?: EntityRegistryDetailDialogParams; + @internalProperty() private _params?: EntityRegistryDetailDialogParams; - @property() private _entry?: + @internalProperty() private _entry?: | EntityRegistryEntry | ExtEntityRegistryEntry | null; - @property() private _curTab = "tab-settings"; + @internalProperty() private _curTab = "tab-settings"; - @property() private _extraTabs: Tabs = {}; + @internalProperty() private _extraTabs: Tabs = {}; - @property() private _settingsElementTag?: string; + @internalProperty() private _settingsElementTag?: string; private _curTabIndex = 0; @@ -244,6 +245,7 @@ export class DialogEntityEditor extends LitElement { } ha-dialog { + --dialog-content-position: static; --dialog-content-padding: 0; } diff --git a/src/panels/config/entities/editor-tabs/settings/entity-settings-helper-tab.ts b/src/panels/config/entities/editor-tabs/settings/entity-settings-helper-tab.ts index dbf2a37a88..fbaa723ec8 100644 --- a/src/panels/config/entities/editor-tabs/settings/entity-settings-helper-tab.ts +++ b/src/panels/config/entities/editor-tabs/settings/entity-settings-helper-tab.ts @@ -5,6 +5,7 @@ import { html, LitElement, property, + internalProperty, PropertyValues, query, TemplateResult, @@ -51,6 +52,7 @@ import "../../../helpers/forms/ha-input_select-form"; import "../../../helpers/forms/ha-input_text-form"; import "../../entity-registry-basic-editor"; import type { HaEntityRegistryBasicEditor } from "../../entity-registry-basic-editor"; +import { haStyle } from "../../../../../resources/styles"; const HELPERS = { input_boolean: { @@ -82,17 +84,17 @@ const HELPERS = { @customElement("entity-settings-helper-tab") export class EntityRegistrySettingsHelper extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public entry!: ExtEntityRegistryEntry; - @property() private _error?: string; + @internalProperty() private _error?: string; - @property() private _item?: Helper | null; + @internalProperty() private _item?: Helper | null; - @property() private _submitting?: boolean; + @internalProperty() private _submitting?: boolean; - @property() private _componentLoaded?: boolean; + @internalProperty() private _componentLoaded?: boolean; @query("ha-registry-basic-editor") private _registryEditor?: HaEntityRegistryBasicEditor; @@ -218,35 +220,42 @@ export class EntityRegistrySettingsHelper extends LitElement { } } - static get styles(): CSSResult { - return css` - :host { - display: block; - padding: 0 !important; - } - .form { - padding: 20px 24px; - } - .buttons { - display: flex; - justify-content: space-between; - padding: 8px; - margin-bottom: -20px; - } - mwc-button.warning { - --mdc-theme-primary: var(--error-color); - } - .error { - color: var(--error-color); - } - .row { - margin-top: 8px; - color: var(--primary-text-color); - } - .secondary { - color: var(--secondary-text-color); - } - `; + static get styles(): CSSResult[] { + return [ + haStyle, + css` + :host { + display: block; + padding: 0 !important; + } + .form { + padding: 20px 24px; + margin-bottom: 53px; + } + .buttons { + position: absolute; + bottom: 0; + width: 100%; + box-sizing: border-box; + border-top: 1px solid + var(--mdc-dialog-scroll-divider-color, rgba(0, 0, 0, 0.12)); + display: flex; + justify-content: space-between; + padding: 8px; + background-color: var(--mdc-theme-surface, #fff); + } + .error { + color: var(--error-color); + } + .row { + margin-top: 8px; + color: var(--primary-text-color); + } + .secondary { + color: var(--secondary-text-color); + } + `, + ]; } } diff --git a/src/panels/config/entities/entity-registry-basic-editor.ts b/src/panels/config/entities/entity-registry-basic-editor.ts index 071b8f7232..4b4ac7723d 100644 --- a/src/panels/config/entities/entity-registry-basic-editor.ts +++ b/src/panels/config/entities/entity-registry-basic-editor.ts @@ -5,6 +5,7 @@ import { html, LitElement, property, + internalProperty, PropertyValues, TemplateResult, } from "lit-element"; @@ -21,17 +22,17 @@ import type { HomeAssistant } from "../../../types"; @customElement("ha-registry-basic-editor") export class HaEntityRegistryBasicEditor extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public entry!: ExtEntityRegistryEntry; - @property() private _origEntityId!: string; + @internalProperty() private _origEntityId!: string; - @property() private _entityId!: string; + @internalProperty() private _entityId!: string; - @property() private _disabledBy!: string | null; + @internalProperty() private _disabledBy!: string | null; - @property() private _submitting?: boolean; + @internalProperty() private _submitting?: boolean; public async updateEntry(): Promise { this._submitting = true; diff --git a/src/panels/config/entities/entity-registry-settings.ts b/src/panels/config/entities/entity-registry-settings.ts index d5f971dc36..176d669515 100644 --- a/src/panels/config/entities/entity-registry-settings.ts +++ b/src/panels/config/entities/entity-registry-settings.ts @@ -8,6 +8,7 @@ import { html, LitElement, property, + internalProperty, PropertyValues, TemplateResult, } from "lit-element"; @@ -29,21 +30,21 @@ import type { HomeAssistant } from "../../../types"; @customElement("entity-registry-settings") export class EntityRegistrySettings extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public entry!: ExtEntityRegistryEntry; - @property() private _name!: string; + @internalProperty() private _name!: string; - @property() private _icon!: string; + @internalProperty() private _icon!: string; - @property() private _entityId!: string; + @internalProperty() private _entityId!: string; - @property() private _disabledBy!: string | null; + @internalProperty() private _disabledBy!: string | null; - @property() private _error?: string; + @internalProperty() private _error?: string; - @property() private _submitting?: boolean; + @internalProperty() private _submitting?: boolean; private _origEntityId!: string; @@ -225,19 +226,22 @@ export class EntityRegistrySettings extends LitElement { css` :host { display: block; - margin-bottom: 0 !important; - padding: 0 !important; } .form { padding: 20px 24px; + margin-bottom: 53px; } .buttons { + position: absolute; + bottom: 0; + width: 100%; + box-sizing: border-box; + border-top: 1px solid + var(--mdc-dialog-scroll-divider-color, rgba(0, 0, 0, 0.12)); display: flex; - justify-content: flex-end; + justify-content: space-between; padding: 8px; - } - mwc-button.warning { - margin-right: auto; + background-color: var(--mdc-theme-surface, #fff); } ha-switch { margin-right: 16px; diff --git a/src/panels/config/entities/ha-config-entities.ts b/src/panels/config/entities/ha-config-entities.ts index 729e26cc2a..953da27bd1 100644 --- a/src/panels/config/entities/ha-config-entities.ts +++ b/src/panels/config/entities/ha-config-entities.ts @@ -12,6 +12,7 @@ import { html, LitElement, property, + internalProperty, query, TemplateResult, } from "lit-element"; @@ -71,7 +72,7 @@ export interface EntityRow extends StateEntity { @customElement("ha-config-entities") export class HaConfigEntities extends SubscribeMixin(LitElement) { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public isWide!: boolean; @@ -79,25 +80,25 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) { @property() public route!: Route; - @property() private _entities?: EntityRegistryEntry[]; + @internalProperty() private _entities?: EntityRegistryEntry[]; - @property() private _stateEntities: StateEntity[] = []; + @internalProperty() private _stateEntities: StateEntity[] = []; @property() public _entries?: ConfigEntry[]; - @property() private _showDisabled = false; + @internalProperty() private _showDisabled = false; - @property() private _showUnavailable = true; + @internalProperty() private _showUnavailable = true; - @property() private _showReadOnly = true; + @internalProperty() private _showReadOnly = true; - @property() private _filter = ""; + @internalProperty() private _filter = ""; - @property() private _searchParms = new URLSearchParams( + @internalProperty() private _searchParms = new URLSearchParams( window.location.search ); - @property() private _selectedEntities: string[] = []; + @internalProperty() private _selectedEntities: string[] = []; @query("hass-tabs-subpage-data-table") private _dataTable!: HaTabsSubpageDataTable; @@ -461,7 +462,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) { void> = []; diff --git a/src/panels/config/helpers/dialog-helper-detail.ts b/src/panels/config/helpers/dialog-helper-detail.ts index b22ca67e77..b752a5037d 100644 --- a/src/panels/config/helpers/dialog-helper-detail.ts +++ b/src/panels/config/helpers/dialog-helper-detail.ts @@ -8,6 +8,7 @@ import { html, LitElement, property, + internalProperty, query, TemplateResult, } from "lit-element"; @@ -40,17 +41,17 @@ const HELPERS = { @customElement("dialog-helper-detail") export class DialogHelperDetail extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; - @property() private _item?: Helper; + @internalProperty() private _item?: Helper; - @property() private _opened = false; + @internalProperty() private _opened = false; - @property() private _platform?: string; + @internalProperty() private _platform?: string; - @property() private _error?: string; + @internalProperty() private _error?: string; - @property() private _submitting = false; + @internalProperty() private _submitting = false; @query(".form") private _form?: HTMLDivElement; diff --git a/src/panels/config/helpers/forms/ha-input_boolean-form.ts b/src/panels/config/helpers/forms/ha-input_boolean-form.ts index af22fc3b06..54b1fa2b3a 100644 --- a/src/panels/config/helpers/forms/ha-input_boolean-form.ts +++ b/src/panels/config/helpers/forms/ha-input_boolean-form.ts @@ -6,6 +6,7 @@ import { html, LitElement, property, + internalProperty, TemplateResult, } from "lit-element"; import { fireEvent } from "../../../../common/dom/fire_event"; @@ -16,15 +17,15 @@ import { HomeAssistant } from "../../../../types"; @customElement("ha-input_boolean-form") class HaInputBooleanForm extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public new?: boolean; private _item?: InputBoolean; - @property() private _name!: string; + @internalProperty() private _name!: string; - @property() private _icon!: string; + @internalProperty() private _icon!: string; set item(item: InputBoolean) { this._item = item; diff --git a/src/panels/config/helpers/forms/ha-input_datetime-form.ts b/src/panels/config/helpers/forms/ha-input_datetime-form.ts index 081f550618..07dfb95eb9 100644 --- a/src/panels/config/helpers/forms/ha-input_datetime-form.ts +++ b/src/panels/config/helpers/forms/ha-input_datetime-form.ts @@ -8,6 +8,7 @@ import { html, LitElement, property, + internalProperty, TemplateResult, } from "lit-element"; import { fireEvent } from "../../../../common/dom/fire_event"; @@ -18,17 +19,17 @@ import { HomeAssistant } from "../../../../types"; @customElement("ha-input_datetime-form") class HaInputDateTimeForm extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public new?: boolean; private _item?: InputDateTime; - @property() private _name!: string; + @internalProperty() private _name!: string; - @property() private _icon!: string; + @internalProperty() private _icon!: string; - @property() private _mode!: "date" | "time" | "datetime"; + @internalProperty() private _mode!: "date" | "time" | "datetime"; set item(item: InputDateTime) { this._item = item; diff --git a/src/panels/config/helpers/forms/ha-input_number-form.ts b/src/panels/config/helpers/forms/ha-input_number-form.ts index a6b383348b..ddc675821f 100644 --- a/src/panels/config/helpers/forms/ha-input_number-form.ts +++ b/src/panels/config/helpers/forms/ha-input_number-form.ts @@ -8,6 +8,7 @@ import { html, LitElement, property, + internalProperty, TemplateResult, } from "lit-element"; import { fireEvent } from "../../../../common/dom/fire_event"; @@ -18,26 +19,26 @@ import { HomeAssistant } from "../../../../types"; @customElement("ha-input_number-form") class HaInputNumberForm extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public new?: boolean; private _item?: Partial; - @property() private _name!: string; + @internalProperty() private _name!: string; - @property() private _icon!: string; + @internalProperty() private _icon!: string; - @property() private _max?: number; + @internalProperty() private _max?: number; - @property() private _min?: number; + @internalProperty() private _min?: number; - @property() private _mode?: string; + @internalProperty() private _mode?: string; - @property() private _step?: number; + @internalProperty() private _step?: number; // eslint-disable-next-line: variable-name - @property() private _unit_of_measurement?: string; + @internalProperty() private _unit_of_measurement?: string; set item(item: InputNumber) { this._item = item; diff --git a/src/panels/config/helpers/forms/ha-input_select-form.ts b/src/panels/config/helpers/forms/ha-input_select-form.ts index e73eddee5b..eef74de859 100644 --- a/src/panels/config/helpers/forms/ha-input_select-form.ts +++ b/src/panels/config/helpers/forms/ha-input_select-form.ts @@ -11,6 +11,7 @@ import { html, LitElement, property, + internalProperty, query, TemplateResult, } from "lit-element"; @@ -23,17 +24,17 @@ import type { HomeAssistant } from "../../../../types"; @customElement("ha-input_select-form") class HaInputSelectForm extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public new?: boolean; private _item?: InputSelect; - @property() private _name!: string; + @internalProperty() private _name!: string; - @property() private _icon!: string; + @internalProperty() private _icon!: string; - @property() private _options: string[] = []; + @internalProperty() private _options: string[] = []; @query("#option_input") private _optionInput?: PaperInputElement; diff --git a/src/panels/config/helpers/forms/ha-input_text-form.ts b/src/panels/config/helpers/forms/ha-input_text-form.ts index 5e2a2c0407..98db37b536 100644 --- a/src/panels/config/helpers/forms/ha-input_text-form.ts +++ b/src/panels/config/helpers/forms/ha-input_text-form.ts @@ -8,6 +8,7 @@ import { html, LitElement, property, + internalProperty, TemplateResult, } from "lit-element"; import { fireEvent } from "../../../../common/dom/fire_event"; @@ -18,23 +19,23 @@ import { HomeAssistant } from "../../../../types"; @customElement("ha-input_text-form") class HaInputTextForm extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public new?: boolean; private _item?: InputText; - @property() private _name!: string; + @internalProperty() private _name!: string; - @property() private _icon!: string; + @internalProperty() private _icon!: string; - @property() private _max?: number; + @internalProperty() private _max?: number; - @property() private _min?: number; + @internalProperty() private _min?: number; - @property() private _mode?: string; + @internalProperty() private _mode?: string; - @property() private _pattern?: string; + @internalProperty() private _pattern?: string; set item(item: InputText) { this._item = item; diff --git a/src/panels/config/helpers/ha-config-helpers.ts b/src/panels/config/helpers/ha-config-helpers.ts index 113f7d0655..5297eca681 100644 --- a/src/panels/config/helpers/ha-config-helpers.ts +++ b/src/panels/config/helpers/ha-config-helpers.ts @@ -11,6 +11,7 @@ import { html, LitElement, property, + internalProperty, PropertyValues, TemplateResult, } from "lit-element"; @@ -37,7 +38,7 @@ import { computeRTL } from "../../../common/util/compute_rtl"; @customElement("ha-config-helpers") export class HaConfigHelpers extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public isWide!: boolean; @@ -45,7 +46,7 @@ export class HaConfigHelpers extends LitElement { @property() public route!: Route; - @property() private _stateItems: HassEntity[] = []; + @internalProperty() private _stateItems: HassEntity[] = []; private _columns = memoize( (narrow, _language): DataTableColumnContainer => { diff --git a/src/panels/config/info/ha-config-info.ts b/src/panels/config/info/ha-config-info.ts index f1fd86998b..178b8ca0ae 100644 --- a/src/panels/config/info/ha-config-info.ts +++ b/src/panels/config/info/ha-config-info.ts @@ -17,7 +17,7 @@ const JS_TYPE = __BUILD__; const JS_VERSION = __VERSION__; class HaConfigInfo extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public narrow!: boolean; diff --git a/src/panels/config/info/integrations-card.ts b/src/panels/config/info/integrations-card.ts index 01390123b5..dd9da6d403 100644 --- a/src/panels/config/info/integrations-card.ts +++ b/src/panels/config/info/integrations-card.ts @@ -5,6 +5,7 @@ import { html, LitElement, property, + internalProperty, TemplateResult, } from "lit-element"; import memoizeOne from "memoize-one"; @@ -19,9 +20,11 @@ import { HomeAssistant } from "../../../types"; @customElement("integrations-card") class IntegrationsCard extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; - @property() private _manifests?: { [domain: string]: IntegrationManifest }; + @internalProperty() private _manifests?: { + [domain: string]: IntegrationManifest; + }; private _sortedIntegrations = memoizeOne((components: string[]) => { return components.filter((comp) => !comp.includes(".")).sort(); diff --git a/src/panels/config/info/system-health-card.ts b/src/panels/config/info/system-health-card.ts index 4056d28b5c..eafbf533db 100644 --- a/src/panels/config/info/system-health-card.ts +++ b/src/panels/config/info/system-health-card.ts @@ -5,6 +5,7 @@ import { html, LitElement, property, + internalProperty, TemplateResult, } from "lit-element"; import "../../../components/ha-card"; @@ -32,9 +33,9 @@ const sortKeys = (a: string, b: string) => { }; class SystemHealthCard extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; - @property() private _info?: SystemHealthInfo; + @internalProperty() private _info?: SystemHealthInfo; protected render(): TemplateResult { if (!this.hass) { diff --git a/src/panels/config/integrations/ha-config-integrations.ts b/src/panels/config/integrations/ha-config-integrations.ts index 1db180f47f..be6f2bbac1 100644 --- a/src/panels/config/integrations/ha-config-integrations.ts +++ b/src/panels/config/integrations/ha-config-integrations.ts @@ -12,6 +12,7 @@ import { html, LitElement, property, + internalProperty, PropertyValues, TemplateResult, } from "lit-element"; @@ -91,7 +92,7 @@ const groupByIntegration = ( @customElement("ha-config-integrations") class HaConfigIntegrations extends SubscribeMixin(LitElement) { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public narrow!: boolean; @@ -101,24 +102,28 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) { @property() public route!: Route; - @property() private _configEntries?: ConfigEntryExtended[]; + @internalProperty() private _configEntries?: ConfigEntryExtended[]; @property() private _configEntriesInProgress: DataEntryFlowProgressExtended[] = []; - @property() private _entityRegistryEntries: EntityRegistryEntry[] = []; + @internalProperty() + private _entityRegistryEntries: EntityRegistryEntry[] = []; - @property() private _deviceRegistryEntries: DeviceRegistryEntry[] = []; + @internalProperty() + private _deviceRegistryEntries: DeviceRegistryEntry[] = []; - @property() private _manifests!: { [domain: string]: IntegrationManifest }; + @internalProperty() private _manifests!: { + [domain: string]: IntegrationManifest; + }; - @property() private _showIgnored = false; + @internalProperty() private _showIgnored = false; - @property() private _searchParms = new URLSearchParams( + @internalProperty() private _searchParms = new URLSearchParams( window.location.hash.substring(1) ); - @property() private _filter?: string; + @internalProperty() private _filter?: string; public hassSubscribe(): UnsubscribeFunc[] { return [ @@ -279,7 +284,7 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) { > - + ${this.hass.localize( this._showIgnored ? "ui.panel.config.integrations.ignore.hide_ignored" diff --git a/src/panels/config/integrations/ha-integration-card.ts b/src/panels/config/integrations/ha-integration-card.ts index 6beaa4c092..e2d5ea4215 100644 --- a/src/panels/config/integrations/ha-integration-card.ts +++ b/src/panels/config/integrations/ha-integration-card.ts @@ -62,7 +62,7 @@ const integrationsWithPanel = { @customElement("ha-integration-card") export class HaIntegrationCard extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public domain!: string; @@ -231,7 +231,7 @@ export class HaIntegrationCard extends LitElement { > - + ${this.hass.localize( "ui.panel.config.integrations.config_entry.system_options" )} @@ -255,7 +255,10 @@ export class HaIntegrationCard extends LitElement { `} - + ${this.hass.localize( "ui.panel.config.integrations.config_entry.delete" )} diff --git a/src/panels/config/integrations/integration-panels/mqtt/mqtt-config-panel.ts b/src/panels/config/integrations/integration-panels/mqtt/mqtt-config-panel.ts index 17aef88705..e2c166f571 100644 --- a/src/panels/config/integrations/integration-panels/mqtt/mqtt-config-panel.ts +++ b/src/panels/config/integrations/integration-panels/mqtt/mqtt-config-panel.ts @@ -7,6 +7,7 @@ import { html, LitElement, property, + internalProperty, TemplateResult, } from "lit-element"; import "../../../../../components/ha-card"; @@ -20,11 +21,11 @@ import { getConfigEntries } from "../../../../../data/config_entries"; @customElement("mqtt-config-panel") class HaPanelDevMqtt extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; - @property() private topic = ""; + @internalProperty() private topic = ""; - @property() private payload = ""; + @internalProperty() private payload = ""; private inited = false; diff --git a/src/panels/config/integrations/integration-panels/mqtt/mqtt-subscribe-card.ts b/src/panels/config/integrations/integration-panels/mqtt/mqtt-subscribe-card.ts index 98652360fd..b74a5a76fb 100644 --- a/src/panels/config/integrations/integration-panels/mqtt/mqtt-subscribe-card.ts +++ b/src/panels/config/integrations/integration-panels/mqtt/mqtt-subscribe-card.ts @@ -7,6 +7,7 @@ import { html, LitElement, property, + internalProperty, TemplateResult, } from "lit-element"; import { formatTime } from "../../../../../common/datetime/format_time"; @@ -16,13 +17,13 @@ import { HomeAssistant } from "../../../../../types"; @customElement("mqtt-subscribe-card") class MqttSubscribeCard extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; - @property() private _topic = ""; + @internalProperty() private _topic = ""; - @property() private _subscribed?: () => void; + @internalProperty() private _subscribed?: () => void; - @property() private _messages: Array<{ + @internalProperty() private _messages: Array<{ id: number; message: MQTTMessage; payload: string; diff --git a/src/panels/config/integrations/integration-panels/zha/dialog-zha-cluster.ts b/src/panels/config/integrations/integration-panels/zha/dialog-zha-cluster.ts index 52898f33f7..9b1b093ff6 100644 --- a/src/panels/config/integrations/integration-panels/zha/dialog-zha-cluster.ts +++ b/src/panels/config/integrations/integration-panels/zha/dialog-zha-cluster.ts @@ -4,6 +4,7 @@ import { html, LitElement, property, + internalProperty, TemplateResult, PropertyValues, } from "lit-element"; @@ -30,15 +31,15 @@ import { sortZHADevices, sortZHAGroups } from "./functions"; @customElement("dialog-zha-cluster") class DialogZHACluster extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; - @property() private _device?: ZHADevice; + @internalProperty() private _device?: ZHADevice; - @property() private _selectedCluster?: Cluster; + @internalProperty() private _selectedCluster?: Cluster; - @property() private _bindableDevices: ZHADevice[] = []; + @internalProperty() private _bindableDevices: ZHADevice[] = []; - @property() private _groups: ZHAGroup[] = []; + @internalProperty() private _groups: ZHAGroup[] = []; public async showDialog( params: ZHADeviceZigbeeInfoDialogParams diff --git a/src/panels/config/integrations/integration-panels/zha/dialog-zha-device-zigbee-info.ts b/src/panels/config/integrations/integration-panels/zha/dialog-zha-device-zigbee-info.ts index f1a921ddd5..c3af80c7fc 100644 --- a/src/panels/config/integrations/integration-panels/zha/dialog-zha-device-zigbee-info.ts +++ b/src/panels/config/integrations/integration-panels/zha/dialog-zha-device-zigbee-info.ts @@ -4,6 +4,7 @@ import { html, LitElement, property, + internalProperty, TemplateResult, } from "lit-element"; import "../../../../../components/ha-code-editor"; @@ -14,9 +15,9 @@ import { ZHADeviceZigbeeInfoDialogParams } from "./show-dialog-zha-device-zigbee @customElement("dialog-zha-device-zigbee-info") class DialogZHADeviceZigbeeInfo extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; - @property() private _signature: any; + @internalProperty() private _signature: any; public async showDialog( params: ZHADeviceZigbeeInfoDialogParams diff --git a/src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts b/src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts index 1575571789..6c2fdcc897 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts @@ -8,6 +8,7 @@ import { html, LitElement, property, + internalProperty, TemplateResult, PropertyValues, } from "lit-element"; @@ -23,7 +24,7 @@ import { IronAutogrowTextareaElement } from "@polymer/iron-autogrow-textarea"; @customElement("zha-add-devices-page") class ZHAAddDevicesPage extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public narrow?: boolean; @@ -31,17 +32,17 @@ class ZHAAddDevicesPage extends LitElement { @property() public route?: Route; - @property() private _error?: string; + @internalProperty() private _error?: string; - @property() private _discoveredDevices: ZHADevice[] = []; + @internalProperty() private _discoveredDevices: ZHADevice[] = []; - @property() private _formattedEvents = ""; + @internalProperty() private _formattedEvents = ""; - @property() private _active = false; + @internalProperty() private _active = false; - @property() private _showHelp = false; + @internalProperty() private _showHelp = false; - @property() private _showLogs = false; + @internalProperty() private _showLogs = false; private _ieeeAddress?: string; diff --git a/src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts b/src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts index ba1f18e753..a7929f0bda 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts @@ -9,6 +9,7 @@ import { html, LitElement, property, + internalProperty, PropertyValues, query, } from "lit-element"; @@ -37,9 +38,9 @@ export class ZHAAddGroupPage extends LitElement { @property({ type: Array }) public deviceEndpoints: ZHADeviceEndpoint[] = []; - @property() private _processingAdd = false; + @internalProperty() private _processingAdd = false; - @property() private _groupName = ""; + @internalProperty() private _groupName = ""; @query("zha-device-endpoint-data-table") private _zhaDevicesDataTable!: ZHADeviceEndpointDataTable; diff --git a/src/panels/config/integrations/integration-panels/zha/zha-cluster-attributes.ts b/src/panels/config/integrations/integration-panels/zha/zha-cluster-attributes.ts index a21a58505a..b2bb1c76b5 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-cluster-attributes.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-cluster-attributes.ts @@ -10,6 +10,7 @@ import { html, LitElement, property, + internalProperty, PropertyValues, TemplateResult, } from "lit-element"; @@ -35,7 +36,7 @@ import { } from "./types"; export class ZHAClusterAttributes extends LitElement { - @property() public hass?: HomeAssistant; + @property({ attribute: false }) public hass?: HomeAssistant; @property() public isWide?: boolean; @@ -45,15 +46,16 @@ export class ZHAClusterAttributes extends LitElement { @property() public selectedCluster?: Cluster; - @property() private _attributes: Attribute[] = []; + @internalProperty() private _attributes: Attribute[] = []; - @property() private _selectedAttributeIndex = -1; + @internalProperty() private _selectedAttributeIndex = -1; - @property() private _attributeValue?: any = ""; + @internalProperty() private _attributeValue?: any = ""; - @property() private _manufacturerCodeOverride?: string | number; + @internalProperty() private _manufacturerCodeOverride?: string | number; - @property() private _setAttributeServiceData?: SetAttributeServiceData; + @internalProperty() + private _setAttributeServiceData?: SetAttributeServiceData; protected updated(changedProperties: PropertyValues): void { if (changedProperties.has("selectedCluster")) { diff --git a/src/panels/config/integrations/integration-panels/zha/zha-cluster-commands.ts b/src/panels/config/integrations/integration-panels/zha/zha-cluster-commands.ts index 623c3cdd82..39fc7727e2 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-cluster-commands.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-cluster-commands.ts @@ -9,6 +9,7 @@ import { html, LitElement, property, + internalProperty, PropertyValues, TemplateResult, } from "lit-element"; @@ -32,7 +33,7 @@ import { } from "./types"; export class ZHAClusterCommands extends LitElement { - @property() public hass?: HomeAssistant; + @property({ attribute: false }) public hass?: HomeAssistant; @property() public isWide?: boolean; @@ -40,15 +41,16 @@ export class ZHAClusterCommands extends LitElement { @property() public selectedCluster?: Cluster; - @property() private _showHelp = false; + @internalProperty() private _showHelp = false; - @property() private _commands: Command[] = []; + @internalProperty() private _commands: Command[] = []; - @property() private _selectedCommandIndex = -1; + @internalProperty() private _selectedCommandIndex = -1; - @property() private _manufacturerCodeOverride?: number; + @internalProperty() private _manufacturerCodeOverride?: number; - @property() private _issueClusterCommandServiceData?: IssueCommandServiceData; + @internalProperty() + private _issueClusterCommandServiceData?: IssueCommandServiceData; protected updated(changedProperties: PropertyValues): void { if (changedProperties.has("selectedCluster")) { diff --git a/src/panels/config/integrations/integration-panels/zha/zha-clusters-data-table.ts b/src/panels/config/integrations/integration-panels/zha/zha-clusters-data-table.ts index ad615721b1..3354b0f80f 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-clusters-data-table.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-clusters-data-table.ts @@ -25,7 +25,7 @@ export interface ClusterRowData extends Cluster { @customElement("zha-clusters-data-table") export class ZHAClustersDataTable extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public narrow = false; diff --git a/src/panels/config/integrations/integration-panels/zha/zha-clusters.ts b/src/panels/config/integrations/integration-panels/zha/zha-clusters.ts index 80789264ea..1f8db25cd0 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-clusters.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-clusters.ts @@ -8,6 +8,7 @@ import { html, LitElement, property, + internalProperty, PropertyValues, TemplateResult, } from "lit-element"; @@ -36,7 +37,7 @@ declare global { } export class ZHAClusters extends LitElement { - @property() public hass?: HomeAssistant; + @property({ attribute: false }) public hass?: HomeAssistant; @property() public isWide?: boolean; @@ -44,9 +45,9 @@ export class ZHAClusters extends LitElement { @property() public showHelp = false; - @property() private _selectedClusterIndex = -1; + @internalProperty() private _selectedClusterIndex = -1; - @property() private _clusters: Cluster[] = []; + @internalProperty() private _clusters: Cluster[] = []; protected updated(changedProperties: PropertyValues): void { if (changedProperties.has("selectedDevice")) { diff --git a/src/panels/config/integrations/integration-panels/zha/zha-config-dashboard-router.ts b/src/panels/config/integrations/integration-panels/zha/zha-config-dashboard-router.ts index b6e72c457f..1d87e2e481 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-config-dashboard-router.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-config-dashboard-router.ts @@ -8,7 +8,7 @@ import { navigate } from "../../../../../common/navigate"; @customElement("zha-config-dashboard-router") class ZHAConfigDashboardRouter extends HassRouterPage { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public isWide!: boolean; diff --git a/src/panels/config/integrations/integration-panels/zha/zha-device-binding.ts b/src/panels/config/integrations/integration-panels/zha/zha-device-binding.ts index fbec56baf5..ee3435feca 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-device-binding.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-device-binding.ts @@ -10,6 +10,7 @@ import { html, LitElement, property, + internalProperty, PropertyValues, TemplateResult, } from "lit-element"; @@ -24,19 +25,19 @@ import { ItemSelectedEvent } from "./types"; @customElement("zha-device-binding-control") export class ZHADeviceBindingControl extends LitElement { - @property() public hass?: HomeAssistant; + @property({ attribute: false }) public hass?: HomeAssistant; @property() public isWide?: boolean; @property() public selectedDevice?: ZHADevice; - @property() private _showHelp = false; + @internalProperty() private _showHelp = false; - @property() private _bindTargetIndex = -1; + @internalProperty() private _bindTargetIndex = -1; - @property() private bindableDevices: ZHADevice[] = []; + @internalProperty() private bindableDevices: ZHADevice[] = []; - @property() private _deviceToBind?: ZHADevice; + @internalProperty() private _deviceToBind?: ZHADevice; protected updated(changedProperties: PropertyValues): void { if (changedProperties.has("selectedDevice")) { diff --git a/src/panels/config/integrations/integration-panels/zha/zha-device-card.ts b/src/panels/config/integrations/integration-panels/zha/zha-device-card.ts index 0da4c4e0bf..148544ad03 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-device-card.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-device-card.ts @@ -8,6 +8,7 @@ import { html, LitElement, property, + internalProperty, TemplateResult, } from "lit-element"; import { fireEvent } from "../../../../../common/dom/fire_event"; @@ -36,13 +37,13 @@ import { getIeeeTail } from "./functions"; @customElement("zha-device-card") class ZHADeviceCard extends SubscribeMixin(LitElement) { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public device?: ZHADevice; @property({ type: Boolean }) public narrow?: boolean; - @property() private _entities: EntityRegistryEntry[] = []; + @internalProperty() private _entities: EntityRegistryEntry[] = []; private _deviceEntities = memoizeOne( ( diff --git a/src/panels/config/integrations/integration-panels/zha/zha-group-binding.ts b/src/panels/config/integrations/integration-panels/zha/zha-group-binding.ts index d880d0c22f..bbf2306703 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-group-binding.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-group-binding.ts @@ -10,6 +10,7 @@ import { html, LitElement, property, + internalProperty, PropertyValues, query, TemplateResult, @@ -36,7 +37,7 @@ import type { ZHAClustersDataTable } from "./zha-clusters-data-table"; @customElement("zha-group-binding-control") export class ZHAGroupBindingControl extends LitElement { - @property() public hass?: HomeAssistant; + @property({ attribute: false }) public hass?: HomeAssistant; @property() public isWide?: boolean; @@ -44,15 +45,15 @@ export class ZHAGroupBindingControl extends LitElement { @property() public selectedDevice?: ZHADevice; - @property() private _showHelp = false; + @internalProperty() private _showHelp = false; - @property() private _bindTargetIndex = -1; + @internalProperty() private _bindTargetIndex = -1; - @property() private groups: ZHAGroup[] = []; + @internalProperty() private groups: ZHAGroup[] = []; - @property() private _selectedClusters: string[] = []; + @internalProperty() private _selectedClusters: string[] = []; - @property() private _clusters: Cluster[] = []; + @internalProperty() private _clusters: Cluster[] = []; private _groupToBind?: ZHAGroup; diff --git a/src/panels/config/integrations/integration-panels/zha/zha-group-page.ts b/src/panels/config/integrations/integration-panels/zha/zha-group-page.ts index 30d8d09eae..c4a928b669 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-group-page.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-group-page.ts @@ -8,6 +8,7 @@ import { html, LitElement, property, + internalProperty, PropertyValues, query, } from "lit-element"; @@ -45,15 +46,16 @@ export class ZHAGroupPage extends LitElement { @property({ type: Array }) public deviceEndpoints: ZHADeviceEndpoint[] = []; - @property() private _processingAdd = false; + @internalProperty() private _processingAdd = false; - @property() private _processingRemove = false; + @internalProperty() private _processingRemove = false; - @property() private _filteredDeviceEndpoints: ZHADeviceEndpoint[] = []; + @internalProperty() + private _filteredDeviceEndpoints: ZHADeviceEndpoint[] = []; - @property() private _selectedDevicesToAdd: string[] = []; + @internalProperty() private _selectedDevicesToAdd: string[] = []; - @property() private _selectedDevicesToRemove: string[] = []; + @internalProperty() private _selectedDevicesToRemove: string[] = []; @query("#addMembers") private _zhaAddMembersDataTable!: ZHADeviceEndpointDataTable; diff --git a/src/panels/config/integrations/integration-panels/zha/zha-groups-dashboard.ts b/src/panels/config/integrations/integration-panels/zha/zha-groups-dashboard.ts index a344750e00..b96eda6de8 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-groups-dashboard.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-groups-dashboard.ts @@ -34,7 +34,7 @@ export interface GroupRowData extends ZHAGroup { @customElement("zha-groups-dashboard") export class ZHAGroupsDashboard extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property({ type: Object }) public route!: Route; diff --git a/src/panels/config/integrations/integration-panels/zwave/zwave-network.ts b/src/panels/config/integrations/integration-panels/zwave/zwave-network.ts index 0f8d7dd256..7d220ba93c 100644 --- a/src/panels/config/integrations/integration-panels/zwave/zwave-network.ts +++ b/src/panels/config/integrations/integration-panels/zwave/zwave-network.ts @@ -8,6 +8,7 @@ import { html, LitElement, property, + internalProperty, TemplateResult, } from "lit-element"; import "../../../../../components/buttons/ha-call-api-button"; @@ -29,15 +30,15 @@ import "../../../ha-config-section"; @customElement("zwave-network") export class ZwaveNetwork extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public isWide!: boolean; - @property() private _showHelp = false; + @internalProperty() private _showHelp = false; - @property() private _networkStatus?: ZWaveNetworkStatus; + @internalProperty() private _networkStatus?: ZWaveNetworkStatus; - @property() private _unsubs: Array> = []; + @internalProperty() private _unsubs: Array> = []; public disconnectedCallback(): void { this._unsubscribe(); diff --git a/src/panels/config/integrations/integration-panels/zwave/zwave-node-config.ts b/src/panels/config/integrations/integration-panels/zwave/zwave-node-config.ts index 831ee5a86b..a6326633c8 100644 --- a/src/panels/config/integrations/integration-panels/zwave/zwave-node-config.ts +++ b/src/panels/config/integrations/integration-panels/zwave/zwave-node-config.ts @@ -9,6 +9,7 @@ import { html, LitElement, property, + internalProperty, PropertyValues, TemplateResult, } from "lit-element"; @@ -25,7 +26,7 @@ import { HomeAssistant } from "../../../../../types"; @customElement("zwave-node-config") export class ZwaveNodeConfig extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public nodes: ZWaveNode[] = []; @@ -33,13 +34,13 @@ export class ZwaveNodeConfig extends LitElement { @property() public selectedNode = -1; - @property() private _configItem?: ZWaveConfigItem; + @internalProperty() private _configItem?: ZWaveConfigItem; - @property() private _wakeupInput = -1; + @internalProperty() private _wakeupInput = -1; - @property() private _selectedConfigParameter = -1; + @internalProperty() private _selectedConfigParameter = -1; - @property() private _selectedConfigValue: number | string = -1; + @internalProperty() private _selectedConfigValue: number | string = -1; protected render(): TemplateResult { return html` diff --git a/src/panels/config/integrations/integration-panels/zwave/zwave-values.ts b/src/panels/config/integrations/integration-panels/zwave/zwave-values.ts index 5e60dd8c2b..7966f0cdeb 100644 --- a/src/panels/config/integrations/integration-panels/zwave/zwave-values.ts +++ b/src/panels/config/integrations/integration-panels/zwave/zwave-values.ts @@ -8,6 +8,7 @@ import { html, LitElement, property, + internalProperty, TemplateResult, } from "lit-element"; import "../../../../../components/buttons/ha-call-service-button"; @@ -18,11 +19,11 @@ import { HomeAssistant } from "../../../../../types"; @customElement("zwave-values") export class ZwaveValues extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public values: ZWaveValue[] = []; - @property() private _selectedValue = -1; + @internalProperty() private _selectedValue = -1; protected render(): TemplateResult { return html` diff --git a/src/panels/config/logs/dialog-system-log-detail.ts b/src/panels/config/logs/dialog-system-log-detail.ts index 01c6ee0355..ad5f28c648 100644 --- a/src/panels/config/logs/dialog-system-log-detail.ts +++ b/src/panels/config/logs/dialog-system-log-detail.ts @@ -5,6 +5,7 @@ import { html, LitElement, property, + internalProperty, TemplateResult, } from "lit-element"; import "../../../components/dialog/ha-paper-dialog"; @@ -23,11 +24,11 @@ import { formatSystemLogTime } from "./util"; import { fireEvent } from "../../../common/dom/fire_event"; class DialogSystemLogDetail extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; - @property() private _params?: SystemLogDetailDialogParams; + @internalProperty() private _params?: SystemLogDetailDialogParams; - @property() private _manifest?: IntegrationManifest; + @internalProperty() private _manifest?: IntegrationManifest; public async showDialog(params: SystemLogDetailDialogParams): Promise { this._params = params; diff --git a/src/panels/config/logs/error-log-card.ts b/src/panels/config/logs/error-log-card.ts index 916eb2e436..88dac9b2de 100644 --- a/src/panels/config/logs/error-log-card.ts +++ b/src/panels/config/logs/error-log-card.ts @@ -6,15 +6,16 @@ import { html, LitElement, property, + internalProperty, TemplateResult, } from "lit-element"; import { fetchErrorLog } from "../../../data/error_log"; import { HomeAssistant } from "../../../types"; class ErrorLogCard extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; - @property() private _errorLog?: string; + @internalProperty() private _errorLog?: string; protected render(): TemplateResult { return html` diff --git a/src/panels/config/logs/ha-config-logs.ts b/src/panels/config/logs/ha-config-logs.ts index f1a1bf764a..84247d748c 100644 --- a/src/panels/config/logs/ha-config-logs.ts +++ b/src/panels/config/logs/ha-config-logs.ts @@ -18,7 +18,7 @@ import "../../../layouts/hass-tabs-subpage"; @customElement("ha-config-logs") export class HaConfigLogs extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public narrow!: boolean; diff --git a/src/panels/config/logs/system-log-card.ts b/src/panels/config/logs/system-log-card.ts index 9767f8f32f..bd80bbe5bf 100644 --- a/src/panels/config/logs/system-log-card.ts +++ b/src/panels/config/logs/system-log-card.ts @@ -9,6 +9,7 @@ import { html, LitElement, property, + internalProperty, TemplateResult, } from "lit-element"; import "../../../components/buttons/ha-call-service-button"; @@ -26,11 +27,11 @@ import { formatSystemLogTime } from "./util"; @customElement("system-log-card") export class SystemLogCard extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; public loaded = false; - @property() private _items?: LoggedError[]; + @internalProperty() private _items?: LoggedError[]; public async fetchData(): Promise { this._items = undefined; diff --git a/src/panels/config/lovelace/dashboards/dialog-lovelace-dashboard-detail.ts b/src/panels/config/lovelace/dashboards/dialog-lovelace-dashboard-detail.ts index c7245e99fc..f74377609e 100644 --- a/src/panels/config/lovelace/dashboards/dialog-lovelace-dashboard-detail.ts +++ b/src/panels/config/lovelace/dashboards/dialog-lovelace-dashboard-detail.ts @@ -6,6 +6,7 @@ import { html, LitElement, property, + internalProperty, TemplateResult, } from "lit-element"; import { createCloseHeading } from "../../../../components/ha-dialog"; @@ -28,23 +29,24 @@ import { computeRTLDirection } from "../../../../common/util/compute_rtl"; @customElement("dialog-lovelace-dashboard-detail") export class DialogLovelaceDashboardDetail extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; - @property() private _params?: LovelaceDashboardDetailsDialogParams; + @internalProperty() private _params?: LovelaceDashboardDetailsDialogParams; - @property() private _urlPath!: LovelaceDashboard["url_path"]; + @internalProperty() private _urlPath!: LovelaceDashboard["url_path"]; - @property() private _showInSidebar!: boolean; + @internalProperty() private _showInSidebar!: boolean; - @property() private _icon!: string; + @internalProperty() private _icon!: string; - @property() private _title!: string; + @internalProperty() private _title!: string; - @property() private _requireAdmin!: LovelaceDashboard["require_admin"]; + @internalProperty() + private _requireAdmin!: LovelaceDashboard["require_admin"]; - @property() private _error?: string; + @internalProperty() private _error?: string; - @property() private _submitting = false; + @internalProperty() private _submitting = false; public async showDialog( params: LovelaceDashboardDetailsDialogParams diff --git a/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts b/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts index e39c147483..0bb4575ec5 100644 --- a/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts +++ b/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts @@ -7,6 +7,7 @@ import { html, LitElement, property, + internalProperty, PropertyValues, TemplateResult, } from "lit-element"; @@ -40,7 +41,7 @@ import { computeRTL } from "../../../../common/util/compute_rtl"; @customElement("ha-config-lovelace-dashboards") export class HaConfigLovelaceDashboards extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public isWide!: boolean; @@ -48,7 +49,7 @@ export class HaConfigLovelaceDashboards extends LitElement { @property() public route!: Route; - @property() private _dashboards: LovelaceDashboard[] = []; + @internalProperty() private _dashboards: LovelaceDashboard[] = []; private _columns = memoize( (narrow: boolean, _language, dashboards): DataTableColumnContainer => { diff --git a/src/panels/config/lovelace/ha-config-lovelace.ts b/src/panels/config/lovelace/ha-config-lovelace.ts index 837f1686a2..d67144c571 100644 --- a/src/panels/config/lovelace/ha-config-lovelace.ts +++ b/src/panels/config/lovelace/ha-config-lovelace.ts @@ -23,7 +23,7 @@ export const lovelaceTabs = [ @customElement("ha-config-lovelace") class HaConfigLovelace extends HassRouterPage { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public narrow!: boolean; diff --git a/src/panels/config/lovelace/resources/dialog-lovelace-resource-detail.ts b/src/panels/config/lovelace/resources/dialog-lovelace-resource-detail.ts index 7613057db6..0603562940 100644 --- a/src/panels/config/lovelace/resources/dialog-lovelace-resource-detail.ts +++ b/src/panels/config/lovelace/resources/dialog-lovelace-resource-detail.ts @@ -9,6 +9,7 @@ import { html, LitElement, property, + internalProperty, TemplateResult, } from "lit-element"; import { createCloseHeading } from "../../../../components/ha-dialog"; @@ -24,17 +25,17 @@ import { LovelaceResourceDetailsDialogParams } from "./show-dialog-lovelace-reso @customElement("dialog-lovelace-resource-detail") export class DialogLovelaceResourceDetail extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; - @property() private _params?: LovelaceResourceDetailsDialogParams; + @internalProperty() private _params?: LovelaceResourceDetailsDialogParams; - @property() private _url!: LovelaceResource["url"]; + @internalProperty() private _url!: LovelaceResource["url"]; - @property() private _type!: LovelaceResource["type"]; + @internalProperty() private _type!: LovelaceResource["type"]; - @property() private _error?: string; + @internalProperty() private _error?: string; - @property() private _submitting = false; + @internalProperty() private _submitting = false; public async showDialog( params: LovelaceResourceDetailsDialogParams diff --git a/src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts b/src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts index 1b31ba3e10..946164b081 100644 --- a/src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts +++ b/src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts @@ -11,6 +11,7 @@ import { html, LitElement, property, + internalProperty, PropertyValues, TemplateResult, } from "lit-element"; @@ -44,7 +45,7 @@ import { computeRTL } from "../../../../common/util/compute_rtl"; @customElement("ha-config-lovelace-resources") export class HaConfigLovelaceRescources extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public isWide!: boolean; @@ -52,7 +53,7 @@ export class HaConfigLovelaceRescources extends LitElement { @property() public route!: Route; - @property() private _resources: LovelaceResource[] = []; + @internalProperty() private _resources: LovelaceResource[] = []; private _columns = memoize( (_language): DataTableColumnContainer => { diff --git a/src/panels/config/person/dialog-person-detail.ts b/src/panels/config/person/dialog-person-detail.ts index fa784f1793..b146cf4074 100644 --- a/src/panels/config/person/dialog-person-detail.ts +++ b/src/panels/config/person/dialog-person-detail.ts @@ -6,6 +6,7 @@ import { html, LitElement, property, + internalProperty, TemplateResult, } from "lit-element"; import memoizeOne from "memoize-one"; @@ -21,19 +22,19 @@ import { PersonDetailDialogParams } from "./show-dialog-person-detail"; const includeDomains = ["device_tracker"]; class DialogPersonDetail extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; - @property() private _name!: string; + @internalProperty() private _name!: string; - @property() private _userId?: string; + @internalProperty() private _userId?: string; - @property() private _deviceTrackers!: string[]; + @internalProperty() private _deviceTrackers!: string[]; - @property() private _error?: string; + @internalProperty() private _error?: string; - @property() private _params?: PersonDetailDialogParams; + @internalProperty() private _params?: PersonDetailDialogParams; - @property() private _submitting = false; + @internalProperty() private _submitting = false; private _deviceTrackersAvailable = memoizeOne((hass) => { return Object.keys(hass.states).some( diff --git a/src/panels/config/person/ha-config-person.ts b/src/panels/config/person/ha-config-person.ts index 41f316d534..479f477dc1 100644 --- a/src/panels/config/person/ha-config-person.ts +++ b/src/panels/config/person/ha-config-person.ts @@ -6,6 +6,7 @@ import { html, LitElement, property, + internalProperty, TemplateResult, } from "lit-element"; import { compare } from "../../../common/string/compare"; @@ -34,7 +35,7 @@ import { mdiPlus } from "@mdi/js"; import { computeRTL } from "../../../common/util/compute_rtl"; class HaConfigPerson extends LitElement { - @property() public hass?: HomeAssistant; + @property({ attribute: false }) public hass?: HomeAssistant; @property() public isWide?: boolean; @@ -42,9 +43,9 @@ class HaConfigPerson extends LitElement { @property() public route!: Route; - @property() private _storageItems?: Person[]; + @internalProperty() private _storageItems?: Person[]; - @property() private _configItems?: Person[]; + @internalProperty() private _configItems?: Person[]; private _usersLoad?: Promise; diff --git a/src/panels/config/scene/ha-config-scene.ts b/src/panels/config/scene/ha-config-scene.ts index ab3b61dadb..3e5d5fe9e7 100644 --- a/src/panels/config/scene/ha-config-scene.ts +++ b/src/panels/config/scene/ha-config-scene.ts @@ -21,7 +21,7 @@ const equal = (a: SceneEntity[], b: SceneEntity[]): boolean => { @customElement("ha-config-scene") class HaConfigScene extends HassRouterPage { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public narrow!: boolean; diff --git a/src/panels/config/scene/ha-scene-dashboard.ts b/src/panels/config/scene/ha-scene-dashboard.ts index 1205108a92..8968b324b8 100644 --- a/src/panels/config/scene/ha-scene-dashboard.ts +++ b/src/panels/config/scene/ha-scene-dashboard.ts @@ -24,12 +24,14 @@ import { haStyle } from "../../../resources/styles"; import { HomeAssistant, Route } from "../../../types"; import { showToast } from "../../../util/toast"; import { configSections } from "../ha-panel-config"; +import "../../../components/ha-icon"; import "../../../components/ha-svg-icon"; import { mdiPlus } from "@mdi/js"; +import { stateIcon } from "../../../common/entity/state_icon"; @customElement("ha-scene-dashboard") class HaSceneDashboard extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public narrow!: boolean; @@ -44,6 +46,7 @@ class HaSceneDashboard extends LitElement { return { ...scene, name: computeStateName(scene), + icon: stateIcon(scene), }; }); }); @@ -66,6 +69,11 @@ class HaSceneDashboard extends LitElement { > `, }, + icon: { + title: "", + type: "icon", + template: (icon) => html` `, + }, name: { title: this.hass.localize( "ui.panel.config.scene.picker.headers.name" diff --git a/src/panels/config/scene/ha-scene-editor.ts b/src/panels/config/scene/ha-scene-editor.ts index 08f00562ef..246e0c8c1b 100644 --- a/src/panels/config/scene/ha-scene-editor.ts +++ b/src/panels/config/scene/ha-scene-editor.ts @@ -10,6 +10,7 @@ import { html, LitElement, property, + internalProperty, PropertyValues, TemplateResult, } from "lit-element"; @@ -23,6 +24,7 @@ import { computeRTL } from "../../../common/util/compute_rtl"; import "../../../components/device/ha-device-picker"; import "../../../components/entity/ha-entities-picker"; import "../../../components/ha-card"; +import "../../../components/ha-icon-input"; import "@material/mwc-fab"; import { computeDeviceName, @@ -69,7 +71,7 @@ interface DeviceEntitiesLookup { @customElement("ha-scene-editor") export class HaSceneEditor extends SubscribeMixin(LitElement) { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public narrow!: boolean; @@ -83,27 +85,29 @@ export class HaSceneEditor extends SubscribeMixin(LitElement) { @property() public showAdvanced!: boolean; - @property() private _dirty = false; + @internalProperty() private _dirty = false; - @property() private _errors?: string; + @internalProperty() private _errors?: string; - @property() private _config!: SceneConfig; + @internalProperty() private _config?: SceneConfig; - @property() private _entities: string[] = []; + @internalProperty() private _entities: string[] = []; - @property() private _devices: string[] = []; + @internalProperty() private _devices: string[] = []; - @property() private _deviceRegistryEntries: DeviceRegistryEntry[] = []; + @internalProperty() + private _deviceRegistryEntries: DeviceRegistryEntry[] = []; - @property() private _entityRegistryEntries: EntityRegistryEntry[] = []; + @internalProperty() + private _entityRegistryEntries: EntityRegistryEntry[] = []; - @property() private _scene?: SceneEntity; + @internalProperty() private _scene?: SceneEntity; private _storedStates: SceneEntities = {}; private _unsubscribeEvents?: () => void; - @property() private _deviceEntityLookup: DeviceEntitiesLookup = {}; + @internalProperty() private _deviceEntityLookup: DeviceEntitiesLookup = {}; private _activateContextId?: string; @@ -210,115 +214,68 @@ export class HaSceneEditor extends SubscribeMixin(LitElement) { rtl: computeRTL(this.hass), })}" > - - ${!this.narrow ? html` ${name} ` : ""} -

- ${this.hass.localize("ui.panel.config.scene.editor.introduction")} -
- -
- -
- - - - -
- ${this.hass.localize( - "ui.panel.config.scene.editor.devices.header" - )} -
-
- ${this.hass.localize( - "ui.panel.config.scene.editor.devices.introduction" - )} -
- - ${devices.map( - (device) => - html` - -
- ${device.name} - -
- ${device.entities.map((entityId) => { - const entityStateObj = this.hass.states[entityId]; - if (!entityStateObj) { - return html``; - } - return html` - - - - ${computeStateName(entityStateObj)} - - - `; - })} - - ` - )} - - -
- -
- - - - ${this.showAdvanced + ${this._config ? html` + + ${!this.narrow + ? html` ${name} ` + : ""} +
+ ${this.hass.localize( + "ui.panel.config.scene.editor.introduction" + )} +
+ +
+ + + +
+ + +
${this.hass.localize( - "ui.panel.config.scene.editor.entities.header" + "ui.panel.config.scene.editor.devices.header" )}
${this.hass.localize( - "ui.panel.config.scene.editor.entities.introduction" + "ui.panel.config.scene.editor.devices.introduction" )}
- ${entities.length - ? html` - - ${entities.map((entityId) => { + + ${devices.map( + (device) => + html` + +
+ ${device.name} + +
+ ${device.entities.map((entityId) => { const entityStateObj = this.hass.states[entityId]; if (!entityStateObj) { return html``; @@ -336,41 +293,108 @@ export class HaSceneEditor extends SubscribeMixin(LitElement) { ${computeStateName(entityStateObj)} - `; })} ` - : ""} + )}
- ${this.hass.localize( - "ui.panel.config.scene.editor.entities.device_entities" - )} - + >
+ + ${this.showAdvanced + ? html` + +
+ ${this.hass.localize( + "ui.panel.config.scene.editor.entities.header" + )} +
+
+ ${this.hass.localize( + "ui.panel.config.scene.editor.entities.introduction" + )} +
+ ${entities.length + ? html` + + ${entities.map((entityId) => { + const entityStateObj = this.hass.states[ + entityId + ]; + if (!entityStateObj) { + return html``; + } + return html` + + + + ${computeStateName(entityStateObj)} + + + + `; + })} + + ` + : ""} + + +
+ ${this.hass.localize( + "ui.panel.config.scene.editor.entities.device_entities" + )} + +
+ + + ` + : ""} ` : ""}
@@ -587,11 +611,21 @@ export class HaSceneEditor extends SubscribeMixin(LitElement) { this._dirty = true; } - private _nameChanged(ev: CustomEvent) { - if (!this._config || this._config.name === ev.detail.value) { + private _valueChanged(ev: CustomEvent) { + ev.stopPropagation(); + const target = ev.target as any; + const name = target.name; + if (!name) { return; } - this._config.name = ev.detail.value; + let newVal = ev.detail.value; + if (target.type === "number") { + newVal = Number(newVal); + } + if ((this._config![name] || "") === newVal) { + return; + } + this._config = { ...this._config!, [name]: newVal }; this._dirty = true; } @@ -671,7 +705,7 @@ export class HaSceneEditor extends SubscribeMixin(LitElement) { private async _saveScene(): Promise { const id = !this.sceneId ? "" + Date.now() : this.sceneId!; - this._config = { ...this._config, entities: this._calculateStates() }; + this._config = { ...this._config!, entities: this._calculateStates() }; try { await saveScene(this.hass, id, this._config); this._dirty = false; diff --git a/src/panels/config/script/ha-config-script.ts b/src/panels/config/script/ha-config-script.ts index 0782ece4b3..a1e9643c84 100644 --- a/src/panels/config/script/ha-config-script.ts +++ b/src/panels/config/script/ha-config-script.ts @@ -21,7 +21,7 @@ const equal = (a: ScriptEntity[], b: ScriptEntity[]): boolean => { @customElement("ha-config-script") class HaConfigScript extends HassRouterPage { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public narrow!: boolean; diff --git a/src/panels/config/script/ha-script-editor.ts b/src/panels/config/script/ha-script-editor.ts index be5422de69..434899d53d 100644 --- a/src/panels/config/script/ha-script-editor.ts +++ b/src/panels/config/script/ha-script-editor.ts @@ -8,6 +8,7 @@ import { html, LitElement, property, + internalProperty, PropertyValues, TemplateResult, } from "lit-element"; @@ -16,12 +17,15 @@ import { computeObjectId } from "../../../common/entity/compute_object_id"; import { navigate } from "../../../common/navigate"; import { computeRTL } from "../../../common/util/compute_rtl"; import "../../../components/ha-card"; +import "../../../components/ha-icon-input"; import "@material/mwc-fab"; import { Action, deleteScript, getScriptEditorInitData, ScriptConfig, + MODES, + MODES_MAX, } from "../../../data/script"; import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box"; import "../../../layouts/ha-app-layout"; @@ -34,12 +38,10 @@ import { configSections } from "../ha-panel-config"; import "../../../components/ha-svg-icon"; import { mdiContentSave } from "@mdi/js"; import { PaperListboxElement } from "@polymer/paper-listbox"; - -const MODES = ["single", "restart", "queued", "parallel"]; -const MODES_MAX = ["queued", "parallel"]; +import { slugify } from "../../../common/string/slugify"; export class HaScriptEditor extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public scriptEntityId!: string; @@ -49,11 +51,15 @@ export class HaScriptEditor extends LitElement { @property() public narrow!: boolean; - @property() private _config?: ScriptConfig; + @internalProperty() private _config?: ScriptConfig; - @property() private _dirty?: boolean; + @internalProperty() private _entityId?: string; - @property() private _errors?: string; + @internalProperty() private _idError = false; + + @internalProperty() private _dirty?: boolean; + + @internalProperty() private _errors?: string; protected render(): TemplateResult { return html` @@ -108,9 +114,32 @@ export class HaScriptEditor extends LitElement { name="alias" .value=${this._config.alias} @value-changed=${this._valueChanged} + @change=${this._aliasChanged} > - + + + ${!this.scriptEntityId + ? html` + ` + : ""}

${this.hass.localize( "ui.panel.config.script.editor.modes.description", @@ -284,6 +313,30 @@ export class HaScriptEditor extends LitElement { this._dirty = true; } + private _aliasChanged(ev: CustomEvent) { + if (this.scriptEntityId || this._entityId) { + return; + } + const aliasSlugify = slugify((ev.target as any).value, "_"); + let id = aliasSlugify; + let i = 2; + while (this.hass.states[`script.${id}`]) { + id = `${aliasSlugify}_${i}`; + i++; + } + this._entityId = id; + } + + private _idChanged(ev: CustomEvent) { + ev.stopPropagation(); + this._entityId = (ev.target as any).value; + if (this.hass.states[`script.${this._entityId}`]) { + this._idError = true; + } else { + this._idError = false; + } + } + private _valueChanged(ev: CustomEvent) { ev.stopPropagation(); const target = ev.target as any; @@ -338,9 +391,15 @@ export class HaScriptEditor extends LitElement { } private _saveScript(): void { + if (this._idError) { + this._errors = this.hass.localize( + "ui.panel.config.script.editor.id_already_exists_save_error" + ); + return; + } const id = this.scriptEntityId ? computeObjectId(this.scriptEntityId) - : Date.now(); + : this._entityId || Date.now(); this.hass!.callApi("POST", "config/script/config/" + id, this._config).then( () => { this._dirty = false; diff --git a/src/panels/config/script/ha-script-picker.ts b/src/panels/config/script/ha-script-picker.ts index 8fba4004ba..ccfad94f8e 100644 --- a/src/panels/config/script/ha-script-picker.ts +++ b/src/panels/config/script/ha-script-picker.ts @@ -25,10 +25,11 @@ import { showToast } from "../../../util/toast"; import { configSections } from "../ha-panel-config"; import "../../../components/ha-svg-icon"; import { mdiPlus } from "@mdi/js"; +import { stateIcon } from "../../../common/entity/state_icon"; @customElement("ha-script-picker") class HaScriptPicker extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public scripts!: HassEntity[]; @@ -43,6 +44,7 @@ class HaScriptPicker extends LitElement { return { ...script, name: computeStateName(script), + icon: stateIcon(script), }; }); }); @@ -65,6 +67,11 @@ class HaScriptPicker extends LitElement { > `, }, + icon: { + title: "", + type: "icon", + template: (icon) => html` `, + }, name: { title: this.hass.localize( "ui.panel.config.script.picker.headers.name" diff --git a/src/panels/config/server_control/ha-config-server-control.ts b/src/panels/config/server_control/ha-config-server-control.ts index 7a06a6a439..a08b26f072 100644 --- a/src/panels/config/server_control/ha-config-server-control.ts +++ b/src/panels/config/server_control/ha-config-server-control.ts @@ -5,6 +5,7 @@ import { configSections } from "../ha-panel-config"; import { LitElement, property, + internalProperty, customElement, html, css, @@ -38,7 +39,7 @@ const reloadableDomains = [ @customElement("ha-config-server-control") export class HaConfigServerControl extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public isWide!: boolean; @@ -48,7 +49,7 @@ export class HaConfigServerControl extends LitElement { @property() public showAdvanced!: boolean; - @property() private _validating = false; + @internalProperty() private _validating = false; private _validateLog = ""; diff --git a/src/panels/config/users/dialog-add-user.ts b/src/panels/config/users/dialog-add-user.ts index b9ba84bd87..f9f83566fb 100644 --- a/src/panels/config/users/dialog-add-user.ts +++ b/src/panels/config/users/dialog-add-user.ts @@ -8,6 +8,7 @@ import { html, LitElement, property, + internalProperty, PropertyValues, TemplateResult, } from "lit-element"; @@ -30,22 +31,22 @@ import { computeRTLDirection } from "../../../common/util/compute_rtl"; @customElement("dialog-add-user") export class DialogAddUser extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; - @property() private _loading = false; + @internalProperty() private _loading = false; // Error message when can't talk to server etc - @property() private _error?: string; + @internalProperty() private _error?: string; - @property() private _params?: AddUserDialogParams; + @internalProperty() private _params?: AddUserDialogParams; - @property() private _name?: string; + @internalProperty() private _name?: string; - @property() private _username?: string; + @internalProperty() private _username?: string; - @property() private _password?: string; + @internalProperty() private _password?: string; - @property() private _isAdmin?: boolean; + @internalProperty() private _isAdmin?: boolean; public showDialog(params: AddUserDialogParams) { this._params = params; diff --git a/src/panels/config/users/dialog-user-detail.ts b/src/panels/config/users/dialog-user-detail.ts index 59015bb07f..504ef0a4b5 100644 --- a/src/panels/config/users/dialog-user-detail.ts +++ b/src/panels/config/users/dialog-user-detail.ts @@ -8,6 +8,7 @@ import { html, LitElement, property, + internalProperty, TemplateResult, } from "lit-element"; import { createCloseHeading } from "../../../components/ha-dialog"; @@ -25,17 +26,17 @@ import { computeRTLDirection } from "../../../common/util/compute_rtl"; @customElement("dialog-user-detail") class DialogUserDetail extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; - @property() private _name!: string; + @internalProperty() private _name!: string; - @property() private _isAdmin?: boolean; + @internalProperty() private _isAdmin?: boolean; - @property() private _error?: string; + @internalProperty() private _error?: string; - @property() private _params?: UserDetailDialogParams; + @internalProperty() private _params?: UserDetailDialogParams; - @property() private _submitting = false; + @internalProperty() private _submitting = false; public async showDialog(params: UserDetailDialogParams): Promise { this._params = params; diff --git a/src/panels/config/users/ha-config-users.ts b/src/panels/config/users/ha-config-users.ts index cf8d40588d..cedc36b07f 100644 --- a/src/panels/config/users/ha-config-users.ts +++ b/src/panels/config/users/ha-config-users.ts @@ -26,7 +26,7 @@ import { mdiPlus } from "@mdi/js"; @customElement("ha-config-users") export class HaConfigUsers extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public _users: User[] = []; diff --git a/src/panels/config/zone/dialog-zone-detail.ts b/src/panels/config/zone/dialog-zone-detail.ts index 8de08f7218..8b1cc43801 100644 --- a/src/panels/config/zone/dialog-zone-detail.ts +++ b/src/panels/config/zone/dialog-zone-detail.ts @@ -6,6 +6,7 @@ import { html, LitElement, property, + internalProperty, TemplateResult, } from "lit-element"; import { fireEvent } from "../../../common/dom/fire_event"; @@ -26,25 +27,25 @@ import { ZoneDetailDialogParams } from "./show-dialog-zone-detail"; import { computeRTLDirection } from "../../../common/util/compute_rtl"; class DialogZoneDetail extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; - @property() private _name!: string; + @internalProperty() private _name!: string; - @property() private _icon!: string; + @internalProperty() private _icon!: string; - @property() private _latitude!: number; + @internalProperty() private _latitude!: number; - @property() private _longitude!: number; + @internalProperty() private _longitude!: number; - @property() private _passive!: boolean; + @internalProperty() private _passive!: boolean; - @property() private _radius!: number; + @internalProperty() private _radius!: number; - @property() private _error?: string; + @internalProperty() private _error?: string; - @property() private _params?: ZoneDetailDialogParams; + @internalProperty() private _params?: ZoneDetailDialogParams; - @property() private _submitting = false; + @internalProperty() private _submitting = false; public showDialog(params: ZoneDetailDialogParams): void { this._params = params; diff --git a/src/panels/config/zone/ha-config-zone.ts b/src/panels/config/zone/ha-config-zone.ts index a98f041bfe..4dffc11311 100644 --- a/src/panels/config/zone/ha-config-zone.ts +++ b/src/panels/config/zone/ha-config-zone.ts @@ -13,6 +13,7 @@ import { html, LitElement, property, + internalProperty, PropertyValues, query, TemplateResult, @@ -54,7 +55,7 @@ import { computeRTL } from "../../../common/util/compute_rtl"; @customElement("ha-config-zone") export class HaConfigZone extends SubscribeMixin(LitElement) { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public isWide?: boolean; @@ -62,13 +63,13 @@ export class HaConfigZone extends SubscribeMixin(LitElement) { @property() public route!: Route; - @property() private _storageItems?: Zone[]; + @internalProperty() private _storageItems?: Zone[]; - @property() private _stateItems?: HassEntity[]; + @internalProperty() private _stateItems?: HassEntity[]; - @property() private _activeEntry = ""; + @internalProperty() private _activeEntry = ""; - @property() private _canEditCore = false; + @internalProperty() private _canEditCore = false; @query("ha-locations-editor") private _map?: HaLocationsEditor; diff --git a/src/panels/custom/ha-panel-custom.ts b/src/panels/custom/ha-panel-custom.ts index 9739c79c7e..028cd9b227 100644 --- a/src/panels/custom/ha-panel-custom.ts +++ b/src/panels/custom/ha-panel-custom.ts @@ -16,7 +16,7 @@ declare global { } export class HaPanelCustom extends UpdatingElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public narrow!: boolean; diff --git a/src/panels/developer-tools/developer-tools-router.ts b/src/panels/developer-tools/developer-tools-router.ts index 26337446b3..903948a168 100644 --- a/src/panels/developer-tools/developer-tools-router.ts +++ b/src/panels/developer-tools/developer-tools-router.ts @@ -5,7 +5,7 @@ import { HomeAssistant } from "../../types"; @customElement("developer-tools-router") class DeveloperToolsRouter extends HassRouterPage { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public narrow!: boolean; @@ -40,6 +40,18 @@ class DeveloperToolsRouter extends HassRouterPage { }, }; + protected createLoadingScreen() { + const loadingScreen = super.createLoadingScreen(); + loadingScreen.noToolbar = true; + return loadingScreen; + } + + protected createErrorScreen(error: string) { + const errorEl = super.createErrorScreen(error); + errorEl.toolbar = false; + return errorEl; + } + protected updatePageEl(el) { if ("setProperties" in el) { // As long as we have Polymer pages diff --git a/src/panels/developer-tools/event/developer-tools-event.js b/src/panels/developer-tools/event/developer-tools-event.js index 7b1c9856de..4466d48f10 100644 --- a/src/panels/developer-tools/event/developer-tools-event.js +++ b/src/panels/developer-tools/event/developer-tools-event.js @@ -29,7 +29,6 @@ class HaPanelDevEvent extends EventsMixin(LocalizeMixin(PolymerElement)) { -moz-user-select: initial; @apply --paper-font-body1; padding: 16px; - direction: ltr; display: block; } diff --git a/src/panels/developer-tools/event/event-subscribe-card.ts b/src/panels/developer-tools/event/event-subscribe-card.ts index 7e64b3ba34..826eb7689a 100644 --- a/src/panels/developer-tools/event/event-subscribe-card.ts +++ b/src/panels/developer-tools/event/event-subscribe-card.ts @@ -8,6 +8,7 @@ import { html, LitElement, property, + internalProperty, TemplateResult, } from "lit-element"; import { formatTime } from "../../../common/datetime/format_time"; @@ -17,13 +18,16 @@ import { HomeAssistant } from "../../../types"; @customElement("event-subscribe-card") class EventSubscribeCard extends LitElement { - @property() public hass?: HomeAssistant; + @property({ attribute: false }) public hass?: HomeAssistant; - @property() private _eventType = ""; + @internalProperty() private _eventType = ""; - @property() private _subscribed?: () => void; + @internalProperty() private _subscribed?: () => void; - @property() private _events: Array<{ id: number; event: HassEvent }> = []; + @internalProperty() private _events: Array<{ + id: number; + event: HassEvent; + }> = []; private _eventCount = 0; diff --git a/src/panels/developer-tools/ha-panel-developer-tools.ts b/src/panels/developer-tools/ha-panel-developer-tools.ts index 98542c9365..953d6f83bc 100644 --- a/src/panels/developer-tools/ha-panel-developer-tools.ts +++ b/src/panels/developer-tools/ha-panel-developer-tools.ts @@ -1,6 +1,6 @@ -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 "../../layouts/ha-app-layout"; import "../../components/ha-icon-button"; import "@polymer/paper-tabs/paper-tab"; import "@polymer/paper-tabs/paper-tabs"; @@ -22,7 +22,7 @@ import "./developer-tools-router"; @customElement("ha-panel-developer-tools") class PanelDeveloperTools extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() public route!: Route; @@ -36,7 +36,7 @@ class PanelDeveloperTools extends LitElement { protected render(): TemplateResult { const page = this._page; return html` - + - + `; } @@ -107,6 +107,10 @@ class PanelDeveloperTools extends LitElement { color: var(--primary-text-color); --paper-card-header-color: var(--primary-text-color); } + developer-tools-router { + display: block; + height: calc(100vh - 112px); + } paper-tabs { margin-left: 12px; --paper-tabs-selection-bar-color: #fff; diff --git a/src/panels/developer-tools/service/developer-tools-service.js b/src/panels/developer-tools/service/developer-tools-service.js index f1e996f4f1..51db6e7645 100644 --- a/src/panels/developer-tools/service/developer-tools-service.js +++ b/src/panels/developer-tools/service/developer-tools-service.js @@ -11,6 +11,7 @@ import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box"; import LocalizeMixin from "../../../mixins/localize-mixin"; import "../../../styles/polymer-ha-style"; import "../../../util/app-localstorage-document"; +import { computeRTL } from "../../../common/util/compute_rtl"; const ERROR_SENTINEL = {}; /* @@ -26,7 +27,6 @@ class HaPanelDevService extends LocalizeMixin(PolymerElement) { -moz-user-select: initial; display: block; padding: 16px; - direction: ltr; } .ha-form { @@ -51,8 +51,13 @@ class HaPanelDevService extends LocalizeMixin(PolymerElement) { text-align: left; } + :host([rtl]) .attributes th { + text-align: right; + } + .attributes tr { vertical-align: top; + direction: ltr; } .attributes tr:nth-child(odd) { @@ -83,6 +88,14 @@ class HaPanelDevService extends LocalizeMixin(PolymerElement) { .error { color: var(--error-color); } + + :host([rtl]) .desc-container { + text-align: right; + } + + :host([rtl]) .desc-container h3 { + direction: ltr; + }