Use only decorators (#4058)

* Use only decorators

* Remove unused imports

demo/src/custom-cards/ha-demo-card.ts

@@ -1,10 +1,4 @@
-import {
-  LitElement,
-  html,
-  CSSResult,
-  css,
-  PropertyDeclarations,
-} from "lit-element";
+import { LitElement, html, CSSResult, css, property } from "lit-element";
 import { until } from "lit-html/directives/until";
 import "@material/mwc-button";
 import "@polymer/paper-spinner/paper-spinner-lite";
@@ -20,19 +14,11 @@ import {
 } from "../configs/demo-configs";
 
 export class HADemoCard extends LitElement implements LovelaceCard {
-  public lovelace?: Lovelace;
-  public hass!: MockHomeAssistant;
-  private _switching?: boolean;
+  @property() public lovelace?: Lovelace;
+  @property() public hass!: MockHomeAssistant;
+  @property() private _switching?: boolean;
   private _hidden = localStorage.hide_demo_card;
 
-  static get properties(): PropertyDeclarations {
-    return {
-      lovelace: {},
-      hass: {},
-      _switching: {},
-    };
-  }
-
   public getCardSize() {
     return this._hidden ? 0 : 2;
   }

src/auth/ha-authorize.ts

@@ -2,10 +2,10 @@ import { litLocalizeLiteMixin } from "../mixins/lit-localize-lite-mixin";
 import {
   LitElement,
   html,
-  PropertyDeclarations,
   PropertyValues,
   CSSResult,
   css,
+  property,
 } from "lit-element";
 import "./ha-auth-flow";
 import { AuthProvider, fetchAuthProviders } from "../data/auth";
@@ -20,11 +20,11 @@ interface QueryParams {
 }
 
 class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
-  public clientId?: string;
-  public redirectUri?: string;
-  public oauth2State?: string;
-  private _authProvider?: AuthProvider;
-  private _authProviders?: AuthProvider[];
+  @property() public clientId?: string;
+  @property() public redirectUri?: string;
+  @property() public oauth2State?: string;
+  @property() private _authProvider?: AuthProvider;
+  @property() private _authProviders?: AuthProvider[];
 
   constructor() {
     super();
@@ -48,16 +48,6 @@ class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
     }
   }
 
-  static get properties(): PropertyDeclarations {
-    return {
-      _authProvider: {},
-      _authProviders: {},
-      clientId: {},
-      redirectUri: {},
-      oauth2State: {},
-    };
-  }
-
   protected render() {
     if (!this._authProviders) {
       return html`

src/components/ha-label-badge.ts

@@ -1,31 +1,21 @@
 import {
   html,
   LitElement,
-  PropertyDeclarations,
   PropertyValues,
   TemplateResult,
   CSSResult,
   css,
+  property,
 } from "lit-element";
 import { classMap } from "lit-html/directives/class-map";
 import "./ha-icon";
 
 class HaLabelBadge extends LitElement {
-  public value?: string;
-  public icon?: string;
-  public label?: string;
-  public description?: string;
-  public image?: string;
-
-  static get properties(): PropertyDeclarations {
-    return {
-      value: {},
-      icon: {},
-      label: {},
-      description: {},
-      image: {},
-    };
-  }
+  @property() public value?: string;
+  @property() public icon?: string;
+  @property() public label?: string;
+  @property() public description?: string;
+  @property() public image?: string;
 
   protected render(): TemplateResult | void {
     return html`

src/dialogs/more-info/controls/more-info-content.ts

@@ -1,8 +1,4 @@
-import {
-  PropertyDeclarations,
-  PropertyValues,
-  UpdatingElement,
-} from "lit-element";
+import { PropertyValues, UpdatingElement, property } from "lit-element";
 import { HassEntity } from "home-assistant-js-websocket";
 
 import "./more-info-alarm_control_panel";
@@ -33,17 +29,10 @@ import dynamicContentUpdater from "../../../common/dom/dynamic_content_updater";
 import { HomeAssistant } from "../../../types";
 
 class MoreInfoContent extends UpdatingElement {
-  public hass?: HomeAssistant;
-  public stateObj?: HassEntity;
+  @property() public hass?: HomeAssistant;
+  @property() public stateObj?: HassEntity;
   private _detachedChild?: ChildNode;
 
-  static get properties(): PropertyDeclarations {
-    return {
-      hass: {},
-      stateObj: {},
-    };
-  }
-
   protected firstUpdated(): void {
     this.style.position = "relative";
     this.style.display = "block";

src/panels/config/area_registry/dialog-area-registry-detail.ts

@@ -2,9 +2,9 @@ import {
   LitElement,
   html,
   css,
-  PropertyDeclarations,
   CSSResult,
   TemplateResult,
+  property,
 } from "lit-element";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import "@polymer/paper-input/paper-input";
@@ -17,19 +17,11 @@ import { HomeAssistant } from "../../../types";
 import { AreaRegistryEntryMutableParams } from "../../../data/area_registry";
 
 class DialogAreaDetail extends LitElement {
-  public hass!: HomeAssistant;
-  private _name!: string;
-  private _error?: string;
-  private _params?: AreaRegistryDetailDialogParams;
-  private _submitting?: boolean;
-
-  static get properties(): PropertyDeclarations {
-    return {
-      _error: {},
-      _name: {},
-      _params: {},
-    };
-  }
+  @property() public hass!: HomeAssistant;
+  @property() private _name!: string;
+  @property() private _error?: string;
+  @property() private _params?: AreaRegistryDetailDialogParams;
+  @property() private _submitting?: boolean;
 
   public async showDialog(
     params: AreaRegistryDetailDialogParams

src/panels/config/automation/ha-automation-editor.ts

@@ -4,8 +4,8 @@ import {
   html,
   CSSResult,
   css,
-  PropertyDeclarations,
   PropertyValues,
+  property,
 } from "lit-element";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
@@ -38,26 +38,14 @@ function AutomationEditor(mountEl, props, mergeEl) {
 }
 
 export class HaAutomationEditor extends LitElement {
-  public hass!: HomeAssistant;
-  public automation!: AutomationEntity;
-  public isWide?: boolean;
-  public creatingNew?: boolean;
-  private _config?: AutomationConfig;
-  private _dirty?: boolean;
+  @property() public hass!: HomeAssistant;
+  @property() public automation!: AutomationEntity;
+  @property() public isWide?: boolean;
+  @property() public creatingNew?: boolean;
+  @property() private _config?: AutomationConfig;
+  @property() private _dirty?: boolean;
   private _rendered?: unknown;
-  private _errors?: string;
-
-  static get properties(): PropertyDeclarations {
-    return {
-      hass: {},
-      automation: {},
-      creatingNew: {},
-      isWide: {},
-      _errors: {},
-      _dirty: {},
-      _config: {},
-    };
-  }
+  @property() private _errors?: string;
 
   constructor() {
     super();

src/panels/config/cloud/account/cloud-google-pref.ts

@@ -1,10 +1,10 @@
 import {
   html,
   LitElement,
-  PropertyDeclarations,
   TemplateResult,
   CSSResult,
   css,
+  property,
 } from "lit-element";
 import "@material/mwc-button";
 import "../../../../components/buttons/ha-call-api-button";
@@ -21,15 +21,8 @@ import { PaperInputElement } from "@polymer/paper-input/paper-input";
 import { showSaveSuccessToast } from "../../../../util/toast-saved-success";
 
 export class CloudGooglePref extends LitElement {
-  public hass?: HomeAssistant;
-  public cloudStatus?: CloudStatusLoggedIn;
-
-  static get properties(): PropertyDeclarations {
-    return {
-      hass: {},
-      cloudStatus: {},
-    };
-  }
+  @property() public hass?: HomeAssistant;
+  @property() public cloudStatus?: CloudStatusLoggedIn;
 
   protected render(): TemplateResult | void {
     if (!this.cloudStatus) {

src/panels/config/cloud/account/cloud-remote-pref.ts

@@ -1,11 +1,11 @@
 import {
   html,
   LitElement,
-  PropertyDeclarations,
   TemplateResult,
   customElement,
   CSSResult,
   css,
+  property,
 } from "lit-element";
 import "@material/mwc-button";
 import "@polymer/paper-item/paper-item-body";
@@ -26,15 +26,8 @@ import { showCloudCertificateDialog } from "../dialog-cloud-certificate/show-dia
 
 @customElement("cloud-remote-pref")
 export class CloudRemotePref extends LitElement {
-  public hass?: HomeAssistant;
-  public cloudStatus?: CloudStatusLoggedIn;
-
-  static get properties(): PropertyDeclarations {
-    return {
-      hass: {},
-      cloudStatus: {},
-    };
-  }
+  @property() public hass?: HomeAssistant;
+  @property() public cloudStatus?: CloudStatusLoggedIn;
 
   protected render(): TemplateResult | void {
     if (!this.cloudStatus) {

src/panels/config/cloud/account/cloud-webhooks.ts

@@ -1,9 +1,4 @@
-import {
-  html,
-  LitElement,
-  PropertyDeclarations,
-  PropertyValues,
-} from "lit-element";
+import { html, LitElement, PropertyValues, property } from "lit-element";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
 import "@polymer/paper-spinner/paper-spinner";
@@ -22,21 +17,11 @@ import {
 import { showManageCloudhookDialog } from "../dialog-manage-cloudhook/show-dialog-manage-cloudhook";
 
 export class CloudWebhooks extends LitElement {
-  public hass?: HomeAssistant;
-  public cloudStatus?: CloudStatusLoggedIn;
-  private _cloudHooks?: { [webhookId: string]: CloudWebhook };
-  private _localHooks?: Webhook[];
-  private _progress: string[];
-
-  static get properties(): PropertyDeclarations {
-    return {
-      hass: {},
-      cloudStatus: {},
-      _cloudHooks: {},
-      _localHooks: {},
-      _progress: {},
-    };
-  }
+  @property() public hass?: HomeAssistant;
+  @property() public cloudStatus?: CloudStatusLoggedIn;
+  @property() private _cloudHooks?: { [webhookId: string]: CloudWebhook };
+  @property() private _localHooks?: Webhook[];
+  @property() private _progress: string[];
 
   constructor() {
     super();

src/panels/config/cloud/dialog-manage-cloudhook/dialog-manage-cloudhook.ts

@@ -1,10 +1,4 @@
-import {
-  html,
-  LitElement,
-  PropertyDeclarations,
-  css,
-  CSSResult,
-} from "lit-element";
+import { html, LitElement, css, CSSResult, property } from "lit-element";
 
 import "@material/mwc-button";
 import "@polymer/paper-input/paper-input";
@@ -24,13 +18,7 @@ const inputLabel = "Public URL – Click to copy to clipboard";
 
 export class DialogManageCloudhook extends LitElement {
   protected hass?: HomeAssistant;
-  private _params?: WebhookDialogParams;
-
-  static get properties(): PropertyDeclarations {
-    return {
-      _params: {},
-    };
-  }
+  @property() private _params?: WebhookDialogParams;
 
   public async showDialog(params: WebhookDialogParams) {
     this._params = params;

src/panels/config/person/ha-config-person.ts

@@ -4,7 +4,7 @@ import {
   html,
   css,
   CSSResult,
-  PropertyDeclarations,
+  property,
 } from "lit-element";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
@@ -30,21 +30,12 @@ import {
 import { User, fetchUsers } from "../../../data/user";
 
 class HaConfigPerson extends LitElement {
-  public hass?: HomeAssistant;
-  public isWide?: boolean;
-  private _storageItems?: Person[];
-  private _configItems?: Person[];
+  @property() public hass?: HomeAssistant;
+  @property() public isWide?: boolean;
+  @property() private _storageItems?: Person[];
+  @property() private _configItems?: Person[];
   private _usersLoad?: Promise<User[]>;
 
-  static get properties(): PropertyDeclarations {
-    return {
-      hass: {},
-      isWide: {},
-      _storageItems: {},
-      _configItems: {},
-    };
-  }
-
   protected render(): TemplateResult | void {
     if (
       !this.hass ||