mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-08 09:56:36 +00:00
Add compatibility for Lit 2.0 (#8878)
This commit is contained in:
parent
0f58214ba1
commit
9f032a61a9
@ -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;
|
||||
|
@ -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);
|
||||
|
@ -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;
|
||||
|
@ -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) {
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
||||
|
@ -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;
|
||||
|
@ -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,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) {
|
||||
|
@ -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) {
|
||||
|
@ -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`
|
||||
|
@ -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;
|
||||
|
@ -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,
|
||||
|
@ -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,
|
||||
|
@ -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,
|
||||
|
@ -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,
|
||||
|
@ -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,
|
||||
|
@ -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,
|
||||
|
@ -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,
|
||||
|
@ -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,
|
||||
|
@ -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,
|
||||
|
@ -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,
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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`
|
||||
|
@ -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;
|
||||
|
@ -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,
|
||||
|
@ -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`
|
||||
|
@ -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,
|
||||
|
@ -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,
|
||||
|
@ -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`
|
||||
|
@ -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,
|
||||
|
@ -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,
|
||||
|
@ -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`
|
||||
|
@ -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,
|
||||
|
@ -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,
|
||||
|
@ -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();
|
||||
|
@ -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);
|
||||
|
@ -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;
|
||||
|
@ -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,
|
||||
|
@ -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();
|
||||
|
@ -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,
|
||||
|
@ -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,
|
||||
|
@ -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,
|
||||
|
@ -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,
|
||||
|
@ -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,
|
||||
|
@ -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": {
|
||||
|
@ -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 */
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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);
|
||||
}
|
||||
);
|
||||
|
@ -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 {
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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,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";
|
||||
|
@ -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;
|
||||
|
@ -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%;
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
||||
|
@ -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`
|
||||
|
@ -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;
|
||||
|
@ -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`
|
||||
|
@ -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%;
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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 {
|
||||
|
@ -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(
|
||||
|
@ -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,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 {
|
||||
|
@ -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;
|
||||
|
@ -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 {
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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`
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
||||
|
@ -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;
|
||||
|
@ -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,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;
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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);
|
||||
|
@ -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`
|
||||
|
@ -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);
|
||||
|
@ -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 {
|
||||
|
@ -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
Loading…
x
Reference in New Issue
Block a user