Merge branch 'dev' into RTL-date-selector

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` <loading-screen></loading-screen>> `;
+      return html` <hass-loading-screen no-toolbar></hass-loading-screen>> `;
     }
 
     const error =

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` <loading-screen></loading-screen> `;
+      return html` <hass-loading-screen no-toolbar></hass-loading-screen> `;
     }
 
     if (this.castManager === null) {

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) {

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;
 

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;
 

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;
 

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.

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;
 

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",

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;
 

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 {
           <mwc-icon-button slot="trigger" alt="menu">
             <ha-svg-icon path=${mdiDotsVertical}></ha-svg-icon>
           </mwc-icon-button>
-          <mwc-list-item @tap=${this._manageRepositories}>
+          <mwc-list-item @request-selected=${this._manageRepositories}>
             Repositories
           </mwc-list-item>
-          <mwc-list-item @tap=${this.refreshData}>
+          <mwc-list-item @request-selected=${this.refreshData}>
             Reload
           </mwc-list-item>
         </ha-button-menu>
         ${repos.length === 0
-          ? html`<loading-screen></loading-screen>`
+          ? html`<hass-loading-screen no-toolbar></hass-loading-screen>`
           : html`
               <div class="search">
                 <search-input

hassio/src/addon-view/config/hassio-addon-audio.ts

@@ -9,6 +9,7 @@ import {
   html,
   LitElement,
   property,
+  internalProperty,
   PropertyValues,
   TemplateResult,
 } from "lit-element";
@@ -34,15 +35,15 @@ class HassioAddonAudio extends LitElement {
 
   @property({ attribute: false }) public addon!: HassioAddonDetails;
 
-  @property() private _error?: string;
+  @internalProperty() private _error?: string;
 
-  @property() private _inputDevices?: HassioHardwareAudioDevice[];
+  @internalProperty() private _inputDevices?: HassioHardwareAudioDevice[];
 
-  @property() private _outputDevices?: HassioHardwareAudioDevice[];
+  @internalProperty() private _outputDevices?: HassioHardwareAudioDevice[];
 
-  @property() private _selectedInput!: null | string;
+  @internalProperty() private _selectedInput!: null | string;
 
-  @property() private _selectedOutput!: null | string;
+  @internalProperty() private _selectedOutput!: null | string;
 
   protected render(): TemplateResult {
     return html`

hassio/src/addon-view/config/hassio-addon-config.ts

@@ -7,6 +7,7 @@ import {
   html,
   LitElement,
   property,
+  internalProperty,
   PropertyValues,
   query,
   TemplateResult,
@@ -32,7 +33,7 @@ class HassioAddonConfig extends LitElement {
 
   @property({ attribute: false }) public addon!: HassioAddonDetails;
 
-  @property() private _error?: string;
+  @internalProperty() private _error?: string;
 
   @property({ type: Boolean }) private _configHasChanged = false;
 

hassio/src/addon-view/config/hassio-addon-network.ts

@@ -6,6 +6,7 @@ import {
   html,
   LitElement,
   property,
+  internalProperty,
   PropertyValues,
   TemplateResult,
 } from "lit-element";
@@ -37,9 +38,9 @@ class HassioAddonNetwork extends LitElement {
 
   @property({ attribute: false }) public addon!: HassioAddonDetails;
 
-  @property() private _error?: string;
+  @internalProperty() private _error?: string;
 
-  @property() private _config?: NetworkItem[];
+  @internalProperty() private _config?: NetworkItem[];
 
   public connectedCallback(): void {
     super.connectedCallback();

hassio/src/addon-view/documentation/hassio-addon-documentation-tab.ts

@@ -5,6 +5,7 @@ import {
   html,
   LitElement,
   property,
+  internalProperty,
   TemplateResult,
 } from "lit-element";
 import "../../../../src/components/ha-markdown";
@@ -12,7 +13,7 @@ import {
   fetchHassioAddonDocumentation,
   HassioAddonDetails,
 } from "../../../../src/data/hassio/addon";
-import "../../../../src/layouts/loading-screen";
+import "../../../../src/layouts/hass-loading-screen";
 import "../../../../src/components/ha-circular-progress";
 import { haStyle } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
@@ -24,9 +25,9 @@ class HassioAddonDocumentationDashboard 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<void> {
     super.connectedCallback();
@@ -44,7 +45,7 @@ class HassioAddonDocumentationDashboard extends LitElement {
           <div class="card-content">
             ${this._content
               ? html`<ha-markdown .content=${this._content}></ha-markdown>`
-              : html`<loading-screen></loading-screen>`}
+              : html`<hass-loading-screen no-toolbar></hass-loading-screen>`}
           </div>
         </ha-card>
       </div>

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;
 

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<void> {
     super.connectedCallback();

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;
 

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[];
 

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 = [

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;

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<void> {
     this._dialogParams = _dialogParams;

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);

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);

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) {

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);

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`

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`

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<void> {
     super.connectedCallback();
@@ -98,7 +99,7 @@ class HassioSupervisorLog extends LitElement {
             ? html`<hassio-ansi-to-html
                 .content=${this._content}
               ></hassio-ansi-to-html>`
-            : html`<loading-screen></loading-screen>`}
+            : html`<hass-loading-screen no-toolbar></hass-loading-screen>`}
         </div>
         <div class="card-actions">
           <mwc-button @click=${this._refresh}>Refresh</mwc-button>

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",

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",

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`

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();

src/cards/ha-history_graph-card.js

@@ -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`
-      <style>
-        paper-card:not([dialog]) .content {
-          padding: 0 16px 16px;
-        }
-        paper-card[dialog] {
-          padding-top: 16px;
-          background-color: transparent;
-        }
-        paper-card {
-          width: 100%;
-          /* prevent new stacking context, chart tooltip needs to overflow */
-          position: static;
-        }
-        .header {
-          @apply --paper-font-headline;
-          line-height: 40px;
-          color: var(--primary-text-color);
-          padding: 20px 16px 12px;
-          @apply --paper-font-common-nowrap;
-        }
-        paper-card[dialog] .header {
-          display: none;
-        }
-      </style>
-      <ha-state-history-data
-        hass="[[hass]]"
-        filter-type="recent-entity"
-        entity-id="[[computeHistoryEntities(stateObj)]]"
-        data="{{stateHistory}}"
-        is-loading="{{stateHistoryLoading}}"
-        cache-config="[[cacheConfig]]"
-      ></ha-state-history-data>
-      <paper-card
-        dialog$="[[inDialog]]"
-        on-click="cardTapped"
-        elevation="[[computeElevation(inDialog)]]"
-      >
-        <div class="header">[[computeTitle(stateObj)]]</div>
-        <div class="content">
-          <state-history-charts
-            hass="[[hass]]"
-            history-data="[[stateHistory]]"
-            is-loading-data="[[stateHistoryLoading]]"
-            up-to-now
-            no-single
-          >
-          </state-history-charts>
-        </div>
-      </paper-card>
-    `;
-  }
-
-  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);

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);
     }

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 = [
+export const DOMAINS_MORE_INFO_NO_HISTORY = ["camera", "configurator", "scene"];
-  "camera",
-  "configurator",
-  "history_graph",
-  "scene",
-];
 
 /** States that we consider "off". */
 export const STATES_OFF = ["closed", "locked", "off"];

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":

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",
 };
 

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 =
+  const b = `aaaaaaaaacccddeeeeeeegghiiiiilmnnnnooooooprrsssssttuuuuuuuuuwxyyzzz${delimiter}${delimiter}${delimiter}${delimiter}${delimiter}${delimiter}`;
-    "aaaaaaaaacccddeeeeeeegghiiiiilmnnnnooooooprrsssssttuuuuuuuuuwxyyzzz------";
   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(/-/, delimiter) // Replace - with delimiter
-    .replace(/^-+/, "") // Trim - from start of text
+    .replace(new RegExp(`/${delimiter}${delimiter}+/`, "g"), delimiter) // Replace multiple delimiters with single delimiter
-    .replace(/-+$/, ""); // Trim - from end of text
+    .replace(new RegExp(`/^${delimiter}+/`), "") // Trim delimiter from start of text
+    .replace(new RegExp(`/-+$/`), ""); // Trim delimiter from end of text
 };

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);
   }
 

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";

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[] = [];
 

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,

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;
 

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[];
 

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);

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[];
 

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;
 

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) {

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;
 

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;

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 [

src/components/ha-attributes.ts

@@ -17,7 +17,7 @@ let jsYamlPromise: Promise<typeof import("js-yaml")>;
 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) {

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";

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;
 

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(

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;

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}
-            >
+              <mwc-list @request-selected=${this._setDateRange}>
-              <mwc-list @click=${this._setDateRange}>
                 ${Object.entries(this.ranges).map(
                   ([name, dates]) => html`<mwc-list-item
                     .activated=${this.startDate.getTime() ===

src/components/ha-dialog.ts

@@ -51,7 +51,7 @@ export class HaDialog extends MwcDialog {
           padding: var(--dialog-content-padding, 20px 24px);
         }
         .mdc-dialog .mdc-dialog__surface {
-          position: var(--dialog-content-position, relative);
+          position: var(--dialog-surface-position, relative);
           min-height: var(--mdc-dialog-min-height, auto);
         }
         .header_button {

src/components/ha-form/ha-form-multi_select.ts

@@ -11,6 +11,7 @@ import {
   html,
   LitElement,
   property,
+  internalProperty,
   query,
   TemplateResult,
 } from "lit-element";
@@ -32,7 +33,7 @@ export class HaFormMultiSelect extends LitElement implements HaFormElement {
 
   @property() public suffix!: string;
 
-  @property() private _init = false;
+  @internalProperty() private _init = false;
 
   @query("paper-menu-button") private _input?: HTMLElement;
 

src/components/ha-form/ha-form-string.ts

@@ -6,6 +6,7 @@ import {
   html,
   LitElement,
   property,
+  internalProperty,
   query,
   TemplateResult,
 } from "lit-element";
@@ -26,7 +27,7 @@ export class HaFormString extends LitElement implements HaFormElement {
 
   @property() public suffix!: string;
 
-  @property() private _unmaskedPassword = false;
+  @internalProperty() private _unmaskedPassword = false;
 
   @query("paper-input") private _input?: HTMLElement;
 

src/components/ha-gauge.ts

@@ -0,0 +1,130 @@
+import {
+  LitElement,
+  svg,
+  customElement,
+  css,
+  property,
+  internalProperty,
+  PropertyValues,
+} from "lit-element";
+import { styleMap } from "lit-html/directives/style-map";
+import { afterNextRender } from "../common/util/render-status";
+
+const getAngle = (value: number, min: number, max: number) => {
+  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`
+      <svg viewBox="0 0 100 50" class="gauge">
+        <path
+          class="dial"
+          d="M 10 50 A 40 40 0 0 1 90 50"
+        ></path>
+        <path
+          class="value"
+          style=${styleMap({ transform: `rotate(${this._angle}deg)` })}
+          d="M 90 50.001 A 40 40 0 0 1 10 50"
+        ></path>
+      </svg>
+      <svg class="text">
+        <text class="value-text">
+          ${this.value} ${this.label}
+        </text>
+      </svg>`;
+  }
+
+  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;
+      }
+    `;
+  }
+}

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();

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();

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();

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();

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")) {

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 {

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;
 

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) {
               </h3>
               <a
                 href=${`/config/integrations#config_entry=${relatedConfigEntryId}`}
-                @click=${this._close}
               >
                 ${this.hass.localize(`component.${entry.domain}.title`)}:
                 ${entry.title}
@@ -116,10 +116,7 @@ export class HaRelatedItems extends SubscribeMixin(LitElement) {
               <h3>
                 ${this.hass.localize("ui.components.related-items.device")}:
               </h3>
-              <a
+              <a href="/config/devices/device/${relatedDeviceId}">
-                href="/config/devices/device/${relatedDeviceId}"
-                @click=${this._close}
-              >
                 ${device.name_by_user || device.name}
               </a>
             `;
@@ -137,7 +134,9 @@ export class HaRelatedItems extends SubscribeMixin(LitElement) {
               <h3>
                 ${this.hass.localize("ui.components.related-items.area")}:
               </h3>
-              ${area.name}
+              <a href="/config/areas/area/${relatedAreaId}">
+                ${area.name}
+              </a>
             `;
           })
         : ""}
@@ -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 {

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

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";

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;
 

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[];
 

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<DataEntryFlowStep>("POST", "config/config_entries/flow", {

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",

src/data/ha-state-history-data.js

@@ -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);

src/data/scene.ts

@@ -40,6 +40,7 @@ export interface SceneEntity extends HassEntityBase {
 
 export interface SceneConfig {
   name: string;
+  icon?: string;
   entities: SceneEntities;
 }
 

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}`);
 

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

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;
 

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;
 

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;
 

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<void> {
     this._params = params;

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<void> {
     this._params = params;

src/dialogs/make-dialog-manager.ts

@@ -15,7 +15,8 @@ declare global {
   }
 }
 
-interface HassDialog<T = HASSDomEvents[ValidHassDomEvent]> extends HTMLElement {
+export interface HassDialog<T = HASSDomEvents[ValidHassDomEvent]>
+  extends HTMLElement {
   showDialog(params: T);
   closeDialog?: () => boolean | void;
 }

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;
 

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();

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;
 

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;
 

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;
 

src/dialogs/more-info/controls/more-info-history_graph.js

@@ -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`
-      <style>
-        :host {
-          display: block;
-          margin-bottom: 6px;
-        }
-      </style>
-      <ha-history_graph-card
-        hass="[[hass]]"
-        state-obj="[[stateObj]]"
-        in-dialog=""
-      >
-        <ha-attributes state-obj="[[stateObj]]"></ha-attributes>
-      </ha-history_graph-card>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      stateObj: Object,
-    };
-  }
-}
-customElements.define("more-info-history_graph", MoreInfoHistoryGraph);

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;
 

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;
+          color: var(--secondary-text-color);
-          max-height: 0px;
-          width: 23px;
-          height: 23px;
-          opacity: var(--dark-secondary-opacity);
-          overflow: hidden;
-          transition: max-height 0.5s ease-in;
         }
 
-        .has-color.is-on .segmentationContainer .segmentationButton {
+        .has-color.is-on .segmentationButton {
-          position: absolute;
+          display: inline-block;
-          top: 11%;
-          transform: translate(0%, 0%);
-          width: 23px;
-          height: 23px;
-          padding: 0px;
-          opacity: var(--dark-secondary-opacity);
         }
 
         .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)) {
           <ha-icon-button
             icon="mdi:palette"
             on-click="segmentClick"
-            class="control segmentationButton"
+            class="segmentationButton"
           ></ha-icon-button>
         </div>
 
@@ -217,7 +201,7 @@ class MoreInfoLight extends LocalizeMixin(EventsMixin(PolymerElement)) {
 
         <ha-attributes
           state-obj="[[stateObj]]"
-          extra-filters="brightness,color_temp,white_value,effect_list,effect,hs_color,rgb_color,xy_color,min_mireds,max_mireds"
+          extra-filters="brightness,color_temp,white_value,effect_list,effect,hs_color,rgb_color,xy_color,min_mireds,max_mireds,entity_id"
         ></ha-attributes>
       </div>
     `;

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;
 

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;
 

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;
 

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;
 

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;
 

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;