jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-25 18:26:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix property visibility mismatches (2 of 2) (#19448)

Browse Source
This commit is contained in:
Steve Repsher 2024-01-19 03:39:41 -05:00 committed by GitHub
parent fcc9a80103
commit 24bfa4919a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
27 changed files with 113 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
gallery/src/components/demo-more-infos.ts
View File

@ -1,11 +1,11 @@
import { LitElement, css, html } from "lit"; 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 { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
import "../../../src/components/ha-formfield"; import "../../../src/components/ha-formfield";
import "../../../src/components/ha-switch"; import "../../../src/components/ha-switch";
import "./demo-more-info";
import "../ha-demo-options";
import { HomeAssistant } from "../../../src/types"; import { HomeAssistant } from "../../../src/types";
import "../ha-demo-options";
import "./demo-more-info";
@customElement("demo-more-infos") @customElement("demo-more-infos")
class DemoMoreInfos extends LitElement { class DemoMoreInfos extends LitElement {
@ -13,7 +13,7 @@ class DemoMoreInfos extends LitElement {
@property() public entities!: []; @property() public entities!: [];
@property({ attribute: false }) _showConfig: boolean = false; @state() private _showConfig = false;
render() { render() {
return html` return html`

3
hassio/src/dialogs/backup/dialog-hassio-backup-location.ts
View File

@ -27,8 +27,7 @@ const SCHEMA = memoizeOne(
class HassioBackupLocationDialog extends LitElement { class HassioBackupLocationDialog extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant; @property({ attribute: false }) public hass!: HomeAssistant;
@property({ attribute: false }) @state() private _dialogParams?: HassioBackupLocationDialogParams;
public _dialogParams?: HassioBackupLocationDialogParams;
@state() private _data?: { default_backup_mount: string | null }; @state() private _data?: { default_backup_mount: string | null };

18
src/components/entity/ha-entity-attribute-picker.ts
View File

@ -1,8 +1,8 @@
import { HassEntity } from "home-assistant-js-websocket"; import { HassEntity } from "home-assistant-js-websocket";
import { html, LitElement, PropertyValues, nothing } from "lit"; import { LitElement, PropertyValues, html, nothing } from "lit";
import { customElement, property, query } from "lit/decorators"; import { customElement, property, query, state } from "lit/decorators";
import { computeAttributeNameDisplay } from "../../common/entity/compute_attribute_display"; import { computeAttributeNameDisplay } from "../../common/entity/compute_attribute_display";
import { ValueChangedEvent, HomeAssistant } from "../../types"; import { HomeAssistant, ValueChangedEvent } from "../../types";
import "../ha-combo-box"; import "../ha-combo-box";
import type { HaComboBox } from "../ha-combo-box"; import type { HaComboBox } from "../ha-combo-box";
@ -37,7 +37,7 @@ class HaEntityAttributePicker extends LitElement {
@property() public helper?: string; @property() public helper?: string;
@property({ type: Boolean }) private _opened = false; @state() private _opened = false;
@query("ha-combo-box", true) private _comboBox!: HaComboBox; @query("ha-combo-box", true) private _comboBox!: HaComboBox;
@ -47,15 +47,17 @@ class HaEntityAttributePicker extends LitElement {
protected updated(changedProps: PropertyValues) { protected updated(changedProps: PropertyValues) {
if (changedProps.has("_opened") && this._opened) { if (changedProps.has("_opened") && this._opened) {
const state = this.entityId ? this.hass.states[this.entityId] : undefined; const entityState = this.entityId
(this._comboBox as any).items = state ? this.hass.states[this.entityId]
? Object.keys(state.attributes) : undefined;
(this._comboBox as any).items = entityState
? Object.keys(entityState.attributes)
.filter((key) => !this.hideAttributes?.includes(key)) .filter((key) => !this.hideAttributes?.includes(key))
.map((key) => ({ .map((key) => ({
value: key, value: key,
label: computeAttributeNameDisplay( label: computeAttributeNameDisplay(
this.hass.localize, this.hass.localize,
state, entityState,
this.hass.entities, this.hass.entities,
key key
), ),

18
src/components/entity/ha-entity-state-picker.ts
View File

@ -1,6 +1,6 @@
import { HassEntity } from "home-assistant-js-websocket"; import { HassEntity } from "home-assistant-js-websocket";
import { LitElement, PropertyValues, html, nothing } from "lit"; 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 { fireEvent } from "../../common/dom/fire_event";
import { getStates } from "../../common/entity/get_states"; import { getStates } from "../../common/entity/get_states";
import { HomeAssistant, ValueChangedEvent } from "../../types"; import { HomeAssistant, ValueChangedEvent } from "../../types";
@ -17,7 +17,7 @@ class HaEntityStatePicker extends LitElement {
@property() public attribute?: string; @property() public attribute?: string;
@property() public extraOptions?: any[]; @property({ attribute: false }) public extraOptions?: any[];
@property({ type: Boolean }) public autofocus = false; @property({ type: Boolean }) public autofocus = false;
@ -34,7 +34,7 @@ class HaEntityStatePicker extends LitElement {
@property() public helper?: string; @property() public helper?: string;
@property({ type: Boolean }) private _opened = false; @state() private _opened = false;
@query("ha-combo-box", true) private _comboBox!: HaComboBox; @query("ha-combo-box", true) private _comboBox!: HaComboBox;
@ -49,16 +49,18 @@ class HaEntityStatePicker extends LitElement {
changedProps.has("attribute") || changedProps.has("attribute") ||
changedProps.has("extraOptions") 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._comboBox as any).items = [
...(this.extraOptions ?? []), ...(this.extraOptions ?? []),
...(this.entityId && state ...(this.entityId && stateObj
? getStates(state, this.attribute).map((key) => ({ ? getStates(stateObj, this.attribute).map((key) => ({
value: key, value: key,
label: !this.attribute label: !this.attribute
? this.hass.formatEntityState(state, key) ? this.hass.formatEntityState(stateObj, key)
: this.hass.formatEntityAttributeValue( : this.hass.formatEntityAttributeValue(
state, stateObj,
this.attribute, this.attribute,
key key
), ),

14
src/components/entity/state-badge.ts
View File

@ -36,8 +36,8 @@ export class StateBadge extends LitElement {
@property() public color?: string; @property() public color?: string;
@property({ type: Boolean, reflect: true, attribute: "icon" }) // @todo Consider reworking to eliminate need for attribute since it is manipulated internally
private _showIcon = true; @property({ type: Boolean, reflect: true }) public icon = true;
@state() private _iconStyle: { [name: string]: string | undefined } = {}; @state() private _iconStyle: { [name: string]: string | undefined } = {};
@ -83,7 +83,7 @@ export class StateBadge extends LitElement {
</div>`; </div>`;
} }
if (!this._showIcon) { if (!this.icon) {
return nothing; return nothing;
} }
@ -98,7 +98,7 @@ export class StateBadge extends LitElement {
></ha-state-icon>`; ></ha-state-icon>`;
} }
public willUpdate(changedProps: PropertyValues) { public willUpdate(changedProps: PropertyValues<this>) {
super.willUpdate(changedProps); super.willUpdate(changedProps);
if ( if (
!changedProps.has("stateObj") && !changedProps.has("stateObj") &&
@ -114,7 +114,7 @@ export class StateBadge extends LitElement {
const iconStyle: { [name: string]: string } = {}; const iconStyle: { [name: string]: string } = {};
let backgroundImage = ""; let backgroundImage = "";
this._showIcon = true; this.icon = true;
if (stateObj && this.overrideImage === undefined) { if (stateObj && this.overrideImage === undefined) {
// hide icon if we have entity picture // hide icon if we have entity picture
@ -134,7 +134,7 @@ export class StateBadge extends LitElement {
imageUrl = cameraUrlWithWidthHeight(imageUrl, 80, 80); imageUrl = cameraUrlWithWidthHeight(imageUrl, 80, 80);
} }
backgroundImage = `url(${imageUrl})`; backgroundImage = `url(${imageUrl})`;
this._showIcon = false; this.icon = false;
if (domain === "update") { if (domain === "update") {
this.style.borderRadius = "0"; this.style.borderRadius = "0";
} else if (domain === "media_player") { } else if (domain === "media_player") {
@ -180,7 +180,7 @@ export class StateBadge extends LitElement {
imageUrl = this.hass.hassUrl(imageUrl); imageUrl = this.hass.hassUrl(imageUrl);
} }
backgroundImage = `url(${imageUrl})`; backgroundImage = `url(${imageUrl})`;
this._showIcon = false; this.icon = false;
} }
this._iconStyle = iconStyle; this._iconStyle = iconStyle;

6
src/components/ha-date-range-picker.ts
View File

@ -61,11 +61,11 @@ export class HaDateRangePicker extends LitElement {
@property({ type: Boolean }) public disabled = false; @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; @property({ type: Boolean }) public extendedPresets = false;

55
src/components/media-player/ha-media-player-browse.ts
View File

@ -92,14 +92,13 @@ export class HaMediaPlayerBrowse extends LitElement {
@property({ type: Boolean }) public dialog = false; @property({ type: Boolean }) public dialog = false;
@property() public navigateIds!: MediaPlayerItemId[]; @property({ attribute: false }) public navigateIds: MediaPlayerItemId[] = [];
@property({ type: Boolean, attribute: "narrow", reflect: true }) // @todo Consider reworking to eliminate need for attribute since it is manipulated internally
// @ts-ignore @property({ type: Boolean, reflect: true }) public narrow = false;
private _narrow = false;
@property({ type: Boolean, attribute: "scroll", reflect: true }) // @todo Consider reworking to eliminate need for attribute since it is manipulated internally
private _scrolled = false; @property({ type: Boolean, reflect: true }) public scrolled = false;
@state() private _error?: { message: string; code: string }; @state() private _error?: { message: string; code: string };
@ -178,7 +177,7 @@ export class HaMediaPlayerBrowse extends LitElement {
// We're navigating. Reset the shizzle. // We're navigating. Reset the shizzle.
this._content?.scrollTo(0, 0); this._content?.scrollTo(0, 0);
this._scrolled = false; this.scrolled = false;
const oldCurrentItem = this._currentItem; const oldCurrentItem = this._currentItem;
const oldParentItem = this._parentItem; const oldParentItem = this._parentItem;
this._currentItem = undefined; this._currentItem = undefined;
@ -373,7 +372,7 @@ export class HaMediaPlayerBrowse extends LitElement {
"" ""
)}" )}"
> >
${this._narrow && currentItem?.can_play ${this.narrow && currentItem?.can_play
? html` ? html`
<ha-fab <ha-fab
mini mini
@ -406,7 +405,7 @@ export class HaMediaPlayerBrowse extends LitElement {
: ""} : ""}
</div> </div>
${currentItem.can_play && ${currentItem.can_play &&
(!currentItem.thumbnail || !this._narrow) (!currentItem.thumbnail || !this.narrow)
? html` ? html`
<mwc-button <mwc-button
raised raised
@ -769,7 +768,7 @@ export class HaMediaPlayerBrowse extends LitElement {
} }
private _measureCard(): void { private _measureCard(): void {
this._narrow = (this.dialog ? window.innerWidth : this.offsetWidth) < 450; this.narrow = (this.dialog ? window.innerWidth : this.offsetWidth) < 450;
} }
private async _attachResizeObserver(): Promise<void> { private async _attachResizeObserver(): Promise<void> {
@ -868,10 +867,10 @@ export class HaMediaPlayerBrowse extends LitElement {
@eventOptions({ passive: true }) @eventOptions({ passive: true })
private _scroll(ev: Event): void { private _scroll(ev: Event): void {
const content = ev.currentTarget as HTMLDivElement; const content = ev.currentTarget as HTMLDivElement;
if (!this._scrolled && content.scrollTop > this._headerOffsetHeight) { if (!this.scrolled && content.scrollTop > this._headerOffsetHeight) {
this._scrolled = true; this.scrolled = true;
} else if (this._scrolled && content.scrollTop < this._headerOffsetHeight) { } else if (this.scrolled && content.scrollTop < this._headerOffsetHeight) {
this._scrolled = false; this.scrolled = false;
} }
} }
@ -1266,58 +1265,58 @@ export class HaMediaPlayerBrowse extends LitElement {
} }
/* ============= Scroll ============= */ /* ============= Scroll ============= */
:host([scroll]) .breadcrumb .subtitle { :host([scrolled]) .breadcrumb .subtitle {
height: 0; height: 0;
margin: 0; margin: 0;
} }
:host([scroll]) .breadcrumb .title { :host([scrolled]) .breadcrumb .title {
-webkit-line-clamp: 1; -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; align-self: center;
} }
:host([scroll]) .header-info mwc-button, :host([scrolled]) .header-info mwc-button,
.no-img .header-info mwc-button { .no-img .header-info mwc-button {
padding-right: 4px; padding-right: 4px;
} }
:host([scroll][narrow]) .no-img .header-info mwc-button { :host([scrolled][narrow]) .no-img .header-info mwc-button {
padding-right: 16px; padding-right: 16px;
} }
:host([scroll]) .header-info { :host([scrolled]) .header-info {
flex-direction: row; flex-direction: row;
} }
:host([scroll]) .header-info mwc-button { :host([scrolled]) .header-info mwc-button {
align-self: center; align-self: center;
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
padding-bottom: 0; padding-bottom: 0;
} }
:host([scroll][narrow]) .no-img .header-info { :host([scrolled][narrow]) .no-img .header-info {
flex-direction: row-reverse; flex-direction: row-reverse;
} }
:host([scroll][narrow]) .header-info { :host([scrolled][narrow]) .header-info {
padding: 20px 24px 10px 24px; padding: 20px 24px 10px 24px;
align-items: center; align-items: center;
} }
:host([scroll]) .header-content { :host([scrolled]) .header-content {
align-items: flex-end; align-items: flex-end;
flex-direction: row; flex-direction: row;
} }
:host([scroll]) .header-content .img { :host([scrolled]) .header-content .img {
height: 75px; height: 75px;
width: 75px; width: 75px;
} }
:host([scroll]) .breadcrumb { :host([scrolled]) .breadcrumb {
padding-top: 0; padding-top: 0;
align-self: center; align-self: center;
} }
:host([scroll][narrow]) .header-content .img { :host([scrolled][narrow]) .header-content .img {
height: 100px; height: 100px;
width: 100px; width: 100px;
padding-bottom: initial; padding-bottom: initial;
margin-bottom: 0; margin-bottom: 0;
} }
:host([scroll]) ha-fab { :host([scrolled]) ha-fab {
bottom: 0px; bottom: 0px;
right: -24px; right: -24px;
--mdc-fab-box-shadow: none; --mdc-fab-box-shadow: none;

2
src/panels/config/automation/ha-automation-picker.ts
View File

@ -81,7 +81,7 @@ class HaAutomationPicker extends LitElement {
@property() public automations!: AutomationEntity[]; @property() public automations!: AutomationEntity[];
@property() private _activeFilters?: string[]; @state() private _activeFilters?: string[];
@state() private _searchParms = new URLSearchParams(window.location.search); @state() private _searchParms = new URLSearchParams(window.location.search);

5
src/panels/config/cloud/dialog-cloud-certificate/dialog-cloud-certificate.ts
View File

@ -1,6 +1,6 @@
import "@material/mwc-button"; import "@material/mwc-button";
import { css, CSSResultGroup, html, LitElement, nothing } from "lit"; 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 { formatDateTime } from "../../../../common/datetime/format_date_time";
import { fireEvent } from "../../../../common/dom/fire_event"; import { fireEvent } from "../../../../common/dom/fire_event";
import { createCloseHeading } from "../../../../components/ha-dialog"; import { createCloseHeading } from "../../../../components/ha-dialog";
@ -12,8 +12,7 @@ import type { CloudCertificateParams as CloudCertificateDialogParams } from "./s
class DialogCloudCertificate extends LitElement { class DialogCloudCertificate extends LitElement {
public hass!: HomeAssistant; public hass!: HomeAssistant;
@property() @state() private _params?: CloudCertificateDialogParams;
private _params?: CloudCertificateDialogParams;
public showDialog(params: CloudCertificateDialogParams) { public showDialog(params: CloudCertificateDialogParams) {
this._params = params; this._params = params;

13
src/panels/config/entities/ha-config-entities.ts
View File

@ -13,7 +13,14 @@ import {
mdiUndo, mdiUndo,
} from "@mdi/js"; } from "@mdi/js";
import { HassEntity } from "home-assistant-js-websocket"; 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 { customElement, property, query, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map"; import { classMap } from "lit/directives/class-map";
import { ifDefined } from "lit/directives/if-defined"; import { ifDefined } from "lit/directives/if-defined";
@ -91,7 +98,7 @@ export class HaConfigEntities extends LitElement {
@state() private _stateEntities: StateEntity[] = []; @state() private _stateEntities: StateEntity[] = [];
@property() public _entries?: ConfigEntry[]; @state() private _entries?: ConfigEntry[];
@state() @state()
@consume({ context: fullEntitiesContext, subscribe: true }) @consume({ context: fullEntitiesContext, subscribe: true })
@ -681,7 +688,7 @@ export class HaConfigEntities extends LitElement {
`; `;
} }
public willUpdate(changedProps): void { public willUpdate(changedProps: PropertyValues<this>): void {
super.willUpdate(changedProps); super.willUpdate(changedProps);
const oldHass = changedProps.get("hass"); const oldHass = changedProps.get("hass");
let changed = false; let changed = false;

3
src/panels/config/integrations/ha-config-integrations.ts
View File

@ -72,8 +72,7 @@ class HaConfigIntegrations extends SubscribeMixin(HassRouterPage) {
@state() private _configEntries?: ConfigEntryExtended[]; @state() private _configEntries?: ConfigEntryExtended[];
@property() @state() private _configEntriesInProgress?: DataEntryFlowProgressExtended[];
private _configEntriesInProgress?: DataEntryFlowProgressExtended[];
private _loadTranslationsPromise?: Promise<LocalizeFunc>; private _loadTranslationsPromise?: Promise<LocalizeFunc>;

4
src/panels/config/integrations/integration-panels/zha/zha-groups-dashboard.ts
View File

@ -8,7 +8,7 @@ import {
PropertyValues, PropertyValues,
TemplateResult, TemplateResult,
} from "lit"; } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import memoizeOne from "memoize-one"; import memoizeOne from "memoize-one";
import { HASSDomEvent } from "../../../../../common/dom/fire_event"; import { HASSDomEvent } from "../../../../../common/dom/fire_event";
import { navigate } from "../../../../../common/navigate"; import { navigate } from "../../../../../common/navigate";
@ -40,7 +40,7 @@ export class ZHAGroupsDashboard extends LitElement {
@property({ type: Boolean }) public isWide = false; @property({ type: Boolean }) public isWide = false;
@property() public _groups: ZHAGroup[] = []; @state() private _groups: ZHAGroup[] = [];
private _firstUpdatedCalled = false; private _firstUpdatedCalled = false;

2
src/panels/config/scene/ha-scene-dashboard.ts
View File

@ -72,7 +72,7 @@ class HaSceneDashboard extends LitElement {
@property() public scenes!: SceneEntity[]; @property() public scenes!: SceneEntity[];
@property() private _activeFilters?: string[]; @state() private _activeFilters?: string[];
@state() private _filteredScenes?: string[] | null; @state() private _filteredScenes?: string[] | null;

6
src/panels/lovelace/badges/hui-state-label-badge.ts
View File

@ -1,20 +1,20 @@
import { css, CSSResultGroup, html, LitElement, nothing } from "lit"; 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 { ifDefined } from "lit/directives/if-defined";
import "../../../components/entity/ha-state-label-badge"; import "../../../components/entity/ha-state-label-badge";
import { ActionHandlerEvent } from "../../../data/lovelace/action_handler";
import { HomeAssistant } from "../../../types"; import { HomeAssistant } from "../../../types";
import { actionHandler } from "../common/directives/action-handler-directive"; import { actionHandler } from "../common/directives/action-handler-directive";
import { handleAction } from "../common/handle-action"; import { handleAction } from "../common/handle-action";
import { hasAction } from "../common/has-action"; import { hasAction } from "../common/has-action";
import { LovelaceBadge } from "../types"; import { LovelaceBadge } from "../types";
import { StateLabelBadgeConfig } from "./types"; import { StateLabelBadgeConfig } from "./types";
import { ActionHandlerEvent } from "../../../data/lovelace/action_handler";
@customElement("hui-state-label-badge") @customElement("hui-state-label-badge")
export class HuiStateLabelBadge extends LitElement implements LovelaceBadge { export class HuiStateLabelBadge extends LitElement implements LovelaceBadge {
@property({ attribute: false }) public hass?: HomeAssistant; @property({ attribute: false }) public hass?: HomeAssistant;
@property() protected _config?: StateLabelBadgeConfig; @state() protected _config?: StateLabelBadgeConfig;
public setConfig(config: StateLabelBadgeConfig): void { public setConfig(config: StateLabelBadgeConfig): void {
this._config = config; this._config = config;

2
src/panels/lovelace/cards/hui-calendar-card.ts
View File

@ -59,7 +59,7 @@ export class HuiCalendarCard extends LitElement implements LovelaceCard {
@property({ attribute: false }) public hass?: HomeAssistant; @property({ attribute: false }) public hass?: HomeAssistant;
@property({ attribute: false }) public _events: CalendarEvent[] = []; @state() private _events: CalendarEvent[] = [];
@state() private _config?: CalendarCardConfig; @state() private _config?: CalendarCardConfig;

4
src/panels/lovelace/cards/hui-picture-card.ts
View File

@ -6,7 +6,7 @@ import {
nothing, nothing,
PropertyValues, PropertyValues,
} from "lit"; } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map"; import { classMap } from "lit/directives/class-map";
import { ifDefined } from "lit/directives/if-defined"; import { ifDefined } from "lit/directives/if-defined";
import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element"; 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({ attribute: false }) public hass?: HomeAssistant;
@property() protected _config?: PictureCardConfig; @state() private _config?: PictureCardConfig;
public getCardSize(): number { public getCardSize(): number {
return 5; return 5;

2
src/panels/lovelace/cards/hui-stack-card.ts
View File

@ -30,7 +30,7 @@ export abstract class HuiStackCard<T extends StackCardConfig = StackCardConfig>
@property({ type: Boolean }) public editMode = false; @property({ type: Boolean }) public editMode = false;
@property() protected _cards?: LovelaceCard[]; @state() protected _cards?: LovelaceCard[];
@state() protected _config?: T; @state() protected _config?: T;

8
src/panels/lovelace/cards/hui-weather-forecast-card.ts
View File

@ -75,8 +75,8 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
@state() private _subscribed?: Promise<() => void>; @state() private _subscribed?: Promise<() => void>;
@property({ type: Boolean, reflect: true, attribute: "veryverynarrow" }) // @todo Consider reworking to eliminate need for attribute since it is manipulated internally
private _veryVeryNarrow = false; @property({ type: Boolean, reflect: true }) public veryVeryNarrow = false;
private _resizeObserver?: ResizeObserver; private _resizeObserver?: ResizeObserver;
@ -227,7 +227,7 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
); );
const forecast = const forecast =
this._config?.show_forecast !== false && forecastData?.forecast?.length 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; : undefined;
const weather = !forecast || this._config?.show_current !== false; const weather = !forecast || this._config?.show_current !== false;
@ -452,7 +452,7 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
} else { } else {
this.removeAttribute("verynarrow"); this.removeAttribute("verynarrow");
} }
this._veryVeryNarrow = card.offsetWidth < 245; this.veryVeryNarrow = card.offsetWidth < 245;
} }
private _showValue(item?: any): boolean { private _showValue(item?: any): boolean {

6
src/panels/lovelace/components/hui-conditional-base.ts
View File

@ -1,5 +1,5 @@
import { PropertyValues, ReactiveElement } from "lit"; 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 { listenMediaQuery } from "../../../common/dom/media_query";
import { deepEqual } from "../../../common/util/deep-equal"; import { deepEqual } from "../../../common/util/deep-equal";
import { HomeAssistant } from "../../../types"; import { HomeAssistant } from "../../../types";
@ -33,10 +33,10 @@ export class HuiConditionalBase extends ReactiveElement {
@property({ type: Boolean }) public editMode = false; @property({ type: Boolean }) public editMode = false;
@property() protected _config?: ConditionalCardConfig | ConditionalRowConfig;
@property({ type: Boolean, reflect: true }) public hidden = false; @property({ type: Boolean, reflect: true }) public hidden = false;
@state() protected _config?: ConditionalCardConfig | ConditionalRowConfig;
protected _element?: LovelaceCard | LovelaceRow; protected _element?: LovelaceCard | LovelaceRow;
private _mediaQueriesListeners: Array<() => void> = []; private _mediaQueriesListeners: Array<() => void> = [];

14
src/panels/lovelace/components/hui-marquee.ts
View File

@ -14,8 +14,8 @@ class HuiMarquee extends LitElement {
@property({ type: Boolean }) public active = false; @property({ type: Boolean }) public active = false;
@property({ reflect: true, type: Boolean, attribute: "animating" }) // @todo Consider reworking to eliminate need for attribute since it is manipulated internally
private _animating = false; @property({ reflect: true, type: Boolean }) public animating = false;
protected firstUpdated(changedProps) { protected firstUpdated(changedProps) {
super.firstUpdated(changedProps); super.firstUpdated(changedProps);
@ -33,8 +33,8 @@ class HuiMarquee extends LitElement {
protected updated(changedProperties: PropertyValues): void { protected updated(changedProperties: PropertyValues): void {
super.updated(changedProperties); super.updated(changedProperties);
if (changedProperties.has("text") && this._animating) { if (changedProperties.has("text") && this.animating) {
this._animating = false; this.animating = false;
} }
if ( if (
@ -42,7 +42,7 @@ class HuiMarquee extends LitElement {
this.active && this.active &&
this.offsetWidth < this.scrollWidth this.offsetWidth < this.scrollWidth
) { ) {
this._animating = true; this.animating = true;
} }
} }
@ -54,14 +54,14 @@ class HuiMarquee extends LitElement {
return html` return html`
<div class="marquee-inner" @animationiteration=${this._onIteration}> <div class="marquee-inner" @animationiteration=${this._onIteration}>
<span>${this.text}</span> <span>${this.text}</span>
${this._animating ? html` <span>${this.text}</span> ` : ""} ${this.animating ? html` <span>${this.text}</span> ` : ""}
</div> </div>
`; `;
} }
private _onIteration() { private _onIteration() {
if (!this.active) { if (!this.active) {
this._animating = false; this.animating = false;
} }
} }

2
src/panels/lovelace/editor/view-editor/hui-view-visibility-editor.ts
View File

@ -38,7 +38,7 @@ export class HuiViewVisibilityEditor extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant; @property({ attribute: false }) public hass!: HomeAssistant;
@property() public _config!: LovelaceViewConfig; @state() private _config!: LovelaceViewConfig;
@state() private _users!: User[]; @state() private _users!: User[];

4
src/panels/lovelace/entity-rows/hui-humidifier-entity-row.ts
View File

@ -6,7 +6,7 @@ import {
html, html,
nothing, nothing,
} from "lit"; } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import "../../../components/entity/ha-entity-toggle"; import "../../../components/entity/ha-entity-toggle";
import "../../../components/ha-humidifier-state"; import "../../../components/ha-humidifier-state";
import { HumidifierEntity } from "../../../data/humidifier"; import { HumidifierEntity } from "../../../data/humidifier";
@ -20,7 +20,7 @@ import { EntityConfig, LovelaceRow } from "./types";
class HuiHumidifierEntityRow extends LitElement implements LovelaceRow { class HuiHumidifierEntityRow extends LitElement implements LovelaceRow {
@property({ attribute: false }) public hass?: HomeAssistant; @property({ attribute: false }) public hass?: HomeAssistant;
@property() private _config?: EntityConfig; @state() private _config?: EntityConfig;
public setConfig(config: EntityConfig): void { public setConfig(config: EntityConfig): void {
if (!config || !config.entity) { if (!config || !config.entity) {

5
src/panels/lovelace/ha-panel-lovelace.ts
View File

@ -60,8 +60,7 @@ export class LovelacePanel extends LitElement {
@property({ attribute: false }) public route?: Route; @property({ attribute: false }) public route?: Route;
@property() @state() private _panelState: "loading" | "loaded" | "error" | "yaml-editor" =
private _panelState?: "loading" | "loaded" | "error" | "yaml-editor" =
"loading"; "loading";
@state() private _errorMsg?: string; @state() private _errorMsg?: string;
@ -114,7 +113,7 @@ export class LovelacePanel extends LitElement {
} }
protected render(): TemplateResult | void { protected render(): TemplateResult | void {
const panelState = this._panelState!; const panelState = this._panelState;
if (panelState === "loaded") { if (panelState === "loaded") {
return html` return html`

6
src/panels/lovelace/header-footer/hui-graph-header-footer.ts
View File

@ -1,10 +1,10 @@
import { HassEntity } from "home-assistant-js-websocket"; import { HassEntity } from "home-assistant-js-websocket";
import { import {
css,
CSSResultGroup, CSSResultGroup,
html,
LitElement, LitElement,
PropertyValues, PropertyValues,
css,
html,
nothing, nothing,
} from "lit"; } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
@ -62,7 +62,7 @@ export class HuiGraphHeaderFooter
@property() public type!: "header" | "footer"; @property() public type!: "header" | "footer";
@property() protected _config?: GraphHeaderFooterConfig; @state() protected _config?: GraphHeaderFooterConfig;
@state() private _coordinates?: number[][]; @state() private _coordinates?: number[][];

4
src/panels/lovelace/header-footer/hui-picture-header-footer.ts
View File

@ -6,7 +6,7 @@ import {
html, html,
nothing, nothing,
} from "lit"; } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map"; import { classMap } from "lit/directives/class-map";
import { ifDefined } from "lit/directives/if-defined"; import { ifDefined } from "lit/directives/if-defined";
import "../../../components/ha-card"; import "../../../components/ha-card";
@ -36,7 +36,7 @@ export class HuiPictureHeaderFooter
@property() public type!: "header" | "footer"; @property() public type!: "header" | "footer";
@property() protected _config?: PictureHeaderFooterConfig; @state() protected _config?: PictureHeaderFooterConfig;
public getCardSize(): number { public getCardSize(): number {
return 3; return 3;

5
src/panels/media-browser/hui-dialog-web-browser-play-media.ts
View File

@ -1,5 +1,5 @@
import { css, CSSResultGroup, html, LitElement, nothing } from "lit"; 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 { fireEvent } from "../../common/dom/fire_event";
import { createCloseHeading } from "../../components/ha-dialog"; import { createCloseHeading } from "../../components/ha-dialog";
import "../../components/ha-hls-player"; import "../../components/ha-hls-player";
@ -11,8 +11,7 @@ import { WebBrowserPlayMediaDialogParams } from "./show-media-player-dialog";
export class HuiDialogWebBrowserPlayMedia extends LitElement { export class HuiDialogWebBrowserPlayMedia extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant; @property({ attribute: false }) public hass!: HomeAssistant;
@property({ attribute: false }) @state() private _params?: WebBrowserPlayMediaDialogParams;
private _params?: WebBrowserPlayMediaDialogParams;
public showDialog(params: WebBrowserPlayMediaDialogParams): void { public showDialog(params: WebBrowserPlayMediaDialogParams): void {
this._params = params; this._params = params;

2
tsconfig.json
View File

@ -41,7 +41,7 @@
"no-incompatible-type-binding": "warning", "no-incompatible-type-binding": "warning",
// LitElement // LitElement
"no-incompatible-property-type": "warning", "no-incompatible-property-type": "warning",
"no-property-visibility-mismatch": "warning", "no-property-visibility-mismatch": "error",
// CSS // CSS
"no-invalid-css": "off" // warning does not work "no-invalid-css": "off" // warning does not work
}, },