diff --git a/gallery/src/components/demo-more-infos.ts b/gallery/src/components/demo-more-infos.ts index 8a13665e43..072dca2658 100644 --- a/gallery/src/components/demo-more-infos.ts +++ b/gallery/src/components/demo-more-infos.ts @@ -1,11 +1,11 @@ import { LitElement, css, html } from "lit"; -import { customElement, property } from "lit/decorators"; +import { customElement, property, state } from "lit/decorators"; import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element"; import "../../../src/components/ha-formfield"; import "../../../src/components/ha-switch"; -import "./demo-more-info"; -import "../ha-demo-options"; import { HomeAssistant } from "../../../src/types"; +import "../ha-demo-options"; +import "./demo-more-info"; @customElement("demo-more-infos") class DemoMoreInfos extends LitElement { @@ -13,7 +13,7 @@ class DemoMoreInfos extends LitElement { @property() public entities!: []; - @property({ attribute: false }) _showConfig: boolean = false; + @state() private _showConfig = false; render() { return html` diff --git a/hassio/src/dialogs/backup/dialog-hassio-backup-location.ts b/hassio/src/dialogs/backup/dialog-hassio-backup-location.ts index 18292149bd..c5bdde32e5 100644 --- a/hassio/src/dialogs/backup/dialog-hassio-backup-location.ts +++ b/hassio/src/dialogs/backup/dialog-hassio-backup-location.ts @@ -27,8 +27,7 @@ const SCHEMA = memoizeOne( class HassioBackupLocationDialog extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; - @property({ attribute: false }) - public _dialogParams?: HassioBackupLocationDialogParams; + @state() private _dialogParams?: HassioBackupLocationDialogParams; @state() private _data?: { default_backup_mount: string | null }; diff --git a/src/components/entity/ha-entity-attribute-picker.ts b/src/components/entity/ha-entity-attribute-picker.ts index 4e5995a6bf..e746999d21 100644 --- a/src/components/entity/ha-entity-attribute-picker.ts +++ b/src/components/entity/ha-entity-attribute-picker.ts @@ -1,8 +1,8 @@ import { HassEntity } from "home-assistant-js-websocket"; -import { html, LitElement, PropertyValues, nothing } from "lit"; -import { customElement, property, query } from "lit/decorators"; +import { LitElement, PropertyValues, html, nothing } from "lit"; +import { customElement, property, query, state } from "lit/decorators"; import { computeAttributeNameDisplay } from "../../common/entity/compute_attribute_display"; -import { ValueChangedEvent, HomeAssistant } from "../../types"; +import { HomeAssistant, ValueChangedEvent } from "../../types"; import "../ha-combo-box"; import type { HaComboBox } from "../ha-combo-box"; @@ -37,7 +37,7 @@ class HaEntityAttributePicker extends LitElement { @property() public helper?: string; - @property({ type: Boolean }) private _opened = false; + @state() private _opened = false; @query("ha-combo-box", true) private _comboBox!: HaComboBox; @@ -47,15 +47,17 @@ class HaEntityAttributePicker extends LitElement { protected updated(changedProps: PropertyValues) { if (changedProps.has("_opened") && this._opened) { - const state = this.entityId ? this.hass.states[this.entityId] : undefined; - (this._comboBox as any).items = state - ? Object.keys(state.attributes) + const entityState = this.entityId + ? this.hass.states[this.entityId] + : undefined; + (this._comboBox as any).items = entityState + ? Object.keys(entityState.attributes) .filter((key) => !this.hideAttributes?.includes(key)) .map((key) => ({ value: key, label: computeAttributeNameDisplay( this.hass.localize, - state, + entityState, this.hass.entities, key ), diff --git a/src/components/entity/ha-entity-state-picker.ts b/src/components/entity/ha-entity-state-picker.ts index b14cbeaa2f..0c91884573 100644 --- a/src/components/entity/ha-entity-state-picker.ts +++ b/src/components/entity/ha-entity-state-picker.ts @@ -1,6 +1,6 @@ import { HassEntity } from "home-assistant-js-websocket"; import { LitElement, PropertyValues, html, nothing } from "lit"; -import { customElement, property, query } from "lit/decorators"; +import { customElement, property, query, state } from "lit/decorators"; import { fireEvent } from "../../common/dom/fire_event"; import { getStates } from "../../common/entity/get_states"; import { HomeAssistant, ValueChangedEvent } from "../../types"; @@ -17,7 +17,7 @@ class HaEntityStatePicker extends LitElement { @property() public attribute?: string; - @property() public extraOptions?: any[]; + @property({ attribute: false }) public extraOptions?: any[]; @property({ type: Boolean }) public autofocus = false; @@ -34,7 +34,7 @@ class HaEntityStatePicker extends LitElement { @property() public helper?: string; - @property({ type: Boolean }) private _opened = false; + @state() private _opened = false; @query("ha-combo-box", true) private _comboBox!: HaComboBox; @@ -49,16 +49,18 @@ class HaEntityStatePicker extends LitElement { changedProps.has("attribute") || changedProps.has("extraOptions") ) { - const state = this.entityId ? this.hass.states[this.entityId] : undefined; + const stateObj = this.entityId + ? this.hass.states[this.entityId] + : undefined; (this._comboBox as any).items = [ ...(this.extraOptions ?? []), - ...(this.entityId && state - ? getStates(state, this.attribute).map((key) => ({ + ...(this.entityId && stateObj + ? getStates(stateObj, this.attribute).map((key) => ({ value: key, label: !this.attribute - ? this.hass.formatEntityState(state, key) + ? this.hass.formatEntityState(stateObj, key) : this.hass.formatEntityAttributeValue( - state, + stateObj, this.attribute, key ), diff --git a/src/components/entity/state-badge.ts b/src/components/entity/state-badge.ts index 82ee231b4a..ecf012ebca 100644 --- a/src/components/entity/state-badge.ts +++ b/src/components/entity/state-badge.ts @@ -36,8 +36,8 @@ export class StateBadge extends LitElement { @property() public color?: string; - @property({ type: Boolean, reflect: true, attribute: "icon" }) - private _showIcon = true; + // @todo Consider reworking to eliminate need for attribute since it is manipulated internally + @property({ type: Boolean, reflect: true }) public icon = true; @state() private _iconStyle: { [name: string]: string | undefined } = {}; @@ -83,7 +83,7 @@ export class StateBadge extends LitElement { `; } - if (!this._showIcon) { + if (!this.icon) { return nothing; } @@ -98,7 +98,7 @@ export class StateBadge extends LitElement { >`; } - public willUpdate(changedProps: PropertyValues) { + public willUpdate(changedProps: PropertyValues) { super.willUpdate(changedProps); if ( !changedProps.has("stateObj") && @@ -114,7 +114,7 @@ export class StateBadge extends LitElement { const iconStyle: { [name: string]: string } = {}; let backgroundImage = ""; - this._showIcon = true; + this.icon = true; if (stateObj && this.overrideImage === undefined) { // hide icon if we have entity picture @@ -134,7 +134,7 @@ export class StateBadge extends LitElement { imageUrl = cameraUrlWithWidthHeight(imageUrl, 80, 80); } backgroundImage = `url(${imageUrl})`; - this._showIcon = false; + this.icon = false; if (domain === "update") { this.style.borderRadius = "0"; } else if (domain === "media_player") { @@ -180,7 +180,7 @@ export class StateBadge extends LitElement { imageUrl = this.hass.hassUrl(imageUrl); } backgroundImage = `url(${imageUrl})`; - this._showIcon = false; + this.icon = false; } this._iconStyle = iconStyle; diff --git a/src/components/ha-date-range-picker.ts b/src/components/ha-date-range-picker.ts index 1532409130..dc9ef2f6aa 100644 --- a/src/components/ha-date-range-picker.ts +++ b/src/components/ha-date-range-picker.ts @@ -61,11 +61,11 @@ export class HaDateRangePicker extends LitElement { @property({ type: Boolean }) public disabled = false; - @property({ type: Boolean }) private _hour24format = false; + @property({ type: Boolean }) public minimal = false; - @property({ type: String }) private _rtlDirection = "ltr"; + @state() private _hour24format = false; - @property({ type: Boolean }) private minimal = false; + @state() private _rtlDirection = "ltr"; @property({ type: Boolean }) public extendedPresets = false; diff --git a/src/components/media-player/ha-media-player-browse.ts b/src/components/media-player/ha-media-player-browse.ts index b3347dc8b1..6737ea613b 100644 --- a/src/components/media-player/ha-media-player-browse.ts +++ b/src/components/media-player/ha-media-player-browse.ts @@ -92,14 +92,13 @@ export class HaMediaPlayerBrowse extends LitElement { @property({ type: Boolean }) public dialog = false; - @property() public navigateIds!: MediaPlayerItemId[]; + @property({ attribute: false }) public navigateIds: MediaPlayerItemId[] = []; - @property({ type: Boolean, attribute: "narrow", reflect: true }) - // @ts-ignore - private _narrow = false; + // @todo Consider reworking to eliminate need for attribute since it is manipulated internally + @property({ type: Boolean, reflect: true }) public narrow = false; - @property({ type: Boolean, attribute: "scroll", reflect: true }) - private _scrolled = false; + // @todo Consider reworking to eliminate need for attribute since it is manipulated internally + @property({ type: Boolean, reflect: true }) public scrolled = false; @state() private _error?: { message: string; code: string }; @@ -178,7 +177,7 @@ export class HaMediaPlayerBrowse extends LitElement { // We're navigating. Reset the shizzle. this._content?.scrollTo(0, 0); - this._scrolled = false; + this.scrolled = false; const oldCurrentItem = this._currentItem; const oldParentItem = this._parentItem; this._currentItem = undefined; @@ -373,7 +372,7 @@ export class HaMediaPlayerBrowse extends LitElement { "" )}" > - ${this._narrow && currentItem?.can_play + ${this.narrow && currentItem?.can_play ? html` ${currentItem.can_play && - (!currentItem.thumbnail || !this._narrow) + (!currentItem.thumbnail || !this.narrow) ? html` { @@ -868,10 +867,10 @@ export class HaMediaPlayerBrowse extends LitElement { @eventOptions({ passive: true }) private _scroll(ev: Event): void { const content = ev.currentTarget as HTMLDivElement; - if (!this._scrolled && content.scrollTop > this._headerOffsetHeight) { - this._scrolled = true; - } else if (this._scrolled && content.scrollTop < this._headerOffsetHeight) { - this._scrolled = false; + if (!this.scrolled && content.scrollTop > this._headerOffsetHeight) { + this.scrolled = true; + } else if (this.scrolled && content.scrollTop < this._headerOffsetHeight) { + this.scrolled = false; } } @@ -1266,58 +1265,58 @@ export class HaMediaPlayerBrowse extends LitElement { } /* ============= Scroll ============= */ - :host([scroll]) .breadcrumb .subtitle { + :host([scrolled]) .breadcrumb .subtitle { height: 0; margin: 0; } - :host([scroll]) .breadcrumb .title { + :host([scrolled]) .breadcrumb .title { -webkit-line-clamp: 1; } - :host(:not([narrow])[scroll]) .header:not(.no-img) ha-icon-button { + :host(:not([narrow])[scrolled]) .header:not(.no-img) ha-icon-button { align-self: center; } - :host([scroll]) .header-info mwc-button, + :host([scrolled]) .header-info mwc-button, .no-img .header-info mwc-button { padding-right: 4px; } - :host([scroll][narrow]) .no-img .header-info mwc-button { + :host([scrolled][narrow]) .no-img .header-info mwc-button { padding-right: 16px; } - :host([scroll]) .header-info { + :host([scrolled]) .header-info { flex-direction: row; } - :host([scroll]) .header-info mwc-button { + :host([scrolled]) .header-info mwc-button { align-self: center; margin-top: 0; margin-bottom: 0; padding-bottom: 0; } - :host([scroll][narrow]) .no-img .header-info { + :host([scrolled][narrow]) .no-img .header-info { flex-direction: row-reverse; } - :host([scroll][narrow]) .header-info { + :host([scrolled][narrow]) .header-info { padding: 20px 24px 10px 24px; align-items: center; } - :host([scroll]) .header-content { + :host([scrolled]) .header-content { align-items: flex-end; flex-direction: row; } - :host([scroll]) .header-content .img { + :host([scrolled]) .header-content .img { height: 75px; width: 75px; } - :host([scroll]) .breadcrumb { + :host([scrolled]) .breadcrumb { padding-top: 0; align-self: center; } - :host([scroll][narrow]) .header-content .img { + :host([scrolled][narrow]) .header-content .img { height: 100px; width: 100px; padding-bottom: initial; margin-bottom: 0; } - :host([scroll]) ha-fab { + :host([scrolled]) ha-fab { bottom: 0px; right: -24px; --mdc-fab-box-shadow: none; diff --git a/src/panels/config/automation/ha-automation-picker.ts b/src/panels/config/automation/ha-automation-picker.ts index 421db70827..6e5d41f3a0 100644 --- a/src/panels/config/automation/ha-automation-picker.ts +++ b/src/panels/config/automation/ha-automation-picker.ts @@ -81,7 +81,7 @@ class HaAutomationPicker extends LitElement { @property() public automations!: AutomationEntity[]; - @property() private _activeFilters?: string[]; + @state() private _activeFilters?: string[]; @state() private _searchParms = new URLSearchParams(window.location.search); diff --git a/src/panels/config/cloud/dialog-cloud-certificate/dialog-cloud-certificate.ts b/src/panels/config/cloud/dialog-cloud-certificate/dialog-cloud-certificate.ts index 15e2baafb8..91ee82e241 100644 --- a/src/panels/config/cloud/dialog-cloud-certificate/dialog-cloud-certificate.ts +++ b/src/panels/config/cloud/dialog-cloud-certificate/dialog-cloud-certificate.ts @@ -1,6 +1,6 @@ import "@material/mwc-button"; import { css, CSSResultGroup, html, LitElement, nothing } from "lit"; -import { customElement, property } from "lit/decorators"; +import { customElement, state } from "lit/decorators"; import { formatDateTime } from "../../../../common/datetime/format_date_time"; import { fireEvent } from "../../../../common/dom/fire_event"; import { createCloseHeading } from "../../../../components/ha-dialog"; @@ -12,8 +12,7 @@ import type { CloudCertificateParams as CloudCertificateDialogParams } from "./s class DialogCloudCertificate extends LitElement { public hass!: HomeAssistant; - @property() - private _params?: CloudCertificateDialogParams; + @state() private _params?: CloudCertificateDialogParams; public showDialog(params: CloudCertificateDialogParams) { this._params = params; diff --git a/src/panels/config/entities/ha-config-entities.ts b/src/panels/config/entities/ha-config-entities.ts index a78f295b6a..b5598dbe4e 100644 --- a/src/panels/config/entities/ha-config-entities.ts +++ b/src/panels/config/entities/ha-config-entities.ts @@ -13,7 +13,14 @@ import { mdiUndo, } from "@mdi/js"; import { HassEntity } from "home-assistant-js-websocket"; -import { CSSResultGroup, LitElement, css, html, nothing } from "lit"; +import { + CSSResultGroup, + LitElement, + PropertyValues, + css, + html, + nothing, +} from "lit"; import { customElement, property, query, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; import { ifDefined } from "lit/directives/if-defined"; @@ -91,7 +98,7 @@ export class HaConfigEntities extends LitElement { @state() private _stateEntities: StateEntity[] = []; - @property() public _entries?: ConfigEntry[]; + @state() private _entries?: ConfigEntry[]; @state() @consume({ context: fullEntitiesContext, subscribe: true }) @@ -681,7 +688,7 @@ export class HaConfigEntities extends LitElement { `; } - public willUpdate(changedProps): void { + public willUpdate(changedProps: PropertyValues): void { super.willUpdate(changedProps); const oldHass = changedProps.get("hass"); let changed = false; diff --git a/src/panels/config/integrations/ha-config-integrations.ts b/src/panels/config/integrations/ha-config-integrations.ts index f8edf4763d..5ce9459e0a 100644 --- a/src/panels/config/integrations/ha-config-integrations.ts +++ b/src/panels/config/integrations/ha-config-integrations.ts @@ -72,8 +72,7 @@ class HaConfigIntegrations extends SubscribeMixin(HassRouterPage) { @state() private _configEntries?: ConfigEntryExtended[]; - @property() - private _configEntriesInProgress?: DataEntryFlowProgressExtended[]; + @state() private _configEntriesInProgress?: DataEntryFlowProgressExtended[]; private _loadTranslationsPromise?: Promise; diff --git a/src/panels/config/integrations/integration-panels/zha/zha-groups-dashboard.ts b/src/panels/config/integrations/integration-panels/zha/zha-groups-dashboard.ts index 9093913d9c..d21ae02aea 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-groups-dashboard.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-groups-dashboard.ts @@ -8,7 +8,7 @@ import { PropertyValues, TemplateResult, } 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 { navigate } from "../../../../../common/navigate"; @@ -40,7 +40,7 @@ export class ZHAGroupsDashboard extends LitElement { @property({ type: Boolean }) public isWide = false; - @property() public _groups: ZHAGroup[] = []; + @state() private _groups: ZHAGroup[] = []; private _firstUpdatedCalled = false; diff --git a/src/panels/config/scene/ha-scene-dashboard.ts b/src/panels/config/scene/ha-scene-dashboard.ts index cb9861932c..5f29a08398 100644 --- a/src/panels/config/scene/ha-scene-dashboard.ts +++ b/src/panels/config/scene/ha-scene-dashboard.ts @@ -72,7 +72,7 @@ class HaSceneDashboard extends LitElement { @property() public scenes!: SceneEntity[]; - @property() private _activeFilters?: string[]; + @state() private _activeFilters?: string[]; @state() private _filteredScenes?: string[] | null; diff --git a/src/panels/lovelace/badges/hui-state-label-badge.ts b/src/panels/lovelace/badges/hui-state-label-badge.ts index cc9a769c80..92b06a1736 100644 --- a/src/panels/lovelace/badges/hui-state-label-badge.ts +++ b/src/panels/lovelace/badges/hui-state-label-badge.ts @@ -1,20 +1,20 @@ 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 "../../../components/entity/ha-state-label-badge"; +import { ActionHandlerEvent } from "../../../data/lovelace/action_handler"; import { HomeAssistant } from "../../../types"; import { actionHandler } from "../common/directives/action-handler-directive"; import { handleAction } from "../common/handle-action"; import { hasAction } from "../common/has-action"; import { LovelaceBadge } from "../types"; import { StateLabelBadgeConfig } from "./types"; -import { ActionHandlerEvent } from "../../../data/lovelace/action_handler"; @customElement("hui-state-label-badge") export class HuiStateLabelBadge extends LitElement implements LovelaceBadge { @property({ attribute: false }) public hass?: HomeAssistant; - @property() protected _config?: StateLabelBadgeConfig; + @state() protected _config?: StateLabelBadgeConfig; public setConfig(config: StateLabelBadgeConfig): void { this._config = config; diff --git a/src/panels/lovelace/cards/hui-calendar-card.ts b/src/panels/lovelace/cards/hui-calendar-card.ts index 3633244705..047118828a 100644 --- a/src/panels/lovelace/cards/hui-calendar-card.ts +++ b/src/panels/lovelace/cards/hui-calendar-card.ts @@ -59,7 +59,7 @@ export class HuiCalendarCard extends LitElement implements LovelaceCard { @property({ attribute: false }) public hass?: HomeAssistant; - @property({ attribute: false }) public _events: CalendarEvent[] = []; + @state() private _events: CalendarEvent[] = []; @state() private _config?: CalendarCardConfig; diff --git a/src/panels/lovelace/cards/hui-picture-card.ts b/src/panels/lovelace/cards/hui-picture-card.ts index 46b0484478..be5902ba84 100644 --- a/src/panels/lovelace/cards/hui-picture-card.ts +++ b/src/panels/lovelace/cards/hui-picture-card.ts @@ -6,7 +6,7 @@ import { nothing, PropertyValues, } from "lit"; -import { customElement, property } from "lit/decorators"; +import { customElement, property, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; import { ifDefined } from "lit/directives/if-defined"; import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element"; @@ -38,7 +38,7 @@ export class HuiPictureCard extends LitElement implements LovelaceCard { @property({ attribute: false }) public hass?: HomeAssistant; - @property() protected _config?: PictureCardConfig; + @state() private _config?: PictureCardConfig; public getCardSize(): number { return 5; diff --git a/src/panels/lovelace/cards/hui-stack-card.ts b/src/panels/lovelace/cards/hui-stack-card.ts index 604797c219..49ea00828a 100644 --- a/src/panels/lovelace/cards/hui-stack-card.ts +++ b/src/panels/lovelace/cards/hui-stack-card.ts @@ -30,7 +30,7 @@ export abstract class HuiStackCard @property({ type: Boolean }) public editMode = false; - @property() protected _cards?: LovelaceCard[]; + @state() protected _cards?: LovelaceCard[]; @state() protected _config?: T; diff --git a/src/panels/lovelace/cards/hui-weather-forecast-card.ts b/src/panels/lovelace/cards/hui-weather-forecast-card.ts index 6a8e6e7dd5..fcfc7b6205 100644 --- a/src/panels/lovelace/cards/hui-weather-forecast-card.ts +++ b/src/panels/lovelace/cards/hui-weather-forecast-card.ts @@ -75,8 +75,8 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard { @state() private _subscribed?: Promise<() => void>; - @property({ type: Boolean, reflect: true, attribute: "veryverynarrow" }) - private _veryVeryNarrow = false; + // @todo Consider reworking to eliminate need for attribute since it is manipulated internally + @property({ type: Boolean, reflect: true }) public veryVeryNarrow = false; private _resizeObserver?: ResizeObserver; @@ -227,7 +227,7 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard { ); const forecast = this._config?.show_forecast !== false && forecastData?.forecast?.length - ? forecastData.forecast.slice(0, this._veryVeryNarrow ? 3 : 5) + ? forecastData.forecast.slice(0, this.veryVeryNarrow ? 3 : 5) : undefined; const weather = !forecast || this._config?.show_current !== false; @@ -452,7 +452,7 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard { } else { this.removeAttribute("verynarrow"); } - this._veryVeryNarrow = card.offsetWidth < 245; + this.veryVeryNarrow = card.offsetWidth < 245; } private _showValue(item?: any): boolean { diff --git a/src/panels/lovelace/components/hui-conditional-base.ts b/src/panels/lovelace/components/hui-conditional-base.ts index a66a4a2e3a..df8f268a26 100644 --- a/src/panels/lovelace/components/hui-conditional-base.ts +++ b/src/panels/lovelace/components/hui-conditional-base.ts @@ -1,5 +1,5 @@ import { PropertyValues, ReactiveElement } from "lit"; -import { customElement, property } from "lit/decorators"; +import { customElement, property, state } from "lit/decorators"; import { listenMediaQuery } from "../../../common/dom/media_query"; import { deepEqual } from "../../../common/util/deep-equal"; import { HomeAssistant } from "../../../types"; @@ -33,10 +33,10 @@ export class HuiConditionalBase extends ReactiveElement { @property({ type: Boolean }) public editMode = false; - @property() protected _config?: ConditionalCardConfig | ConditionalRowConfig; - @property({ type: Boolean, reflect: true }) public hidden = false; + @state() protected _config?: ConditionalCardConfig | ConditionalRowConfig; + protected _element?: LovelaceCard | LovelaceRow; private _mediaQueriesListeners: Array<() => void> = []; diff --git a/src/panels/lovelace/components/hui-marquee.ts b/src/panels/lovelace/components/hui-marquee.ts index 67e0fe5e92..9756d6d823 100644 --- a/src/panels/lovelace/components/hui-marquee.ts +++ b/src/panels/lovelace/components/hui-marquee.ts @@ -14,8 +14,8 @@ class HuiMarquee extends LitElement { @property({ type: Boolean }) public active = false; - @property({ reflect: true, type: Boolean, attribute: "animating" }) - private _animating = false; + // @todo Consider reworking to eliminate need for attribute since it is manipulated internally + @property({ reflect: true, type: Boolean }) public animating = false; protected firstUpdated(changedProps) { super.firstUpdated(changedProps); @@ -33,8 +33,8 @@ class HuiMarquee extends LitElement { protected updated(changedProperties: PropertyValues): void { super.updated(changedProperties); - if (changedProperties.has("text") && this._animating) { - this._animating = false; + if (changedProperties.has("text") && this.animating) { + this.animating = false; } if ( @@ -42,7 +42,7 @@ class HuiMarquee extends LitElement { this.active && this.offsetWidth < this.scrollWidth ) { - this._animating = true; + this.animating = true; } } @@ -54,14 +54,14 @@ class HuiMarquee extends LitElement { return html`
${this.text} - ${this._animating ? html` ${this.text} ` : ""} + ${this.animating ? html` ${this.text} ` : ""}
`; } private _onIteration() { if (!this.active) { - this._animating = false; + this.animating = false; } } diff --git a/src/panels/lovelace/editor/view-editor/hui-view-visibility-editor.ts b/src/panels/lovelace/editor/view-editor/hui-view-visibility-editor.ts index c599b15bab..af0920eba8 100644 --- a/src/panels/lovelace/editor/view-editor/hui-view-visibility-editor.ts +++ b/src/panels/lovelace/editor/view-editor/hui-view-visibility-editor.ts @@ -38,7 +38,7 @@ export class HuiViewVisibilityEditor extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; - @property() public _config!: LovelaceViewConfig; + @state() private _config!: LovelaceViewConfig; @state() private _users!: User[]; diff --git a/src/panels/lovelace/entity-rows/hui-humidifier-entity-row.ts b/src/panels/lovelace/entity-rows/hui-humidifier-entity-row.ts index fcdc56bf54..427e2addd1 100644 --- a/src/panels/lovelace/entity-rows/hui-humidifier-entity-row.ts +++ b/src/panels/lovelace/entity-rows/hui-humidifier-entity-row.ts @@ -6,7 +6,7 @@ import { html, nothing, } from "lit"; -import { customElement, property } from "lit/decorators"; +import { customElement, property, state } from "lit/decorators"; import "../../../components/entity/ha-entity-toggle"; import "../../../components/ha-humidifier-state"; import { HumidifierEntity } from "../../../data/humidifier"; @@ -20,7 +20,7 @@ import { EntityConfig, LovelaceRow } from "./types"; class HuiHumidifierEntityRow extends LitElement implements LovelaceRow { @property({ attribute: false }) public hass?: HomeAssistant; - @property() private _config?: EntityConfig; + @state() private _config?: EntityConfig; public setConfig(config: EntityConfig): void { if (!config || !config.entity) { diff --git a/src/panels/lovelace/ha-panel-lovelace.ts b/src/panels/lovelace/ha-panel-lovelace.ts index e0b5455bbc..81e6aa7932 100644 --- a/src/panels/lovelace/ha-panel-lovelace.ts +++ b/src/panels/lovelace/ha-panel-lovelace.ts @@ -60,8 +60,7 @@ export class LovelacePanel extends LitElement { @property({ attribute: false }) public route?: Route; - @property() - private _panelState?: "loading" | "loaded" | "error" | "yaml-editor" = + @state() private _panelState: "loading" | "loaded" | "error" | "yaml-editor" = "loading"; @state() private _errorMsg?: string; @@ -114,7 +113,7 @@ export class LovelacePanel extends LitElement { } protected render(): TemplateResult | void { - const panelState = this._panelState!; + const panelState = this._panelState; if (panelState === "loaded") { return html` diff --git a/src/panels/lovelace/header-footer/hui-graph-header-footer.ts b/src/panels/lovelace/header-footer/hui-graph-header-footer.ts index 27701acfe4..ac466673bc 100644 --- a/src/panels/lovelace/header-footer/hui-graph-header-footer.ts +++ b/src/panels/lovelace/header-footer/hui-graph-header-footer.ts @@ -1,10 +1,10 @@ import { HassEntity } from "home-assistant-js-websocket"; import { - css, CSSResultGroup, - html, LitElement, PropertyValues, + css, + html, nothing, } from "lit"; import { customElement, property, state } from "lit/decorators"; @@ -62,7 +62,7 @@ export class HuiGraphHeaderFooter @property() public type!: "header" | "footer"; - @property() protected _config?: GraphHeaderFooterConfig; + @state() protected _config?: GraphHeaderFooterConfig; @state() private _coordinates?: number[][]; diff --git a/src/panels/lovelace/header-footer/hui-picture-header-footer.ts b/src/panels/lovelace/header-footer/hui-picture-header-footer.ts index 2e84a7ba03..f43c560921 100644 --- a/src/panels/lovelace/header-footer/hui-picture-header-footer.ts +++ b/src/panels/lovelace/header-footer/hui-picture-header-footer.ts @@ -6,7 +6,7 @@ import { html, nothing, } from "lit"; -import { customElement, property } from "lit/decorators"; +import { customElement, property, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; import { ifDefined } from "lit/directives/if-defined"; import "../../../components/ha-card"; @@ -36,7 +36,7 @@ export class HuiPictureHeaderFooter @property() public type!: "header" | "footer"; - @property() protected _config?: PictureHeaderFooterConfig; + @state() protected _config?: PictureHeaderFooterConfig; public getCardSize(): number { return 3; diff --git a/src/panels/media-browser/hui-dialog-web-browser-play-media.ts b/src/panels/media-browser/hui-dialog-web-browser-play-media.ts index ac10b2f91f..1a7bf5e2fe 100644 --- a/src/panels/media-browser/hui-dialog-web-browser-play-media.ts +++ b/src/panels/media-browser/hui-dialog-web-browser-play-media.ts @@ -1,5 +1,5 @@ import { css, CSSResultGroup, html, LitElement, nothing } from "lit"; -import { customElement, property } from "lit/decorators"; +import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../common/dom/fire_event"; import { createCloseHeading } from "../../components/ha-dialog"; import "../../components/ha-hls-player"; @@ -11,8 +11,7 @@ import { WebBrowserPlayMediaDialogParams } from "./show-media-player-dialog"; export class HuiDialogWebBrowserPlayMedia extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; - @property({ attribute: false }) - private _params?: WebBrowserPlayMediaDialogParams; + @state() private _params?: WebBrowserPlayMediaDialogParams; public showDialog(params: WebBrowserPlayMediaDialogParams): void { this._params = params; diff --git a/tsconfig.json b/tsconfig.json index 0971df352a..53cdd2dd93 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -41,7 +41,7 @@ "no-incompatible-type-binding": "warning", // LitElement "no-incompatible-property-type": "warning", - "no-property-visibility-mismatch": "warning", + "no-property-visibility-mismatch": "error", // CSS "no-invalid-css": "off" // warning does not work },