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

Fix ALL the eslint warnings (#23165)

Browse Source 
* Fix many lint warnings

* Fix ALL lint warnings

* small fix

* type fixes
This commit is contained in:
Petar Petrov 2024-12-06 10:55:07 +02:00 committed by GitHub
parent f724d8e7a9
commit 7a12fd2853
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
308 changed files with 918 additions and 823 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
cast/src/receiver/layout/hc-lovelace.ts
View File

@ -25,9 +25,9 @@ class HcLovelace extends LitElement {
@property({ attribute: false }) @property({ attribute: false })
public lovelaceConfig!: LovelaceConfig; public lovelaceConfig!: LovelaceConfig;
@property() public viewPath?: string | number | null; @property({ attribute: false }) public viewPath?: string | number | null;
@property() public urlPath: string | null = null; @property({ attribute: false }) public urlPath: string | null = null;
protected render(): TemplateResult { protected render(): TemplateResult {
const index = this._viewIndex; const index = this._viewIndex;

10
cast/src/receiver/layout/hc-main.ts
View File

@ -144,10 +144,10 @@ export class HcMain extends HassElement {
} }
if (senderId) { if (senderId) {
this.sendMessage(senderId, status); this._sendMessage(senderId, status);
} else { } else {
for (const sender of castContext.getSenders()) { for (const sender of castContext.getSenders()) {
this.sendMessage(sender.id, status); this._sendMessage(sender.id, status);
} }
} }
} }
@ -164,10 +164,10 @@ export class HcMain extends HassElement {
}; };
if (senderId) { if (senderId) {
this.sendMessage(senderId, error); this._sendMessage(senderId, error);
} else { } else {
for (const sender of castContext.getSenders()) { for (const sender of castContext.getSenders()) {
this.sendMessage(sender.id, error); this._sendMessage(sender.id, error);
} }
} }
} }
@ -394,7 +394,7 @@ export class HcMain extends HassElement {
} }
} }
private sendMessage(senderId: string, response: any) { private _sendMessage(senderId: string, response: any) {
castContext.sendCustomMessage(CAST_NS, senderId, response); castContext.sendCustomMessage(CAST_NS, senderId, response);
} }
} }

15
eslint.config.mjs
View File

