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

Add compatibility for Lit 2.0 (#8878)

Browse Source
This commit is contained in:
Bram Kragten 2021-05-07 22:16:14 +02:00 committed by GitHub
parent 0f58214ba1
commit 9f032a61a9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
521 changed files with 2512 additions and 2510 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
cast/src/launcher/layout/hc-cast.ts
View File

@ -3,12 +3,12 @@ import "@polymer/paper-listbox/paper-listbox";
import { Auth, Connection } from "home-assistant-js-websocket";
import {
css,
CSSResult,
CSSResultGroup,
customElement,
html,
LitElement,
property,
internalProperty,
state,
TemplateResult,
} from "lit-element";
import { CastManager } from "../../../../src/cast/cast_manager";
@ -42,9 +42,9 @@ class HcCast extends LitElement {
@property() public castManager!: CastManager;
@internalProperty() private askWrite = false;
@state() private askWrite = false;
@internalProperty() private lovelaceConfig?: LovelaceConfig | null;
@state() private lovelaceConfig?: LovelaceConfig | null;
protected render(): TemplateResult {
if (this.lovelaceConfig === undefined) {
@ -204,7 +204,7 @@ class HcCast extends LitElement {
}
}
static get styles(): CSSResult {
static get styles(): CSSResultGroup {
return css`
.center-item {
display: flex;

18
cast/src/launcher/layout/hc-connect.ts
View File

@ -13,12 +13,12 @@ import {
} from "home-assistant-js-websocket";
import {
css,
CSSResult,
CSSResultGroup,
customElement,
html,
LitElement,
TemplateResult,
internalProperty,
state,
} from "lit-element";
import { CastManager, getCastManager } from "../../../../src/cast/cast_manager";
import { castSendShowDemo } from "../../../../src/cast/receiver_messages";
@ -60,19 +60,19 @@ const INTRO = html`
@customElement("hc-connect")
export class HcConnect extends LitElement {
@internalProperty() private loading = false;
@state() private loading = false;
// If we had stored credentials but we cannot connect,
// show a screen asking retry or logout.
@internalProperty() private cannotConnect = false;
@state() private cannotConnect = false;
@internalProperty() private error?: string | TemplateResult;
@state() private error?: string | TemplateResult;
@internalProperty() private auth?: Auth;
@state() private auth?: Auth;
@internalProperty() private connection?: Connection;
@state() private connection?: Connection;
@internalProperty() private castManager?: CastManager | null;
@state() private castManager?: CastManager | null;
private openDemo = false;
@ -297,7 +297,7 @@ export class HcConnect extends LitElement {
}
}
static get styles(): CSSResult {
static get styles(): CSSResultGroup {
return css`
.card-content a {
color: var(--primary-color);

4
cast/src/launcher/layout/hc-layout.ts
View File

@ -6,7 +6,7 @@ import {
} from "home-assistant-js-websocket";
import {
css,
CSSResult,
CSSResultGroup,
customElement,
html,
LitElement,
@ -69,7 +69,7 @@ class HcLayout extends LitElement {
}
}
static get styles(): CSSResult {
static get styles(): CSSResultGroup {
return css`
:host {
display: flex;

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

@ -1,7 +1,7 @@
import {
customElement,
html,
internalProperty,
state,
property,
TemplateResult,
} from "lit-element";
@ -21,7 +21,7 @@ import "./hc-lovelace";
class HcDemo extends HassElement {
@property({ attribute: false }) public lovelacePath!: string;
@internalProperty() private _lovelaceConfig?: LovelaceConfig;
@state() private _lovelaceConfig?: LovelaceConfig;
protected render(): TemplateResult {
if (!this._lovelaceConfig) {

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

@ -1,6 +1,6 @@
import {
css,
CSSResult,
CSSResultGroup,
customElement,
html,
LitElement,
@ -29,7 +29,7 @@ class HcLaunchScreen extends LitElement {
`;
}
static get styles(): CSSResult {
static get styles(): CSSResultGroup {
return css`
:host {
display: block;

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

@ -1,6 +1,6 @@
import {
css,
CSSResult,
CSSResultGroup,
customElement,
html,
LitElement,
@ -91,7 +91,7 @@ class HcLovelace extends LitElement {
return undefined;
}
static get styles(): CSSResult {
static get styles(): CSSResultGroup {
return css`
:host {
min-height: 100vh;

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

@ -3,12 +3,7 @@ import {
getAuth,
UnsubscribeFunc,
} from "home-assistant-js-websocket";
import {
customElement,
html,
internalProperty,
TemplateResult,
} from "lit-element";
import { customElement, html, state, TemplateResult } from "lit-element";
import { CAST_NS } from "../../../../src/cast/const";
import {
ConnectMessage,
@ -36,13 +31,13 @@ let resourcesLoaded = false;
@customElement("hc-main")
export class HcMain extends HassElement {
@internalProperty() private _showDemo = false;
@state() private _showDemo = false;
@internalProperty() private _lovelaceConfig?: LovelaceConfig;
@state() private _lovelaceConfig?: LovelaceConfig;
@internalProperty() private _lovelacePath: string | number | null = null;
@state() private _lovelacePath: string | number | null = null;
@internalProperty() private _error?: string;
@state() private _error?: string;
private _unsubLovelace?: UnsubscribeFunc;

8
demo/src/custom-cards/cast-demo-row.ts
View File

@ -1,9 +1,9 @@
import {
css,
CSSResult,
CSSResultGroup,
customElement,
html,
internalProperty,
state,
LitElement,
TemplateResult,
} from "lit-element";
@ -20,7 +20,7 @@ import { HomeAssistant } from "../../../src/types";
class CastDemoRow extends LitElement implements LovelaceRow {
public hass!: HomeAssistant;
@internalProperty() private _castManager?: CastManager | null;
@state() private _castManager?: CastManager | null;
public setConfig(_config: CastConfig): void {
// No config possible.
@ -73,7 +73,7 @@ class CastDemoRow extends LitElement implements LovelaceRow {
this.style.display = this._castManager ? "" : "none";
}
static get styles(): CSSResult {
static get styles(): CSSResultGroup {
return css`
:host {
display: flex;

8
demo/src/custom-cards/ha-demo-card.ts
View File

@ -1,9 +1,9 @@
import "@material/mwc-button";
import {
css,
CSSResult,
CSSResultGroup,
html,
internalProperty,
state,
LitElement,
property,
TemplateResult,
@ -26,7 +26,7 @@ export class HADemoCard extends LitElement implements LovelaceCard {
@property({ attribute: false }) public hass!: MockHomeAssistant;
@internalProperty() private _switching?: boolean;
@state() private _switching?: boolean;
private _hidden = localStorage.hide_demo_card;
@ -113,7 +113,7 @@ export class HADemoCard extends LitElement implements LovelaceCard {
}
}
static get styles(): CSSResult[] {
static get styles(): CSSResultGroup {
return [
css`
a {

4
gallery/src/demos/demo-automation-trace.ts
View File

@ -4,7 +4,7 @@ import {
css,
LitElement,
TemplateResult,
internalProperty,
state,
property,
} from "lit-element";
import "../../../src/components/ha-card";
@ -22,7 +22,7 @@ const traces: DemoTrace[] = [basicTrace, motionLightTrace];
export class DemoAutomationTrace extends LitElement {
@property({ attribute: false }) hass?: HomeAssistant;
@internalProperty() private _selected = {};
@state() private _selected = {};
protected render(): TemplateResult {
if (!this.hass) {

6
gallery/src/demos/demo-integration-card.ts
View File

@ -2,7 +2,7 @@ import {
customElement,
html,
css,
internalProperty,
state,
LitElement,
TemplateResult,
property,
@ -220,9 +220,9 @@ const createDeviceRegistryEntries = (
export class DemoIntegrationCard extends LitElement {
@property({ attribute: false }) hass?: HomeAssistant;
@internalProperty() isCustomIntegration = false;
@state() isCustomIntegration = false;
@internalProperty() isCloud = false;
@state() isCloud = false;
protected render(): TemplateResult {
if (!this.hass) {

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

@ -1,7 +1,7 @@
import { mdiArrowUpBoldCircle, mdiPuzzle } from "@mdi/js";
import {
css,
CSSResultArray,
CSSResultGroup,
html,
LitElement,
property,
@ -129,7 +129,7 @@ class HassioAddonRepositoryEl extends LitElement {
navigate(this, `/hassio/addon/${ev.currentTarget.addon.slug}`);
}
static get styles(): CSSResultArray {
static get styles(): CSSResultGroup {
return [
hassioStyle,
css`

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

@ -4,8 +4,8 @@ import "@material/mwc-list/mwc-list-item";
import { mdiDotsVertical } from "@mdi/js";
import {
css,
CSSResult,
internalProperty,
CSSResultGroup,
state,
LitElement,
property,
PropertyValues,
@ -58,7 +58,7 @@ class HassioAddonStore extends LitElement {
@property({ attribute: false }) public route!: Route;
@internalProperty() private _filter?: string;
@state() private _filter?: string;
public async refreshData() {
await reloadHassioAddons(this.hass);
@ -218,7 +218,7 @@ class HassioAddonStore extends LitElement {
this._filter = e.detail.value;
}
static get styles(): CSSResult {
static get styles(): CSSResultGroup {
return css`
hassio-addon-repository {
margin-top: 24px;

16
hassio/src/addon-view/config/hassio-addon-audio.ts
View File

@ -4,10 +4,10 @@ import "@polymer/paper-item/paper-item";
import "@polymer/paper-listbox/paper-listbox";
import {
css,
CSSResult,
CSSResultGroup,
customElement,
html,
internalProperty,
state,
LitElement,
property,
PropertyValues,
@ -39,15 +39,15 @@ class HassioAddonAudio extends LitElement {
@property({ attribute: false }) public addon!: HassioAddonDetails;
@internalProperty() private _error?: string;
@state() private _error?: string;
@internalProperty() private _inputDevices?: HassioHardwareAudioDevice[];
@state() private _inputDevices?: HassioHardwareAudioDevice[];
@internalProperty() private _outputDevices?: HassioHardwareAudioDevice[];
@state() private _outputDevices?: HassioHardwareAudioDevice[];
@internalProperty() private _selectedInput!: null | string;
@state() private _selectedInput!: null | string;
@internalProperty() private _selectedOutput!: null | string;
@state() private _selectedOutput!: null | string;
protected render(): TemplateResult {
return html`
@ -109,7 +109,7 @@ class HassioAddonAudio extends LitElement {
`;
}
static get styles(): CSSResult[] {
static get styles(): CSSResultGroup {
return [
haStyle,
hassioStyle,

4
hassio/src/addon-view/config/hassio-addon-config-tab.ts
View File

@ -1,6 +1,6 @@
import {
css,
CSSResult,
CSSResultGroup,
customElement,
html,
LitElement,
@ -70,7 +70,7 @@ class HassioAddonConfigDashboard extends LitElement {
`;
}
static get styles(): CSSResult[] {
static get styles(): CSSResultGroup {
return [
haStyle,
hassioStyle,

16
hassio/src/addon-view/config/hassio-addon-config.ts
View File

@ -5,10 +5,10 @@ import { mdiDotsVertical } from "@mdi/js";
import "@polymer/iron-autogrow-textarea/iron-autogrow-textarea";
import {
css,
CSSResult,
CSSResultGroup,
customElement,
html,
internalProperty,
state,
LitElement,
property,
PropertyValues,
@ -53,15 +53,15 @@ class HassioAddonConfig extends LitElement {
@property({ type: Boolean }) private _valid = true;
@internalProperty() private _canShowSchema = false;
@state() private _canShowSchema = false;
@internalProperty() private _showOptional = false;
@state() private _showOptional = false;
@internalProperty() private _error?: string;
@state() private _error?: string;
@internalProperty() private _options?: Record<string, unknown>;
@state() private _options?: Record<string, unknown>;
@internalProperty() private _yamlMode = false;
@state() private _yamlMode = false;
@query("ha-yaml-editor") private _editor?: HaYamlEditor;
@ -292,7 +292,7 @@ class HassioAddonConfig extends LitElement {
fireEvent(this, "hass-api-called", eventdata);
}
static get styles(): CSSResult[] {
static get styles(): CSSResultGroup {
return [
haStyle,
hassioStyle,

10
hassio/src/addon-view/config/hassio-addon-network.ts
View File

@ -1,10 +1,10 @@
import { PaperInputElement } from "@polymer/paper-input/paper-input";
import {
css,
CSSResult,
CSSResultGroup,
customElement,
html,
internalProperty,
state,
LitElement,
property,
PropertyValues,
@ -43,9 +43,9 @@ class HassioAddonNetwork extends LitElement {
@property({ attribute: false }) public addon!: HassioAddonDetails;
@internalProperty() private _error?: string;
@state() private _error?: string;
@internalProperty() private _config?: NetworkItem[];
@state() private _config?: NetworkItem[];
public connectedCallback(): void {
super.connectedCallback();
@ -216,7 +216,7 @@ class HassioAddonNetwork extends LitElement {
button.progress = false;
}
static get styles(): CSSResult[] {
static get styles(): CSSResultGroup {
return [
haStyle,
hassioStyle,

10
hassio/src/addon-view/documentation/hassio-addon-documentation-tab.ts
View File

@ -1,10 +1,10 @@
import "../../../../src/components/ha-card";
import {
css,
CSSResult,
CSSResultGroup,
customElement,
html,
internalProperty,
state,
LitElement,
property,
TemplateResult,
@ -30,9 +30,9 @@ class HassioAddonDocumentationDashboard extends LitElement {
@property({ attribute: false }) public addon?: HassioAddonDetails;
@internalProperty() private _error?: string;
@state() private _error?: string;
@internalProperty() private _content?: string;
@state() private _content?: string;
public async connectedCallback(): Promise<void> {
super.connectedCallback();
@ -57,7 +57,7 @@ class HassioAddonDocumentationDashboard extends LitElement {
`;
}
static get styles(): CSSResult[] {
static get styles(): CSSResultGroup {
return [
haStyle,
hassioStyle,

8
hassio/src/addon-view/hassio-addon-dashboard.ts
View File

@ -6,10 +6,10 @@ import {
} from "@mdi/js";
import {
css,
CSSResult,
CSSResultGroup,
customElement,
html,
internalProperty,
state,
LitElement,
property,
TemplateResult,
@ -52,7 +52,7 @@ class HassioAddonDashboard extends LitElement {
@property({ type: Boolean }) public narrow!: boolean;
@internalProperty() _error?: string;
@state() _error?: string;
private _computeTail = memoizeOne((route: Route) => {
const dividerPos = route.path.indexOf("/", 1);
@ -133,7 +133,7 @@ class HassioAddonDashboard extends LitElement {
`;
}
static get styles(): CSSResult[] {
static get styles(): CSSResultGroup {
return [
haStyle,
hassioStyle,

4
hassio/src/addon-view/info/hassio-addon-info-tab.ts
View File

@ -1,6 +1,6 @@
import {
css,
CSSResult,
CSSResultGroup,
customElement,
html,
LitElement,
@ -42,7 +42,7 @@ class HassioAddonInfoDashboard extends LitElement {
`;
}
static get styles(): CSSResult[] {
static get styles(): CSSResultGroup {
return [
haStyle,
hassioStyle,

10
hassio/src/addon-view/info/hassio-addon-info.ts
View File

@ -16,10 +16,10 @@ import {
} from "@mdi/js";
import {
css,
CSSResult,
CSSResultGroup,
customElement,
html,
internalProperty,
state,
LitElement,
property,
TemplateResult,
@ -90,9 +90,9 @@ class HassioAddonInfo extends LitElement {
@property({ attribute: false }) public supervisor!: Supervisor;
@internalProperty() private _metrics?: HassioStats;
@state() private _metrics?: HassioStats;
@internalProperty() private _error?: string;
@state() private _error?: string;
private _addonStoreInfo = memoizeOne(
(slug: string, storeAddons: StoreAddon[]) =>
@ -1098,7 +1098,7 @@ class HassioAddonInfo extends LitElement {
button.progress = false;
}
static get styles(): CSSResult[] {
static get styles(): CSSResultGroup {
return [
haStyle,
hassioStyle,

4
hassio/src/addon-view/log/hassio-addon-log-tab.ts
View File

@ -1,6 +1,6 @@
import {
css,
CSSResult,
CSSResultGroup,
customElement,
html,
LitElement,
@ -38,7 +38,7 @@ class HassioAddonLogDashboard extends LitElement {
`;
}
static get styles(): CSSResult[] {
static get styles(): CSSResultGroup {
return [
haStyle,
hassioStyle,

10
hassio/src/addon-view/log/hassio-addon-logs.ts
View File

@ -1,10 +1,10 @@
import "@material/mwc-button";
import {
css,
CSSResult,
CSSResultGroup,
customElement,
html,
internalProperty,
state,
LitElement,
property,
TemplateResult,
@ -29,9 +29,9 @@ class HassioAddonLogs extends LitElement {
@property({ attribute: false }) public addon!: HassioAddonDetails;
@internalProperty() private _error?: string;
@state() private _error?: string;
@internalProperty() private _content?: string;
@state() private _content?: string;
public async connectedCallback(): Promise<void> {
super.connectedCallback();
@ -59,7 +59,7 @@ class HassioAddonLogs extends LitElement {
`;
}
static get styles(): CSSResult[] {
static get styles(): CSSResultGroup {
return [
haStyle,
hassioStyle,

4
hassio/src/components/hassio-ansi-to-html.ts
View File

@ -1,6 +1,6 @@
import {
css,
CSSResult,
CSSResultGroup,
customElement,
html,
LitElement,
@ -25,7 +25,7 @@ class HassioAnsiToHtml extends LitElement {
return html`${this._parseTextToColoredPre(this.content)}`;
}
static get styles(): CSSResult {
static get styles(): CSSResultGroup {
return css`
pre {
overflow-x: auto;

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

@ -1,7 +1,7 @@
import { mdiHelpCircle } from "@mdi/js";
import {
css,
CSSResult,
CSSResultGroup,
customElement,
html,
LitElement,
@ -77,7 +77,7 @@ class HassioCardContent extends LitElement {
`;
}
static get styles(): CSSResult {
static get styles(): CSSResultGroup {
return css`
ha-svg-icon {
margin-right: 24px;

6
hassio/src/components/hassio-upload-snapshot.ts
View File

@ -5,7 +5,7 @@ import "@polymer/paper-input/paper-input-container";
import {
customElement,
html,
internalProperty,
state,
LitElement,
TemplateResult,
} from "lit-element";
@ -33,9 +33,9 @@ const MAX_FILE_SIZE = 1 * 1024 * 1024 * 1024; // 1GB
export class HassioUploadSnapshot extends LitElement {
public hass!: HomeAssistant;
@internalProperty() public value: string | null = null;
@state() public value: string | null = null;
@internalProperty() private _uploading = false;
@state() private _uploading = false;
public render(): TemplateResult {
return html`

4
hassio/src/components/supervisor-metric.ts
View File

@ -1,6 +1,6 @@
import {
css,
CSSResult,
CSSResultGroup,
customElement,
html,
LitElement,
@ -37,7 +37,7 @@ class SupervisorMetric extends LitElement {
</ha-settings-row>`;
}
static get styles(): CSSResult {
static get styles(): CSSResultGroup {
return css`
ha-settings-row {
padding: 0;

4
hassio/src/dashboard/hassio-addons.ts
View File

@ -1,7 +1,7 @@
import { mdiArrowUpBoldCircle, mdiPuzzle } from "@mdi/js";
import {
css,
CSSResult,
CSSResultGroup,
customElement,
html,
LitElement,
@ -90,7 +90,7 @@ class HassioAddons extends LitElement {
`;
}
static get styles(): CSSResult[] {
static get styles(): CSSResultGroup {
return [
haStyle,
hassioStyle,

4
hassio/src/dashboard/hassio-dashboard.ts
View File

@ -1,6 +1,6 @@
import {
css,
CSSResult,
CSSResultGroup,
customElement,
html,
LitElement,
@ -53,7 +53,7 @@ class HassioDashboard extends LitElement {
`;
}
static get styles(): CSSResult[] {
static get styles(): CSSResultGroup {
return [
haStyle,
css`

4
hassio/src/dashboard/hassio-update.ts
View File

@ -2,7 +2,7 @@ import "@material/mwc-button";
import { mdiHomeAssistant } from "@mdi/js";
import {
css,
CSSResult,
CSSResultGroup,
customElement,
html,
LitElement,
@ -233,7 +233,7 @@ export class HassioUpdate extends LitElement {
});
}
static get styles(): CSSResult[] {
static get styles(): CSSResultGroup {
return [
haStyle,
hassioStyle,

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

@ -1,9 +1,9 @@
import {
css,
CSSResult,
CSSResultGroup,
customElement,
html,
internalProperty,
state,
LitElement,
property,
TemplateResult,
@ -23,7 +23,7 @@ class HassioMarkdownDialog extends LitElement {
@property() public content!: string;
@internalProperty() private _opened = false;
@state() private _opened = false;
public showDialog(params: HassioMarkdownDialogParams) {
this.title = params.title;
@ -50,7 +50,7 @@ class HassioMarkdownDialog extends LitElement {
`;
}
static get styles(): CSSResult[] {
static get styles(): CSSResultGroup {
return [
haStyleDialog,
hassioStyle,

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

@ -8,10 +8,10 @@ import { mdiClose } from "@mdi/js";
import { PaperInputElement } from "@polymer/paper-input/paper-input";
import {
css,
CSSResult,
CSSResultGroup,
customElement,
html,
internalProperty,
state,
LitElement,
property,
TemplateResult,
@ -54,23 +54,23 @@ export class DialogHassioNetwork
@property({ attribute: false }) public supervisor!: Supervisor;
@internalProperty() private _accessPoints?: AccessPoints;
@state() private _accessPoints?: AccessPoints;
@internalProperty() private _curTabIndex = 0;
@state() private _curTabIndex = 0;
@internalProperty() private _dirty = false;
@state() private _dirty = false;
@internalProperty() private _interface?: NetworkInterface;
@state() private _interface?: NetworkInterface;
@internalProperty() private _interfaces!: NetworkInterface[];
@state() private _interfaces!: NetworkInterface[];
@internalProperty() private _params?: HassioNetworkDialogParams;
@state() private _params?: HassioNetworkDialogParams;
@internalProperty() private _processing = false;
@state() private _processing = false;
@internalProperty() private _scanning = false;
@state() private _scanning = false;
@internalProperty() private _wifiConfiguration?: WifiConfiguration;
@state() private _wifiConfiguration?: WifiConfiguration;
public async showDialog(params: HassioNetworkDialogParams): Promise<void> {
this._params = params;
@ -543,7 +543,7 @@ export class DialogHassioNetwork
this._wifiConfiguration![id] = value;
}
static get styles(): CSSResult[] {
static get styles(): CSSResultGroup {
return [
haStyleDialog,
css`

16
hassio/src/dialogs/registries/dialog-hassio-registries.ts
View File

@ -5,10 +5,10 @@ import { mdiDelete } from "@mdi/js";
import { PaperInputElement } from "@polymer/paper-input/paper-input";
import {
css,
CSSResult,
CSSResultGroup,
customElement,
html,
internalProperty,
state,
LitElement,
property,
TemplateResult,
@ -39,15 +39,15 @@ class HassioRegistriesDialog extends LitElement {
username: string;
}[];
@internalProperty() private _registry?: string;
@state() private _registry?: string;
@internalProperty() private _username?: string;
@state() private _username?: string;
@internalProperty() private _password?: string;
@state() private _password?: string;
@internalProperty() private _opened = false;
@state() private _opened = false;
@internalProperty() private _addingRegistry = false;
@state() private _addingRegistry = false;
protected render(): TemplateResult {
return html`
@ -220,7 +220,7 @@ class HassioRegistriesDialog extends LitElement {
}
}
static get styles(): CSSResult[] {
static get styles(): CSSResultGroup {
return [
haStyle,
haStyleDialog,

16
hassio/src/dialogs/repositories/dialog-hassio-repositories.ts
View File

@ -7,10 +7,10 @@ import "@polymer/paper-item/paper-item";
import "@polymer/paper-item/paper-item-body";
import {
css,
CSSResult,
CSSResultGroup,
customElement,
html,
internalProperty,
state,
LitElement,
property,
query,
@ -37,15 +37,15 @@ class HassioRepositoriesDialog extends LitElement {
@query("#repository_input", true) private _optionInput?: PaperInputElement;
@internalProperty() private _repositories?: HassioAddonRepository[];
@state() private _repositories?: HassioAddonRepository[];
@internalProperty() private _dialogParams?: HassioRepositoryDialogParams;
@state() private _dialogParams?: HassioRepositoryDialogParams;
@internalProperty() private _opened = false;
@state() private _opened = false;
@internalProperty() private _processing = false;
@state() private _processing = false;
@internalProperty() private _error?: string;
@state() private _error?: string;
public async showDialog(
dialogParams: HassioRepositoryDialogParams
@ -137,7 +137,7 @@ class HassioRepositoriesDialog extends LitElement {
`;
}
static get styles(): CSSResult[] {
static get styles(): CSSResultGroup {
return [
haStyle,
haStyleDialog,

8
hassio/src/dialogs/snapshot/dialog-hassio-snapshot-upload.ts
View File

@ -1,10 +1,10 @@
import { mdiClose } from "@mdi/js";
import {
css,
CSSResult,
CSSResultGroup,
customElement,
html,
internalProperty,
state,
LitElement,
property,
TemplateResult,
@ -23,7 +23,7 @@ export class DialogHassioSnapshotUpload
implements HassDialog<HassioSnapshotUploadDialogParams> {
@property({ attribute: false }) public hass!: HomeAssistant;
@internalProperty() private _params?: HassioSnapshotUploadDialogParams;
@state() private _params?: HassioSnapshotUploadDialogParams;
public async showDialog(
params: HassioSnapshotUploadDialogParams
@ -78,7 +78,7 @@ export class DialogHassioSnapshotUpload
this.closeDialog();
}
static get styles(): CSSResult[] {
static get styles(): CSSResultGroup {
return [
haStyleDialog,
css`

22
hassio/src/dialogs/snapshot/dialog-hassio-snapshot.ts
View File

@ -5,10 +5,10 @@ import type { PaperCheckboxElement } from "@polymer/paper-checkbox/paper-checkbo
import "@polymer/paper-input/paper-input";
import {
css,
CSSResult,
CSSResultGroup,
customElement,
html,
internalProperty,
state,
LitElement,
property,
TemplateResult,
@ -80,21 +80,21 @@ class HassioSnapshotDialog extends LitElement {
@property({ attribute: false }) public supervisor?: Supervisor;
@internalProperty() private _error?: string;
@state() private _error?: string;
@internalProperty() private _onboarding = false;
@state() private _onboarding = false;
@internalProperty() private _snapshot?: HassioSnapshotDetail;
@state() private _snapshot?: HassioSnapshotDetail;
@internalProperty() private _folders!: FolderItem[];
@state() private _folders!: FolderItem[];
@internalProperty() private _addons!: AddonItem[];
@state() private _addons!: AddonItem[];
@internalProperty() private _dialogParams?: HassioSnapshotDialogParams;
@state() private _dialogParams?: HassioSnapshotDialogParams;
@internalProperty() private _snapshotPassword!: string;
@state() private _snapshotPassword!: string;
@internalProperty() private _restoreHass = true;
@state() private _restoreHass = true;
public async showDialog(params: HassioSnapshotDialogParams) {
this._snapshot = await fetchHassioSnapshotInfo(this.hass, params.slug);
@ -235,7 +235,7 @@ class HassioSnapshotDialog extends LitElement {
`;
}
static get styles(): CSSResult[] {
static get styles(): CSSResultGroup {
return [
haStyle,
haStyleDialog,

16
hassio/src/dialogs/update/dialog-supervisor-update.ts
View File

@ -1,10 +1,10 @@
import "@material/mwc-button/mwc-button";
import {
css,
CSSResult,
CSSResultGroup,
customElement,
html,
internalProperty,
state,
LitElement,
TemplateResult,
} from "lit-element";
@ -27,15 +27,15 @@ import { SupervisorDialogSupervisorUpdateParams } from "./show-dialog-update";
class DialogSupervisorUpdate extends LitElement {
public hass!: HomeAssistant;
@internalProperty() private _opened = false;
@state() private _opened = false;
@internalProperty() private _createSnapshot = true;
@state() private _createSnapshot = true;
@internalProperty() private _action: "snapshot" | "update" | null = null;
@state() private _action: "snapshot" | "update" | null = null;
@internalProperty() private _error?: string;
@state() private _error?: string;
@internalProperty()
@state()
private _dialogParams?: SupervisorDialogSupervisorUpdateParams;
public async showDialog(
@ -173,7 +173,7 @@ class DialogSupervisorUpdate extends LitElement {
this.closeDialog();
}
static get styles(): CSSResult[] {
static get styles(): CSSResultGroup {
return [
haStyle,
haStyleDialog,

4
hassio/src/hassio-my-redirect.ts
View File

@ -1,7 +1,7 @@
import {
customElement,
html,
internalProperty,
state,
LitElement,
property,
TemplateResult,
@ -59,7 +59,7 @@ class HassioMyRedirect extends LitElement {
@property({ attribute: false }) public route!: Route;
@internalProperty() public _error?: TemplateResult | string;
@state() public _error?: TemplateResult | string;
connectedCallback() {
super.connectedCallback();

4
hassio/src/hassio-panel.ts
View File

@ -1,6 +1,6 @@
import {
css,
CSSResult,
CSSResultGroup,
customElement,
html,
LitElement,
@ -46,7 +46,7 @@ class HassioPanel extends LitElement {
`;
}
static get styles(): CSSResult {
static get styles(): CSSResultGroup {
return css`
:host {
--app-header-background-color: var(--sidebar-background-color);

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

@ -1,10 +1,10 @@
import { mdiMenu } from "@mdi/js";
import {
css,
CSSResult,
CSSResultGroup,
customElement,
html,
internalProperty,
state,
LitElement,
property,
PropertyValues,
@ -33,7 +33,7 @@ class HassioIngressView extends LitElement {
@property() public ingressPanel = false;
@internalProperty() private _addon?: HassioAddonDetails;
@state() private _addon?: HassioAddonDetails;
@property({ type: Boolean })
public narrow = false;
@ -162,7 +162,7 @@ class HassioIngressView extends LitElement {
fireEvent(this, "hass-toggle-menu");
}
static get styles(): CSSResult {
static get styles(): CSSResultGroup {
return css`
iframe {
display: block;

22
hassio/src/snapshots/hassio-snapshots.ts
View File

@ -16,10 +16,10 @@ import "@polymer/paper-radio-group/paper-radio-group";
import type { PaperRadioGroupElement } from "@polymer/paper-radio-group/paper-radio-group";
import {
css,
CSSResultArray,
CSSResultGroup,
customElement,
html,
internalProperty,
state,
LitElement,
property,
PropertyValues,
@ -69,19 +69,19 @@ class HassioSnapshots extends LitElement {
@property({ attribute: false }) public supervisor!: Supervisor;
@internalProperty() private _snapshotName = "";
@state() private _snapshotName = "";
@internalProperty() private _snapshotPassword = "";
@state() private _snapshotPassword = "";
@internalProperty() private _snapshotHasPassword = false;
@state() private _snapshotHasPassword = false;
@internalProperty() private _snapshotType: HassioSnapshot["type"] = "full";
@state() private _snapshotType: HassioSnapshot["type"] = "full";
@internalProperty() private _snapshots?: HassioSnapshot[] = [];
@state() private _snapshots?: HassioSnapshot[] = [];
@internalProperty() private _addonList: CheckboxItem[] = [];
@state() private _addonList: CheckboxItem[] = [];
@internalProperty() private _folderList: CheckboxItem[] = [
@state() private _folderList: CheckboxItem[] = [
{
slug: "homeassistant",
checked: true,
@ -92,7 +92,7 @@ class HassioSnapshots extends LitElement {
{ slug: "addons/local", checked: true },
];
@internalProperty() private _error = "";
@state() private _error = "";
public async refreshData() {
await reloadHassioSnapshots(this.hass);
@ -428,7 +428,7 @@ class HassioSnapshots extends LitElement {
});
}
static get styles(): CSSResultArray {
static get styles(): CSSResultGroup {
return [
haStyle,
hassioStyle,

16
hassio/src/supervisor-base-element.ts
View File

@ -1,10 +1,5 @@
import { Collection, UnsubscribeFunc } from "home-assistant-js-websocket";
import {
internalProperty,
LitElement,
property,
PropertyValues,
} from "lit-element";
import { state, LitElement, property, PropertyValues } from "lit-element";
import { atLeastVersion } from "../../src/common/config/version";
import { computeLocalize } from "../../src/common/translations/localize";
import { fetchHassioAddonsInfo } from "../../src/data/hassio/addon";
@ -46,14 +41,11 @@ export class SupervisorBaseElement extends urlSyncMixin(
localize: () => "",
};
@internalProperty() private _unsubs: Record<string, UnsubscribeFunc> = {};
@state() private _unsubs: Record<string, UnsubscribeFunc> = {};
@internalProperty() private _collections: Record<
string,
Collection<unknown>
> = {};
@state() private _collections: Record<string, Collection<unknown>> = {};
@internalProperty() private _language = "en";
@state() private _language = "en";
public connectedCallback(): void {
super.connectedCallback();

8
hassio/src/system/hassio-core-info.ts
View File

@ -2,10 +2,10 @@ import "@material/mwc-button";
import "@material/mwc-list/mwc-list-item";
import {
css,
CSSResult,
CSSResultGroup,
customElement,
html,
internalProperty,
state,
LitElement,
property,
TemplateResult,
@ -39,7 +39,7 @@ class HassioCoreInfo extends LitElement {
@property({ attribute: false }) public supervisor!: Supervisor;
@internalProperty() private _metrics?: HassioStats;
@state() private _metrics?: HassioStats;
protected render(): TemplateResult | void {
const metrics = [
@ -189,7 +189,7 @@ class HassioCoreInfo extends LitElement {
});
}
static get styles(): CSSResult[] {
static get styles(): CSSResultGroup {
return [
haStyle,
hassioStyle,

4
hassio/src/system/hassio-host-info.ts
View File

@ -5,7 +5,7 @@ import { mdiDotsVertical } from "@mdi/js";
import { safeDump } from "js-yaml";
import {
css,
CSSResult,
CSSResultGroup,
customElement,
html,
LitElement,
@ -415,7 +415,7 @@ class HassioHostInfo extends LitElement {
}
}
static get styles(): CSSResult[] {
static get styles(): CSSResultGroup {
return [
haStyle,
hassioStyle,

8
hassio/src/system/hassio-supervisor-info.ts
View File

@ -1,9 +1,9 @@
import {
css,
CSSResult,
CSSResultGroup,
customElement,
html,
internalProperty,
state,
LitElement,
property,
TemplateResult,
@ -67,7 +67,7 @@ class HassioSupervisorInfo extends LitElement {
@property({ attribute: false }) public supervisor!: Supervisor;
@internalProperty() private _metrics?: HassioStats;
@state() private _metrics?: HassioStats;
protected render(): TemplateResult | void {
const metrics = [
@ -504,7 +504,7 @@ class HassioSupervisorInfo extends LitElement {
}
}
static get styles(): CSSResult[] {
static get styles(): CSSResultGroup {
return [
haStyle,
hassioStyle,

12
hassio/src/system/hassio-supervisor-log.ts
View File

@ -4,10 +4,10 @@ import "@polymer/paper-item/paper-item";
import "@polymer/paper-listbox/paper-listbox";
import {
css,
CSSResult,
CSSResultGroup,
customElement,
html,
internalProperty,
state,
LitElement,
property,
TemplateResult,
@ -61,11 +61,11 @@ class HassioSupervisorLog extends LitElement {
@property({ attribute: false }) public supervisor!: Supervisor;
@internalProperty() private _error?: string;
@state() private _error?: string;
@internalProperty() private _selectedLogProvider = "supervisor";
@state() private _selectedLogProvider = "supervisor";
@internalProperty() private _content?: string;
@state() private _content?: string;
public async connectedCallback(): Promise<void> {
super.connectedCallback();
@ -146,7 +146,7 @@ class HassioSupervisorLog extends LitElement {
}
}
static get styles(): CSSResult[] {
static get styles(): CSSResultGroup {
return [
haStyle,
hassioStyle,

4
hassio/src/system/hassio-system.ts
View File

@ -1,6 +1,6 @@
import {
css,
CSSResult,
CSSResultGroup,
customElement,
html,
LitElement,
@ -64,7 +64,7 @@ class HassioSystem extends LitElement {
`;
}
static get styles(): CSSResult[] {
static get styles(): CSSResultGroup {
return [
haStyle,
hassioStyle,

8
package.json
View File

@ -115,8 +115,8 @@
"js-yaml": "^3.13.1",
"leaflet": "^1.7.1",
"leaflet-draw": "^1.0.4",
"lit-element": "^2.5.0",
"lit-html": "^1.4.0",
"lit-element": "2.5.1",
"lit-html": "1.4.1",
"lit-virtualizer": "^0.4.2",
"marked": "2.0.0",
"mdn-polyfills": "^5.16.0",
@ -241,8 +241,8 @@
"resolutions": {
"@webcomponents/webcomponentsjs": "^2.2.10",
"@polymer/polymer": "3.1.0",
"lit-html": "1.4.0",
"lit-element": "2.5.0"
"lit-html": "1.4.1",
"lit-element": "2.5.1"
},
"main": "src/home-assistant.js",
"husky": {

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

@ -1,9 +1,9 @@
import "@material/mwc-button";
import {
css,
CSSResult,
CSSResultGroup,
html,
internalProperty,
state,
LitElement,
property,
PropertyValues,
@ -29,13 +29,13 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
@property() public oauth2State?: string;
@internalProperty() private _state: State = "loading";
@state() private _state: State = "loading";
@internalProperty() private _stepData: any = {};
@state() private _stepData: any = {};
@internalProperty() private _step?: DataEntryFlowStep;
@state() private _step?: DataEntryFlowStep;
@internalProperty() private _errorMessage?: string;
@state() private _errorMessage?: string;
protected render() {
return html` <form>${this._renderForm()}</form> `;
@ -313,7 +313,7 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
}
}
static get styles(): CSSResult {
static get styles(): CSSResultGroup {
return css`
:host {
/* So we can set min-height to avoid jumping during loading */

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

@ -1,8 +1,8 @@
import {
css,
CSSResult,
CSSResultGroup,
html,
internalProperty,
state,
LitElement,
property,
PropertyValues,
@ -32,11 +32,11 @@ class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
@property() public oauth2State?: string;
@internalProperty() private _authProvider?: AuthProvider;
@state() private _authProvider?: AuthProvider;
@internalProperty() private _authProviders?: AuthProvider[];
@state() private _authProviders?: AuthProvider[];
@internalProperty() private _discovery?: DiscoveryInformation;
@state() private _discovery?: DiscoveryInformation;
constructor() {
super();
@ -189,7 +189,7 @@ class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
this._authProvider = ev.detail;
}
static get styles(): CSSResult {
static get styles(): CSSResultGroup {
return css`
ha-pick-auth-provider {
display: block;

10
src/common/decorators/local-storage.ts
View File

@ -1,5 +1,5 @@
import { UnsubscribeFunc } from "home-assistant-js-websocket";
import { PropertyDeclaration, UpdatingElement } from "lit-element";
import { PropertyDeclaration, ReactiveElement } from "lit-element";
import type { ClassElement } from "../../types";
type Callback = (oldValue: any, newValue: any) => void;
@ -93,7 +93,7 @@ export const LocalStorage = (
storage.addFromStorage(storageKey);
const subscribe = (el: UpdatingElement): UnsubscribeFunc =>
const subscribe = (el: ReactiveElement): UnsubscribeFunc =>
storage.subscribeChanges(storageKey!, (oldValue) => {
el.requestUpdate(clsElement.key, oldValue);
});
@ -101,7 +101,7 @@ export const LocalStorage = (
const getValue = (): any =>
storage.hasKey(storageKey!) ? storage.getValue(storageKey!) : initVal;
const setValue = (el: UpdatingElement, value: any) => {
const setValue = (el: ReactiveElement, value: any) => {
let oldValue: unknown | undefined;
if (property) {
oldValue = getValue();
@ -117,7 +117,7 @@ export const LocalStorage = (
placement: "prototype",
key: clsElement.key,
descriptor: {
set(this: UpdatingElement, value: unknown) {
set(this: ReactiveElement, value: unknown) {
setValue(this, value);
},
get() {
@ -126,7 +126,7 @@ export const LocalStorage = (
enumerable: true,
configurable: true,
},
finisher(cls: typeof UpdatingElement) {
finisher(cls: typeof ReactiveElement) {
if (property) {
const connectedCallback = cls.prototype.connectedCallback;
const disconnectedCallback = cls.prototype.disconnectedCallback;

53
src/common/dom/dynamic-element-directive.ts
View File

@ -1,30 +1,47 @@
import { directive, NodePart, Part } from "lit-html";
import { noChange } from "lit-html";
import {
ChildPart,
Directive,
directive,
DirectiveParameters,
PartInfo,
PartType,
// eslint-disable-next-line import/extensions
} from "lit-html/directive.js";
export const dynamicElement = directive(
(tag: string, properties?: Record<string, any>) => (part: Part): void => {
if (!(part instanceof NodePart)) {
throw new Error(
"dynamicElementDirective can only be used in content bindings"
);
class extends Directive {
private _element?: HTMLElement;
constructor(partInfo: PartInfo) {
super(partInfo);
if (partInfo.type !== PartType.CHILD) {
throw new Error(
"dynamicElementDirective can only be used in content bindings"
);
}
}
let element = part.value as HTMLElement | undefined;
update(_part: ChildPart, [tag, properties]: DirectiveParameters<this>) {
if (this._element && this._element.localName === tag) {
if (properties) {
Object.entries(properties).forEach(([key, value]) => {
this._element![key] = value;
});
}
return noChange;
}
return this.render(tag, properties);
}
if (tag === element?.localName) {
render(tag: string, properties?: Record<string, any>): HTMLElement {
this._element = document.createElement(tag);
if (properties) {
Object.entries(properties).forEach(([key, value]) => {
element![key] = value;
this._element![key] = value;
});
}
return;
return this._element;
}
element = document.createElement(tag);
if (properties) {
Object.entries(properties).forEach(([key, value]) => {
element![key] = value;
});
}
part.setValue(element);
}
);

4
src/common/search/search-input.ts
View File

@ -3,7 +3,7 @@ import { mdiClose, mdiMagnify } from "@mdi/js";
import "@polymer/paper-input/paper-input";
import {
css,
CSSResult,
CSSResultGroup,
customElement,
LitElement,
property,
@ -80,7 +80,7 @@ class SearchInput extends LitElement {
this._filterChanged("");
}
static get styles(): CSSResult {
static get styles(): CSSResultGroup {
return css`
ha-svg-icon,
mwc-icon-button {

11
src/components/buttons/ha-call-api-button.ts
View File

@ -1,4 +1,11 @@
import { css, CSSResult, html, LitElement, property, query } from "lit-element";
import {
css,
CSSResultGroup,
html,
LitElement,
property,
query,
} from "lit-element";
import { fireEvent } from "../../common/dom/fire_event";
import { HomeAssistant } from "../../types";
import "./ha-progress-button";
@ -59,7 +66,7 @@ class HaCallApiButton extends LitElement {
fireEvent(this, "hass-api-called", eventData as any);
}
static get styles(): CSSResult {
static get styles(): CSSResultGroup {
return css`
:host([disabled]) {
pointer-events: none;

4
src/components/buttons/ha-progress-button.ts
View File

@ -2,7 +2,7 @@ import "@material/mwc-button";
import type { Button } from "@material/mwc-button";
import {
css,
CSSResult,
CSSResultGroup,
customElement,
html,
LitElement,
@ -60,7 +60,7 @@ class HaProgressButton extends LitElement {
}
}
static get styles(): CSSResult {
static get styles(): CSSResultGroup {
return css`
:host {
outline: none;

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

@ -1,11 +1,11 @@
import deepClone from "deep-clone-simple";
import {
css,
CSSResult,
CSSResultGroup,
customElement,
eventOptions,
html,
internalProperty,
state,
LitElement,
property,
PropertyValues,
@ -118,21 +118,21 @@ export class HaDataTable extends LitElement {
@property({ type: String }) public filter = "";
@internalProperty() private _filterable = false;
@state() private _filterable = false;
@internalProperty() private _filter = "";
@state() private _filter = "";
@internalProperty() private _sortColumn?: string;
@state() private _sortColumn?: string;
@internalProperty() private _sortDirection: SortingDirection = null;
@state() private _sortDirection: SortingDirection = null;
@internalProperty() private _filteredData: DataTableRowData[] = [];
@state() private _filteredData: DataTableRowData[] = [];
@internalProperty() private _headerHeight = 0;
@state() private _headerHeight = 0;
@query("slot[name='header']") private _header!: HTMLSlotElement;
@internalProperty() private _items: DataTableRowData[] = [];
@state() private _items: DataTableRowData[] = [];
private _checkableRowsCount?: number;
@ -573,7 +573,7 @@ export class HaDataTable extends LitElement {
this._savedScrollPos = (e.target as HTMLDivElement).scrollTop;
}
static get styles(): CSSResult {
static get styles(): CSSResultGroup {
return css`
/* default mdc styles, colors changed, without checkbox styles */
:host {

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

@ -1,6 +1,5 @@
// @ts-nocheck
import wrap from "@vue/web-component-wrapper";
import { customElement } from "lit-element/lib/decorators";
import Vue from "vue";
import DateRangePicker from "vue2-daterange-picker";
import dateRangePickerStyles from "vue2-daterange-picker/dist/vue2-daterange-picker.css";

14
src/components/device/ha-area-devices-picker.ts
View File

@ -9,10 +9,10 @@ import "@vaadin/vaadin-combo-box/theme/material/vaadin-combo-box-light";
import { UnsubscribeFunc } from "home-assistant-js-websocket";
import {
css,
CSSResult,
CSSResultGroup,
customElement,
html,
internalProperty,
state,
LitElement,
property,
PropertyValues,
@ -127,13 +127,13 @@ export class HaAreaDevicesPicker extends SubscribeMixin(LitElement) {
@property({ type: Boolean })
private _opened?: boolean;
@internalProperty() private _areaPicker = true;
@state() private _areaPicker = true;
@internalProperty() private _devices?: DeviceRegistryEntry[];
@state() private _devices?: DeviceRegistryEntry[];
@internalProperty() private _areas?: AreaRegistryEntry[];
@state() private _areas?: AreaRegistryEntry[];
@internalProperty() private _entities?: EntityRegistryEntry[];
@state() private _entities?: EntityRegistryEntry[];
private _selectedDevices: string[] = [];
@ -407,7 +407,7 @@ export class HaAreaDevicesPicker extends SubscribeMixin(LitElement) {
}, 0);
}
static get styles(): CSSResult {
static get styles(): CSSResultGroup {
return css`
.suffix {
display: flex;

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

@ -4,9 +4,9 @@ import "@polymer/paper-item/paper-item-body";
import "@polymer/paper-listbox/paper-listbox";
import {
css,
CSSResult,
CSSResultGroup,
html,
internalProperty,
state,
LitElement,
property,
TemplateResult,
@ -33,11 +33,11 @@ export abstract class HaDeviceAutomationPicker<
@property() public value?: T;
@internalProperty() private _automations: T[] = [];
@state() private _automations: T[] = [];
// Trigger an empty render so we start with a clean DOM.
// paper-listbox does not like changing things around.
@internalProperty() private _renderEmpty = false;
@state() private _renderEmpty = false;
protected get NO_AUTOMATION_TEXT() {
return this.hass.localize(
@ -188,7 +188,7 @@ export abstract class HaDeviceAutomationPicker<
fireEvent(this, "value-changed", { value: automation });
}
static get styles(): CSSResult {
static get styles(): CSSResultGroup {
return css`
ha-paper-dropdown-menu {
width: 100%;

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

@ -3,10 +3,10 @@ import "@polymer/paper-item/paper-item-body";
import { UnsubscribeFunc } from "home-assistant-js-websocket";
import {
css,
CSSResult,
CSSResultGroup,
customElement,
html,
internalProperty,
state,
LitElement,
property,
PropertyValues,
@ -111,7 +111,7 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
@property({ type: Boolean }) public disabled?: boolean;
@internalProperty() private _opened?: boolean;
@state() private _opened?: boolean;
@query("ha-combo-box", true) public comboBox!: HaComboBox;
@ -326,7 +326,7 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
}, 0);
}
static get styles(): CSSResult {
static get styles(): CSSResultGroup {
return css`
paper-input > mwc-icon-button {
--mdc-icon-button-size: 24px;

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

@ -6,7 +6,7 @@ import "@vaadin/vaadin-combo-box/theme/material/vaadin-combo-box-light";
import { HassEntity } from "home-assistant-js-websocket";
import {
css,
CSSResult,
CSSResultGroup,
customElement,
html,
LitElement,
@ -165,7 +165,7 @@ class HaEntityAttributePicker extends LitElement {
}, 0);
}
static get styles(): CSSResult {
static get styles(): CSSResultGroup {
return css`
.suffix {
display: flex;

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

@ -7,7 +7,7 @@ import "@vaadin/vaadin-combo-box/theme/material/vaadin-combo-box-light";
import { HassEntity } from "home-assistant-js-websocket";
import {
css,
CSSResult,
CSSResultGroup,
customElement,
html,
LitElement,
@ -311,7 +311,7 @@ export class HaEntityPicker extends LitElement {
}, 0);
}
static get styles(): CSSResult {
static get styles(): CSSResultGroup {
return css`
.suffix {
display: flex;

8
src/components/entity/ha-entity-toggle.ts
View File

@ -1,9 +1,9 @@
import { HassEntity } from "home-assistant-js-websocket";
import {
css,
CSSResult,
CSSResultGroup,
html,
internalProperty,
state,
LitElement,
property,
PropertyValues,
@ -32,7 +32,7 @@ export class HaEntityToggle extends LitElement {
@property() public label?: string;
@internalProperty() private _isOn = false;
@state() private _isOn = false;
protected render(): TemplateResult {
if (!this.stateObj) {
@ -148,7 +148,7 @@ export class HaEntityToggle extends LitElement {
}, 2000);
}
static get styles(): CSSResult {
static get styles(): CSSResultGroup {
return css`
:host {
white-space: nowrap;

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

@ -1,10 +1,10 @@
import { HassEntity } from "home-assistant-js-websocket";
import {
css,
CSSResult,
CSSResultGroup,
customElement,
html,
internalProperty,
state,
LitElement,
property,
PropertyValues,
@ -35,7 +35,7 @@ export class HaStateLabelBadge extends LitElement {
@property() public image?: string;
@internalProperty() private _timerTimeRemaining?: number;
@state() private _timerTimeRemaining?: number;
private _connected?: boolean;
@ -54,9 +54,9 @@ export class HaStateLabelBadge extends LitElement {
}
protected render(): TemplateResult {
const state = this.state;
const entityState = this.state;
if (!state) {
if (!entityState) {
return html`
<ha-label-badge
class="warning"
@ -69,24 +69,31 @@ export class HaStateLabelBadge extends LitElement {
`;
}
const domain = computeStateDomain(state);
const domain = computeStateDomain(entityState);
return html`
<ha-label-badge
class="${classMap({
[domain]: true,
"has-unit_of_measurement": "unit_of_measurement" in state.attributes,
"has-unit_of_measurement":
"unit_of_measurement" in entityState.attributes,
})}"
.value="${this._computeValue(domain, state)}"
.icon="${this.icon ? this.icon : this._computeIcon(domain, state)}"
.value="${this._computeValue(domain, entityState)}"
.icon="${this.icon
? this.icon
: this._computeIcon(domain, entityState)}"
.image="${this.icon
? ""
: this.image
? this.image
: state.attributes.entity_picture_local ||
state.attributes.entity_picture}"
.label="${this._computeLabel(domain, state, this._timerTimeRemaining)}"
.description="${this.name ? this.name : computeStateName(state)}"
: entityState.attributes.entity_picture_local ||
entityState.attributes.entity_picture}"
.label="${this._computeLabel(
domain,
entityState,
this._timerTimeRemaining
)}"
.description="${this.name ? this.name : computeStateName(entityState)}"
></ha-label-badge>
`;
}
@ -99,7 +106,7 @@ export class HaStateLabelBadge extends LitElement {
}
}
private _computeValue(domain: string, state: HassEntity) {
private _computeValue(domain: string, entityState: HassEntity) {
switch (domain) {
case "binary_sensor":
case "device_tracker":
@ -111,77 +118,81 @@ export class HaStateLabelBadge extends LitElement {
return null;
case "sensor":
default:
return state.attributes.device_class === "moon__phase"
return entityState.attributes.device_class === "moon__phase"
? null
: state.state === UNKNOWN
: entityState.state === UNKNOWN
? "-"
: state.attributes.unit_of_measurement
? formatNumber(state.state, this.hass!.locale)
: computeStateDisplay(this.hass!.localize, state, this.hass!.locale);
: entityState.attributes.unit_of_measurement
? formatNumber(entityState.state, this.hass!.locale)
: computeStateDisplay(
this.hass!.localize,
entityState,
this.hass!.locale
);
}
}
private _computeIcon(domain: string, state: HassEntity) {
if (state.state === UNAVAILABLE) {
private _computeIcon(domain: string, entityState: HassEntity) {
if (entityState.state === UNAVAILABLE) {
return null;
}
switch (domain) {
case "alarm_control_panel":
if (state.state === "pending") {
if (entityState.state === "pending") {
return "hass:clock-fast";
}
if (state.state === "armed_away") {
if (entityState.state === "armed_away") {
return "hass:nature";
}
if (state.state === "armed_home") {
if (entityState.state === "armed_home") {
return "hass:home-variant";
}
if (state.state === "armed_night") {
if (entityState.state === "armed_night") {
return "hass:weather-night";
}
if (state.state === "armed_custom_bypass") {
if (entityState.state === "armed_custom_bypass") {
return "hass:shield-home";
}
if (state.state === "triggered") {
if (entityState.state === "triggered") {
return "hass:alert-circle";
}
// state == 'disarmed'
return domainIcon(domain, state);
return domainIcon(domain, entityState);
case "binary_sensor":
case "device_tracker":
case "updater":
case "person":
case "sun":
return stateIcon(state);
return stateIcon(entityState);
case "timer":
return state.state === "active"
return entityState.state === "active"
? "hass:timer-outline"
: "hass:timer-off-outline";
default:
return state?.attributes.device_class === "moon__phase"
? stateIcon(state)
return entityState?.attributes.device_class === "moon__phase"
? stateIcon(entityState)
: null;
}
}
private _computeLabel(domain, state, _timerTimeRemaining) {
private _computeLabel(domain, entityState, _timerTimeRemaining) {
if (
state.state === UNAVAILABLE ||
entityState.state === UNAVAILABLE ||
["device_tracker", "alarm_control_panel", "person"].includes(domain)
) {
// Localize the state with a special state_badge namespace, which has variations of
// the state translations that are truncated to fit within the badge label. Translations
// are only added for device_tracker, alarm_control_panel and person.
return (
this.hass!.localize(`state_badge.${domain}.${state.state}`) ||
this.hass!.localize(`state_badge.default.${state.state}`) ||
state.state
this.hass!.localize(`state_badge.${domain}.${entityState.state}`) ||
this.hass!.localize(`state_badge.default.${entityState.state}`) ||
entityState.state
);
}
if (domain === "timer") {
return secondsToDuration(_timerTimeRemaining);
}
return state.attributes.unit_of_measurement || null;
return entityState.attributes.unit_of_measurement || null;
}
private clearInterval() {
@ -209,7 +220,7 @@ export class HaStateLabelBadge extends LitElement {
this._timerTimeRemaining = timerTimeRemaining(stateObj);
}
static get styles(): CSSResult {
static get styles(): CSSResultGroup {
return css`
:host {
cursor: pointer;

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

@ -1,9 +1,9 @@
import type { HassEntity } from "home-assistant-js-websocket";
import {
css,
CSSResult,
CSSResultGroup,
html,
internalProperty,
state,
LitElement,
property,
PropertyValues,
@ -32,7 +32,7 @@ export class StateBadge extends LitElement {
@property({ type: Boolean, reflect: true, attribute: "icon" })
private _showIcon = true;
@internalProperty() private _iconStyle: { [name: string]: string } = {};
@state() private _iconStyle: { [name: string]: string } = {};
protected render(): TemplateResult {
const stateObj = this.stateObj;
@ -128,7 +128,7 @@ export class StateBadge extends LitElement {
Object.assign(this.style, hostStyle);
}
static get styles(): CSSResult {
static get styles(): CSSResultGroup {
return css`
:host {
position: relative;

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

@ -2,7 +2,7 @@ import "@polymer/paper-tooltip/paper-tooltip";
import type { HassEntity } from "home-assistant-js-websocket";
import {
css,
CSSResult,
CSSResultGroup,
customElement,
html,
LitElement,
@ -89,7 +89,7 @@ class StateInfo extends LitElement {
}
}
static get styles(): CSSResult {
static get styles(): CSSResultGroup {
return css`
:host {
min-width: 120px;

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

@ -1,7 +1,7 @@
import {
customElement,
html,
internalProperty,
state,
LitElement,
property,
query,
@ -51,7 +51,7 @@ class HaAddonPicker extends LitElement {
@property() public value = "";
@internalProperty() private _addons?: HassioAddonInfo[];
@state() private _addons?: HassioAddonInfo[];
@property({ type: Boolean }) public disabled = false;

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

@ -1,7 +1,7 @@
import "@polymer/paper-tooltip/paper-tooltip";
import {
css,
CSSResult,
CSSResultGroup,
customElement,
html,
LitElement,
@ -151,7 +151,7 @@ export class HaAnalytics extends LitElement {
fireEvent(this, "analytics-preferences-changed", { preferences });
}
static get styles(): CSSResult[] {
static get styles(): CSSResultGroup {
return [
haStyle,
css`

14
src/components/ha-area-picker.ts
View File

@ -8,10 +8,10 @@ import "@vaadin/vaadin-combo-box/theme/material/vaadin-combo-box-light";
import { UnsubscribeFunc } from "home-assistant-js-websocket";
import {
css,
CSSResult,
CSSResultGroup,
customElement,
html,
internalProperty,
state,
LitElement,
property,
PropertyValues,
@ -119,13 +119,13 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
@property({ type: Boolean }) public disabled?: boolean;
@internalProperty() private _areas?: AreaRegistryEntry[];
@state() private _areas?: AreaRegistryEntry[];
@internalProperty() private _devices?: DeviceRegistryEntry[];
@state() private _devices?: DeviceRegistryEntry[];
@internalProperty() private _entities?: EntityRegistryEntry[];
@state() private _entities?: EntityRegistryEntry[];
@internalProperty() private _opened?: boolean;
@state() private _opened?: boolean;
@query("vaadin-combo-box-light", true) public comboBox!: HTMLElement;
@ -457,7 +457,7 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
}, 0);
}
static get styles(): CSSResult {
static get styles(): CSSResultGroup {
return css`
paper-input > mwc-icon-button {
--mdc-icon-button-size: 24px;

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

@ -1,7 +1,7 @@
import { HassEntity } from "home-assistant-js-websocket";
import {
css,
CSSResult,
CSSResultGroup,
customElement,
html,
LitElement,
@ -58,7 +58,7 @@ class HaAttributes extends LitElement {
`;
}
static get styles(): CSSResult[] {
static get styles(): CSSResultGroup {
return [
haStyle,
css`

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

@ -1,6 +1,6 @@
import {
css,
CSSResult,
CSSResultGroup,
customElement,
LitElement,
property,
@ -40,7 +40,7 @@ export class HaBar extends LitElement {
`;
}
static get styles(): CSSResult {
static get styles(): CSSResultGroup {
return css`
rect {
height: 100%;

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

@ -3,7 +3,7 @@ import "@polymer/paper-item/paper-item";
import "@polymer/paper-listbox/paper-listbox";
import {
css,
CSSResult,
CSSResultGroup,
customElement,
html,
LitElement,
@ -98,7 +98,7 @@ class HaBluePrintPicker extends LitElement {
}
}
static get styles(): CSSResult {
static get styles(): CSSResultGroup {
return css`
:host {
display: inline-block;

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

@ -2,7 +2,7 @@ import "@material/mwc-menu";
import type { Corner, Menu } from "@material/mwc-menu";
import {
css,
CSSResult,
CSSResultGroup,
customElement,
html,
LitElement,
@ -53,7 +53,7 @@ export class HaButtonMenu extends LitElement {
this._menu!.show();
}
static get styles(): CSSResult {
static get styles(): CSSResultGroup {
return css`
:host {
display: inline-block;

8
src/components/ha-button-related-filter-menu.ts
View File

@ -3,10 +3,10 @@ import type { Corner } from "@material/mwc-menu";
import { mdiFilterVariant } from "@mdi/js";
import {
css,
CSSResult,
CSSResultGroup,
customElement,
html,
internalProperty,
state,
LitElement,
property,
TemplateResult,
@ -59,7 +59,7 @@ export class HaRelatedFilterButtonMenu extends LitElement {
@property({ type: Array, attribute: "exclude-domains" })
public excludeDomains?: string[];
@internalProperty() private _open = false;
@state() private _open = false;
protected render(): TemplateResult {
return html`
@ -175,7 +175,7 @@ export class HaRelatedFilterButtonMenu extends LitElement {
});
}
static get styles(): CSSResult {
static get styles(): CSSResultGroup {
return css`
:host {
display: inline-block;

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

@ -2,7 +2,7 @@ import "@material/mwc-button/mwc-button";
import "@material/mwc-icon-button/mwc-icon-button";
import {
css,
CSSResult,
CSSResultGroup,
customElement,
html,
LitElement,
@ -56,7 +56,7 @@ export class HaButtonToggleGroup extends LitElement {
fireEvent(this, "value-changed", { value: this.active });
}
static get styles(): CSSResult {
static get styles(): CSSResultGroup {
return css`
div {
display: flex;

10
src/components/ha-camera-stream.ts
View File

@ -1,9 +1,9 @@
import {
css,
CSSResult,
CSSResultGroup,
customElement,
html,
internalProperty,
state,
LitElement,
property,
PropertyValues,
@ -39,9 +39,9 @@ class HaCameraStream extends LitElement {
// We keep track if we should force MJPEG with a string
// that way it automatically resets if we change entity.
@internalProperty() private _forceMJPEG?: string;
@state() private _forceMJPEG?: string;
@internalProperty() private _url?: string;
@state() private _url?: string;
protected render(): TemplateResult {
if (!this.stateObj) {
@ -113,7 +113,7 @@ class HaCameraStream extends LitElement {
fireEvent(this, "iron-resize");
}
static get styles(): CSSResult {
static get styles(): CSSResultGroup {
return css`
:host,
img {

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

@ -1,6 +1,6 @@
import {
css,
CSSResult,
CSSResultGroup,
customElement,
html,
LitElement,
@ -14,7 +14,7 @@ export class HaCard extends LitElement {
@property({ type: Boolean, reflect: true }) public outlined = false;
static get styles(): CSSResult {
static get styles(): CSSResultGroup {
return css`
:host {
background: var(

4
src/components/ha-chip-set.ts
View File

@ -2,7 +2,7 @@
import chipStyles from "@material/chips/dist/mdc.chips.min.css";
import {
css,
CSSResult,
CSSResultGroup,
customElement,
html,
LitElement,
@ -48,7 +48,7 @@ export class HaChipSet extends LitElement {
});
}
static get styles(): CSSResult {
static get styles(): CSSResultGroup {
return css`
${unsafeCSS(chipStyles)}

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

@ -4,7 +4,7 @@ import { ripple } from "@material/mwc-ripple/ripple-directive";
import "./ha-icon";
import {
css,
CSSResult,
CSSResultGroup,
customElement,
html,
LitElement,
@ -44,7 +44,7 @@ export class HaChip extends LitElement {
`;
}
static get styles(): CSSResult {
static get styles(): CSSResultGroup {
return css`
${unsafeCSS(chipStyles)}
.mdc-chip {

4
src/components/ha-climate-state.ts
View File

@ -1,7 +1,7 @@
import { HassEntity } from "home-assistant-js-websocket";
import {
css,
CSSResult,
CSSResultGroup,
customElement,
html,
LitElement,
@ -126,7 +126,7 @@ class HaClimateState extends LitElement {
: stateString;
}
static get styles(): CSSResult {
static get styles(): CSSResultGroup {
return css`
:host {
display: flex;

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

@ -1,10 +1,12 @@
import type { EditorView, KeyBinding, ViewUpdate } from "@codemirror/view";
import {
customElement,
internalProperty,
state,
property,
PropertyValues,
UpdatingElement,
ReactiveElement,
css,
CSSResultGroup,
} from "lit-element";
import { fireEvent } from "../common/dom/fire_event";
import { loadCodeMirror } from "../resources/codemirror.ondemand";
@ -24,7 +26,7 @@ const saveKeyBinding: KeyBinding = {
};
@customElement("ha-code-editor")
export class HaCodeEditor extends UpdatingElement {
export class HaCodeEditor extends ReactiveElement {
public codemirror?: EditorView;
@property() public mode = "yaml";
@ -35,7 +37,7 @@ export class HaCodeEditor extends UpdatingElement {
@property() public error = false;
@internalProperty() private _value = "";
@state() private _value = "";
private _loadedCodeMirror?: typeof import("../resources/codemirror");
@ -60,6 +62,14 @@ export class HaCodeEditor extends UpdatingElement {
public connectedCallback() {
super.connectedCallback();
// Lit 2.0 will create the shadowRoot for us, and adopt the styles, check if it was created
if (!this.shadowRoot) {
this.attachShadow({ mode: "open" }).innerHTML = `<style>
:host(.error-state) div.cm-wrap .cm-gutters {
border-color: var(--error-state-color, red);
}
</style>`;
}
if (!this.codemirror) {
return;
}
@ -116,14 +126,6 @@ export class HaCodeEditor extends UpdatingElement {
private async _load(): Promise<void> {
this._loadedCodeMirror = await loadCodeMirror();
const shadowRoot = this.attachShadow({ mode: "open" });
shadowRoot!.innerHTML = `<style>
:host(.error-state) div.cm-wrap .cm-gutters {
border-color: var(--error-state-color, red);
}
</style>`;
this.codemirror = new this._loadedCodeMirror.EditorView({
state: this._loadedCodeMirror.EditorState.create({
doc: this._value,
@ -155,8 +157,8 @@ export class HaCodeEditor extends UpdatingElement {
),
],
}),
root: shadowRoot,
parent: shadowRoot,
root: this.shadowRoot!,
parent: this.shadowRoot!,
});
}
@ -175,6 +177,15 @@ export class HaCodeEditor extends UpdatingElement {
this._value = newValue;
fireEvent(this, "value-changed", { value: this._value });
}
// Only Lit 2.0 will use this
static get styles(): CSSResultGroup {
return css`
:host(.error-state) div.cm-wrap .cm-gutters {
border-color: var(--error-state-color, red);
}
`;
}
}
declare global {

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

@ -7,10 +7,10 @@ import "@polymer/paper-listbox/paper-listbox";
import "@vaadin/vaadin-combo-box/theme/material/vaadin-combo-box-light";
import {
css,
CSSResult,
CSSResultGroup,
customElement,
html,
internalProperty,
state,
LitElement,
property,
query,
@ -70,7 +70,7 @@ export class HaComboBox extends LitElement {
@property({ type: Boolean }) public disabled?: boolean;
@internalProperty() private _opened?: boolean;
@state() private _opened?: boolean;
@query("vaadin-combo-box-light", true) private _comboBox!: HTMLElement;
@ -167,7 +167,7 @@ export class HaComboBox extends LitElement {
}
}
static get styles(): CSSResult {
static get styles(): CSSResultGroup {
return css`
paper-input > mwc-icon-button {
--mdc-icon-button-size: 24px;

8
src/components/ha-cover-controls.ts
View File

@ -1,10 +1,10 @@
import type { HassEntity } from "home-assistant-js-websocket";
import {
css,
CSSResult,
CSSResultGroup,
customElement,
html,
internalProperty,
state,
LitElement,
property,
PropertyValues,
@ -23,7 +23,7 @@ class HaCoverControls extends LitElement {
@property({ attribute: false }) public stateObj!: HassEntity;
@internalProperty() private _entityObj?: CoverEntity;
@state() private _entityObj?: CoverEntity;
protected updated(changedProperties: PropertyValues): void {
super.updated(changedProperties);
@ -114,7 +114,7 @@ class HaCoverControls extends LitElement {
this._entityObj.stopCover();
}
static get styles(): CSSResult {
static get styles(): CSSResultGroup {
return css`
.state {
white-space: nowrap;

8
src/components/ha-cover-tilt-controls.ts
View File

@ -1,10 +1,10 @@
import { HassEntity } from "home-assistant-js-websocket";
import {
css,
CSSResult,
CSSResultGroup,
customElement,
html,
internalProperty,
state,
LitElement,
property,
PropertyValues,
@ -22,7 +22,7 @@ class HaCoverTiltControls extends LitElement {
@property({ attribute: false }) stateObj!: HassEntity;
@internalProperty() private _entityObj?: CoverEntity;
@state() private _entityObj?: CoverEntity;
protected updated(changedProperties: PropertyValues): void {
super.updated(changedProperties);
@ -101,7 +101,7 @@ class HaCoverTiltControls extends LitElement {
this._entityObj.stopCoverTilt();
}
static get styles(): CSSResult {
static get styles(): CSSResultGroup {
return css`
:host {
white-space: nowrap;

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

@ -1,7 +1,7 @@
import "@vaadin/vaadin-date-picker/theme/material/vaadin-date-picker-light";
import {
css,
CSSResult,
CSSResultGroup,
customElement,
html,
LitElement,
@ -134,7 +134,7 @@ export class HaDateInput extends LitElement {
return true;
}
static get styles(): CSSResult {
static get styles(): CSSResultGroup {
return css`
paper-input {
width: 110px;

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

@ -6,7 +6,7 @@ import { mdiCalendar } from "@mdi/js";
import "@polymer/paper-input/paper-input";
import {
css,
CSSResult,
CSSResultGroup,
customElement,
html,
LitElement,
@ -146,7 +146,7 @@ export class HaDateRangePicker extends LitElement {
}
}
static get styles(): CSSResult {
static get styles(): CSSResultGroup {
return css`
ha-svg-icon {
margin-right: 8px;

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

@ -2,7 +2,7 @@ import "@material/mwc-dialog";
import type { Dialog } from "@material/mwc-dialog";
import { style } from "@material/mwc-dialog/mwc-dialog-css";
import { mdiClose } from "@mdi/js";
import { css, CSSResult, customElement, html } from "lit-element";
import { css, CSSResultGroup, customElement, html } from "lit-element";
import { computeRTLDirection } from "../common/util/compute_rtl";
import type { Constructor, HomeAssistant } from "../types";
import "./ha-icon-button";
@ -31,7 +31,7 @@ export class HaDialog extends MwcDialog {
return html`<slot name="heading"> ${super.renderHeading()} </slot>`;
}
protected static get styles(): CSSResult[] {
protected static get styles(): CSSResultGroup {
return [
style,
css`

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

@ -1,7 +1,7 @@
import { mdiChevronDown } from "@mdi/js";
import {
css,
CSSResult,
CSSResultGroup,
customElement,
html,
LitElement,
@ -59,7 +59,7 @@ class HaExpansionPanel extends LitElement {
fireEvent(this, "expanded-changed", { expanded: this.expanded });
}
static get styles(): CSSResult {
static get styles(): CSSResultGroup {
return css`
:host {
display: block;

4
src/components/ha-file-upload.ts
View File

@ -6,7 +6,7 @@ import {
css,
customElement,
html,
internalProperty,
state,
LitElement,
property,
PropertyValues,
@ -39,7 +39,7 @@ export class HaFileUpload extends LitElement {
@property({ type: Boolean, attribute: "auto-open-file-dialog" })
private autoOpenFileDialog = false;
@internalProperty() private _drag = false;
@state() private _drag = false;
@query("#input") private _input?: HTMLInputElement;

4
src/components/ha-form/ha-form-boolean.ts
View File

@ -2,7 +2,7 @@ import "@polymer/paper-checkbox/paper-checkbox";
import type { PaperCheckboxElement } from "@polymer/paper-checkbox/paper-checkbox";
import {
css,
CSSResult,
CSSResultGroup,
customElement,
html,
LitElement,
@ -49,7 +49,7 @@ export class HaFormBoolean extends LitElement implements HaFormElement {
});
}
static get styles(): CSSResult {
static get styles(): CSSResultGroup {
return css`
paper-checkbox {
display: block;

4
src/components/ha-form/ha-form-constant.ts
View File

@ -1,6 +1,6 @@
import {
css,
CSSResult,
CSSResultGroup,
customElement,
html,
LitElement,
@ -28,7 +28,7 @@ export class HaFormConstant extends LitElement implements HaFormElement {
return html`<span class="label">${this.label}</span>: ${this.schema.value}`;
}
static get styles(): CSSResult {
static get styles(): CSSResultGroup {
return css`
:host {
display: block;

4
src/components/ha-form/ha-form-integer.ts
View File

@ -4,7 +4,7 @@ import "@polymer/paper-slider/paper-slider";
import type { PaperSliderElement } from "@polymer/paper-slider/paper-slider";
import {
css,
CSSResult,
CSSResultGroup,
customElement,
html,
LitElement,
@ -107,7 +107,7 @@ export class HaFormInteger extends LitElement implements HaFormElement {
});
}
static get styles(): CSSResult {
static get styles(): CSSResultGroup {
return css`
.flex {
display: flex;

8
src/components/ha-form/ha-form-multi_select.ts
View File

@ -6,10 +6,10 @@ import "@polymer/paper-menu-button/paper-menu-button";
import "@polymer/paper-ripple/paper-ripple";
import {
css,
CSSResult,
CSSResultGroup,
customElement,
html,
internalProperty,
state,
LitElement,
property,
query,
@ -33,7 +33,7 @@ export class HaFormMultiSelect extends LitElement implements HaFormElement {
@property() public suffix!: string;
@internalProperty() private _init = false;
@state() private _init = false;
@query("paper-menu-button", true) private _input?: HTMLElement;
@ -140,7 +140,7 @@ export class HaFormMultiSelect extends LitElement implements HaFormElement {
);
}
static get styles(): CSSResult {
static get styles(): CSSResultGroup {
return css`
paper-menu-button {
display: block;

4
src/components/ha-form/ha-form-select.ts
View File

@ -2,7 +2,7 @@ import "@polymer/paper-item/paper-item";
import "@polymer/paper-listbox/paper-listbox";
import {
css,
CSSResult,
CSSResultGroup,
customElement,
html,
LitElement,
@ -74,7 +74,7 @@ export class HaFormSelect extends LitElement implements HaFormElement {
});
}
static get styles(): CSSResult {
static get styles(): CSSResultGroup {
return css`
ha-paper-dropdown-menu {
display: block;

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

@ -3,10 +3,10 @@ import "@polymer/paper-input/paper-input";
import type { PaperInputElement } from "@polymer/paper-input/paper-input";
import {
css,
CSSResult,
CSSResultGroup,
customElement,
html,
internalProperty,
state,
LitElement,
property,
query,
@ -31,7 +31,7 @@ export class HaFormString extends LitElement implements HaFormElement {
@property() public suffix!: string;
@internalProperty() private _unmaskedPassword = false;
@state() private _unmaskedPassword = false;
@query("paper-input") private _input?: HTMLElement;
@ -104,7 +104,7 @@ export class HaFormString extends LitElement implements HaFormElement {
return "text";
}
static get styles(): CSSResult {
static get styles(): CSSResultGroup {
return css`
mwc-icon-button {
--mdc-icon-button-size: 24px;

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

@ -1,6 +1,6 @@
import {
css,
CSSResult,
CSSResultGroup,
customElement,
html,
LitElement,
@ -207,7 +207,7 @@ export class HaForm extends LitElement implements HaFormElement {
});
}
static get styles(): CSSResult {
static get styles(): CSSResultGroup {
return css`
.error {
color: var(--error-color);

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

@ -1,7 +1,7 @@
import "@material/mwc-formfield";
import type { Formfield } from "@material/mwc-formfield";
import { style } from "@material/mwc-formfield/mwc-formfield-css";
import { css, CSSResult, customElement } from "lit-element";
import { css, CSSResultGroup, customElement } from "lit-element";
import { Constructor } from "../types";
const MwcFormfield = customElements.get(
@ -10,7 +10,7 @@ const MwcFormfield = customElements.get(
@customElement("ha-formfield")
export class HaFormfield extends MwcFormfield {
protected static get styles(): CSSResult[] {
protected static get styles(): CSSResultGroup {
return [
style,
css`

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

@ -1,7 +1,7 @@
import {
css,
customElement,
internalProperty,
state,
LitElement,
property,
PropertyValues,
@ -34,9 +34,9 @@ export class Gauge extends LitElement {
@property() public label = "";
@internalProperty() private _angle = 0;
@state() private _angle = 0;
@internalProperty() private _updated = false;
@state() private _updated = false;
protected firstUpdated(changedProperties: PropertyValues) {
super.firstUpdated(changedProperties);

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

@ -1,10 +1,10 @@
import type HlsType from "hls.js";
import {
css,
CSSResult,
CSSResultGroup,
customElement,
html,
internalProperty,
state,
LitElement,
property,
PropertyValues,
@ -40,7 +40,7 @@ class HaHLSPlayer extends LitElement {
// don't cache this, as we remove it on disconnects
@query("video") private _videoEl!: HTMLVideoElement;
@internalProperty() private _attached = false;
@state() private _attached = false;
private _hlsPolyfillInstance?: HlsType;
@ -220,7 +220,7 @@ class HaHLSPlayer extends LitElement {
}
}
static get styles(): CSSResult {
static get styles(): CSSResultGroup {
return css`
:host,
video {

4
src/components/ha-icon-button-arrow-next.ts
View File

@ -3,7 +3,7 @@ import { mdiArrowLeft, mdiArrowRight } from "@mdi/js";
import {
customElement,
html,
internalProperty,
state,
LitElement,
property,
TemplateResult,
@ -19,7 +19,7 @@ export class HaIconButtonArrowNext extends LitElement {
@property() public label?: string;
@internalProperty() private _icon = mdiArrowRight;
@state() private _icon = mdiArrowRight;
public connectedCallback() {
super.connectedCallback();

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