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

src/panels/config/zha/zha-cluster-attributes.ts

@@ -14,9 +14,9 @@ import {
   CSSResult,
   html,
   LitElement,
-  PropertyDeclarations,
   PropertyValues,
   TemplateResult,
+  property,
 } from "lit-element";
 
 import {
@@ -37,39 +37,16 @@ import {
 } from "./types";
 
 export class ZHAClusterAttributes extends LitElement {
-  public hass?: HomeAssistant;
-  public isWide?: boolean;
-  public showHelp: boolean;
-  public selectedNode?: ZHADevice;
-  public selectedCluster?: Cluster;
-  private _attributes: Attribute[];
-  private _selectedAttributeIndex: number;
-  private _attributeValue?: any;
-  private _manufacturerCodeOverride?: string | number;
-  private _setAttributeServiceData?: SetAttributeServiceData;
-
-  constructor() {
-    super();
-    this.showHelp = false;
-    this._selectedAttributeIndex = -1;
-    this._attributes = [];
-    this._attributeValue = "";
-  }
-
-  static get properties(): PropertyDeclarations {
-    return {
-      hass: {},
-      isWide: {},
-      showHelp: {},
-      selectedNode: {},
-      selectedCluster: {},
-      _attributes: {},
-      _selectedAttributeIndex: {},
-      _attributeValue: {},
-      _manufacturerCodeOverride: {},
-      _setAttributeServiceData: {},
-    };
-  }
+  @property() public hass?: HomeAssistant;
+  @property() public isWide?: boolean;
+  @property() public showHelp = false;
+  @property() public selectedNode?: ZHADevice;
+  @property() public selectedCluster?: Cluster;
+  @property() private _attributes: Attribute[] = [];
+  @property() private _selectedAttributeIndex = -1;
+  @property() private _attributeValue?: any = "";
+  @property() private _manufacturerCodeOverride?: string | number;
+  @property() private _setAttributeServiceData?: SetAttributeServiceData;
 
   protected updated(changedProperties: PropertyValues): void {
     if (changedProperties.has("selectedCluster")) {

src/panels/config/zha/zha-cluster-commands.ts

@@ -13,9 +13,9 @@ import {
   CSSResult,
   html,
   LitElement,
-  PropertyDeclarations,
   PropertyValues,
   TemplateResult,
+  property,
 } from "lit-element";
 
 import {
@@ -34,36 +34,15 @@ import {
 } from "./types";
 
 export class ZHAClusterCommands extends LitElement {
-  public hass?: HomeAssistant;
-  public isWide?: boolean;
-  public selectedNode?: ZHADevice;
-  public selectedCluster?: Cluster;
-  private _showHelp: boolean;
-  private _commands: Command[];
-  private _selectedCommandIndex: number;
-  private _manufacturerCodeOverride?: number;
-  private _issueClusterCommandServiceData?: IssueCommandServiceData;
-
-  constructor() {
-    super();
-    this._showHelp = false;
-    this._selectedCommandIndex = -1;
-    this._commands = [];
-  }
-
-  static get properties(): PropertyDeclarations {
-    return {
-      hass: {},
-      isWide: {},
-      selectedNode: {},
-      selectedCluster: {},
-      _showHelp: {},
-      _commands: {},
-      _selectedCommandIndex: {},
-      _manufacturerCodeOverride: {},
-      _issueClusterCommandServiceData: {},
-    };
-  }
+  @property() public hass?: HomeAssistant;
+  @property() public isWide?: boolean;
+  @property() public selectedNode?: ZHADevice;
+  @property() public selectedCluster?: Cluster;
+  @property() private _showHelp = false;
+  @property() private _commands: Command[] = [];
+  @property() private _selectedCommandIndex = -1;
+  @property() private _manufacturerCodeOverride?: number;
+  @property() private _issueClusterCommandServiceData?: IssueCommandServiceData;
 
   protected updated(changedProperties: PropertyValues): void {
     if (changedProperties.has("selectedCluster")) {

src/panels/config/zha/zha-clusters.ts

@@ -11,9 +11,9 @@ import {
   CSSResult,
   html,
   LitElement,
-  PropertyDeclarations,
   PropertyValues,
   TemplateResult,
+  property,
 } from "lit-element";
 
 import { fireEvent } from "../../../common/dom/fire_event";
@@ -39,30 +39,12 @@ const computeClusterKey = (cluster: Cluster): string => {
 };
 
 export class ZHAClusters extends LitElement {
-  public hass?: HomeAssistant;
-  public isWide?: boolean;
-  public showHelp: boolean;
-  public selectedDevice?: ZHADevice;
-  private _selectedClusterIndex: number;
-  private _clusters: Cluster[];
-
-  constructor() {
-    super();
-    this.showHelp = false;
-    this._selectedClusterIndex = -1;
-    this._clusters = [];
-  }
-
-  static get properties(): PropertyDeclarations {
-    return {
-      hass: {},
-      isWide: {},
-      showHelp: {},
-      selectedDevice: {},
-      _selectedClusterIndex: {},
-      _clusters: {},
-    };
-  }
+  @property() public hass?: HomeAssistant;
+  @property() public isWide?: boolean;
+  @property() public showHelp = false;
+  @property() public selectedDevice?: ZHADevice;
+  @property() private _selectedClusterIndex = -1;
+  @property() private _clusters: Cluster[] = [];
 
   protected updated(changedProperties: PropertyValues): void {
     if (changedProperties.has("selectedDevice")) {

src/panels/config/zha/zha-network.ts

@@ -10,8 +10,8 @@ import {
   CSSResult,
   html,
   LitElement,
-  PropertyDeclarations,
   TemplateResult,
+  property,
 } from "lit-element";
 
 import { navigate } from "../../../common/navigate";
@@ -19,23 +19,9 @@ import { haStyle } from "../../../resources/styles";
 import { HomeAssistant } from "../../../types";
 
 export class ZHANetwork extends LitElement {
-  public hass?: HomeAssistant;
-  public isWide?: boolean;
-  private _showHelp: boolean;
-
-  constructor() {
-    super();
-    this._showHelp = false;
-  }
-
-  static get properties(): PropertyDeclarations {
-    return {
-      hass: {},
-      isWide: {},
-      _showHelp: {},
-      _joinParams: {},
-    };
-  }
+  @property() public hass?: HomeAssistant;
+  @property() public isWide?: boolean;
+  @property() private _showHelp = false;
 
   protected render(): TemplateResult | void {
     return html`

src/panels/developer-tools/info/system-health-card.ts

@@ -3,8 +3,8 @@ import {
   html,
   CSSResult,
   css,
-  PropertyDeclarations,
   TemplateResult,
+  property,
 } from "lit-element";
 import "@polymer/paper-spinner/paper-spinner";
 import "../../../components/ha-card";
@@ -32,15 +32,8 @@ const sortKeys = (a: string, b: string) => {
 };
 
 class SystemHealthCard extends LitElement {
-  public hass?: HomeAssistant;
-  private _info?: SystemHealthInfo;
-
-  static get properties(): PropertyDeclarations {
-    return {
-      hass: {},
-      _info: {},
-    };
-  }
+  @property() public hass?: HomeAssistant;
+  @property() private _info?: SystemHealthInfo;
 
   protected render(): TemplateResult | void {
     if (!this.hass) {

src/panels/developer-tools/logs/dialog-system-log-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";
 
@@ -16,14 +16,8 @@ import { haStyleDialog } from "../../../resources/styles";
 import { HomeAssistant } from "../../../types";
 
 class DialogSystemLogDetail extends LitElement {
-  public hass!: HomeAssistant;
-  private _params?: SystemLogDetailDialogParams;
-
-  static get properties(): PropertyDeclarations {
-    return {
-      _params: {},
-    };
-  }
+  @property() public hass!: HomeAssistant;
+  @property() private _params?: SystemLogDetailDialogParams;
 
   public async showDialog(params: SystemLogDetailDialogParams): Promise<void> {
     this._params = params;

src/panels/developer-tools/logs/error-log-card.ts

@@ -3,8 +3,8 @@ import {
   html,
   CSSResult,
   css,
-  PropertyDeclarations,
   TemplateResult,
+  property,
 } from "lit-element";
 import "@polymer/paper-icon-button/paper-icon-button";
 import "@material/mwc-button";
@@ -13,15 +13,8 @@ import { HomeAssistant } from "../../../types";
 import { fetchErrorLog } from "../../../data/error_log";
 
 class ErrorLogCard extends LitElement {
-  public hass!: HomeAssistant;
-  private _errorLog?: string;
-
-  static get properties(): PropertyDeclarations {
-    return {
-      hass: {},
-      _errorLog: {},
-    };
-  }
+  @property() public hass!: HomeAssistant;
+  @property() private _errorLog?: string;
 
   protected render(): TemplateResult | void {
     return html`

src/panels/developer-tools/logs/system-log-card.ts

@@ -3,9 +3,9 @@ import {
   html,
   CSSResult,
   css,
-  PropertyDeclarations,
   TemplateResult,
   customElement,
+  property,
 } from "lit-element";
 import "@polymer/paper-icon-button/paper-icon-button";
 import "@polymer/paper-item/paper-item-body";
@@ -32,16 +32,9 @@ const formatLogTime = (date, language: string) => {
 
 @customElement("system-log-card")
 export class SystemLogCard extends LitElement {
-  public hass!: HomeAssistant;
+  @property() public hass!: HomeAssistant;
   public loaded = false;
-  private _items?: LoggedError[];
-
-  static get properties(): PropertyDeclarations {
-    return {
-      hass: {},
-      _items: {},
-    };
-  }
+  @property() private _items?: LoggedError[];
 
   public async fetchData(): Promise<void> {
     this._items = undefined;

src/panels/lovelace/views/hui-view.ts

@@ -2,8 +2,8 @@ import {
   html,
   LitElement,
   PropertyValues,
-  PropertyDeclarations,
   TemplateResult,
+  property,
 } from "lit-element";
 
 import "../../../components/entity/ha-state-label-badge";
@@ -48,29 +48,12 @@ const getColumnIndex = (columnEntityCount: number[], size: number) => {
 };
 
 export class HUIView extends LitElement {
-  public hass?: HomeAssistant;
-  public lovelace?: Lovelace;
-  public columns?: number;
-  public index?: number;
-  private _cards: Array<LovelaceCard | HuiErrorCard>;
-  private _badges: LovelaceBadge[];
-
-  static get properties(): PropertyDeclarations {
-    return {
-      hass: {},
-      lovelace: {},
-      columns: { type: Number },
-      index: { type: Number },
-      _cards: {},
-      _badges: {},
-    };
-  }
-
-  constructor() {
-    super();
-    this._cards = [];
-    this._badges = [];
-  }
+  @property() public hass?: HomeAssistant;
+  @property() public lovelace?: Lovelace;
+  @property({ type: Number }) public columns?: number;
+  @property({ type: Number }) public index?: number;
+  @property() private _cards: Array<LovelaceCard | HuiErrorCard> = [];
+  @property() private _badges: LovelaceBadge[] = [];
 
   // Public to make demo happy
   public createCardElement(cardConfig: LovelaceCardConfig) {