@ -7,10 +7,10 @@ import { fileURLToPath } from "node:url";
import js from "@eslint/js"; import js from "@eslint/js";
import { FlatCompat } from "@eslint/eslintrc"; import { FlatCompat } from "@eslint/eslintrc";
const __filename = fileURLToPath(import.meta.url); const _filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename); const _dirname = path.dirname(_filename);
const compat = new FlatCompat({ const compat = new FlatCompat({
baseDirectory: __dirname, baseDirectory: _dirname,
recommendedConfig: js.configs.recommended, recommendedConfig: js.configs.recommended,
allConfig: js.configs.all, allConfig: js.configs.all,
}); });
@ -115,12 +115,21 @@ export default [
"@typescript-eslint/naming-convention": [ "@typescript-eslint/naming-convention": [
"warn", "warn",
{
selector: ["objectLiteralProperty", "objectLiteralMethod"],
format: null,
},
{ {
selector: ["variable"], selector: ["variable"],
format: ["camelCase", "snake_case", "UPPER_CASE"], format: ["camelCase", "snake_case", "UPPER_CASE"],
leadingUnderscore: "allow", leadingUnderscore: "allow",
trailingUnderscore: "allow", trailingUnderscore: "allow",
}, },
{
selector: ["variable"],
modifiers: ["exported"],
format: ["camelCase", "PascalCase", "UPPER_CASE"],
},
{ {
selector: "typeLike", selector: "typeLike",
format: ["PascalCase"], format: ["PascalCase"],

1
gallery/src/components/demo-black-white-row.ts
View File

@ -9,6 +9,7 @@ import "../../../src/components/ha-card";
@customElement("demo-black-white-row") @customElement("demo-black-white-row")
class DemoBlackWhiteRow extends LitElement { class DemoBlackWhiteRow extends LitElement {
// eslint-disable-next-line lit/no-native-attributes
@property() title!: string; @property() title!: string;
@property() value?: any; @property() value?: any;

2
gallery/src/components/demo-card.ts
View File

@ -18,7 +18,7 @@ class DemoCard extends LitElement {
@property({ attribute: false }) public config!: DemoCardConfig; @property({ attribute: false }) public config!: DemoCardConfig;
@property({ type: Boolean }) public showConfig = false; @property({ attribute: false, type: Boolean }) public showConfig = false;
@state() private _size?: number; @state() private _size?: number;

4
gallery/src/components/demo-cards.ts
View File

@ -44,11 +44,11 @@ class DemoCards extends LitElement {
`; `;
} }
_showConfigToggled(ev) { private _showConfigToggled(ev) {
this._showConfig = ev.target.checked; this._showConfig = ev.target.checked;
} }
_darkThemeToggled(ev) { private _darkThemeToggled(ev) {
applyThemesOnElement(this._container, { themes: {} } as any, "default", { applyThemesOnElement(this._container, { themes: {} } as any, "default", {
dark: ev.target.checked, dark: ev.target.checked,
}); });

4
gallery/src/components/demo-more-info.ts
View File

@ -10,9 +10,9 @@ import type { HomeAssistant } from "../../../src/types";
class DemoMoreInfo extends LitElement { class DemoMoreInfo extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant; @property({ attribute: false }) public hass!: HomeAssistant;
@property() public entityId!: string; @property({ attribute: false }) public entityId!: string;
@property({ type: Boolean }) public showConfig = false; @property({ attribute: false, type: Boolean }) public showConfig = false;
render() { render() {
const state = this._getState(this.entityId, this.hass.states); const state = this._getState(this.entityId, this.hass.states);

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

@ -58,11 +58,11 @@ class DemoMoreInfos extends LitElement {
} }
`; `;
_showConfigToggled(ev) { private _showConfigToggled(ev) {
this._showConfig = ev.target.checked; this._showConfig = ev.target.checked;
} }
_darkThemeToggled(ev) { private _darkThemeToggled(ev) {
applyThemesOnElement( applyThemesOnElement(
this.shadowRoot!.querySelector("#container"), this.shadowRoot!.querySelector("#container"),
{ {

2
gallery/src/ha-gallery.ts
View File

@ -182,7 +182,7 @@ class HaGallery extends LitElement {
} }
} }
_menuTapped() { private _menuTapped() {
this._drawer.open = !this._drawer.open; this._drawer.open = !this._drawer.open;
} }

13
gallery/src/pages/automation/editor-action.ts
View File

@ -63,11 +63,6 @@ class DemoHaAutomationEditorAction extends LitElement {
} }
protected render(): TemplateResult { protected render(): TemplateResult {
const valueChanged = (ev) => {
const sampleIdx = ev.target.sampleIdx;
this.data[sampleIdx] = ev.detail.value;
this.requestUpdate();
};
return html` return html`
<div class="options"> <div class="options">
<ha-formfield label="Disabled"> <ha-formfield label="Disabled">
@ -92,7 +87,7 @@ class DemoHaAutomationEditorAction extends LitElement {
.actions=${this.data[sampleIdx]} .actions=${this.data[sampleIdx]}
.sampleIdx=${sampleIdx} .sampleIdx=${sampleIdx}
.disabled=${this._disabled} .disabled=${this._disabled}
@value-changed=${valueChanged} @value-changed=${this._handleValueChange}
></ha-automation-action> ></ha-automation-action>
` `
)} )}
@ -102,6 +97,12 @@ class DemoHaAutomationEditorAction extends LitElement {
`; `;
} }
private _handleValueChange(ev) {
const sampleIdx = ev.target.sampleIdx;
this.data[sampleIdx] = ev.detail.value;
this.requestUpdate();
}
private _handleOptionChange(ev) { private _handleOptionChange(ev) {
this[`_${ev.target.name}`] = ev.target.checked; this[`_${ev.target.name}`] = ev.target.checked;
} }

13
gallery/src/pages/automation/editor-condition.ts
View File

@ -103,11 +103,6 @@ export class DemoAutomationEditorCondition extends LitElement {
} }
protected render(): TemplateResult { protected render(): TemplateResult {
const valueChanged = (ev) => {
const sampleIdx = ev.target.sampleIdx;
this.data[sampleIdx] = ev.detail.value;
this.requestUpdate();
};
return html` return html`
<div class="options"> <div class="options">
<ha-formfield label="Disabled"> <ha-formfield label="Disabled">
@ -132,7 +127,7 @@ export class DemoAutomationEditorCondition extends LitElement {
.conditions=${this.data[sampleIdx]} .conditions=${this.data[sampleIdx]}
.sampleIdx=${sampleIdx} .sampleIdx=${sampleIdx}
.disabled=${this._disabled} .disabled=${this._disabled}
@value-changed=${valueChanged} @value-changed=${this._handleValueChange}
></ha-automation-condition> ></ha-automation-condition>
` `
)} )}
@ -142,6 +137,12 @@ export class DemoAutomationEditorCondition extends LitElement {
`; `;
} }
private _handleValueChange(ev) {
const sampleIdx = ev.target.sampleIdx;
this.data[sampleIdx] = ev.detail.value;
this.requestUpdate();
}
private _handleOptionChange(ev) { private _handleOptionChange(ev) {
this[`_${ev.target.name}`] = ev.target.checked; this[`_${ev.target.name}`] = ev.target.checked;
} }

13
gallery/src/pages/automation/editor-trigger.ts
View File

@ -149,11 +149,6 @@ export class DemoAutomationEditorTrigger extends LitElement {
} }
protected render(): TemplateResult { protected render(): TemplateResult {
const valueChanged = (ev) => {
const sampleIdx = ev.target.sampleIdx;
this.data[sampleIdx] = ev.detail.value;
this.requestUpdate();
};
return html` return html`
<div class="options"> <div class="options">
<ha-formfield label="Disabled"> <ha-formfield label="Disabled">
@ -178,7 +173,7 @@ export class DemoAutomationEditorTrigger extends LitElement {
.triggers=${this.data[sampleIdx]} .triggers=${this.data[sampleIdx]}
.sampleIdx=${sampleIdx} .sampleIdx=${sampleIdx}
.disabled=${this._disabled} .disabled=${this._disabled}
@value-changed=${valueChanged} @value-changed=${this._handleValueChange}
></ha-automation-trigger> ></ha-automation-trigger>
` `
)} )}
@ -188,6 +183,12 @@ export class DemoAutomationEditorTrigger extends LitElement {
`; `;
} }
private _handleValueChange(ev) {
const sampleIdx = ev.target.sampleIdx;
this.data[sampleIdx] = ev.detail.value;
this.requestUpdate();
}
private _handleOptionChange(ev) { private _handleOptionChange(ev) {
this[`_${ev.target.name}`] = ev.target.checked; this[`_${ev.target.name}`] = ev.target.checked;
} }

23
gallery/src/pages/automation/trace.ts
View File

@ -31,9 +31,8 @@ export class DemoAutomationTrace extends LitElement {
<hat-script-graph <hat-script-graph
.trace=${trace.trace} .trace=${trace.trace}
.selected=${this._selected[idx]} .selected=${this._selected[idx]}
@graph-node-selected=${(ev) => { @graph-node-selected=${this._handleGraphNodeSelected}
this._selected = { ...this._selected, [idx]: ev.detail.path }; .sampleIdx=${idx}
}}
></hat-script-graph> ></hat-script-graph>
<hat-trace-timeline <hat-trace-timeline
allowPick allowPick
@ -41,12 +40,8 @@ export class DemoAutomationTrace extends LitElement {
.trace=${trace.trace} .trace=${trace.trace}
.logbookEntries=${trace.logbookEntries} .logbookEntries=${trace.logbookEntries}
.selectedPath=${this._selected[idx]} .selectedPath=${this._selected[idx]}
@value-changed=${(ev) => { @value-changed=${this._handleTimelineValueChanged}
this._selected = { .sampleIdx=${idx}
...this._selected,
[idx]: ev.detail.value,
};
}}
></hat-trace-timeline> ></hat-trace-timeline>
<button @click=${() => console.log(trace)}>Log trace</button> <button @click=${() => console.log(trace)}>Log trace</button>
</div> </div>
@ -63,6 +58,16 @@ export class DemoAutomationTrace extends LitElement {
hass.updateTranslations("config", "en"); hass.updateTranslations("config", "en");
} }
private _handleTimelineValueChanged(ev) {
const sampleIdx = ev.target.sampleIdx;
this._selected = { ...this._selected, [sampleIdx]: ev.detail.value };
}
private _handleGraphNodeSelected(ev) {
const sampleIdx = ev.target.sampleIdx;
this._selected = { ...this._selected, [sampleIdx]: ev.detail.path };
}
static get styles() { static get styles() {
return css` return css`
ha-card { ha-card {

32
gallery/src/pages/components/ha-form.ts
View File

@ -489,14 +489,8 @@ class DemoHaForm extends LitElement {
.title=${info.title} .title=${info.title}
.value=${this.data[idx]} .value=${this.data[idx]}
.disabled=${this.disabled[idx]} .disabled=${this.disabled[idx]}
@submitted=${() => { @submitted=${this._handleSubmit}
this.disabled[idx] = true; .sampleIdx=${idx}
this.requestUpdate();
setTimeout(() => {
this.disabled[idx] = false;
this.requestUpdate();
}, 2000);
}}
> >
${["light", "dark"].map( ${["light", "dark"].map(
(slot) => html` (slot) => html`
@ -511,10 +505,8 @@ class DemoHaForm extends LitElement {
.computeLabel=${(schema) => .computeLabel=${(schema) =>
translations[schema.name] || schema.name} translations[schema.name] || schema.name}
.computeHelper=${() => "Helper text"} .computeHelper=${() => "Helper text"}
@value-changed=${(e) => { @value-changed=${this._handleValueChanged}
this.data[idx] = e.detail.value; .sampleIdx=${idx}
this.requestUpdate();
}}
></ha-form> ></ha-form>
` `
)} )}
@ -523,6 +515,22 @@ class DemoHaForm extends LitElement {
})} })}
`; `;
} }
private _handleValueChanged(ev) {
const sampleIdx = ev.target.sampleIdx;
this.data[sampleIdx] = ev.detail.value;
this.requestUpdate();
}
private _handleSubmit(ev) {
const sampleIdx = ev.target.sampleIdx;
this.disabled[sampleIdx] = true;
this.requestUpdate();
setTimeout(() => {
this.disabled[sampleIdx] = false;
this.requestUpdate();
}, 2000);
}
} }
declare global { declare global {

19
gallery/src/pages/components/ha-selector.ts
View File

@ -590,13 +590,6 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
</div> </div>
${SCHEMAS.map((info, idx) => { ${SCHEMAS.map((info, idx) => {
const data = this.data[idx]; const data = this.data[idx];
const valueChanged = (ev) => {
this.data[idx] = {
...data,
[ev.target.key]: ev.detail.value,
};
this.requestUpdate();
};
return html` return html`
<demo-black-white-row .title=${info.name}> <demo-black-white-row .title=${info.name}>
${["light", "dark"].map((slot) => ${["light", "dark"].map((slot) =>
@ -613,7 +606,8 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
.value=${data[key] ?? value!.default} .value=${data[key] ?? value!.default}
.disabled=${this._disabled} .disabled=${this._disabled}
.required=${this._required} .required=${this._required}
@value-changed=${valueChanged} @value-changed=${this._handleValueChanged}
.sampleIdx=${idx}
.helper=${this._helper ? "Helper text" : undefined} .helper=${this._helper ? "Helper text" : undefined}
></ha-selector> ></ha-selector>
</ha-settings-row> </ha-settings-row>
@ -626,6 +620,15 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
`; `;
} }
private _handleValueChanged(ev) {
const idx = ev.target.sampleIdx;
this.data[idx] = {
...this.data[idx],
[ev.target.key]: ev.detail.value,
};
this.requestUpdate();
}
private _handleOptionChange(ev) { private _handleOptionChange(ev) {
this[`_${ev.target.name}`] = ev.target.checked; this[`_${ev.target.name}`] = ev.target.checked;
} }

4
hassio/src/addon-store/hassio-addon-store.ts
View File

@ -136,7 +136,7 @@ export class HassioAddonStore extends LitElement {
this._manageRepositories(repositoryUrl); this._manageRepositories(repositoryUrl);
} }
this.addEventListener("hass-api-called", (ev) => this.apiCalled(ev)); this.addEventListener("hass-api-called", (ev) => this._apiCalled(ev));
this._loadData(); this._loadData();
} }
@ -179,7 +179,7 @@ export class HassioAddonStore extends LitElement {
} }
} }
private apiCalled(ev) { private _apiCalled(ev) {
if (ev.detail.success) { if (ev.detail.success) {
this._loadData(); this._loadData();
} }

20
hassio/src/backups/hassio-backups.ts
View File

@ -58,7 +58,7 @@ export class HassioBackups extends LitElement {
@property({ type: Boolean }) public narrow = false; @property({ type: Boolean }) public narrow = false;
@property({ type: Boolean }) public isWide = false; @property({ attribute: false, type: Boolean }) public isWide = false;
@state() private _selectedBackups: string[] = []; @state() private _selectedBackups: string[] = [];
@ -74,7 +74,7 @@ export class HassioBackups extends LitElement {
public connectedCallback(): void { public connectedCallback(): void {
super.connectedCallback(); super.connectedCallback();
if (this.hass && this._firstUpdatedCalled) { if (this.hass && this._firstUpdatedCalled) {
this.fetchBackups(); this._fetchBackups();
} }
} }
@ -107,7 +107,7 @@ export class HassioBackups extends LitElement {
protected firstUpdated(changedProperties: PropertyValues): void { protected firstUpdated(changedProperties: PropertyValues): void {
super.firstUpdated(changedProperties); super.firstUpdated(changedProperties);
if (this.hass && this.isConnected) { if (this.hass && this.isConnected) {
this.fetchBackups(); this._fetchBackups();
} }
this._firstUpdatedCalled = true; this._firstUpdatedCalled = true;
} }
@ -280,7 +280,7 @@ export class HassioBackups extends LitElement {
private _handleAction(ev: CustomEvent<ActionDetail>) { private _handleAction(ev: CustomEvent<ActionDetail>) {
switch (ev.detail.index) { switch (ev.detail.index) {
case 0: case 0:
this.fetchBackups(); this._fetchBackups();
break; break;
case 1: case 1:
showHassioBackupLocationDialog(this, { supervisor: this.supervisor }); showHassioBackupLocationDialog(this, { supervisor: this.supervisor });
@ -303,13 +303,13 @@ export class HassioBackups extends LitElement {
showHassioBackupDialog(this, { showHassioBackupDialog(this, {
slug, slug,
supervisor: this.supervisor, supervisor: this.supervisor,
onDelete: () => this.fetchBackups(), onDelete: () => this._fetchBackups(),
}), }),
reloadBackup: () => this.fetchBackups(), reloadBackup: () => this._fetchBackups(),
}); });
} }
private async fetchBackups() { private async _fetchBackups() {
this._isLoading = true; this._isLoading = true;
await reloadHassioBackups(this.hass); await reloadHassioBackups(this.hass);
this._backups = await fetchHassioBackups(this.hass); this._backups = await fetchHassioBackups(this.hass);
@ -341,7 +341,7 @@ export class HassioBackups extends LitElement {
}); });
return; return;
} }
await this.fetchBackups(); await this._fetchBackups();
this._dataTable.clearSelection(); this._dataTable.clearSelection();
} }
@ -350,7 +350,7 @@ export class HassioBackups extends LitElement {
showHassioBackupDialog(this, { showHassioBackupDialog(this, {
slug, slug,
supervisor: this.supervisor, supervisor: this.supervisor,
onDelete: () => this.fetchBackups(), onDelete: () => this._fetchBackups(),
}); });
} }
@ -366,7 +366,7 @@ export class HassioBackups extends LitElement {
} }
showHassioCreateBackupDialog(this, { showHassioCreateBackupDialog(this, {
supervisor: this.supervisor!, supervisor: this.supervisor!,
onCreate: () => this.fetchBackups(), onCreate: () => this._fetchBackups(),
}); });
} }

17
hassio/src/components/hassio-card-content.ts
View File

@ -9,23 +9,24 @@ import type { HomeAssistant } from "../../../src/types";
class HassioCardContent extends LitElement { class HassioCardContent extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant; @property({ attribute: false }) public hass!: HomeAssistant;
// eslint-disable-next-line lit/no-native-attributes
@property() public title!: string; @property() public title!: string;
@property() public description?: string; @property() public description?: string;
@property({ type: Boolean }) public available = true; @property({ type: Boolean }) public available = true;
@property({ type: Boolean }) public showTopbar = false; @property({ attribute: false, type: Boolean }) public showTopbar = false;
@property() public topbarClass?: string; @property({ attribute: false }) public topbarClass?: string;
@property() public iconTitle?: string; @property({ attribute: false }) public iconTitle?: string;
@property() public iconClass?: string; @property({ attribute: false }) public iconClass?: string;
@property() public icon = mdiHelpCircle; @property() public icon = mdiHelpCircle;
@property() public iconImage?: string; @property({ attribute: false }) public iconImage?: string;
protected render(): TemplateResult { protected render(): TemplateResult {
return html` return html`
@ -35,7 +36,11 @@ class HassioCardContent extends LitElement {
${this.iconImage ${this.iconImage
? html` ? html`
<div class="icon_image ${this.iconClass}"> <div class="icon_image ${this.iconClass}">
<img src=${this.iconImage} .title=${this.iconTitle} /> <img
src=${this.iconImage}
.title=${this.iconTitle}
alt=${this.iconTitle ?? ""}
/>
<div></div> <div></div>
</div> </div>
` `

18
hassio/src/components/supervisor-backup-content.ts
View File

@ -73,23 +73,25 @@ export class SupervisorBackupContent extends LitElement {
@property({ attribute: false }) public backup?: HassioBackupDetail; @property({ attribute: false }) public backup?: HassioBackupDetail;
@property() public backupType: HassioBackupDetail["type"] = "full"; @property({ attribute: false })
public backupType: HassioBackupDetail["type"] = "full";
@property({ attribute: false }) public folders?: CheckboxItem[]; @property({ attribute: false }) public folders?: CheckboxItem[];
@property({ attribute: false }) public addons?: AddonCheckboxItem[]; @property({ attribute: false }) public addons?: AddonCheckboxItem[];
@property({ type: Boolean }) public homeAssistant = false; @property({ attribute: false, type: Boolean }) public homeAssistant = false;
@property({ type: Boolean }) public backupHasPassword = false; @property({ attribute: false, type: Boolean }) public backupHasPassword =
false;
@property({ type: Boolean }) public onboarding = false; @property({ type: Boolean }) public onboarding = false;
@property() public backupName = ""; @property({ attribute: false }) public backupName = "";
@property() public backupPassword = ""; @property({ attribute: false }) public backupPassword = "";
@property() public confirmBackupPassword = ""; @property({ attribute: false }) public confirmBackupPassword = "";
@query("ha-textfield, ha-radio, ha-checkbox", true) private _focusTarget; @query("ha-textfield, ha-radio, ha-checkbox", true) private _focusTarget;
@ -191,7 +193,7 @@ export class SupervisorBackupContent extends LitElement {
> >
<ha-checkbox <ha-checkbox
.checked=${this.homeAssistant} .checked=${this.homeAssistant}
@change=${this.toggleHomeAssistant} @change=${this._toggleHomeAssistant}
> >
</ha-checkbox> </ha-checkbox>
</ha-formfield>` </ha-formfield>`
@ -277,7 +279,7 @@ export class SupervisorBackupContent extends LitElement {
`; `;
} }
private toggleHomeAssistant() { private _toggleHomeAssistant() {
this.homeAssistant = !this.homeAssistant; this.homeAssistant = !this.homeAssistant;
} }

4
hassio/src/components/supervisor-formfield-label.ts
View File

@ -7,9 +7,9 @@ import "../../../src/components/ha-svg-icon";
class SupervisorFormfieldLabel extends LitElement { class SupervisorFormfieldLabel extends LitElement {
@property({ type: String }) public label!: string; @property({ type: String }) public label!: string;
@property({ type: String }) public imageUrl?: string; @property({ attribute: false }) public imageUrl?: string;
@property({ type: String }) public iconPath?: string; @property({ attribute: false }) public iconPath?: string;
@property({ type: String }) public version?: string; @property({ type: String }) public version?: string;

4
hassio/src/dialogs/datadisk/dialog-hassio-datadisk.ts
View File

@ -95,7 +95,7 @@ class HassioDatadiskDialog extends LitElement {
.label=${this.dialogParams.supervisor.localize( .label=${this.dialogParams.supervisor.localize(
"dialog.datadisk_move.select_device" "dialog.datadisk_move.select_device"
)} )}
@selected=${this._select_device} @selected=${this._selectDevice}
dialogInitialFocus dialogInitialFocus
> >
${this.devices.map( ${this.devices.map(
@ -137,7 +137,7 @@ class HassioDatadiskDialog extends LitElement {
`; `;
} }
private _select_device(ev) { private _selectDevice(ev) {
this.selectedDevice = ev.target.value; this.selectedDevice = ev.target.value;
} }

1
hassio/src/dialogs/markdown/dialog-hassio-markdown.ts
View File

@ -12,6 +12,7 @@ import type { HassioMarkdownDialogParams } from "./show-dialog-hassio-markdown";
class HassioMarkdownDialog extends LitElement { class HassioMarkdownDialog extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant; @property({ attribute: false }) public hass!: HomeAssistant;
// eslint-disable-next-line lit/no-native-attributes
@property() public title!: string; @property() public title!: string;
@property() public content!: string; @property() public content!: string;

4
hassio/src/dialogs/network/dialog-hassio-network.ts
View File

@ -394,7 +394,7 @@ export class DialogHassioNetwork
`; `;
} }
_toArray(data: string | string[]): string[] { private _toArray(data: string | string[]): string[] {
if (Array.isArray(data)) { if (Array.isArray(data)) {
if (data && typeof data[0] === "string") { if (data && typeof data[0] === "string") {
data = data[0]; data = data[0];
@ -409,7 +409,7 @@ export class DialogHassioNetwork
return data; return data;
} }
_toString(data: string | string[]): string { private _toString(data: string | string[]): string {
if (!data) { if (!data) {
return ""; return "";
} }

2
hassio/src/ingress-view/hassio-ingress-view.ts
View File

@ -34,7 +34,7 @@ class HassioIngressView extends LitElement {
@property({ attribute: false }) public route!: Route; @property({ attribute: false }) public route!: Route;
@property({ type: Boolean }) public ingressPanel = false; @property({ attribute: false, type: Boolean }) public ingressPanel = false;
@property({ type: Boolean }) public narrow = false; @property({ type: Boolean }) public narrow = false;

8
hassio/src/update-available/update-available-card.ts
View File

@ -58,10 +58,10 @@ const SUPERVISOR_UPDATE_NAMES = {
supervisor: "Home Assistant Supervisor", supervisor: "Home Assistant Supervisor",
}; };
type updateType = "os" | "supervisor" | "core" | "addon"; type UpdateType = "os" | "supervisor" | "core" | "addon";
const changelogUrl = ( const changelogUrl = (
entry: updateType, entry: UpdateType,
version: string version: string
): string | undefined => { ): string | undefined => {
if (entry === "addon") { if (entry === "addon") {
@ -99,7 +99,7 @@ class UpdateAvailableCard extends LitElement {
@property({ attribute: false }) public addonSlug?: string; @property({ attribute: false }) public addonSlug?: string;
@state() private _updateType?: updateType; @state() private _updateType?: UpdateType;
@state() private _changelogContent?: string; @state() private _changelogContent?: string;
@ -222,7 +222,7 @@ class UpdateAvailableCard extends LitElement {
const updateType = ["core", "os", "supervisor"].includes(pathPart) const updateType = ["core", "os", "supervisor"].includes(pathPart)
? pathPart ? pathPart
: "addon"; : "addon";
this._updateType = updateType as updateType; this._updateType = updateType as UpdateType;
switch (updateType) { switch (updateType) {
case "addon": case "addon":

8
src/auth/ha-auth-flow.ts
View File

@ -30,17 +30,17 @@ type State = "loading" | "error" | "step";
export class HaAuthFlow extends LitElement { export class HaAuthFlow extends LitElement {
@property({ attribute: false }) public authProvider?: AuthProvider; @property({ attribute: false }) public authProvider?: AuthProvider;
@property() public clientId?: string; @property({ attribute: false }) public clientId?: string;
@property() public redirectUri?: string; @property({ attribute: false }) public redirectUri?: string;
@property() public oauth2State?: string; @property({ attribute: false }) public oauth2State?: string;
@property({ attribute: false }) public localize!: LocalizeFunc; @property({ attribute: false }) public localize!: LocalizeFunc;
@property({ attribute: false }) public step?: DataEntryFlowStep; @property({ attribute: false }) public step?: DataEntryFlowStep;
@property({ type: Boolean }) public initStoreToken = false; @property({ attribute: false, type: Boolean }) public initStoreToken = false;
@state() private _storeToken = false; @state() private _storeToken = false;

8
src/auth/ha-authorize.ts
View File

@ -21,13 +21,13 @@ const appNames = {
@customElement("ha-authorize") @customElement("ha-authorize")
export class HaAuthorize extends litLocalizeLiteMixin(LitElement) { export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
@property() public clientId?: string; @property({ attribute: false }) public clientId?: string;
@property() public redirectUri?: string; @property({ attribute: false }) public redirectUri?: string;
@property() public oauth2State?: string; @property({ attribute: false }) public oauth2State?: string;
@property() public translationFragment = "page-authorize"; @property({ attribute: false }) public translationFragment = "page-authorize";
@state() private _authProvider?: AuthProvider; @state() private _authProvider?: AuthProvider;

2
src/common/color/convert-color.ts
View File

@ -25,9 +25,11 @@ export const rgb2hex = (rgb: [number, number, number]): string =>
// Copyright (c) 2011-2019, Gregor Aisch // Copyright (c) 2011-2019, Gregor Aisch
// Constants for XYZ and LAB conversion // Constants for XYZ and LAB conversion
/* eslint-disable @typescript-eslint/naming-convention */
const Xn = 0.95047; const Xn = 0.95047;
const Yn = 1; const Yn = 1;
const Zn = 1.08883; const Zn = 1.08883;
/* eslint-enable @typescript-eslint/naming-convention */
const t0 = 0.137931034; // 4 / 29 const t0 = 0.137931034; // 4 / 29
const t1 = 0.206896552; // 6 / 29 const t1 = 0.206896552; // 6 / 29

4
src/common/translations/entity-state.ts
View File

@ -12,7 +12,7 @@ export type FormatEntityAttributeValueFunc = (
attribute: string, attribute: string,
value?: any value?: any
) => string; ) => string;
export type formatEntityAttributeNameFunc = ( export type FormatEntityAttributeNameFunc = (
stateObj: HassEntity, stateObj: HassEntity,
attribute: string attribute: string
) => string; ) => string;
@ -26,7 +26,7 @@ export const computeFormatFunctions = async (
): Promise<{ ): Promise<{
formatEntityState: FormatEntityStateFunc; formatEntityState: FormatEntityStateFunc;
formatEntityAttributeValue: FormatEntityAttributeValueFunc; formatEntityAttributeValue: FormatEntityAttributeValueFunc;
formatEntityAttributeName: formatEntityAttributeNameFunc; formatEntityAttributeName: FormatEntityAttributeNameFunc;
}> => { }> => {
const { computeStateDisplay } = await import( const { computeStateDisplay } = await import(
"../entity/compute_state_display" "../entity/compute_state_display"

1
src/common/translations/localize.ts
View File

@ -94,6 +94,7 @@ export const computeLocalize = async <Keys extends string = LocalizeKeys>(
resources: Resources, resources: Resources,
formats?: FormatsType formats?: FormatsType
): Promise<LocalizeFunc<Keys>> => { ): Promise<LocalizeFunc<Keys>> => {
// eslint-disable-next-line @typescript-eslint/naming-convention
const { IntlMessageFormat } = await import("intl-messageformat"); const { IntlMessageFormat } = await import("intl-messageformat");
await polyfillLocaleData(language); await polyfillLocaleData(language);

5
src/components/chart/ha-chart-base.ts
View File

@ -53,9 +53,9 @@ export class HaChartBase extends LitElement {
@property({ type: Number }) public height?: number; @property({ type: Number }) public height?: number;
@property({ type: Number }) public paddingYAxis = 0; @property({ attribute: false, type: Number }) public paddingYAxis = 0;
@property({ type: Boolean }) public externalHidden = false; @property({ attribute: false, type: Boolean }) public externalHidden = false;
@state() private _chartHeight?: number; @state() private _chartHeight?: number;
@ -316,6 +316,7 @@ export class HaChartBase extends LitElement {
.getContext("2d")!; .getContext("2d")!;
this._loading = true; this._loading = true;
try { try {
// eslint-disable-next-line @typescript-eslint/naming-convention
const ChartConstructor = (await import("../../resources/chartjs")).Chart; const ChartConstructor = (await import("../../resources/chartjs")).Chart;
const computedStyles = getComputedStyle(this); const computedStyles = getComputedStyle(this);

17
src/components/chart/state-history-chart-line.ts
View File

@ -32,25 +32,26 @@ export class StateHistoryChartLine extends LitElement {
@property() public identifier?: string; @property() public identifier?: string;
@property({ type: Boolean }) public showNames = true; @property({ attribute: false, type: Boolean }) public showNames = true;
@property({ type: Boolean }) public clickForMoreInfo = true; @property({ attribute: false, type: Boolean }) public clickForMoreInfo = true;
@property({ attribute: false }) public startTime!: Date; @property({ attribute: false }) public startTime!: Date;
@property({ attribute: false }) public endTime!: Date; @property({ attribute: false }) public endTime!: Date;
@property({ type: Number }) public paddingYAxis = 0; @property({ attribute: false, type: Number }) public paddingYAxis = 0;
@property({ type: Number }) public chartIndex?; @property({ attribute: false, type: Number }) public chartIndex?;
@property({ type: Boolean }) public logarithmicScale = false; @property({ attribute: false, type: Boolean }) public logarithmicScale =
false;
@property({ type: Number }) public minYAxis?: number; @property({ attribute: false, type: Number }) public minYAxis?: number;
@property({ type: Number }) public maxYAxis?: number; @property({ attribute: false, type: Number }) public maxYAxis?: number;
@property({ type: Boolean }) public fitYData = false; @property({ attribute: false, type: Boolean }) public fitYData = false;
@state() private _chartData?: ChartData<"line">; @state() private _chartData?: ChartData<"line">;

8
src/components/chart/state-history-chart-timeline.ts
View File

@ -30,9 +30,9 @@ export class StateHistoryChartTimeline extends LitElement {
@property() public identifier?: string; @property() public identifier?: string;
@property({ type: Boolean }) public showNames = true; @property({ attribute: false, type: Boolean }) public showNames = true;
@property({ type: Boolean }) public clickForMoreInfo = true; @property({ attribute: false, type: Boolean }) public clickForMoreInfo = true;
@property({ type: Boolean }) public chunked = false; @property({ type: Boolean }) public chunked = false;
@ -40,9 +40,9 @@ export class StateHistoryChartTimeline extends LitElement {
@property({ attribute: false }) public endTime!: Date; @property({ attribute: false }) public endTime!: Date;
@property({ type: Number }) public paddingYAxis = 0; @property({ attribute: false, type: Number }) public paddingYAxis = 0;
@property({ type: Number }) public chartIndex?; @property({ attribute: false, type: Number }) public chartIndex?;
@state() private _chartData?: ChartData<"timeline">; @state() private _chartData?: ChartData<"timeline">;

31
src/components/chart/state-history-charts.ts
View File

@ -1,5 +1,5 @@
import type { CSSResultGroup, PropertyValues } from "lit"; import type { CSSResultGroup, PropertyValues } from "lit";
import { css, html, LitElement, nothing } from "lit"; import { css, html, LitElement } from "lit";
import { import {
customElement, customElement,
eventOptions, eventOptions,
@ -7,6 +7,7 @@ import {
queryAll, queryAll,
state, state,
} from "lit/decorators"; } from "lit/decorators";
import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
import { isComponentLoaded } from "../../common/config/is_component_loaded"; import { isComponentLoaded } from "../../common/config/is_component_loaded";
import { restoreScroll } from "../../common/decorators/restore-scroll"; import { restoreScroll } from "../../common/decorators/restore-scroll";
import type { import type {
@ -58,21 +59,22 @@ export class StateHistoryCharts extends LitElement {
@property({ type: Boolean, attribute: "up-to-now" }) public upToNow = false; @property({ type: Boolean, attribute: "up-to-now" }) public upToNow = false;
@property({ type: Number }) public hoursToShow?: number; @property({ attribute: false, type: Number }) public hoursToShow?: number;
@property({ type: Boolean }) public showNames = true; @property({ attribute: false, type: Boolean }) public showNames = true;
@property({ type: Boolean }) public clickForMoreInfo = true; @property({ attribute: false, type: Boolean }) public clickForMoreInfo = true;
@property({ type: Boolean }) public isLoadingData = false; @property({ attribute: false, type: Boolean }) public isLoadingData = false;
@property({ type: Boolean }) public logarithmicScale = false; @property({ attribute: false, type: Boolean }) public logarithmicScale =
false;
@property({ type: Number }) public minYAxis?: number; @property({ attribute: false, type: Number }) public minYAxis?: number;
@property({ type: Number }) public maxYAxis?: number; @property({ attribute: false, type: Number }) public maxYAxis?: number;
@property({ type: Boolean }) public fitYData = false; @property({ attribute: false, type: Boolean }) public fitYData = false;
private _computedStartTime!: Date; private _computedStartTime!: Date;
@ -122,6 +124,7 @@ export class StateHistoryCharts extends LitElement {
).concat(this.historyData.line) ).concat(this.historyData.line)
: this.historyData.line; : this.historyData.line;
// eslint-disable-next-line lit/no-this-assign-in-render
this._chartCount = combinedItems.length; this._chartCount = combinedItems.length;
return this.virtualize return this.virtualize
@ -139,12 +142,12 @@ export class StateHistoryCharts extends LitElement {
)}`; )}`;
} }
private _renderHistoryItem = ( private _renderHistoryItem: RenderItemFunction<
item: TimelineEntity[] | LineChartUnit, TimelineEntity[] | LineChartUnit
index: number > = (item, index) => {
) => {
if (!item || index === undefined) { if (!item || index === undefined) {
return nothing; // eslint-disable-next-line lit/prefer-nothing
return html``;
} }
if (!Array.isArray(item)) { if (!Array.isArray(item)) {
return html`<div class="entry-container"> return html`<div class="entry-container">

25
src/components/chart/statistics-chart.ts
View File

@ -63,28 +63,25 @@ export class StatisticsChart extends LitElement {
@property({ attribute: false }) public endTime?: Date; @property({ attribute: false }) public endTime?: Date;
@property({ type: Array }) public statTypes: Array<StatisticType> = [ @property({ attribute: false, type: Array })
"sum", public statTypes: Array<StatisticType> = ["sum", "min", "mean", "max"];
"min",
"mean",
"max",
];
@property() public chartType: ChartType = "line"; @property({ attribute: false }) public chartType: ChartType = "line";
@property({ type: Number }) public minYAxis?: number; @property({ attribute: false, type: Number }) public minYAxis?: number;
@property({ type: Number }) public maxYAxis?: number; @property({ attribute: false, type: Number }) public maxYAxis?: number;
@property({ type: Boolean }) public fitYData = false; @property({ attribute: false, type: Boolean }) public fitYData = false;
@property({ type: Boolean }) public hideLegend = false; @property({ attribute: false, type: Boolean }) public hideLegend = false;
@property({ type: Boolean }) public logarithmicScale = false; @property({ attribute: false, type: Boolean }) public logarithmicScale =
false;
@property({ type: Boolean }) public isLoadingData = false; @property({ attribute: false, type: Boolean }) public isLoadingData = false;
@property({ type: Boolean }) public clickForMoreInfo = true; @property({ attribute: false, type: Boolean }) public clickForMoreInfo = true;
@property() public period?: string; @property() public period?: string;

4
src/components/data-table/dialog-data-table-settings.ts
View File

@ -185,7 +185,7 @@ export class DialogDataTableSettings extends LitElement {
this._params!.onUpdate(this._columnOrder, this._hiddenColumns); this._params!.onUpdate(this._columnOrder, this._hiddenColumns);
} }
_toggle(ev) { private _toggle(ev) {
if (!this._params) { if (!this._params) {
return; return;
} }
@ -266,7 +266,7 @@ export class DialogDataTableSettings extends LitElement {
this._params!.onUpdate(this._columnOrder, this._hiddenColumns); this._params!.onUpdate(this._columnOrder, this._hiddenColumns);
} }
_reset() { private _reset() {
this._columnOrder = undefined; this._columnOrder = undefined;
this._hiddenColumns = undefined; this._hiddenColumns = undefined;

13
src/components/data-table/ha-data-table.ts
View File

@ -116,7 +116,7 @@ export class HaDataTable extends LitElement {
@property({ type: Boolean }) public clickable = false; @property({ type: Boolean }) public clickable = false;
@property({ type: Boolean }) public hasFab = false; @property({ attribute: false, type: Boolean }) public hasFab = false;
/** /**
* Add an extra row at the bottom of the data table * Add an extra row at the bottom of the data table
@ -127,24 +127,25 @@ export class HaDataTable extends LitElement {
@property({ type: Boolean, attribute: "auto-height" }) @property({ type: Boolean, attribute: "auto-height" })
public autoHeight = false; public autoHeight = false;
// eslint-disable-next-line lit/no-native-attributes
@property({ type: String }) public id = "id"; @property({ type: String }) public id = "id";
@property({ type: String }) public noDataText?: string; @property({ attribute: false, type: String }) public noDataText?: string;
@property({ type: String }) public searchLabel?: string; @property({ attribute: false, type: String }) public searchLabel?: string;
@property({ type: Boolean, attribute: "no-label-float" }) @property({ type: Boolean, attribute: "no-label-float" })
public noLabelFloat? = false; public noLabelFloat? = false;
@property({ type: String }) public filter = ""; @property({ type: String }) public filter = "";
@property() public groupColumn?: string; @property({ attribute: false }) public groupColumn?: string;
@property({ attribute: false }) public groupOrder?: string[]; @property({ attribute: false }) public groupOrder?: string[];
@property() public sortColumn?: string; @property({ attribute: false }) public sortColumn?: string;
@property() public sortDirection: SortingDirection = null; @property({ attribute: false }) public sortDirection: SortingDirection = null;
@property({ attribute: false }) public initialCollapsedGroups?: string[]; @property({ attribute: false }) public initialCollapsedGroups?: string[];

3
src/components/date-range-picker.ts
View File

@ -11,6 +11,7 @@ import {
} from "../common/datetime/localize_date"; } from "../common/datetime/localize_date";
import { mainWindow } from "../common/dom/get_main_window"; import { mainWindow } from "../common/dom/get_main_window";
// eslint-disable-next-line @typescript-eslint/naming-convention
const CustomDateRangePicker = Vue.extend({ const CustomDateRangePicker = Vue.extend({
mixins: [DateRangePicker], mixins: [DateRangePicker],
methods: { methods: {
@ -53,6 +54,7 @@ const CustomDateRangePicker = Vue.extend({
}, },
}); });
// eslint-disable-next-line @typescript-eslint/naming-convention
const Component = Vue.extend({ const Component = Vue.extend({
props: { props: {
timePicker: { timePicker: {
@ -154,6 +156,7 @@ const Component = Vue.extend({
}); });
// Assertion corrects HTMLElement type from package // Assertion corrects HTMLElement type from package
// eslint-disable-next-line @typescript-eslint/naming-convention
const WrappedElement = wrap( const WrappedElement = wrap(
Vue, Vue,
Component Component

2
src/components/device/ha-device-automation-picker.ts
View File

@ -24,7 +24,7 @@ export abstract class HaDeviceAutomationPicker<
@property() public label?: string; @property() public label?: string;
@property() public deviceId?: string; @property({ attribute: false }) public deviceId?: string;
@property({ type: Object }) public value?: T; @property({ type: Object }) public value?: T;

2
src/components/entity/ha-entities-picker.ts
View File

@ -75,7 +75,7 @@ class HaEntitiesPickerLight extends LitElement {
@property({ attribute: false }) @property({ attribute: false })
public entityFilter?: HaEntityPickerEntityFilterFunc; public entityFilter?: HaEntityPickerEntityFilterFunc;
@property({ type: Array }) public createDomains?: string[]; @property({ attribute: false, type: Array }) public createDomains?: string[];
protected render() { protected render() {
if (!this.hass) { if (!this.hass) {

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

@ -13,7 +13,7 @@ export type HaEntityPickerEntityFilterFunc = (entityId: HassEntity) => boolean;
class HaEntityAttributePicker extends LitElement { class HaEntityAttributePicker extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant; @property({ attribute: false }) public hass!: HomeAssistant;
@property() public entityId?: string; @property({ attribute: false }) public entityId?: string;
/** /**
* List of attributes to be hidden. * List of attributes to be hidden.
@ -23,6 +23,7 @@ class HaEntityAttributePicker extends LitElement {
@property({ type: Array, attribute: "hide-attributes" }) @property({ type: Array, attribute: "hide-attributes" })
public hideAttributes?: string[]; public hideAttributes?: string[];
// eslint-disable-next-line lit/no-native-attributes
@property({ type: Boolean }) public autofocus = false; @property({ type: Boolean }) public autofocus = false;
@property({ type: Boolean }) public disabled = false; @property({ type: Boolean }) public disabled = false;

5
src/components/entity/ha-entity-picker.ts
View File

@ -34,6 +34,7 @@ const CREATE_ID = "___create-new-entity___";
export class HaEntityPicker extends LitElement { export class HaEntityPicker extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant; @property({ attribute: false }) public hass!: HomeAssistant;
// eslint-disable-next-line lit/no-native-attributes
@property({ type: Boolean }) public autofocus = false; @property({ type: Boolean }) public autofocus = false;
@property({ type: Boolean }) public disabled = false; @property({ type: Boolean }) public disabled = false;
@ -49,7 +50,7 @@ export class HaEntityPicker extends LitElement {
@property() public helper?: string; @property() public helper?: string;
@property({ type: Array }) public createDomains?: string[]; @property({ attribute: false, type: Array }) public createDomains?: string[];
/** /**
* Show entities from specific domains. * Show entities from specific domains.
@ -102,7 +103,7 @@ export class HaEntityPicker extends LitElement {
@property({ attribute: false }) @property({ attribute: false })
public entityFilter?: HaEntityPickerEntityFilterFunc; public entityFilter?: HaEntityPickerEntityFilterFunc;
@property({ type: Boolean }) public hideClearIcon = false; @property({ attribute: false, type: Boolean }) public hideClearIcon = false;
@property({ attribute: "item-label-path" }) public itemLabelPath = @property({ attribute: "item-label-path" }) public itemLabelPath =
"friendly_name"; "friendly_name";

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

@ -79,6 +79,7 @@ class HaEntityStatePicker extends LitElement {
@property({ attribute: false }) public entityId?: string; @property({ attribute: false }) public entityId?: string;
// eslint-disable-next-line lit/no-native-attributes
@property({ type: Boolean }) public autofocus = false; @property({ type: Boolean }) public autofocus = false;
@property({ type: Boolean }) public disabled = false; @property({ type: Boolean }) public disabled = false;

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

@ -14,12 +14,13 @@ export type HaEntityPickerEntityFilterFunc = (entityId: HassEntity) => boolean;
class HaEntityStatePicker extends LitElement { class HaEntityStatePicker extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant; @property({ attribute: false }) public hass!: HomeAssistant;
@property() public entityId?: string; @property({ attribute: false }) public entityId?: string;
@property() public attribute?: string; @property() public attribute?: string;
@property({ attribute: false }) public extraOptions?: any[]; @property({ attribute: false }) public extraOptions?: any[];
// eslint-disable-next-line lit/no-native-attributes
@property({ type: Boolean }) public autofocus = false; @property({ type: Boolean }) public autofocus = false;
@property({ type: Boolean }) public disabled = false; @property({ type: Boolean }) public disabled = false;

20
src/components/entity/ha-state-label-badge.ts
View File

@ -55,7 +55,7 @@ export class HaStateLabelBadge extends LitElement {
@property() public image?: string; @property() public image?: string;
@property({ type: Boolean }) public showName = false; @property({ attribute: false, type: Boolean }) public showName = false;
@state() private _timerTimeRemaining?: number; @state() private _timerTimeRemaining?: number;
@ -66,13 +66,13 @@ export class HaStateLabelBadge extends LitElement {
public connectedCallback(): void { public connectedCallback(): void {
super.connectedCallback(); super.connectedCallback();
this._connected = true; this._connected = true;
this.startInterval(this.state); this._startInterval(this.state);
} }
public disconnectedCallback(): void { public disconnectedCallback(): void {
super.disconnectedCallback(); super.disconnectedCallback();
this._connected = false; this._connected = false;
this.clearInterval(); this._clearInterval();
} }
protected render(): TemplateResult { protected render(): TemplateResult {
@ -151,7 +151,7 @@ export class HaStateLabelBadge extends LitElement {
super.updated(changedProperties); super.updated(changedProperties);
if (this._connected && changedProperties.has("state")) { if (this._connected && changedProperties.has("state")) {
this.startInterval(this.state); this._startInterval(this.state);
} }
} }
@ -237,28 +237,28 @@ export class HaStateLabelBadge extends LitElement {
return entityState.attributes.unit_of_measurement || null; return entityState.attributes.unit_of_measurement || null;
} }
private clearInterval() { private _clearInterval() {
if (this._updateRemaining) { if (this._updateRemaining) {
clearInterval(this._updateRemaining); clearInterval(this._updateRemaining);
this._updateRemaining = undefined; this._updateRemaining = undefined;
} }
} }
private startInterval(stateObj) { private _startInterval(stateObj) {
this.clearInterval(); this._clearInterval();
if (stateObj && computeStateDomain(stateObj) === "timer") { if (stateObj && computeStateDomain(stateObj) === "timer") {
this.calculateTimerRemaining(stateObj); this._calculateTimerRemaining(stateObj);
if (stateObj.state === "active") { if (stateObj.state === "active") {
this._updateRemaining = window.setInterval( this._updateRemaining = window.setInterval(
() => this.calculateTimerRemaining(this.state), () => this._calculateTimerRemaining(this.state),
1000 1000
); );
} }
} }
} }
private calculateTimerRemaining(stateObj) { private _calculateTimerRemaining(stateObj) {
this._timerTimeRemaining = timerTimeRemaining(stateObj); this._timerTimeRemaining = timerTimeRemaining(stateObj);
} }

6
src/components/entity/ha-statistic-picker.ts
View File

@ -39,7 +39,8 @@ export class HaStatisticPicker extends LitElement {
@property({ type: Boolean, attribute: "allow-custom-entity" }) @property({ type: Boolean, attribute: "allow-custom-entity" })
public allowCustomEntity; public allowCustomEntity;
@property({ type: Array }) public statisticIds?: StatisticsMetaData[]; @property({ attribute: false, type: Array })
public statisticIds?: StatisticsMetaData[];
@property({ type: Boolean }) public disabled = false; @property({ type: Boolean }) public disabled = false;
@ -84,7 +85,8 @@ export class HaStatisticPicker extends LitElement {
@property({ type: Array, attribute: "exclude-statistics" }) @property({ type: Array, attribute: "exclude-statistics" })
public excludeStatistics?: string[]; public excludeStatistics?: string[];
@property() public helpMissingEntityUrl = "/more-info/statistics/"; @property({ attribute: false }) public helpMissingEntityUrl =
"/more-info/statistics/";
@state() private _opened?: boolean; @state() private _opened?: boolean;

2
src/components/entity/ha-statistics-picker.ts
View File

@ -12,7 +12,7 @@ class HaStatisticsPicker extends LitElement {
@property({ type: Array }) public value?: string[]; @property({ type: Array }) public value?: string[];
@property({ type: Array }) public statisticIds?: string[]; @property({ attribute: false, type: Array }) public statisticIds?: string[];
@property({ attribute: "statistic-types" }) @property({ attribute: "statistic-types" })
public statisticTypes?: "mean" | "sum"; public statisticTypes?: "mean" | "sum";

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

@ -22,9 +22,9 @@ export class StateBadge extends LitElement {
@property({ attribute: false }) public stateObj?: HassEntity; @property({ attribute: false }) public stateObj?: HassEntity;
@property() public overrideIcon?: string; @property({ attribute: false }) public overrideIcon?: string;
@property() public overrideImage?: string; @property({ attribute: false }) public overrideImage?: string;
// Cannot be a boolean attribute because undefined is treated different than // Cannot be a boolean attribute because undefined is treated different than
// false. When it is undefined, state is still colored for light entities. // false. When it is undefined, state is still colored for light entities.

2
src/components/entity/state-info.ts
View File

@ -14,7 +14,7 @@ class StateInfo extends LitElement {
@property({ attribute: false }) public stateObj?: HassEntity; @property({ attribute: false }) public stateObj?: HassEntity;
@property({ type: Boolean }) public inDialog = false; @property({ attribute: false, type: Boolean }) public inDialog = false;
@property() public color?: string; @property() public color?: string;

5
src/components/ha-alert.ts
View File

@ -27,6 +27,7 @@ declare global {
@customElement("ha-alert") @customElement("ha-alert")
class HaAlert extends LitElement { class HaAlert extends LitElement {
// eslint-disable-next-line lit/no-native-attributes
@property() public title = ""; @property() public title = "";
@property({ attribute: "alert-type" }) public alertType: @property({ attribute: "alert-type" }) public alertType:
@ -63,7 +64,7 @@ class HaAlert extends LitElement {
<slot name="action"> <slot name="action">
${this.dismissable ${this.dismissable
? html`<ha-icon-button ? html`<ha-icon-button
@click=${this._dismiss_clicked} @click=${this._dismissClicked}
label="Dismiss alert" label="Dismiss alert"
.path=${mdiClose} .path=${mdiClose}
></ha-icon-button>` ></ha-icon-button>`
@ -75,7 +76,7 @@ class HaAlert extends LitElement {
`; `;
} }
private _dismiss_clicked() { private _dismissClicked() {
fireEvent(this, "alert-dismissed-clicked"); fireEvent(this, "alert-dismissed-clicked");
} }

2
src/components/ha-assist-pipeline-picker.ts
View File

@ -26,7 +26,7 @@ export class HaAssistPipelinePicker extends LitElement {
@property({ type: Boolean }) public required = false; @property({ type: Boolean }) public required = false;
@property({ type: Boolean }) public includeLastUsed = false; @property({ attribute: false, type: Boolean }) public includeLastUsed = false;
@state() _pipelines?: AssistPipeline[]; @state() _pipelines?: AssistPipeline[];

2
src/components/ha-attribute-icon.ts
View File

@ -15,7 +15,7 @@ export class HaAttributeIcon extends LitElement {
@property() public attribute?: string; @property() public attribute?: string;
@property() public attributeValue?: string; @property({ attribute: false }) public attributeValue?: string;
@property() public icon?: string; @property() public icon?: string;

8
src/components/ha-attributes.ts
View File

@ -20,7 +20,7 @@ class HaAttributes extends LitElement {
@state() private _expanded = false; @state() private _expanded = false;
private get _filteredAttributes() { private get _filteredAttributes() {
return this.computeDisplayAttributes( return this._computeDisplayAttributes(
STATE_ATTRIBUTES.concat( STATE_ATTRIBUTES.concat(
this.extraFilters ? this.extraFilters.split(",") : [] this.extraFilters ? this.extraFilters.split(",") : []
) )
@ -53,7 +53,7 @@ class HaAttributes extends LitElement {
"ui.components.attributes.expansion_header" "ui.components.attributes.expansion_header"
)} )}
outlined outlined
@expanded-will-change=${this.expandedChanged} @expanded-will-change=${this._expandedChanged}
> >
<div class="attribute-container"> <div class="attribute-container">
${this._expanded ${this._expanded
@ -128,7 +128,7 @@ class HaAttributes extends LitElement {
]; ];
} }
private computeDisplayAttributes(filtersArray: string[]): string[] { private _computeDisplayAttributes(filtersArray: string[]): string[] {
if (!this.stateObj) { if (!this.stateObj) {
return []; return [];
} }
@ -137,7 +137,7 @@ class HaAttributes extends LitElement {
); );
} }
private expandedChanged(ev) { private _expandedChanged(ev) {
this._expanded = ev.detail.expanded; this._expanded = ev.detail.expanded;
} }
} }

22
src/components/ha-base-time-input.ts
View File

@ -36,7 +36,7 @@ export class HaBaseTimeInput extends LitElement {
/** /**
* auto validate time inputs * auto validate time inputs
*/ */
@property({ type: Boolean }) autoValidate = false; @property({ attribute: false, type: Boolean }) autoValidate = false;
/** /**
* determines if inputs are required * determines if inputs are required
@ -81,52 +81,52 @@ export class HaBaseTimeInput extends LitElement {
/** /**
* Label for the day input * Label for the day input
*/ */
@property() dayLabel = ""; @property({ attribute: false }) dayLabel = "";
/** /**
* Label for the hour input * Label for the hour input
*/ */
@property() hourLabel = ""; @property({ attribute: false }) hourLabel = "";
/** /**
* Label for the min input * Label for the min input
*/ */
@property() minLabel = ""; @property({ attribute: false }) minLabel = "";
/** /**
* Label for the sec input * Label for the sec input
*/ */
@property() secLabel = ""; @property({ attribute: false }) secLabel = "";
/** /**
* Label for the milli sec input * Label for the milli sec input
*/ */
@property() millisecLabel = ""; @property({ attribute: false }) millisecLabel = "";
/** /**
* show the sec field * show the sec field
*/ */
@property({ type: Boolean }) enableSecond = false; @property({ attribute: false, type: Boolean }) enableSecond = false;
/** /**
* show the milli sec field * show the milli sec field
*/ */
@property({ type: Boolean }) enableMillisecond = false; @property({ attribute: false, type: Boolean }) enableMillisecond = false;
/** /**
* show the day field * show the day field
*/ */
@property({ type: Boolean }) enableDay = false; @property({ attribute: false, type: Boolean }) enableDay = false;
/** /**
* limit hours input * limit hours input
*/ */
@property({ type: Boolean }) noHoursLimit = false; @property({ attribute: false, type: Boolean }) noHoursLimit = false;
/** /**
* AM or PM * AM or PM
*/ */
@property() amPm: "AM" | "PM" = "AM"; @property({ attribute: false }) amPm: "AM" | "PM" = "AM";
@property({ type: Boolean, reflect: true }) public clearable?: boolean; @property({ type: Boolean, reflect: true }) public clearable?: boolean;

2
src/components/ha-button-menu.ts
View File

@ -14,7 +14,7 @@ export class HaButtonMenu extends LitElement {
@property() public corner: Corner = "BOTTOM_START"; @property() public corner: Corner = "BOTTOM_START";
@property() public menuCorner: MenuCorner = "START"; @property({ attribute: false }) public menuCorner: MenuCorner = "START";
@property({ type: Number }) public x: number | null = null; @property({ type: Number }) public x: number | null = null;

2
src/components/ha-button-toggle-group.ts
View File

@ -14,7 +14,7 @@ export class HaButtonToggleGroup extends LitElement {
@property() public active?: string; @property() public active?: string;
@property({ type: Boolean }) public fullWidth = false; @property({ attribute: false, type: Boolean }) public fullWidth = false;
@property({ type: Boolean }) public dense = false; @property({ type: Boolean }) public dense = false;

10
src/components/ha-clickable-list-item.ts
View File

@ -7,9 +7,10 @@ import { HaListItem } from "./ha-list-item";
export class HaClickableListItem extends HaListItem { export class HaClickableListItem extends HaListItem {
@property() public href?: string; @property() public href?: string;
@property({ type: Boolean }) public disableHref = false; @property({ attribute: false, type: Boolean }) public disableHref = false;
@property({ type: Boolean, reflect: true }) public openNewTab = false; @property({ attribute: false, type: Boolean, reflect: true })
public openNewTab = false;
@query("a") private _anchor!: HTMLAnchorElement; @query("a") private _anchor!: HTMLAnchorElement;
@ -18,7 +19,7 @@ export class HaClickableListItem extends HaListItem {
const href = this.href || ""; const href = this.href || "";
return html`${this.disableHref return html`${this.disableHref
? html`<a>${r}</a>` ? html`<a href="#" class="disabled">${r}</a>`
: html`<a target=${this.openNewTab ? "_blank" : ""} href=${href} : html`<a target=${this.openNewTab ? "_blank" : ""} href=${href}
>${r}</a >${r}</a
>`}`; >`}`;
@ -44,6 +45,9 @@ export class HaClickableListItem extends HaListItem {
align-items: center; align-items: center;
overflow: hidden; overflow: hidden;
} }
.disabled {
pointer-events: none;
}
`, `,
]; ];
} }

3
src/components/ha-code-editor.ts
View File

@ -44,9 +44,10 @@ export class HaCodeEditor extends ReactiveElement {
public hass?: HomeAssistant; public hass?: HomeAssistant;
// eslint-disable-next-line lit/no-native-attributes
@property({ type: Boolean }) public autofocus = false; @property({ type: Boolean }) public autofocus = false;
@property({ type: Boolean }) public readOnly = false; @property({ attribute: false, type: Boolean }) public readOnly = false;
@property({ type: Boolean }) public linewrap = false; @property({ type: Boolean }) public linewrap = false;

8
src/components/ha-color-picker.ts
View File

@ -82,7 +82,7 @@ export class HaColorPicker extends LitElement {
` `
: value === "state" : value === "state"
? html`<ha-svg-icon path=${mdiPalette}></ha-svg-icon>` ? html`<ha-svg-icon path=${mdiPalette}></ha-svg-icon>`
: this.renderColorCircle(value || "grey")} : this._renderColorCircle(value || "grey")}
</span> </span>
` `
: nothing} : nothing}
@ -123,7 +123,7 @@ export class HaColorPicker extends LitElement {
${this.defaultColor === color ${this.defaultColor === color
? ` (${this.hass.localize("ui.components.color-picker.default")})` ? ` (${this.hass.localize("ui.components.color-picker.default")})`
: nothing} : nothing}
<span slot="graphic">${this.renderColorCircle(color)}</span> <span slot="graphic">${this._renderColorCircle(color)}</span>
</ha-list-item> </ha-list-item>
` `
)} )}
@ -131,7 +131,7 @@ export class HaColorPicker extends LitElement {
? html` ? html`
<ha-list-item .value=${value} graphic="icon"> <ha-list-item .value=${value} graphic="icon">
${value} ${value}
<span slot="graphic">${this.renderColorCircle(value)}</span> <span slot="graphic">${this._renderColorCircle(value)}</span>
</ha-list-item> </ha-list-item>
` `
: nothing} : nothing}
@ -139,7 +139,7 @@ export class HaColorPicker extends LitElement {
`; `;
} }
private renderColorCircle(color: string) { private _renderColorCircle(color: string) {
return html` return html`
<span <span
class="circle-color" class="circle-color"

2
src/components/ha-combo-box.ts
View File

@ -71,7 +71,7 @@ export class HaComboBox extends LitElement {
@property() public placeholder?: string; @property() public placeholder?: string;
@property() public validationMessage?: string; @property({ attribute: false }) public validationMessage?: string;
@property() public helper?: string; @property() public helper?: string;

2
src/components/ha-control-circular-slider.ts
View File

@ -435,7 +435,7 @@ export class HaControlCircularSlider extends LitElement {
this._activeSlider = undefined; this._activeSlider = undefined;
} }
_handleKeyUp(e: KeyboardEvent) { private _handleKeyUp(e: KeyboardEvent) {
if (!A11Y_KEY_CODES.has(e.code)) return; if (!A11Y_KEY_CODES.has(e.code)) return;
this._activeSlider = (e.currentTarget as any).id as ActiveSlider; this._activeSlider = (e.currentTarget as any).id as ActiveSlider;
e.preventDefault(); e.preventDefault();

12
src/components/ha-control-number-buttons.ts
View File

@ -52,7 +52,7 @@ export class HaControlNumberButton extends LitElement {
}, },
}); });
private boundedValue(value: number) { private _boundedValue(value: number) {
const clamped = conditionalClamp(value, this.min, this.max); const clamped = conditionalClamp(value, this.min, this.max);
return Math.round(clamped / this._step) * this._step; return Math.round(clamped / this._step) * this._step;
} }
@ -86,14 +86,14 @@ export class HaControlNumberButton extends LitElement {
} }
private _increment() { private _increment() {
this.value = this.boundedValue(this._value + this._step); this.value = this._boundedValue(this._value + this._step);
} }
private _decrement() { private _decrement() {
this.value = this.boundedValue(this._value - this._step); this.value = this._boundedValue(this._value - this._step);
} }
_handleKeyDown(e: KeyboardEvent) { private _handleKeyDown(e: KeyboardEvent) {
if (this.disabled) return; if (this.disabled) return;
if (!A11Y_KEY_CODES.has(e.code)) return; if (!A11Y_KEY_CODES.has(e.code)) return;
e.preventDefault(); e.preventDefault();
@ -107,10 +107,10 @@ export class HaControlNumberButton extends LitElement {
this._decrement(); this._decrement();
break; break;
case "PageUp": case "PageUp":
this.value = this.boundedValue(this._value + this._tenPercentStep); this.value = this._boundedValue(this._value + this._tenPercentStep);
break; break;
case "PageDown": case "PageDown":
this.value = this.boundedValue(this._value - this._tenPercentStep); this.value = this._boundedValue(this._value - this._tenPercentStep);
break; break;
case "Home": case "Home":
if (this.min != null) { if (this.min != null) {

9
src/components/ha-control-select-menu.ts
View File

@ -57,12 +57,13 @@ export class HaControlSelectMenu extends SelectBase {
aria-labelledby=${ifDefined(labelledby)} aria-labelledby=${ifDefined(labelledby)}
aria-label=${ifDefined(labelAttribute)} aria-label=${ifDefined(labelAttribute)}
aria-required=${this.required} aria-required=${this.required}
aria-controls="listbox"
@focus=${this.onFocus} @focus=${this.onFocus}
@blur=${this.onBlur} @blur=${this.onBlur}
@click=${this.onClick} @click=${this.onClick}
@keydown=${this.onKeydown} @keydown=${this.onKeydown}
> >
${this.renderIcon()} ${this._renderIcon()}
<div class="content"> <div class="content">
${this.hideLabel ${this.hideLabel
? nothing ? nothing
@ -71,7 +72,7 @@ export class HaControlSelectMenu extends SelectBase {
? html`<p class="value">${this.selectedText}</p>` ? html`<p class="value">${this.selectedText}</p>`
: nothing} : nothing}
</div> </div>
${this.renderArrow()} ${this._renderArrow()}
<ha-ripple .disabled=${this.disabled}></ha-ripple> <ha-ripple .disabled=${this.disabled}></ha-ripple>
</div> </div>
${this.renderMenu()} ${this.renderMenu()}
@ -79,7 +80,7 @@ export class HaControlSelectMenu extends SelectBase {
`; `;
} }
private renderArrow() { private _renderArrow() {
if (!this.showArrow) return nothing; if (!this.showArrow) return nothing;
return html` return html`
@ -89,7 +90,7 @@ export class HaControlSelectMenu extends SelectBase {
`; `;
} }
private renderIcon() { private _renderIcon() {
const index = this.mdcFoundation?.getSelectedIndex(); const index = this.mdcFoundation?.getSelectedIndex();
const items = this.menuElement?.items ?? []; const items = this.menuElement?.items ?? [];
const item = index != null ? items[index] : undefined; const item = index != null ? items[index] : undefined;

8
src/components/ha-control-slider.ts
View File

@ -215,12 +215,12 @@ export class HaControlSlider extends LitElement {
return Math.max(this.step, (this.max - this.min) / 10); return Math.max(this.step, (this.max - this.min) / 10);
} }
_showTooltip() { private _showTooltip() {
if (this._tooltipTimeout != null) window.clearTimeout(this._tooltipTimeout); if (this._tooltipTimeout != null) window.clearTimeout(this._tooltipTimeout);
this.tooltipVisible = true; this.tooltipVisible = true;
} }
_hideTooltip(delay?: number) { private _hideTooltip(delay?: number) {
if (!delay) { if (!delay) {
this.tooltipVisible = false; this.tooltipVisible = false;
return; return;
@ -230,7 +230,7 @@ export class HaControlSlider extends LitElement {
}, delay); }, delay);
} }
_handleKeyDown(e: KeyboardEvent) { private _handleKeyDown(e: KeyboardEvent) {
if (!A11Y_KEY_CODES.has(e.code)) return; if (!A11Y_KEY_CODES.has(e.code)) return;
e.preventDefault(); e.preventDefault();
switch (e.code) { switch (e.code) {
@ -265,7 +265,7 @@ export class HaControlSlider extends LitElement {
private _tooltipTimeout?: number; private _tooltipTimeout?: number;
_handleKeyUp(e: KeyboardEvent) { private _handleKeyUp(e: KeyboardEvent) {
if (!A11Y_KEY_CODES.has(e.code)) return; if (!A11Y_KEY_CODES.has(e.code)) return;
e.preventDefault(); e.preventDefault();
this._hideTooltip(500); this._hideTooltip(500);

4
src/components/ha-control-switch.ts
View File

@ -22,10 +22,10 @@ export class HaControlSwitch extends LitElement {
@property({ type: Boolean, reflect: true }) public checked = false; @property({ type: Boolean, reflect: true }) public checked = false;
// SVG icon path (if you need a non SVG icon instead, use the provided on icon slot to pass an <ha-icon slot="icon-on"> in) // SVG icon path (if you need a non SVG icon instead, use the provided on icon slot to pass an <ha-icon slot="icon-on"> in)
@property({ type: String }) pathOn?: string; @property({ attribute: false, type: String }) pathOn?: string;
// SVG icon path (if you need a non SVG icon instead, use the provided off icon slot to pass an <ha-icon slot="icon-off"> in) // SVG icon path (if you need a non SVG icon instead, use the provided off icon slot to pass an <ha-icon slot="icon-off"> in)
@property({ type: String }) pathOff?: string; @property({ attribute: false, type: String }) pathOff?: string;
@property({ attribute: "touch-action" }) @property({ attribute: "touch-action" })
public touchAction?: string; public touchAction?: string;

2
src/components/ha-country-picker.ts
View File

@ -277,7 +277,7 @@ export class HaCountryPicker extends LitElement {
@property({ type: Boolean, reflect: true }) public disabled = false; @property({ type: Boolean, reflect: true }) public disabled = false;
@property({ type: Boolean }) public noSort = false; @property({ attribute: false, type: Boolean }) public noSort = false;
private _getOptions = memoizeOne( private _getOptions = memoizeOne(
(language?: string, countries?: string[]) => { (language?: string, countries?: string[]) => {

6
src/components/ha-date-input.ts
View File

@ -13,7 +13,7 @@ import "./ha-textfield";
const loadDatePickerDialog = () => import("./ha-dialog-date-picker"); const loadDatePickerDialog = () => import("./ha-dialog-date-picker");
export interface datePickerDialogParams { export interface DatePickerDialogParams {
value?: string; value?: string;
min?: string; min?: string;
max?: string; max?: string;
@ -25,7 +25,7 @@ export interface datePickerDialogParams {
const showDatePickerDialog = ( const showDatePickerDialog = (
element: HTMLElement, element: HTMLElement,
dialogParams: datePickerDialogParams dialogParams: DatePickerDialogParams
): void => { ): void => {
fireEvent(element, "show-dialog", { fireEvent(element, "show-dialog", {
dialogTag: "ha-dialog-date-picker", dialogTag: "ha-dialog-date-picker",
@ -51,7 +51,7 @@ export class HaDateInput extends LitElement {
@property() public helper?: string; @property() public helper?: string;
@property({ type: Boolean }) public canClear = false; @property({ attribute: false, type: Boolean }) public canClear = false;
render() { render() {
return html`<ha-textfield return html`<ha-textfield

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

@ -53,19 +53,23 @@ export class HaDateRangePicker extends LitElement {
@state() private _ranges?: DateRangePickerRanges; @state() private _ranges?: DateRangePickerRanges;
@property({ type: Boolean }) public autoApply = false; @property({ attribute: false, type: Boolean }) public autoApply = false;
@property({ type: Boolean }) public timePicker = true; @property({ attribute: false, type: Boolean }) public timePicker = true;
@property({ type: Boolean }) public disabled = false; @property({ attribute: false, type: Boolean }) public disabled = false;
@property({ type: Boolean }) public minimal = false; @property({ type: Boolean }) public minimal = false;
@state() private _hour24format = false; @state() private _hour24format = false;
@property({ type: Boolean }) public extendedPresets = false; @property({ attribute: false, type: Boolean }) public extendedPresets = false;
@property() public openingDirection?: "right" | "left" | "center" | "inline"; @property({ attribute: false }) public openingDirection?:
| "right"
| "left"
| "center"
| "inline";
@state() private _calcedOpeningDirection?: @state() private _calcedOpeningDirection?:
| "right" | "right"

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

@ -7,7 +7,7 @@ import { fireEvent } from "../common/dom/fire_event";
import { nextRender } from "../common/util/render-status"; import { nextRender } from "../common/util/render-status";
import { haStyleDialog } from "../resources/styles"; import { haStyleDialog } from "../resources/styles";
import type { HomeAssistant } from "../types"; import type { HomeAssistant } from "../types";
import type { datePickerDialogParams } from "./ha-date-input"; import type { DatePickerDialogParams } from "./ha-date-input";
import "./ha-dialog"; import "./ha-dialog";
@customElement("ha-dialog-date-picker") @customElement("ha-dialog-date-picker")
@ -20,11 +20,11 @@ export class HaDialogDatePicker extends LitElement {
@property() public label?: string; @property() public label?: string;
@state() private _params?: datePickerDialogParams; @state() private _params?: DatePickerDialogParams;
@state() private _value?: string; @state() private _value?: string;
public async showDialog(params: datePickerDialogParams): Promise<void> { public async showDialog(params: DatePickerDialogParams): Promise<void> {
// app-datepicker has a bug, that it removes its handlers when disconnected, but doesn't add them back when reconnected. // app-datepicker has a bug, that it removes its handlers when disconnected, but doesn't add them back when reconnected.
// So we need to wait for the next render to make sure the element is removed and re-created so the handlers are added. // So we need to wait for the next render to make sure the element is removed and re-created so the handlers are added.
await nextRender(); await nextRender();

4
src/components/ha-domain-icon.ts
View File

@ -14,11 +14,11 @@ export class HaDomainIcon extends LitElement {
@property() public domain?: string; @property() public domain?: string;
@property() public deviceClass?: string; @property({ attribute: false }) public deviceClass?: string;
@property() public icon?: string; @property() public icon?: string;
@property({ type: Boolean }) public brandFallback?: boolean; @property({ attribute: false, type: Boolean }) public brandFallback?: boolean;
protected render() { protected render() {
if (this.icon) { if (this.icon) {

5
src/components/ha-duration-input.ts
View File

@ -23,9 +23,10 @@ class HaDurationInput extends LitElement {
@property({ type: Boolean }) public required = false; @property({ type: Boolean }) public required = false;
@property({ type: Boolean }) public enableMillisecond = false; @property({ attribute: false, type: Boolean }) public enableMillisecond =
false;
@property({ type: Boolean }) public enableDay = false; @property({ attribute: false, type: Boolean }) public enableDay = false;
@property({ type: Boolean }) public disabled = false; @property({ type: Boolean }) public disabled = false;

6
src/components/ha-expansion-panel.ts
View File

@ -13,9 +13,11 @@ export class HaExpansionPanel extends LitElement {
@property({ type: Boolean, reflect: true }) outlined = false; @property({ type: Boolean, reflect: true }) outlined = false;
@property({ type: Boolean, reflect: true }) leftChevron = false; @property({ attribute: false, type: Boolean, reflect: true }) leftChevron =
false;
@property({ type: Boolean, reflect: true }) noCollapse = false; @property({ attribute: false, type: Boolean, reflect: true }) noCollapse =
false;
@property() header?: string; @property() header?: string;

3
src/components/ha-form/ha-form-string.ts
View File

@ -22,7 +22,8 @@ const MASKED_FIELDS = ["password", "secret", "token"];
export class HaFormString extends LitElement implements HaFormElement { export class HaFormString extends LitElement implements HaFormElement {
@property({ attribute: false }) public localize?: LocalizeFunc; @property({ attribute: false }) public localize?: LocalizeFunc;
@property() public localizeBaseKey = "ui.components.selectors.text"; @property({ attribute: false }) public localizeBaseKey =
"ui.components.selectors.text";
@property({ attribute: false }) public schema!: HaFormStringSchema; @property({ attribute: false }) public schema!: HaFormStringSchema;

14
src/components/ha-gauge.ts
View File

@ -30,7 +30,7 @@ export class HaGauge extends LitElement {
@property({ attribute: false }) @property({ attribute: false })
public formatOptions?: Intl.NumberFormatOptions; public formatOptions?: Intl.NumberFormatOptions;
@property({ type: String }) public valueText?: string; @property({ attribute: false, type: String }) public valueText?: string;
@property({ attribute: false }) public locale!: FrontendLocaleData; @property({ attribute: false }) public locale!: FrontendLocaleData;
@ -52,8 +52,8 @@ export class HaGauge extends LitElement {
afterNextRender(() => { afterNextRender(() => {
this._updated = true; this._updated = true;
this._angle = getAngle(this.value, this.min, this.max); this._angle = getAngle(this.value, this.min, this.max);
this._segment_label = this.getSegmentLabel(); this._segment_label = this._getSegmentLabel();
this._rescale_svg(); this._rescaleSvg();
}); });
} }
@ -68,8 +68,8 @@ export class HaGauge extends LitElement {
return; return;
} }
this._angle = getAngle(this.value, this.min, this.max); this._angle = getAngle(this.value, this.min, this.max);
this._segment_label = this.getSegmentLabel(); this._segment_label = this._getSegmentLabel();
this._rescale_svg(); this._rescaleSvg();
} }
protected render() { protected render() {
@ -149,7 +149,7 @@ export class HaGauge extends LitElement {
</svg>`; </svg>`;
} }
private _rescale_svg() { private _rescaleSvg() {
// Set the viewbox of the SVG containing the value to perfectly // Set the viewbox of the SVG containing the value to perfectly
// fit the text // fit the text
// That way it will auto-scale correctly // That way it will auto-scale correctly
@ -161,7 +161,7 @@ export class HaGauge extends LitElement {
); );
} }
private getSegmentLabel() { private _getSegmentLabel() {
if (this.levels) { if (this.levels) {
this.levels.sort((a, b) => a.level - b.level); this.levels.sort((a, b) => a.level - b.level);
for (let i = this.levels.length - 1; i >= 0; i--) { for (let i = this.levels.length - 1; i >= 0; i--) {

2
src/components/ha-grid-size-picker.ts
View File

@ -149,7 +149,7 @@ export class HaGridSizeEditor extends LitElement {
`; `;
} }
_cellClick(ev) { private _cellClick(ev) {
const cell = ev.currentTarget as HTMLElement; const cell = ev.currentTarget as HTMLElement;
const rows = Number(cell.getAttribute("data-row")); const rows = Number(cell.getAttribute("data-row"));
const columns = Number(cell.getAttribute("data-column")); const columns = Number(cell.getAttribute("data-column"));

1
src/components/ha-hls-player.ts
View File

@ -139,6 +139,7 @@ class HaHLSPlayer extends LitElement {
private async _startHls(): Promise<void> { private async _startHls(): Promise<void> {
const masterPlaylistPromise = fetch(this._url); const masterPlaylistPromise = fetch(this._url);
// eslint-disable-next-line @typescript-eslint/naming-convention
const Hls: typeof HlsType = (await import("hls.js/dist/hls.light.mjs")) const Hls: typeof HlsType = (await import("hls.js/dist/hls.light.mjs"))
.default; .default;

14
src/components/ha-hs-color-picker.ts
View File

@ -119,7 +119,7 @@ class HaHsColorPicker extends LitElement {
@property({ type: Array }) @property({ type: Array })
public value?: [number, number]; public value?: [number, number];
@property({ type: Number }) @property({ attribute: false, type: Number })
public colorBrightness?: number; public colorBrightness?: number;
@property({ type: Number }) @property({ type: Number })
@ -131,10 +131,10 @@ class HaHsColorPicker extends LitElement {
@property({ type: Number }) @property({ type: Number })
public ww?: number; public ww?: number;
@property({ type: Number }) @property({ attribute: false, type: Number })
public minKelvin?: number; public minKelvin?: number;
@property({ type: Number }) @property({ attribute: false, type: Number })
public maxKelvin?: number; public maxKelvin?: number;
@query("#canvas") private _canvas!: HTMLCanvasElement; @query("#canvas") private _canvas!: HTMLCanvasElement;
@ -201,7 +201,7 @@ class HaHsColorPicker extends LitElement {
} }
} }
_setupListeners() { private _setupListeners() {
if (this._canvas && !this._mc) { if (this._canvas && !this._mc) {
this._mc = new Manager(this._canvas); this._mc = new Manager(this._canvas);
this._mc.add( this._mc.add(
@ -292,11 +292,11 @@ class HaHsColorPicker extends LitElement {
const _y = (2 * (y - offsetY)) / maxY - 1; const _y = (2 * (y - offsetY)) / maxY - 1;
const [r, phi] = xy2polar(_x, _y); const [r, phi] = xy2polar(_x, _y);
const [__x, __y] = polar2xy(Math.min(1, r), phi); const [xx, yy] = polar2xy(Math.min(1, r), phi);
return [__x, __y]; return [xx, yy];
}; };
_destroyListeners() { private _destroyListeners() {
if (this._mc) { if (this._mc) {
this._mc.destroy(); this._mc.destroy();
this._mc = undefined; this._mc = undefined;

2
src/components/ha-icon-button.ts
View File

@ -21,7 +21,7 @@ export class HaIconButton extends LitElement {
@property({ type: String, attribute: "aria-haspopup" }) @property({ type: String, attribute: "aria-haspopup" })
override ariaHasPopup!: IconButton["ariaHasPopup"]; override ariaHasPopup!: IconButton["ariaHasPopup"];
@property({ type: Boolean }) hideTitle = false; @property({ attribute: false, type: Boolean }) hideTitle = false;
@query("mwc-icon-button", true) private _button?: IconButton; @query("mwc-icon-button", true) private _button?: IconButton;

6
src/components/ha-language-picker.ts
View File

@ -27,11 +27,11 @@ export class HaLanguagePicker extends LitElement {
@property({ type: Boolean }) public required = false; @property({ type: Boolean }) public required = false;
@property({ type: Boolean }) public nativeName = false; @property({ attribute: false, type: Boolean }) public nativeName = false;
@property({ type: Boolean }) public noSort = false; @property({ attribute: false, type: Boolean }) public noSort = false;
@property({ type: Boolean }) public inlineArrow = false; @property({ attribute: false, type: Boolean }) public inlineArrow = false;
@state() _defaultLanguages: string[] = []; @state() _defaultLanguages: string[] = [];

2
src/components/ha-markdown-element.ts
View File

@ -19,7 +19,7 @@ const _gitHubMarkdownAlerts = {
class HaMarkdownElement extends ReactiveElement { class HaMarkdownElement extends ReactiveElement {
@property() public content?; @property() public content?;
@property({ type: Boolean }) public allowSvg = false; @property({ attribute: false, type: Boolean }) public allowSvg = false;
@property({ type: Boolean }) public breaks = false; @property({ type: Boolean }) public breaks = false;

2
src/components/ha-markdown.ts
View File

@ -7,7 +7,7 @@ import "./ha-markdown-element";
export class HaMarkdown extends LitElement { export class HaMarkdown extends LitElement {
@property() public content?; @property() public content?;
@property({ type: Boolean }) public allowSvg = false; @property({ attribute: false, type: Boolean }) public allowSvg = false;
@property({ type: Boolean }) public breaks = false; @property({ type: Boolean }) public breaks = false;

2
src/components/ha-md-dialog.ts
View File

@ -116,7 +116,7 @@ export class HaMdDialog extends MdDialog {
}); });
} }
_handleCancel(closeEvent: Event) { private _handleCancel(closeEvent: Event) {
if (this.disableCancelAction) { if (this.disableCancelAction) {
closeEvent.preventDefault(); closeEvent.preventDefault();
const dialogElement = this.shadowRoot?.querySelector("dialog .container"); const dialogElement = this.shadowRoot?.querySelector("dialog .container");

9
src/components/ha-mount-picker.ts
View File

@ -18,7 +18,7 @@ import "./ha-list-item";
import "./ha-select"; import "./ha-select";
import type { HaSelect } from "./ha-select"; import type { HaSelect } from "./ha-select";
const __BACKUP_DATA_DISK__ = "/backup"; const _BACKUP_DATA_DISK_ = "/backup";
@customElement("ha-mount-picker") @customElement("ha-mount-picker")
class HaMountPicker extends LitElement { class HaMountPicker extends LitElement {
@ -53,7 +53,7 @@ class HaMountPicker extends LitElement {
} }
const dataDiskOption = html`<ha-list-item const dataDiskOption = html`<ha-list-item
graphic="icon" graphic="icon"
.value=${__BACKUP_DATA_DISK__} .value=${_BACKUP_DATA_DISK_}
> >
<span> <span>
${this.hass.localize("ui.components.mount-picker.use_datadisk") || ${this.hass.localize("ui.components.mount-picker.use_datadisk") ||
@ -77,7 +77,7 @@ class HaMountPicker extends LitElement {
> >
${this.usage === SupervisorMountUsage.BACKUP && ${this.usage === SupervisorMountUsage.BACKUP &&
(!this._mounts.default_backup_mount || (!this._mounts.default_backup_mount ||
this._mounts.default_backup_mount === __BACKUP_DATA_DISK__) this._mounts.default_backup_mount === _BACKUP_DATA_DISK_)
? dataDiskOption ? dataDiskOption
: nothing} : nothing}
${this._filterMounts(this._mounts, this.usage).map( ${this._filterMounts(this._mounts, this.usage).map(
@ -138,8 +138,7 @@ class HaMountPicker extends LitElement {
if (isComponentLoaded(this.hass, "hassio")) { if (isComponentLoaded(this.hass, "hassio")) {
this._mounts = await fetchSupervisorMounts(this.hass); this._mounts = await fetchSupervisorMounts(this.hass);
if (this.usage === SupervisorMountUsage.BACKUP && !this.value) { if (this.usage === SupervisorMountUsage.BACKUP && !this.value) {
this.value = this.value = this._mounts.default_backup_mount || _BACKUP_DATA_DISK_;
this._mounts.default_backup_mount || __BACKUP_DATA_DISK__;
} }
} else { } else {
this._error = this.hass.localize( this._error = this.hass.localize(

12
src/components/ha-multi-textfield.ts
View File

@ -20,17 +20,17 @@ class HaMultiTextField extends LitElement {
@property() public label?: string; @property() public label?: string;
@property() public inputType?: string; @property({ attribute: false }) public inputType?: string;
@property() public inputSuffix?: string; @property({ attribute: false }) public inputSuffix?: string;
@property() public inputPrefix?: string; @property({ attribute: false }) public inputPrefix?: string;
@property() public autocomplete?: string; @property({ attribute: false }) public autocomplete?: string;
@property() public addLabel?: string; @property({ attribute: false }) public addLabel?: string;
@property() public removeLabel?: string; @property({ attribute: false }) public removeLabel?: string;
@property({ attribute: "item-index", type: Boolean }) @property({ attribute: "item-index", type: Boolean })
public itemIndex = false; public itemIndex = false;

2
src/components/ha-navigation-list.ts
View File

@ -19,7 +19,7 @@ class HaNavigationList extends LitElement {
@property({ attribute: false }) public pages!: PageNavigation[]; @property({ attribute: false }) public pages!: PageNavigation[];
@property({ type: Boolean }) public hasSecondary = false; @property({ attribute: false, type: Boolean }) public hasSecondary = false;
@property() public label?: string; @property() public label?: string;

27
src/components/ha-password-field.ts
View File

@ -23,7 +23,7 @@ export class HaPasswordField extends LitElement {
@property({ type: Boolean }) public icon = false; @property({ type: Boolean }) public icon = false;
@property({ type: Boolean }) public iconTrailing = false; @property({ attribute: false, type: Boolean }) public iconTrailing = false;
@property() public autocomplete?: string; @property() public autocomplete?: string;
@ -42,30 +42,32 @@ export class HaPasswordField extends LitElement {
@property({ type: Boolean }) required = false; @property({ type: Boolean }) required = false;
@property({ type: Number }) minLength = -1; @property({ attribute: false, type: Number }) minLength = -1;
@property({ type: Number }) maxLength = -1; @property({ attribute: false, type: Number }) maxLength = -1;
@property({ type: Boolean, reflect: true }) outlined = false; @property({ type: Boolean, reflect: true }) outlined = false;
@property({ type: String }) helper = ""; @property({ type: String }) helper = "";
@property({ type: Boolean }) validateOnInitialRender = false; @property({ attribute: false, type: Boolean }) validateOnInitialRender =
false;
@property({ type: String }) validationMessage = ""; @property({ attribute: false, type: String }) validationMessage = "";
@property({ type: Boolean }) autoValidate = false; @property({ attribute: false, type: Boolean }) autoValidate = false;
@property({ type: String }) pattern = ""; @property({ type: String }) pattern = "";
@property({ type: Number }) size: number | null = null; @property({ type: Number }) size: number | null = null;
@property({ type: Boolean }) helperPersistent = false; @property({ attribute: false, type: Boolean }) helperPersistent = false;
@property({ type: Boolean }) charCounter: boolean | TextAreaCharCounter = @property({ attribute: false, type: Boolean }) charCounter:
false; | boolean
| TextAreaCharCounter = false;
@property({ type: Boolean }) endAligned = false; @property({ attribute: false, type: Boolean }) endAligned = false;
@property({ type: String }) prefix = ""; @property({ type: String }) prefix = "";
@ -76,9 +78,10 @@ export class HaPasswordField extends LitElement {
@property({ type: String, attribute: "input-mode" }) @property({ type: String, attribute: "input-mode" })
inputMode!: string; inputMode!: string;
@property({ type: Boolean }) readOnly = false; @property({ attribute: false, type: Boolean }) readOnly = false;
@property({ type: String }) autocapitalize = ""; // eslint-disable-next-line lit/no-native-attributes
@property({ attribute: false, type: String }) autocapitalize = "";
@state() private _unmaskedPassword = false; @state() private _unmaskedPassword = false;

2
src/components/ha-picture-upload.ts
View File

@ -25,7 +25,7 @@ export class HaPictureUpload extends LitElement {
@property() public supports?: string; @property() public supports?: string;
@property() public currentImageAltText?: string; @property({ attribute: false }) public currentImageAltText?: string;
@property({ type: Boolean }) public crop = false; @property({ type: Boolean }) public crop = false;

11
src/components/ha-qr-code.ts
View File

@ -22,15 +22,8 @@ export class HaQrCode extends LitElement {
@property({ type: Number }) @property({ type: Number })
public margin = 4; public margin = 4;
@property({ type: Number }) public maskPattern?: @property({ attribute: false, type: Number })
| 0 public maskPattern?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7;
| 1
| 2
| 3
| 4
| 5
| 6
| 7;
@property({ attribute: "center-image" }) public centerImage?: string; @property({ attribute: "center-image" }) public centerImage?: string;

1
src/components/ha-qr-scanner.ts
View File

@ -160,6 +160,7 @@ class HaQrScanner extends LitElement {
if (!navigator.mediaDevices) { if (!navigator.mediaDevices) {
return; return;
} }
// eslint-disable-next-line @typescript-eslint/naming-convention
const QrScanner = (await import("qr-scanner")).default; const QrScanner = (await import("qr-scanner")).default;
if (!(await QrScanner.hasCamera())) { if (!(await QrScanner.hasCamera())) {
this._reportError("No camera found"); this._reportError("No camera found");

4
src/components/ha-related-items.ts
View File

@ -30,9 +30,9 @@ import "./ha-switch";
export class HaRelatedItems extends LitElement { export class HaRelatedItems extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant; @property({ attribute: false }) public hass!: HomeAssistant;
@property() public itemType!: ItemType; @property({ attribute: false }) public itemType!: ItemType;
@property() public itemId!: string; @property({ attribute: false }) public itemId!: string;
@state() private _entries?: ConfigEntry[]; @state() private _entries?: ConfigEntry[];

4
src/components/ha-ripple.ts
View File

@ -7,7 +7,7 @@ import { customElement } from "lit/decorators";
export class HaRipple extends MdRipple { export class HaRipple extends MdRipple {
private readonly attachableTouchController = new AttachableController( private readonly attachableTouchController = new AttachableController(
this, this,
this.onTouchControlChange.bind(this) this._onTouchControlChange.bind(this)
); );
attach(control: HTMLElement) { attach(control: HTMLElement) {
@ -27,7 +27,7 @@ export class HaRipple extends MdRipple {
} }
}; };
private onTouchControlChange( private _onTouchControlChange(
prev: HTMLElement | null, prev: HTMLElement | null,
next: HTMLElement | null next: HTMLElement | null
) { ) {

2
src/components/ha-select.ts
View File

@ -14,7 +14,7 @@ export class HaSelect extends SelectBase {
@property({ type: Boolean, reflect: true }) public clearable = false; @property({ type: Boolean, reflect: true }) public clearable = false;
@property({ type: Boolean }) public inlineArrow = false; @property({ attribute: false, type: Boolean }) public inlineArrow = false;
protected override render() { protected override render() {
return html` return html`

7
src/components/ha-service-control.ts
View File

@ -86,11 +86,12 @@ export class HaServiceControl extends LitElement {
@property({ type: Boolean, reflect: true }) public narrow = false; @property({ type: Boolean, reflect: true }) public narrow = false;
@property({ type: Boolean }) public showAdvanced = false; @property({ attribute: false, type: Boolean }) public showAdvanced = false;
@property({ type: Boolean, reflect: true }) public hidePicker = false; @property({ attribute: false, type: Boolean, reflect: true })
public hidePicker = false;
@property({ type: Boolean }) public hideDescription = false; @property({ attribute: false, type: Boolean }) public hideDescription = false;
@state() private _value!: this["value"]; @state() private _value!: this["value"];

21
src/components/ha-sidebar.ts
View File

@ -184,9 +184,9 @@ class HaSidebar extends SubscribeMixin(LitElement) {
@property({ attribute: false }) public route!: Route; @property({ attribute: false }) public route!: Route;
@property({ type: Boolean }) public alwaysExpand = false; @property({ attribute: false, type: Boolean }) public alwaysExpand = false;
@property({ type: Boolean }) public editMode = false; @property({ attribute: false, type: Boolean }) public editMode = false;
@state() private _notifications?: PersistentNotification[]; @state() private _notifications?: PersistentNotification[];
@ -284,10 +284,10 @@ class HaSidebar extends SubscribeMixin(LitElement) {
protected firstUpdated(changedProps: PropertyValues) { protected firstUpdated(changedProps: PropertyValues) {
super.firstUpdated(changedProps); super.firstUpdated(changedProps);
this.subscribePersistentNotifications(); this._subscribePersistentNotifications();
} }
private subscribePersistentNotifications(): void { private _subscribePersistentNotifications(): void {
if (this._unsubPersistentNotifications) { if (this._unsubPersistentNotifications) {
this._unsubPersistentNotifications(); this._unsubPersistentNotifications();
} }
@ -316,7 +316,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
changedProps.get("hass")?.connected === false && changedProps.get("hass")?.connected === false &&
this.hass.connected === true this.hass.connected === true
) { ) {
this.subscribePersistentNotifications(); this._subscribePersistentNotifications();
} }
this._calculateCounts(); this._calculateCounts();
@ -441,6 +441,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
: html` : html`
<a <a
role="option" role="option"
aria-selected=${urlPath === this.hass.panelUrl}
href=${`/${urlPath}`} href=${`/${urlPath}`}
data-panel=${urlPath} data-panel=${urlPath}
tabindex="-1" tabindex="-1"
@ -556,13 +557,18 @@ class HaSidebar extends SubscribeMixin(LitElement) {
return html`<a return html`<a
class="configuration-container" class="configuration-container"
role="option" role="option"
aria-selected=${this.hass.panelUrl === "config"}
href="/config" href="/config"
data-panel="config" data-panel="config"
tabindex="-1" tabindex="-1"
@mouseenter=${this._itemMouseEnter} @mouseenter=${this._itemMouseEnter}
@mouseleave=${this._itemMouseLeave} @mouseleave=${this._itemMouseLeave}
> >
<paper-icon-item class="configuration" role="option"> <paper-icon-item
class="configuration"
role="option"
aria-selected=${this.hass.panelUrl === "config"}
>
<ha-svg-icon slot="item-icon" .path=${mdiCog}></ha-svg-icon> <ha-svg-icon slot="item-icon" .path=${mdiCog}></ha-svg-icon>
${!this.alwaysExpand && ${!this.alwaysExpand &&
(this._updatesCount > 0 || this._issuesCount > 0) (this._updatesCount > 0 || this._issuesCount > 0)
@ -597,6 +603,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
<paper-icon-item <paper-icon-item
class="notifications" class="notifications"
role="option" role="option"
aria-selected="false"
@click=${this._handleShowNotificationDrawer} @click=${this._handleShowNotificationDrawer}
> >
<ha-svg-icon slot="item-icon" .path=${mdiBell}></ha-svg-icon> <ha-svg-icon slot="item-icon" .path=${mdiBell}></ha-svg-icon>
@ -628,6 +635,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
data-panel="panel" data-panel="panel"
tabindex="-1" tabindex="-1"
role="option" role="option"
aria-selected=${this.hass.panelUrl === "profile"}
aria-label=${this.hass.localize("panel.profile")} aria-label=${this.hass.localize("panel.profile")}
@mouseenter=${this._itemMouseEnter} @mouseenter=${this._itemMouseEnter}
@mouseleave=${this._itemMouseLeave} @mouseleave=${this._itemMouseLeave}
@ -657,6 +665,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
)} )}
href="#external-app-configuration" href="#external-app-configuration"
tabindex="-1" tabindex="-1"
aria-selected="false"
@click=${this._handleExternalAppConfiguration} @click=${this._handleExternalAppConfiguration}
@mouseenter=${this._itemMouseEnter} @mouseenter=${this._itemMouseEnter}
@mouseleave=${this._itemMouseLeave} @mouseleave=${this._itemMouseLeave}

1
src/components/ha-sortable.ts
View File

@ -132,6 +132,7 @@ export class HaSortable extends LitElement {
if (!container) return; if (!container) return;
// eslint-disable-next-line @typescript-eslint/naming-convention
const Sortable = (await import("../resources/sortable")).default; const Sortable = (await import("../resources/sortable")).default;
const options: SortableInstance.Options = { const options: SortableInstance.Options = {

4
src/components/ha-svg-icon.ts
View File

@ -6,9 +6,9 @@ import { customElement, property } from "lit/decorators";
export class HaSvgIcon extends LitElement { export class HaSvgIcon extends LitElement {
@property() public path?: string; @property() public path?: string;
@property() public secondaryPath?: string; @property({ attribute: false }) public secondaryPath?: string;
@property() public viewBox?: string; @property({ attribute: false }) public viewBox?: string;
protected render(): SVGTemplateResult { protected render(): SVGTemplateResult {
return svg` return svg`

3
src/components/ha-tabs.ts
View File

@ -5,6 +5,7 @@ import type { PaperTabsElement } from "@polymer/paper-tabs/paper-tabs";
import { customElement } from "lit/decorators"; import { customElement } from "lit/decorators";
import type { Constructor } from "../types"; import type { Constructor } from "../types";
// eslint-disable-next-line @typescript-eslint/naming-convention
const PaperTabs = customElements.get( const PaperTabs = customElements.get(
"paper-tabs" "paper-tabs"
) as Constructor<PaperTabsElement>; ) as Constructor<PaperTabsElement>;
@ -53,6 +54,7 @@ export class HaTabs extends PaperTabs {
} }
// Get first and last tab's width for _affectScroll // Get first and last tab's width for _affectScroll
// eslint-disable-next-line @typescript-eslint/naming-convention
public _tabChanged(tab: PaperTabElement, old: PaperTabElement): void { public _tabChanged(tab: PaperTabElement, old: PaperTabElement): void {
super._tabChanged(tab, old); super._tabChanged(tab, old);
const tabs = this.querySelectorAll("paper-tab:not(.hide-tab)"); const tabs = this.querySelectorAll("paper-tab:not(.hide-tab)");
@ -74,6 +76,7 @@ export class HaTabs extends PaperTabs {
* while scrolling and the tab container shrinks we can counteract * while scrolling and the tab container shrinks we can counteract
* the jump in tab position so that the scroll still appears smooth. * the jump in tab position so that the scroll still appears smooth.
*/ */
// eslint-disable-next-line @typescript-eslint/naming-convention
public _affectScroll(dx: number): void { public _affectScroll(dx: number): void {
if (this._firstTabWidth === 0 || this._lastTabWidth === 0) { if (this._firstTabWidth === 0 || this._lastTabWidth === 0) {
return; return;

4
src/components/ha-target-picker.ts
View File

@ -58,7 +58,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
@property() public helper?: string; @property() public helper?: string;
@property({ type: Array }) public createDomains?: string[]; @property({ attribute: false, type: Array }) public createDomains?: string[];
/** /**
* Show only targets with entities from specific domains. * Show only targets with entities from specific domains.
@ -84,7 +84,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
@property({ type: Boolean, reflect: true }) public disabled = false; @property({ type: Boolean, reflect: true }) public disabled = false;
@property({ type: Boolean }) public addOnTop = false; @property({ attribute: false, type: Boolean }) public addOnTop = false;
@state() private _addMode?: @state() private _addMode?:
| "area_id" | "area_id"

2
src/components/ha-textfield.ts
View File

@ -15,7 +15,7 @@ export class HaTextField extends TextFieldBase {
@property({ type: Boolean }) public icon = false; @property({ type: Boolean }) public icon = false;
// @ts-ignore // @ts-ignore
@property({ type: Boolean }) public iconTrailing = false; @property({ attribute: false, type: Boolean }) public iconTrailing = false;
@property() public autocomplete?: string; @property() public autocomplete?: string;

2
src/components/ha-theme-picker.ts
View File

@ -15,7 +15,7 @@ export class HaThemePicker extends LitElement {
@property() public label?: string; @property() public label?: string;
@property({ type: Boolean }) includeDefault = false; @property({ attribute: false, type: Boolean }) includeDefault = false;
@property({ attribute: false }) public hass?: HomeAssistant; @property({ attribute: false }) public hass?: HomeAssistant;

Some files were not shown because too many files have changed in this diff Show More