Fix property visibility mismatches (1 of 2) (#19376)

gallery/src/ha-gallery.ts

@@ -1,14 +1,14 @@
-import { mdiMenu } from "@mdi/js";
 import "@material/mwc-drawer";
 import "@material/mwc-top-app-bar-fixed";
-import { html, css, LitElement, PropertyValues } from "lit";
+import { mdiMenu } from "@mdi/js";
-import { customElement, property, query } from "lit/decorators";
+import { LitElement, PropertyValues, css, html } from "lit";
+import { customElement, query, state } from "lit/decorators";
+import { dynamicElement } from "../../src/common/dom/dynamic-element-directive";
+import { HaExpansionPanel } from "../../src/components/ha-expansion-panel";
 import "../../src/components/ha-icon-button";
 import "../../src/managers/notification-manager";
-import { HaExpansionPanel } from "../../src/components/ha-expansion-panel";
 import { haStyle } from "../../src/resources/styles";
 import { PAGES, SIDEBAR } from "../build/import-pages";
-import { dynamicElement } from "../../src/common/dom/dynamic-element-directive";
 import "./components/page-description";
 
 const GITHUB_DEMO_URL =
@@ -24,7 +24,7 @@ const FAKE_HASS = {
 
 @customElement("ha-gallery")
 class HaGallery extends LitElement {
-  @property() private _page =
+  @state() private _page =
     document.location.hash.substring(1) ||
     `${SIDEBAR[0].category}/${SIDEBAR[0].pages![0]}`;
 

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

@@ -65,9 +65,9 @@ class HassioAddonConfig extends LitElement {
 
   @property({ attribute: false }) public supervisor!: Supervisor;
 
-  @property({ type: Boolean }) private _configHasChanged = false;
+  @state() private _configHasChanged = false;
 
-  @property({ type: Boolean }) private _valid = true;
+  @state() private _valid = true;
 
   @state() private _canShowSchema = false;
 

src/auth/ha-auth-flow.ts

@@ -38,7 +38,7 @@ export class HaAuthFlow extends LitElement {
 
   @property({ attribute: false }) public step?: DataEntryFlowStep;
 
-  @property({ type: Boolean }) private initStoreToken = false;
+  @property({ type: Boolean }) public initStoreToken = false;
 
   @state() private _storeToken = false;
 

src/components/ha-file-upload.ts

@@ -33,16 +33,16 @@ export class HaFileUpload extends LitElement {
 
   @property() public value?: File | File[] | FileList | string;
 
-  @property({ type: Boolean }) private multiple = false;
+  @property({ type: Boolean }) public multiple = false;
 
   @property({ type: Boolean, reflect: true }) public disabled: boolean = false;
 
-  @property({ type: Boolean }) private uploading = false;
+  @property({ type: Boolean }) public uploading = false;
 
-  @property({ type: Number }) private progress?: number;
+  @property({ type: Number }) public progress?: number;
 
   @property({ type: Boolean, attribute: "auto-open-file-dialog" })
-  private autoOpenFileDialog = false;
+  public autoOpenFileDialog = false;
 
   @state() private _drag = false;
 

src/panels/config/dashboard/ha-config-updates.ts

@@ -2,7 +2,7 @@ import "@material/mwc-button/mwc-button";
 import "@material/mwc-list/mwc-list";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../common/dom/fire_event";
@@ -30,37 +30,33 @@ class HaConfigUpdates extends SubscribeMixin(LitElement) {
 
   @property({ type: Boolean }) public narrow!: boolean;
 
-  @property({ attribute: false })
+  @property({ attribute: false }) public updateEntities?: UpdateEntity[];
-  public updateEntities?: UpdateEntity[];
 
-  @property({ attribute: false, type: Array })
+  @property({ type: Number }) public total?: number;
-  private devices?: DeviceRegistryEntry[];
 
-  @property({ attribute: false, type: Array })
+  @state() private _devices?: DeviceRegistryEntry[];
-  private entities?: EntityRegistryEntry[];
 
-  @property({ type: Number })
+  @state() private _entities?: EntityRegistryEntry[];
-  public total?: number;
 
   public hassSubscribe(): UnsubscribeFunc[] {
     return [
       subscribeDeviceRegistry(this.hass.connection, (entries) => {
-        this.devices = entries;
+        this._devices = entries;
       }),
       subscribeEntityRegistry(this.hass.connection!, (entities) => {
-        this.entities = entities.filter((entity) => entity.device_id !== null);
+        this._entities = entities.filter((entity) => entity.device_id !== null);
       }),
     ];
   }
 
   private getDeviceEntry = memoizeOne(
     (deviceId: string): DeviceRegistryEntry | undefined =>
-      this.devices?.find((device) => device.id === deviceId)
+      this._devices?.find((device) => device.id === deviceId)
   );
 
   private getEntityEntry = memoizeOne(
     (entityId: string): EntityRegistryEntry | undefined =>
-      this.entities?.find((entity) => entity.entity_id === entityId)
+      this._entities?.find((entity) => entity.entity_id === entityId)
   );
 
   protected render() {

src/panels/config/integrations/integration-panels/zha/zha-config-dashboard.ts

@@ -78,9 +78,9 @@ class ZHAConfigDashboard extends LitElement {
 
   @property() public configEntryId?: string;
 
-  @property() private _configuration?: ZHAConfiguration;
+  @state() private _configuration?: ZHAConfiguration;
 
-  @property() private _networkSettings?: ZHANetworkSettings;
+  @state() private _networkSettings?: ZHANetworkSettings;
 
   @state() private _generatingBackup = false;
 

src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-config.ts

@@ -79,8 +79,7 @@ class ZWaveJSNodeConfig extends SubscribeMixin(LitElement) {
 
   @property() public deviceId!: string;
 
-  @property({ type: Array })
+  @state() private _deviceRegistryEntries?: DeviceRegistryEntry[];
-  private _deviceRegistryEntries?: DeviceRegistryEntry[];
 
   @state() private _nodeMetadata?: ZwaveJSNodeMetadata;
 

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

@@ -1,6 +1,6 @@
 import { mdiCheck, mdiPlus } from "@mdi/js";
-import { html, LitElement, PropertyValues } from "lit";
+import { LitElement, PropertyValues, html } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { HASSDomEvent } from "../../../common/dom/fire_event";
 import { LocalizeFunc } from "../../../common/translations/localize";
@@ -13,11 +13,11 @@ import "../../../components/ha-fab";
 import "../../../components/ha-help-tooltip";
 import "../../../components/ha-svg-icon";
 import {
+  User,
   computeUserBadges,
   deleteUser,
   fetchUsers,
   updateUser,
-  User,
 } from "../../../data/user";
 import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
 import "../../../layouts/hass-tabs-subpage-data-table";
@@ -30,14 +30,14 @@ import { showUserDetailDialog } from "./show-dialog-user-detail";
 export class HaConfigUsers extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ attribute: false }) public _users: User[] = [];
-
   @property({ type: Boolean }) public isWide!: boolean;
 
   @property({ type: Boolean }) public narrow!: boolean;
 
   @property({ attribute: false }) public route!: Route;
 
+  @state() private _users: User[] = [];
+
   private _columns = memoizeOne(
     (narrow: boolean, localize: LocalizeFunc): DataTableColumnContainer => {
       const columns: DataTableColumnContainer<User> = {

src/panels/lovelace/components/hui-action-editor.ts

@@ -82,7 +82,7 @@ export class HuiActionEditor extends LitElement {
 
   @property() public tooltipText?: string;
 
-  @property() protected hass?: HomeAssistant;
+  @property({ attribute: false }) public hass?: HomeAssistant;
 
   @query("ha-select") private _select!: HaSelect;
 

src/panels/lovelace/components/hui-entities-toggle.ts

@@ -18,7 +18,7 @@ import { turnOnOffEntities } from "../common/entity/turn-on-off-entities";
 class HuiEntitiesToggle extends LitElement {
   @property({ type: Array }) public entities?: string[];
 
-  @property({ attribute: false }) protected hass?: HomeAssistant;
+  @property({ attribute: false }) public hass?: HomeAssistant;
 
   @state() private _toggleEntities?: string[];
 

src/panels/lovelace/components/hui-entity-editor.ts

@@ -15,13 +15,13 @@ import { EntityConfig } from "../entity-rows/types";
 
 @customElement("hui-entity-editor")
 export class HuiEntityEditor extends LitElement {
-  @property({ attribute: false }) protected hass?: HomeAssistant;
+  @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @property({ attribute: false }) protected entities?: EntityConfig[];
+  @property({ attribute: false }) public entities?: EntityConfig[];
 
-  @property() protected entityFilter?: HaEntityPickerEntityFilterFunc;
+  @property() public entityFilter?: HaEntityPickerEntityFilterFunc;
 
-  @property() protected label?: string;
+  @property() public label?: string;
 
   private _entityKeys = new WeakMap<EntityConfig, string>();
 

src/panels/lovelace/components/hui-input-list-editor.ts

@@ -9,11 +9,11 @@ import { EditorTarget } from "../editor/types";
 
 @customElement("hui-input-list-editor")
 export class HuiInputListEditor extends LitElement {
-  @property() protected value?: string[];
+  @property({ type: Array }) public value?: string[];
 
-  @property() protected hass?: HomeAssistant;
+  @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @property() protected inputLabel?: string;
+  @property() public inputLabel?: string;
 
   protected render() {
     if (!this.value) {

src/panels/lovelace/editor/card-editor/hui-dialog-create-card.ts

@@ -37,7 +37,7 @@ export class HuiCreateDialogCard
   extends LitElement
   implements HassDialog<CreateCardDialogParams>
 {
-  @property({ attribute: false }) protected hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
   @state() private _params?: CreateCardDialogParams;
 

src/panels/lovelace/editor/card-editor/hui-dialog-delete-card.ts

@@ -10,7 +10,7 @@ import type { DeleteCardDialogParams } from "./show-delete-card-dialog";
 
 @customElement("hui-dialog-delete-card")
 export class HuiDialogDeleteCard extends LitElement {
-  @property() protected hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
   @state() private _params?: DeleteCardDialogParams;
 

src/panels/lovelace/editor/header-footer-editor/hui-dialog-create-headerfooter.ts

@@ -16,7 +16,7 @@ export class HuiCreateDialogHeaderFooter
   extends LitElement
   implements HassDialog<CreateHeaderFooterDialogParams>
 {
-  @property({ attribute: false }) protected hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
   @state() private _params?: CreateHeaderFooterDialogParams;
 

src/panels/lovelace/editor/hui-entities-card-row-editor.ts

@@ -21,11 +21,11 @@ declare global {
 
 @customElement("hui-entities-card-row-editor")
 export class HuiEntitiesCardRowEditor extends LitElement {
-  @property({ attribute: false }) protected hass?: HomeAssistant;
+  @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @property({ attribute: false }) protected entities?: LovelaceRowConfig[];
+  @property({ attribute: false }) public entities?: LovelaceRowConfig[];
 
-  @property() protected label?: string;
+  @property() public label?: string;
 
   private _entityKeys = new WeakMap<LovelaceRowConfig, string>();