Add compatibility for Lit 2.0 (#8878)

src/components/entity/ha-entity-attribute-picker.ts

@@ -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;

src/components/entity/ha-entity-picker.ts

@@ -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;

src/components/entity/ha-entity-toggle.ts

@@ -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;

src/components/entity/ha-state-label-badge.ts

@@ -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;

src/components/entity/state-badge.ts

@@ -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;

src/components/entity/state-info.ts

@@ -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;