Remove Lit localize mixin (#2597)

* Remove some localize mixins form Lit Elements

* Remove litLocalizeMixin

* Revert unwanted changes

src/auth/ha-authorize.ts

@@ -61,7 +61,7 @@ class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
     // So we sanitize the translation with innerText and then inject
     // the name with a bold tag.
     const loggingInWith = document.createElement("div");
-    loggingInWith.innerText = this.localize(
+    loggingInWith.innerText = this.hass!.localize(
       "ui.panel.page-authorize.logging_in_with",
       "authProviderName",
       "NAME"
@@ -78,7 +78,7 @@ class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
     return html`
       ${this.renderStyle()}
       <p>
-        ${this.localize(
+        ${this.hass!.localize(
           "ui.panel.page-authorize.authorizing_client",
           "clientId",
           this.clientId

src/layouts/app/disconnect-toast-mixin.ts

@@ -1,10 +1,9 @@
 import { Constructor, LitElement } from "lit-element";
 import { HassBaseEl } from "./hass-base-mixin";
-import { hassLocalizeLitMixin } from "../../mixins/lit-localize-mixin";
 import { HaToast } from "../../components/ha-toast";
 
 export default (superClass: Constructor<LitElement & HassBaseEl>) =>
-  class extends hassLocalizeLitMixin(superClass) {
+  class extends superClass {
     private _discToast?: HaToast;
 
     protected hassConnected() {

src/mixins/lit-localize-mixin.ts

@@ -1,16 +0,0 @@
-import { Constructor, LitElement } from "lit-element";
-import { HomeAssistant, LocalizeMixin } from "../types";
-
-const empty = () => "";
-
-export const hassLocalizeLitMixin = <T extends LitElement>(
-  superClass: Constructor<T>
-): Constructor<T & LocalizeMixin> =>
-  // @ts-ignore
-  class extends superClass {
-    public hass?: HomeAssistant;
-
-    get localize() {
-      return this.hass ? this.hass.localize : empty;
-    }
-  };

src/panels/lovelace/cards/hui-alarm-panel-card.ts

@@ -14,7 +14,6 @@ import {
   callAlarmAction,
   FORMAT_NUMBER,
 } from "../../../data/alarm_control_panel";
-import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
 
 import "../../../components/ha-card";
 import "../../../components/ha-label-badge";
@@ -41,8 +40,7 @@ export interface Config extends LovelaceCardConfig {
   states?: string[];
 }
 
-class HuiAlarmPanelCard extends hassLocalizeLitMixin(LitElement)
+class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
-  implements LovelaceCard {
   public static async getConfigElement() {
     await import(/* webpackChunkName: "hui-alarm-panel-card-editor" */ "../editor/config-elements/hui-alarm-panel-card-editor");
     return document.createElement("hui-alarm-panel-card-editor");
@@ -186,8 +184,8 @@ class HuiAlarmPanelCard extends hassLocalizeLitMixin(LitElement)
 
   private _label(state: string): string {
     return (
-      this.localize(`state.alarm_control_panel.${state}`) ||
+      this.hass!.localize(`state.alarm_control_panel.${state}`) ||
-      this.localize(`ui.card.alarm_control_panel.${state}`)
+      this.hass!.localize(`ui.card.alarm_control_panel.${state}`)
     );
   }
 

src/panels/lovelace/cards/hui-entities-card.ts

@@ -11,7 +11,6 @@ import "../components/hui-entities-toggle";
 
 import { fireEvent } from "../../../common/dom/fire_event";
 import { DOMAINS_HIDE_MORE_INFO } from "../../../common/const";
-import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
 import { HomeAssistant } from "../../../types";
 import { EntityConfig, EntityRow } from "../entity-rows/types";
 import { LovelaceCard, LovelaceCardEditor } from "../types";
@@ -37,8 +36,7 @@ export interface EntitiesCardConfig extends LovelaceCardConfig {
   theme?: string;
 }
 
-class HuiEntitiesCard extends hassLocalizeLitMixin(LitElement)
+class HuiEntitiesCard extends LitElement implements LovelaceCard {
-  implements LovelaceCard {
   public static async getConfigElement(): Promise<LovelaceCardEditor> {
     await import(/* webpackChunkName: "hui-entities-card-editor" */ "../editor/config-elements/hui-entities-card-editor");
     return document.createElement("hui-entities-card-editor");

src/panels/lovelace/cards/hui-entity-button-card.ts

@@ -16,7 +16,6 @@ import computeStateDomain from "../../../common/entity/compute_state_domain";
 import computeStateName from "../../../common/entity/compute_state_name";
 import applyThemesOnElement from "../../../common/dom/apply_themes_on_element";
 import { HomeAssistant, LightEntity } from "../../../types";
-import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
 import { LovelaceCard, LovelaceCardEditor } from "../types";
 import { LovelaceCardConfig, ActionConfig } from "../../../data/lovelace";
 import { longPress } from "../common/directives/long-press-directive";
@@ -31,8 +30,7 @@ export interface Config extends LovelaceCardConfig {
   hold_action?: ActionConfig;
 }
 
-class HuiEntityButtonCard extends hassLocalizeLitMixin(LitElement)
+class HuiEntityButtonCard extends LitElement implements LovelaceCard {
-  implements LovelaceCard {
   public static async getConfigElement(): Promise<LovelaceCardEditor> {
     await import(/* webpackChunkName: "hui-entity-button-card-editor" */ "../editor/config-elements/hui-entity-button-card-editor");
     return document.createElement("hui-entity-button-card-editor");

src/panels/lovelace/cards/hui-glance-card.ts

@@ -7,7 +7,6 @@ import {
 } from "lit-element";
 import { classMap } from "lit-html/directives/class-map";
 
-import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
 import { HomeAssistant } from "../../../types";
 import { LovelaceCard, LovelaceCardEditor } from "../types";
 import { LovelaceCardConfig, ActionConfig } from "../../../data/lovelace";
@@ -38,8 +37,7 @@ export interface Config extends LovelaceCardConfig {
   columns?: number;
 }
 
-export class HuiGlanceCard extends hassLocalizeLitMixin(LitElement)
+export class HuiGlanceCard extends LitElement implements LovelaceCard {
-  implements LovelaceCard {
   public static async getConfigElement(): Promise<LovelaceCardEditor> {
     await import(/* webpackChunkName: "hui-glance-card-editor" */ "../editor/config-elements/hui-glance-card-editor");
     return document.createElement("hui-glance-card-editor");
@@ -223,7 +221,7 @@ export class HuiGlanceCard extends hassLocalizeLitMixin(LitElement)
           ? html`
               <div>
                 ${computeStateDisplay(
-                  this.localize,
+                  this.hass!.localize,
                   stateObj,
                   this.hass!.language
                 )}

src/panels/lovelace/cards/hui-light-card.ts

@@ -9,7 +9,6 @@ import {
 import { fireEvent } from "../../../common/dom/fire_event";
 import { styleMap } from "lit-html/directives/style-map";
 import { HomeAssistant, LightEntity } from "../../../types";
-import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
 import { LovelaceCard, LovelaceCardEditor } from "../types";
 import { LovelaceCardConfig } from "../../../data/lovelace";
 import { longPress } from "../common/directives/long-press-directive";
@@ -45,8 +44,7 @@ export interface Config extends LovelaceCardConfig {
   theme?: string;
 }
 
-export class HuiLightCard extends hassLocalizeLitMixin(LitElement)
+export class HuiLightCard extends LitElement implements LovelaceCard {
-  implements LovelaceCard {
   public static async getConfigElement(): Promise<LovelaceCardEditor> {
     await import(/* webpackChunkName: "hui-light-card-editor" */ "../editor/config-elements/hui-light-card-editor");
     return document.createElement("hui-light-card-editor");

src/panels/lovelace/cards/hui-picture-entity-card.ts

@@ -14,7 +14,6 @@ import computeStateDisplay from "../../../common/entity/compute_state_display";
 import computeStateName from "../../../common/entity/compute_state_name";
 
 import { longPress } from "../common/directives/long-press-directive";
-import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
 import { HomeAssistant } from "../../../types";
 import { LovelaceCardConfig, ActionConfig } from "../../../data/lovelace";
 import { LovelaceCard } from "../types";
@@ -38,8 +37,7 @@ interface Config extends LovelaceCardConfig {
   show_state?: boolean;
 }
 
-class HuiPictureEntityCard extends hassLocalizeLitMixin(LitElement)
+class HuiPictureEntityCard extends LitElement implements LovelaceCard {
-  implements LovelaceCard {
   public hass?: HomeAssistant;
   private _config?: Config;
 
@@ -89,7 +87,7 @@ class HuiPictureEntityCard extends hassLocalizeLitMixin(LitElement)
 
     const name = this._config.name || computeStateName(stateObj);
     const state = computeStateDisplay(
-      this.localize,
+      this.hass!.localize,
       stateObj,
       this.hass.language
     );

src/panels/lovelace/cards/hui-picture-glance-card.ts

@@ -6,7 +6,6 @@ import {
 } from "lit-element";
 import { classMap } from "lit-html/directives/class-map";
 
-import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
 import { DOMAINS_TOGGLE } from "../../../common/const";
 import { LovelaceCard } from "../types";
 import { LovelaceCardConfig, ActionConfig } from "../../../data/lovelace";
@@ -40,8 +39,7 @@ interface Config extends LovelaceCardConfig {
   hold_action?: ActionConfig;
 }
 
-class HuiPictureGlanceCard extends hassLocalizeLitMixin(LitElement)
+class HuiPictureGlanceCard extends LitElement implements LovelaceCard {
-  implements LovelaceCard {
   public hass?: HomeAssistant;
   private _config?: Config;
   private _entitiesDialog?: EntityConfig[];
@@ -154,7 +152,7 @@ class HuiPictureGlanceCard extends hassLocalizeLitMixin(LitElement)
         .icon="${entityConf.icon || stateIcon(stateObj)}"
         title="${`
             ${computeStateName(stateObj)} : ${computeStateDisplay(
-          this.localize,
+          this.hass!.localize,
           stateObj,
           this.hass!.language
         )}

src/panels/lovelace/cards/hui-shopping-list-card.ts

@@ -6,7 +6,6 @@ import "@polymer/paper-checkbox/paper-checkbox";
 import "../../../components/ha-card";
 import "../../../components/ha-icon";
 
-import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
 import { HomeAssistant } from "../../../types";
 import { LovelaceCard, LovelaceCardEditor } from "../types";
 import { LovelaceCardConfig } from "../../../data/lovelace";
@@ -22,8 +21,7 @@ export interface Config extends LovelaceCardConfig {
   title?: string;
 }
 
-class HuiShoppingListCard extends hassLocalizeLitMixin(LitElement)
+class HuiShoppingListCard extends LitElement implements LovelaceCard {
-  implements LovelaceCard {
   public static async getConfigElement(): Promise<LovelaceCardEditor> {
     await import(/* webpackChunkName: "hui-shopping-list-editor" */ "../editor/config-elements/hui-shopping-list-editor");
     return document.createElement("hui-shopping-list-card-editor");
@@ -91,7 +89,7 @@ class HuiShoppingListCard extends hassLocalizeLitMixin(LitElement)
             class="addButton"
             @click="${this._addItem}"
             icon="hass:plus"
-            .title="${this.localize(
+            .title="${this.hass!.localize(
               "ui.panel.lovelace.cards.shopping-list.add_item"
             )}"
           >
@@ -100,7 +98,7 @@ class HuiShoppingListCard extends hassLocalizeLitMixin(LitElement)
             <paper-input
               no-label-float
               class="addBox"
-              placeholder="${this.localize(
+              placeholder="${this.hass!.localize(
                 "ui.panel.lovelace.cards.shopping-list.add_item"
               )}"
               @keydown="${this._addKeyPress}"
@@ -137,7 +135,7 @@ class HuiShoppingListCard extends hassLocalizeLitMixin(LitElement)
               <div class="divider"></div>
               <div class="checked">
                 <span class="label">
-                  ${this.localize(
+                  ${this.hass!.localize(
                     "ui.panel.lovelace.cards.shopping-list.checked_items"
                   )}
                 </span>
@@ -145,7 +143,7 @@ class HuiShoppingListCard extends hassLocalizeLitMixin(LitElement)
                   class="clearall"
                   @click="${this._clearItems}"
                   icon="hass:notification-clear-all"
-                  .title="${this.localize(
+                  .title="${this.hass!.localize(
                     "ui.panel.lovelace.cards.shopping-list.clear_items"
                   )}"
                 >

src/panels/lovelace/cards/hui-thermostat-card.ts

@@ -15,7 +15,6 @@ import computeStateName from "../../../common/entity/compute_state_name";
 
 import { hasConfigOrEntityChanged } from "../common/has-changed";
 import { HomeAssistant, ClimateEntity } from "../../../types";
-import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
 import { LovelaceCard, LovelaceCardEditor } from "../types";
 import { LovelaceCardConfig } from "../../../data/lovelace";
 import { loadRoundslider } from "../../../resources/jquery.roundslider.ondemand";
@@ -51,8 +50,7 @@ export interface Config extends LovelaceCardConfig {
   name?: string;
 }
 
-export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
+export class HuiThermostatCard extends LitElement implements LovelaceCard {
-  implements LovelaceCard {
   public static async getConfigElement(): Promise<LovelaceCardEditor> {
     await import(/* webpackChunkName: "hui-thermostat-card-editor" */ "../editor/config-elements/hui-thermostat-card-editor");
     return document.createElement("hui-thermostat-card-editor");
@@ -145,7 +143,7 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
             </div>
             <div class="climate-info">
             <div id="set-temperature"></div>
-            <div class="current-mode">${this.localize(
+            <div class="current-mode">${this.hass!.localize(
               `state.climate.${stateObj.state}`
             )}</div>
             <div class="modes">

src/panels/lovelace/components/hui-card-options.ts

@@ -5,7 +5,6 @@ import "@polymer/paper-icon-button/paper-icon-button";
 import "@polymer/paper-listbox/paper-listbox";
 
 import { showEditCardDialog } from "../editor/card-editor/show-edit-card-dialog";
-import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
 import { confDeleteCard } from "../editor/delete-card";
 import { HomeAssistant } from "../../../types";
 import { LovelaceCardConfig } from "../../../data/lovelace";
@@ -13,7 +12,7 @@ import { Lovelace } from "../types";
 import { swapCard } from "../editor/config-util";
 import { showMoveCardViewDialog } from "../editor/card-editor/show-move-card-view-dialog";
 
-export class HuiCardOptions extends hassLocalizeLitMixin(LitElement) {
+export class HuiCardOptions extends LitElement {
   public cardConfig?: LovelaceCardConfig;
   public hass?: HomeAssistant;
   public lovelace?: Lovelace;
@@ -71,7 +70,7 @@ export class HuiCardOptions extends hassLocalizeLitMixin(LitElement) {
       <div class="options">
         <div class="primary-actions">
           <paper-button @click="${this._editCard}"
-            >${this.localize(
+            >${this.hass!.localize(
               "ui.panel.lovelace.editor.edit_card.edit"
             )}</paper-button
           >
@@ -101,7 +100,7 @@ export class HuiCardOptions extends hassLocalizeLitMixin(LitElement) {
             <paper-listbox slot="dropdown-content">
               <paper-item @click="${this._moveCard}">Move Card</paper-item>
               <paper-item @click="${this._deleteCard}"
-                >${this.localize(
+                >${this.hass!.localize(
                   "ui.panel.lovelace.editor.edit_card.delete"
                 )}</paper-item
               >

src/panels/lovelace/components/hui-theme-select-editor.ts

@@ -8,7 +8,6 @@ import "@polymer/paper-button/paper-button";
 
 import { HomeAssistant } from "../../../types";
 import { fireEvent, HASSDomEvent } from "../../../common/dom/fire_event";
-import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
 
 declare global {
   // for fire event
@@ -21,7 +20,7 @@ declare global {
   }
 }
 
-export class HuiThemeSelectionEditor extends hassLocalizeLitMixin(LitElement) {
+export class HuiThemeSelectionEditor extends LitElement {
   public value?: string;
   public hass?: HomeAssistant;
 

src/panels/lovelace/components/hui-timestamp-display.ts

@@ -11,7 +11,6 @@ import format_date from "../../../common/datetime/format_date";
 import format_date_time from "../../../common/datetime/format_date_time";
 import format_time from "../../../common/datetime/format_time";
 import relativeTime from "../../../common/datetime/relative_time";
-import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
 
 const FORMATS: { [key: string]: (ts: Date, lang: string) => string } = {
   date: format_date,
@@ -20,7 +19,7 @@ const FORMATS: { [key: string]: (ts: Date, lang: string) => string } = {
 };
 const INTERVAL_FORMAT = ["relative", "total"];
 
-class HuiTimestampDisplay extends hassLocalizeLitMixin(LitElement) {
+class HuiTimestampDisplay extends LitElement {
   public hass?: HomeAssistant;
   public ts?: Date;
   public format?: "relative" | "total" | "date" | "datetime" | "time";
@@ -110,11 +109,11 @@ class HuiTimestampDisplay extends hassLocalizeLitMixin(LitElement) {
   }
 
   private _updateRelative() {
-    if (this.ts && this.localize) {
+    if (this.ts && this.hass!.localize) {
       this._relative =
         this._format === "relative"
-          ? relativeTime(this.ts, this.localize)
+          ? relativeTime(this.ts, this.hass!.localize)
-          : (this._relative = relativeTime(new Date(), this.localize, {
+          : (this._relative = relativeTime(new Date(), this.hass!.localize, {
               compareTime: this.ts,
               includeTense: false,
             }));

src/panels/lovelace/editor/card-editor/hui-card-picker.ts

@@ -5,7 +5,6 @@ import { HomeAssistant } from "../../../../types";
 import { LovelaceCardConfig } from "../../../../data/lovelace";
 import { getCardElementTag } from "../../common/get-card-element-tag";
 import { CardPickTarget } from "../types";
-import { hassLocalizeLitMixin } from "../../../../mixins/lit-localize-mixin";
 
 const cards = [
   { name: "Alarm panel", type: "alarm-panel" },
@@ -34,13 +33,15 @@ const cards = [
   { name: "Weather Forecast", type: "weather-forecast" },
 ];
 
-export class HuiCardPicker extends hassLocalizeLitMixin(LitElement) {
+export class HuiCardPicker extends LitElement {
   public hass?: HomeAssistant;
   public cardPicked?: (cardConf: LovelaceCardConfig) => void;
 
   protected render(): TemplateResult | void {
     return html`
-      <h3>${this.localize("ui.panel.lovelace.editor.edit_card.pick_card")}</h3>
+      <h3>
+        ${this.hass!.localize("ui.panel.lovelace.editor.edit_card.pick_card")}
+      </h3>
       <div class="cards-container">
         ${cards.map((card) => {
           return html`

src/panels/lovelace/editor/card-editor/hui-dialog-move-card-view.ts

@@ -9,11 +9,10 @@ import "@polymer/paper-item/paper-item";
 // tslint:disable-next-line:no-duplicate-imports
 import { PaperDialogElement } from "@polymer/paper-dialog/paper-dialog";
 
-import { hassLocalizeLitMixin } from "../../../../mixins/lit-localize-mixin";
 import { moveCard } from "../config-util";
 import { MoveCardViewDialogParams } from "./show-move-card-view-dialog";
 
-export class HuiDialogMoveCardView extends hassLocalizeLitMixin(LitElement) {
+export class HuiDialogMoveCardView extends LitElement {
   private _params?: MoveCardViewDialogParams;
 
   static get properties(): PropertyDeclarations {

src/panels/lovelace/editor/card-editor/hui-dialog-pick-card.ts

@@ -13,10 +13,9 @@ import { haStyleDialog } from "../../../../resources/ha-style";
 
 import "./hui-card-picker";
 import { HomeAssistant } from "../../../../types";
-import { hassLocalizeLitMixin } from "../../../../mixins/lit-localize-mixin";
 import { LovelaceCardConfig } from "../../../../data/lovelace";
 
-export class HuiDialogPickCard extends hassLocalizeLitMixin(LitElement) {
+export class HuiDialogPickCard extends LitElement {
   public hass?: HomeAssistant;
   public cardPicked?: (cardConf: LovelaceCardConfig) => void;
   public closeDialog?: () => void;
@@ -32,7 +31,9 @@ export class HuiDialogPickCard extends hassLocalizeLitMixin(LitElement) {
         opened
         @opened-changed="${this._openedChanged}"
       >
-        <h2>${this.localize("ui.panel.lovelace.editor.edit_card.header")}</h2>
+        <h2>
+          ${this.hass!.localize("ui.panel.lovelace.editor.edit_card.header")}
+        </h2>
         <paper-dialog-scrollable>
           <hui-card-picker
             .hass="${this.hass}"

src/panels/lovelace/editor/card-editor/hui-edit-card.ts

@@ -22,7 +22,6 @@ import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import { HomeAssistant } from "../../../../types";
 import { LovelaceCardConfig } from "../../../../data/lovelace";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import { hassLocalizeLitMixin } from "../../../../mixins/lit-localize-mixin";
 
 import "./hui-yaml-editor";
 import "./hui-card-preview";
@@ -50,7 +49,7 @@ declare global {
   }
 }
 
-export class HuiEditCard extends hassLocalizeLitMixin(LitElement) {
+export class HuiEditCard extends LitElement {
   public hass?: HomeAssistant;
   public lovelace?: Lovelace;
   public path?: [number] | [number, number];
@@ -140,7 +139,9 @@ export class HuiEditCard extends hassLocalizeLitMixin(LitElement) {
         opened
         @opened-changed="${this._openedChanged}"
       >
-        <h2>${this.localize("ui.panel.lovelace.editor.edit_card.header")}</h2>
+        <h2>
+          ${this.hass!.localize("ui.panel.lovelace.editor.edit_card.header")}
+        </h2>
         <paper-spinner
           ?active="${this._loading}"
           alt="Loading"
@@ -165,12 +166,12 @@ export class HuiEditCard extends hassLocalizeLitMixin(LitElement) {
                   ?disabled="${this._configElement === null ||
                     this._configState !== "OK"}"
                   @click="${this._toggleEditor}"
-                  >${this.localize(
+                  >${this.hass!.localize(
                     "ui.panel.lovelace.editor.edit_card.toggle_editor"
                   )}</paper-button
                 >
                 <paper-button @click="${this.closeDialog}"
-                  >${this.localize("ui.common.cancel")}</paper-button
+                  >${this.hass!.localize("ui.common.cancel")}</paper-button
                 >
                 <paper-button
                   ?hidden="${!this._configValue || !this._configValue.value}"
@@ -181,7 +182,7 @@ export class HuiEditCard extends hassLocalizeLitMixin(LitElement) {
                     ?active="${this._saving}"
                     alt="Saving"
                   ></paper-spinner>
-                  ${this.localize("ui.common.save")}</paper-button
+                  ${this.hass!.localize("ui.common.save")}</paper-button
                 >
               </div>
             `

src/panels/lovelace/editor/config-elements/hui-alarm-panel-card-editor.ts

@@ -10,7 +10,6 @@ import "@polymer/paper-listbox/paper-listbox";
 
 import { struct } from "../../common/structs/struct";
 import { EntitiesEditorEvent, EditorTarget } from "../types";
-import { hassLocalizeLitMixin } from "../../../../mixins/lit-localize-mixin";
 import { HomeAssistant } from "../../../../types";
 import { LovelaceCardEditor } from "../../types";
 import { fireEvent } from "../../../../common/dom/fire_event";
@@ -27,7 +26,7 @@ const cardConfigStruct = struct({
   states: "array?",
 });
 
-export class HuiAlarmPanelCardEditor extends hassLocalizeLitMixin(LitElement)
+export class HuiAlarmPanelCardEditor extends LitElement
   implements LovelaceCardEditor {
   public hass?: HomeAssistant;
   private _config?: Config;

src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts

@@ -12,7 +12,6 @@ import "@polymer/paper-toggle-button/paper-toggle-button";
 import { processEditorEntities } from "../process-editor-entities";
 import { struct } from "../../common/structs/struct";
 import { EntitiesEditorEvent, EditorTarget } from "../types";
-import { hassLocalizeLitMixin } from "../../../../mixins/lit-localize-mixin";
 import { HomeAssistant } from "../../../../types";
 import { LovelaceCardEditor } from "../../types";
 import { fireEvent } from "../../../../common/dom/fire_event";
@@ -45,7 +44,7 @@ const cardConfigStruct = struct({
   entities: [entitiesConfigStruct],
 });
 
-export class HuiEntitiesCardEditor extends hassLocalizeLitMixin(LitElement)
+export class HuiEntitiesCardEditor extends LitElement
   implements LovelaceCardEditor {
   static get properties(): PropertyDeclarations {
     return { hass: {}, _config: {}, _configEntities: {} };

src/panels/lovelace/editor/config-elements/hui-entity-button-card-editor.ts

@@ -12,7 +12,6 @@ import {
   EditorTarget,
   actionConfigStruct,
 } from "../types";
-import { hassLocalizeLitMixin } from "../../../../mixins/lit-localize-mixin";
 import { HomeAssistant } from "../../../../types";
 import { LovelaceCardEditor } from "../../types";
 import { fireEvent } from "../../../../common/dom/fire_event";
@@ -34,7 +33,7 @@ const cardConfigStruct = struct({
   theme: "string?",
 });
 
-export class HuiEntityButtonCardEditor extends hassLocalizeLitMixin(LitElement)
+export class HuiEntityButtonCardEditor extends LitElement
   implements LovelaceCardEditor {
   public hass?: HomeAssistant;
   private _config?: Config;

src/panels/lovelace/editor/config-elements/hui-gauge-card-editor.ts

@@ -9,7 +9,6 @@ import "@polymer/paper-toggle-button/paper-toggle-button";
 
 import { struct } from "../../common/structs/struct";
 import { EntitiesEditorEvent, EditorTarget } from "../types";
-import { hassLocalizeLitMixin } from "../../../../mixins/lit-localize-mixin";
 import { HomeAssistant } from "../../../../types";
 import { LovelaceCardEditor } from "../../types";
 import { fireEvent } from "../../../../common/dom/fire_event";
@@ -30,7 +29,7 @@ const cardConfigStruct = struct({
   theme: "string?",
 });
 
-export class HuiGaugeCardEditor extends hassLocalizeLitMixin(LitElement)
+export class HuiGaugeCardEditor extends LitElement
   implements LovelaceCardEditor {
   public hass?: HomeAssistant;
   private _config?: Config;

src/panels/lovelace/editor/config-elements/hui-glance-card-editor.ts

@@ -12,7 +12,6 @@ import "@polymer/paper-toggle-button/paper-toggle-button";
 import { struct } from "../../common/structs/struct";
 import { processEditorEntities } from "../process-editor-entities";
 import { EntitiesEditorEvent, EditorTarget } from "../types";
-import { hassLocalizeLitMixin } from "../../../../mixins/lit-localize-mixin";
 import { HomeAssistant } from "../../../../types";
 import { LovelaceCardEditor } from "../../types";
 import { fireEvent } from "../../../../common/dom/fire_event";
@@ -44,7 +43,7 @@ const cardConfigStruct = struct({
   entities: [entitiesConfigStruct],
 });
 
-export class HuiGlanceCardEditor extends hassLocalizeLitMixin(LitElement)
+export class HuiGlanceCardEditor extends LitElement
   implements LovelaceCardEditor {
   public hass?: HomeAssistant;
   private _config?: Config;

src/panels/lovelace/editor/config-elements/hui-iframe-card-editor.ts

@@ -8,7 +8,6 @@ import "@polymer/paper-input/paper-input";
 
 import { struct } from "../../common/structs/struct";
 import { EntitiesEditorEvent, EditorTarget } from "../types";
-import { hassLocalizeLitMixin } from "../../../../mixins/lit-localize-mixin";
 import { HomeAssistant } from "../../../../types";
 import { LovelaceCardEditor } from "../../types";
 import { fireEvent } from "../../../../common/dom/fire_event";
@@ -22,7 +21,7 @@ const cardConfigStruct = struct({
   aspect_ratio: "string?",
 });
 
-export class HuiIframeCardEditor extends hassLocalizeLitMixin(LitElement)
+export class HuiIframeCardEditor extends LitElement
   implements LovelaceCardEditor {
   public hass?: HomeAssistant;
   private _config?: Config;

src/panels/lovelace/editor/config-elements/hui-light-card-editor.ts

@@ -8,7 +8,6 @@ import "@polymer/paper-input/paper-input";
 
 import { struct } from "../../common/structs/struct";
 import { EntitiesEditorEvent, EditorTarget } from "../types";
-import { hassLocalizeLitMixin } from "../../../../mixins/lit-localize-mixin";
 import { HomeAssistant } from "../../../../types";
 import { LovelaceCardEditor } from "../../types";
 import { fireEvent } from "../../../../common/dom/fire_event";
@@ -25,7 +24,7 @@ const cardConfigStruct = struct({
   theme: "string?",
 });
 
-export class HuiLightCardEditor extends hassLocalizeLitMixin(LitElement)
+export class HuiLightCardEditor extends LitElement
   implements LovelaceCardEditor {
   public hass?: HomeAssistant;
   private _config?: Config;

src/panels/lovelace/editor/config-elements/hui-map-card-editor.ts

@@ -8,7 +8,6 @@ import "@polymer/paper-input/paper-input";
 
 import { struct } from "../../common/structs/struct";
 import { EntitiesEditorEvent, EditorTarget } from "../types";
-import { hassLocalizeLitMixin } from "../../../../mixins/lit-localize-mixin";
 import { HomeAssistant } from "../../../../types";
 import { LovelaceCardEditor } from "../../types";
 import { fireEvent } from "../../../../common/dom/fire_event";
@@ -36,8 +35,7 @@ const cardConfigStruct = struct({
   entities: [entitiesConfigStruct],
 });
 
-export class HuiMapCardEditor extends hassLocalizeLitMixin(LitElement)
+export class HuiMapCardEditor extends LitElement implements LovelaceCardEditor {
-  implements LovelaceCardEditor {
   public hass?: HomeAssistant;
   private _config?: Config;
   private _configEntities?: EntityConfig[];

src/panels/lovelace/editor/config-elements/hui-markdown-card-editor.ts

@@ -9,7 +9,6 @@ import "@polymer/paper-input/paper-textarea";
 
 import { struct } from "../../common/structs/struct";
 import { EntitiesEditorEvent, EditorTarget } from "../types";
-import { hassLocalizeLitMixin } from "../../../../mixins/lit-localize-mixin";
 import { HomeAssistant } from "../../../../types";
 import { LovelaceCardEditor } from "../../types";
 import { fireEvent } from "../../../../common/dom/fire_event";
@@ -22,7 +21,7 @@ const cardConfigStruct = struct({
   content: "string",
 });
 
-export class HuiMarkdownCardEditor extends hassLocalizeLitMixin(LitElement)
+export class HuiMarkdownCardEditor extends LitElement
   implements LovelaceCardEditor {
   public hass?: HomeAssistant;
   private _config?: Config;

src/panels/lovelace/editor/config-elements/hui-media-control-card-editor.ts

@@ -7,7 +7,6 @@ import {
 
 import { struct } from "../../common/structs/struct";
 import { EntitiesEditorEvent, EditorTarget } from "../types";
-import { hassLocalizeLitMixin } from "../../../../mixins/lit-localize-mixin";
 import { HomeAssistant } from "../../../../types";
 import { LovelaceCardEditor } from "../../types";
 import { fireEvent } from "../../../../common/dom/fire_event";
@@ -20,7 +19,7 @@ const cardConfigStruct = struct({
   entity: "string?",
 });
 
-export class HuiMediaControlCardEditor extends hassLocalizeLitMixin(LitElement)
+export class HuiMediaControlCardEditor extends LitElement
   implements LovelaceCardEditor {
   public hass?: HomeAssistant;
   private _config?: Config;

src/panels/lovelace/editor/config-elements/hui-picture-card-editor.ts

@@ -12,7 +12,6 @@ import {
   EditorTarget,
   actionConfigStruct,
 } from "../types";
-import { hassLocalizeLitMixin } from "../../../../mixins/lit-localize-mixin";
 import { HomeAssistant } from "../../../../types";
 import { LovelaceCardEditor } from "../../types";
 import { fireEvent } from "../../../../common/dom/fire_event";
@@ -29,7 +28,7 @@ const cardConfigStruct = struct({
   hold_action: struct.optional(actionConfigStruct),
 });
 
-export class HuiPictureCardEditor extends hassLocalizeLitMixin(LitElement)
+export class HuiPictureCardEditor extends LitElement
   implements LovelaceCardEditor {
   public hass?: HomeAssistant;
   private _config?: Config;

src/panels/lovelace/editor/config-elements/hui-plant-status-card-editor.ts

@@ -8,7 +8,6 @@ import "@polymer/paper-input/paper-input";
 
 import { struct } from "../../common/structs/struct";
 import { EntitiesEditorEvent, EditorTarget } from "../types";
-import { hassLocalizeLitMixin } from "../../../../mixins/lit-localize-mixin";
 import { HomeAssistant } from "../../../../types";
 import { LovelaceCardEditor } from "../../types";
 import { fireEvent } from "../../../../common/dom/fire_event";
@@ -24,7 +23,7 @@ const cardConfigStruct = struct({
   name: "string?",
 });
 
-export class HuiPlantStatusCardEditor extends hassLocalizeLitMixin(LitElement)
+export class HuiPlantStatusCardEditor extends LitElement
   implements LovelaceCardEditor {
   public hass?: HomeAssistant;
   private _config?: Config;

src/panels/lovelace/editor/config-elements/hui-sensor-card-editor.ts

@@ -11,7 +11,6 @@ import "@polymer/paper-listbox/paper-listbox";
 
 import { struct } from "../../common/structs/struct";
 import { EntitiesEditorEvent, EditorTarget } from "../types";
-import { hassLocalizeLitMixin } from "../../../../mixins/lit-localize-mixin";
 import { HomeAssistant } from "../../../../types";
 import { LovelaceCardEditor } from "../../types";
 import { fireEvent } from "../../../../common/dom/fire_event";
@@ -33,7 +32,7 @@ const cardConfigStruct = struct({
   hours_to_show: "number?",
 });
 
-export class HuiSensorCardEditor extends hassLocalizeLitMixin(LitElement)
+export class HuiSensorCardEditor extends LitElement
   implements LovelaceCardEditor {
   public hass?: HomeAssistant;
   private _config?: Config;

src/panels/lovelace/editor/config-elements/hui-shopping-list-editor.ts

@@ -8,7 +8,6 @@ import "@polymer/paper-input/paper-input";
 
 import { struct } from "../../common/structs/struct";
 import { EntitiesEditorEvent, EditorTarget } from "../types";
-import { hassLocalizeLitMixin } from "../../../../mixins/lit-localize-mixin";
 import { HomeAssistant } from "../../../../types";
 import { LovelaceCardEditor } from "../../types";
 import { fireEvent } from "../../../../common/dom/fire_event";
@@ -19,7 +18,7 @@ const cardConfigStruct = struct({
   title: "string?",
 });
 
-export class HuiShoppingListEditor extends hassLocalizeLitMixin(LitElement)
+export class HuiShoppingListEditor extends LitElement
   implements LovelaceCardEditor {
   public hass?: HomeAssistant;
   private _config?: Config;

src/panels/lovelace/editor/config-elements/hui-thermostat-card-editor.ts

@@ -8,7 +8,6 @@ import "@polymer/paper-input/paper-input";
 
 import { struct } from "../../common/structs/struct";
 import { EntitiesEditorEvent, EditorTarget } from "../types";
-import { hassLocalizeLitMixin } from "../../../../mixins/lit-localize-mixin";
 import { HomeAssistant } from "../../../../types";
 import { LovelaceCardEditor } from "../../types";
 import { fireEvent } from "../../../../common/dom/fire_event";
@@ -25,7 +24,7 @@ const cardConfigStruct = struct({
   theme: "string?",
 });
 
-export class HuiThermostatCardEditor extends hassLocalizeLitMixin(LitElement)
+export class HuiThermostatCardEditor extends LitElement
   implements LovelaceCardEditor {
   public hass?: HomeAssistant;
   private _config?: Config;

src/panels/lovelace/editor/config-elements/hui-weather-forecast-card-editor.ts

@@ -7,7 +7,6 @@ import {
 
 import { struct } from "../../common/structs/struct";
 import { EntitiesEditorEvent, EditorTarget } from "../types";
-import { hassLocalizeLitMixin } from "../../../../mixins/lit-localize-mixin";
 import { HomeAssistant } from "../../../../types";
 import { LovelaceCardEditor } from "../../types";
 import { fireEvent } from "../../../../common/dom/fire_event";
@@ -22,8 +21,7 @@ const cardConfigStruct = struct({
   name: "string?",
 });
 
-export class HuiWeatherForecastCardEditor
+export class HuiWeatherForecastCardEditor extends LitElement
-  extends hassLocalizeLitMixin(LitElement)
   implements LovelaceCardEditor {
   public hass?: HomeAssistant;
   private _config?: Config;

src/panels/lovelace/editor/hui-dialog-save-config.ts

@@ -18,10 +18,9 @@ import { haStyleDialog } from "../../../resources/ha-style";
 
 import { HomeAssistant } from "../../../types";
 
-import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
 import { SaveDialogParams } from "./show-save-config-dialog";
 
-export class HuiSaveConfig extends hassLocalizeLitMixin(LitElement) {
+export class HuiSaveConfig extends LitElement {
   public hass?: HomeAssistant;
   private _params?: SaveDialogParams;
   private _saving: boolean;
@@ -52,16 +51,22 @@ export class HuiSaveConfig extends hassLocalizeLitMixin(LitElement) {
   protected render(): TemplateResult | void {
     return html`
       <paper-dialog with-backdrop>
-        <h2>${this.localize("ui.panel.lovelace.editor.save_config.header")}</h2>
+        <h2>
+          ${this.hass!.localize("ui.panel.lovelace.editor.save_config.header")}
+        </h2>
         <paper-dialog-scrollable>
-          <p>${this.localize("ui.panel.lovelace.editor.save_config.para")}</p>
           <p>
-            ${this.localize("ui.panel.lovelace.editor.save_config.para_sure")}
+            ${this.hass!.localize("ui.panel.lovelace.editor.save_config.para")}
+          </p>
+          <p>
+            ${this.hass!.localize(
+              "ui.panel.lovelace.editor.save_config.para_sure"
+            )}
           </p>
         </paper-dialog-scrollable>
         <div class="paper-dialog-buttons">
           <paper-button @click="${this._closeDialog}"
-            >${this.localize(
+            >${this.hass!.localize(
               "ui.panel.lovelace.editor.save_config.cancel"
             )}</paper-button
           >
@@ -73,7 +78,7 @@ export class HuiSaveConfig extends hassLocalizeLitMixin(LitElement) {
               ?active="${this._saving}"
               alt="Saving"
             ></paper-spinner>
-            ${this.localize(
+            ${this.hass!.localize(
               "ui.panel.lovelace.editor.save_config.save"
             )}</paper-button
           >

src/panels/lovelace/editor/lovelace-editor/hui-dialog-edit-lovelace.ts

@@ -19,10 +19,9 @@ import { haStyleDialog } from "../../../../resources/ha-style";
 import "./hui-lovelace-editor";
 import { HomeAssistant } from "../../../../types";
 import { LovelaceConfig } from "../../../../data/lovelace";
-import { hassLocalizeLitMixin } from "../../../../mixins/lit-localize-mixin";
 import { Lovelace } from "../../types";
 
-export class HuiDialogEditLovelace extends hassLocalizeLitMixin(LitElement) {
+export class HuiDialogEditLovelace extends LitElement {
   public hass?: HomeAssistant;
   private _lovelace?: Lovelace;
   private _config?: LovelaceConfig;
@@ -69,7 +68,7 @@ export class HuiDialogEditLovelace extends hassLocalizeLitMixin(LitElement) {
         ></paper-dialog-scrollable>
         <div class="paper-dialog-buttons">
           <paper-button @click="${this._closeDialog}"
-            >${this.localize("ui.common.cancel")}</paper-button
+            >${this.hass!.localize("ui.common.cancel")}</paper-button
           >
           <paper-button
             ?disabled="${!this._config || this._saving}"
@@ -79,7 +78,7 @@ export class HuiDialogEditLovelace extends hassLocalizeLitMixin(LitElement) {
               ?active="${this._saving}"
               alt="Saving"
             ></paper-spinner>
-            ${this.localize("ui.common.save")}</paper-button
+            ${this.hass!.localize("ui.common.save")}</paper-button
           >
         </div>
       </paper-dialog>

src/panels/lovelace/editor/lovelace-editor/hui-lovelace-editor.ts

@@ -7,7 +7,6 @@ import {
 import "@polymer/paper-input/paper-input";
 
 import { EditorTarget } from "../types";
-import { hassLocalizeLitMixin } from "../../../../mixins/lit-localize-mixin";
 import { HomeAssistant } from "../../../../types";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { configElementStyle } from "../config-elements/config-elements-style";
@@ -22,7 +21,7 @@ declare global {
   }
 }
 
-export class HuiLovelaceEditor extends hassLocalizeLitMixin(LitElement) {
+export class HuiLovelaceEditor extends LitElement {
   static get properties(): PropertyDeclarations {
     return { hass: {}, config: {} };
   }

src/panels/lovelace/editor/view-editor/hui-edit-view.ts

@@ -28,7 +28,6 @@ import {
   LovelaceCardConfig,
 } from "../../../../data/lovelace";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import { hassLocalizeLitMixin } from "../../../../mixins/lit-localize-mixin";
 import { EntitiesEditorEvent, ViewEditEvent } from "../types";
 import { processEditorEntities } from "../process-editor-entities";
 import { EntityConfig } from "../../entity-rows/types";
@@ -36,7 +35,7 @@ import { navigate } from "../../../../common/navigate";
 import { Lovelace } from "../../types";
 import { deleteView, addView, replaceView } from "../config-util";
 
-export class HuiEditView extends hassLocalizeLitMixin(LitElement) {
+export class HuiEditView extends LitElement {
   public lovelace?: Lovelace;
   public viewIndex?: number;
   public hass?: HomeAssistant;
@@ -121,7 +120,9 @@ export class HuiEditView extends hassLocalizeLitMixin(LitElement) {
     }
     return html`
       <paper-dialog with-backdrop>
-        <h2>${this.localize("ui.panel.lovelace.editor.edit_view.header")}</h2>
+        <h2>
+          ${this.hass!.localize("ui.panel.lovelace.editor.edit_view.header")}
+        </h2>
         <paper-tabs
           scrollable
           hide-scroll-buttons
@@ -144,7 +145,7 @@ export class HuiEditView extends hassLocalizeLitMixin(LitElement) {
               `
             : ""}
           <paper-button @click="${this._closeDialog}"
-            >${this.localize("ui.common.cancel")}</paper-button
+            >${this.hass!.localize("ui.common.cancel")}</paper-button
           >
           <paper-button
             ?disabled="${!this._config || this._saving}"
@@ -154,7 +155,7 @@ export class HuiEditView extends hassLocalizeLitMixin(LitElement) {
               ?active="${this._saving}"
               alt="Saving"
             ></paper-spinner>
-            ${this.localize("ui.common.save")}</paper-button
+            ${this.hass!.localize("ui.common.save")}</paper-button
           >
         </div>
       </paper-dialog>

src/panels/lovelace/editor/view-editor/hui-view-editor.ts

@@ -7,7 +7,6 @@ import {
 import "@polymer/paper-input/paper-input";
 
 import { EditorTarget } from "../types";
-import { hassLocalizeLitMixin } from "../../../../mixins/lit-localize-mixin";
 import { HomeAssistant } from "../../../../types";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { configElementStyle } from "../config-elements/config-elements-style";
@@ -23,7 +22,7 @@ declare global {
   }
 }
 
-export class HuiViewEditor extends hassLocalizeLitMixin(LitElement) {
+export class HuiViewEditor extends LitElement {
   static get properties(): PropertyDeclarations {
     return { hass: {}, _config: {} };
   }

src/panels/lovelace/elements/hui-icon-element.ts

@@ -5,7 +5,6 @@ import "../../../components/ha-icon";
 import { computeTooltip } from "../common/compute-tooltip";
 import { handleClick } from "../common/handle-click";
 import { longPress } from "../common/directives/long-press-directive";
-import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
 import { LovelaceElement, LovelaceElementConfig } from "./types";
 import { HomeAssistant } from "../../../types";
 
@@ -13,8 +12,7 @@ interface Config extends LovelaceElementConfig {
   icon: string;
 }
 
-export class HuiIconElement extends hassLocalizeLitMixin(LitElement)
+export class HuiIconElement extends LitElement implements LovelaceElement {
-  implements LovelaceElement {
   public hass?: HomeAssistant;
   private _config?: Config;
 

src/panels/lovelace/elements/hui-image-element.ts

@@ -5,7 +5,6 @@ import "../components/hui-image";
 import { computeTooltip } from "../common/compute-tooltip";
 import { handleClick } from "../common/handle-click";
 import { longPress } from "../common/directives/long-press-directive";
-import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
 import { LovelaceElement, LovelaceElementConfig } from "./types";
 import { HomeAssistant } from "../../../types";
 
@@ -18,8 +17,7 @@ interface Config extends LovelaceElementConfig {
   aspect_ratio?: string;
 }
 
-export class HuiImageElement extends hassLocalizeLitMixin(LitElement)
+export class HuiImageElement extends LitElement implements LovelaceElement {
-  implements LovelaceElement {
   public hass?: HomeAssistant;
   private _config?: Config;
 

src/panels/lovelace/elements/hui-state-icon-element.ts

@@ -5,12 +5,10 @@ import "../../../components/entity/state-badge";
 import { computeTooltip } from "../common/compute-tooltip";
 import { handleClick } from "../common/handle-click";
 import { longPress } from "../common/directives/long-press-directive";
-import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
 import { LovelaceElement, LovelaceElementConfig } from "./types";
 import { HomeAssistant } from "../../../types";
 
-export class HuiStateIconElement extends hassLocalizeLitMixin(LitElement)
+export class HuiStateIconElement extends LitElement implements LovelaceElement {
-  implements LovelaceElement {
   public hass?: HomeAssistant;
   private _config?: LovelaceElementConfig;
 

src/panels/lovelace/elements/hui-state-label-element.ts

@@ -6,7 +6,6 @@ import computeStateDisplay from "../../../common/entity/compute_state_display";
 import { computeTooltip } from "../common/compute-tooltip";
 import { handleClick } from "../common/handle-click";
 import { longPress } from "../common/directives/long-press-directive";
-import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
 import { LovelaceElement, LovelaceElementConfig } from "./types";
 import { HomeAssistant } from "../../../types";
 
@@ -15,8 +14,7 @@ interface Config extends LovelaceElementConfig {
   suffix?: string;
 }
 
-class HuiStateLabelElement extends hassLocalizeLitMixin(LitElement)
+class HuiStateLabelElement extends LitElement implements LovelaceElement {
-  implements LovelaceElement {
   public hass?: HomeAssistant;
   private _config?: Config;
 
@@ -47,7 +45,7 @@ class HuiStateLabelElement extends hassLocalizeLitMixin(LitElement)
         .longPress="${longPress()}"
       >
         ${this._config.prefix}${state
-          ? computeStateDisplay(this.localize, state, this.hass!.language)
+          ? computeStateDisplay(this.hass!.localize, state, this.hass!.language)
           : "-"}${this._config.suffix}
       </div>
     `;

src/panels/lovelace/entity-rows/hui-group-entity-row.ts

@@ -11,12 +11,10 @@ import "./hui-error-entity-row";
 
 import computeStateDisplay from "../../../common/entity/compute_state_display";
 import { DOMAINS_TOGGLE } from "../../../common/const";
-import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
 import { HomeAssistant } from "../../../types";
 import { EntityRow, EntityConfig } from "./types";
 
-class HuiGroupEntityRow extends hassLocalizeLitMixin(LitElement)
+class HuiGroupEntityRow extends LitElement implements EntityRow {
-  implements EntityRow {
   public hass?: HomeAssistant;
   private _config?: EntityConfig;
 
@@ -61,7 +59,7 @@ class HuiGroupEntityRow extends hassLocalizeLitMixin(LitElement)
           : html`
               <div>
                 ${computeStateDisplay(
-                  this.localize,
+                  this.hass!.localize,
                   stateObj,
                   this.hass.language
                 )}

src/panels/lovelace/entity-rows/hui-lock-entity-row.ts

@@ -8,12 +8,10 @@ import {
 import "../components/hui-generic-entity-row";
 import "./hui-error-entity-row";
 
-import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
 import { HomeAssistant } from "../../../types";
 import { EntityRow, EntityConfig } from "./types";
 
-class HuiLockEntityRow extends hassLocalizeLitMixin(LitElement)
+class HuiLockEntityRow extends LitElement implements EntityRow {
-  implements EntityRow {
   public hass?: HomeAssistant;
   private _config?: EntityConfig;
 
@@ -51,8 +49,8 @@ class HuiLockEntityRow extends hassLocalizeLitMixin(LitElement)
       <hui-generic-entity-row .hass="${this.hass}" .config="${this._config}">
         <paper-button @click="${this._callService}">
           ${stateObj.state === "locked"
-            ? this.localize("ui.card.lock.unlock")
+            ? this.hass!.localize("ui.card.lock.unlock")
-            : this.localize("ui.card.lock.lock")}
+            : this.hass!.localize("ui.card.lock.lock")}
         </paper-button>
       </hui-generic-entity-row>
     `;

src/panels/lovelace/entity-rows/hui-media-player-entity-row.ts

@@ -3,7 +3,6 @@ import "@polymer/paper-icon-button/paper-icon-button";
 
 import "../components/hui-generic-entity-row";
 
-import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
 import { EntityRow, EntityConfig } from "./types";
 import { HomeAssistant } from "../../../types";
 import { HassEntity } from "home-assistant-js-websocket";
@@ -15,8 +14,7 @@ import {
   SUPPORT_PAUSE,
 } from "../../../data/media-player";
 
-class HuiMediaPlayerEntityRow extends hassLocalizeLitMixin(LitElement)
+class HuiMediaPlayerEntityRow extends LitElement implements EntityRow {
-  implements EntityRow {
   public hass?: HomeAssistant;
   private _config?: EntityConfig;
 
@@ -60,8 +58,8 @@ class HuiMediaPlayerEntityRow extends hassLocalizeLitMixin(LitElement)
         ${OFF_STATES.includes(stateObj.state)
           ? html`
               <div>
-                ${this.localize(`state.media_player.${stateObj.state}`) ||
+                ${this.hass!.localize(`state.media_player.${stateObj.state}`) ||
-                  this.localize(`state.default.${stateObj.state}`) ||
+                  this.hass!.localize(`state.default.${stateObj.state}`) ||
                   stateObj.state}
               </div>
             `

src/panels/lovelace/entity-rows/hui-scene-entity-row.ts

@@ -9,12 +9,10 @@ import "../components/hui-generic-entity-row";
 import "../../../components/entity/ha-entity-toggle";
 import "./hui-error-entity-row";
 
-import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
 import { HomeAssistant } from "../../../types";
 import { EntityRow, EntityConfig } from "./types";
 
-class HuiSceneEntityRow extends hassLocalizeLitMixin(LitElement)
+class HuiSceneEntityRow extends LitElement implements EntityRow {
-  implements EntityRow {
   public hass?: HomeAssistant;
   private _config?: EntityConfig;
 
@@ -59,7 +57,7 @@ class HuiSceneEntityRow extends hassLocalizeLitMixin(LitElement)
             `
           : html`
               <paper-button @click="${this._callService}">
-                ${this.localize("ui.card.scene.activate")}
+                ${this.hass!.localize("ui.card.scene.activate")}
               </paper-button>
             `}
       </hui-generic-entity-row>

src/panels/lovelace/entity-rows/hui-script-entity-row.ts

@@ -9,12 +9,10 @@ import "../components/hui-generic-entity-row";
 import "../../../components/entity/ha-entity-toggle";
 import "./hui-error-entity-row";
 
-import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
 import { HomeAssistant } from "../../../types";
 import { EntityRow, EntityConfig } from "./types";
 
-class HuiScriptEntityRow extends hassLocalizeLitMixin(LitElement)
+class HuiScriptEntityRow extends LitElement implements EntityRow {
-  implements EntityRow {
   public hass?: HomeAssistant;
   private _config?: EntityConfig;
 
@@ -59,7 +57,7 @@ class HuiScriptEntityRow extends hassLocalizeLitMixin(LitElement)
             `
           : html`
               <paper-button @click="${this._callService}">
-                ${this.localize("ui.card.script.execute")}
+                ${this.hass!.localize("ui.card.script.execute")}
               </paper-button>
             `}
       </hui-generic-entity-row>

src/panels/lovelace/entity-rows/hui-sensor-entity-row.ts

@@ -13,14 +13,12 @@ import { HomeAssistant } from "../../../types";
 import { EntityRow, EntityConfig } from "./types";
 
 import computeStateDisplay from "../../../common/entity/compute_state_display";
-import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
 
 interface SensorEntityConfig extends EntityConfig {
   format?: "relative" | "date" | "time" | "datetime";
 }
 
-class HuiSensorEntityRow extends hassLocalizeLitMixin(LitElement)
+class HuiSensorEntityRow extends LitElement implements EntityRow {
-  implements EntityRow {
   public hass?: HomeAssistant;
   private _config?: SensorEntityConfig;
 
@@ -65,7 +63,11 @@ class HuiSensorEntityRow extends hassLocalizeLitMixin(LitElement)
                   .format="${this._config.format}"
                 ></hui-timestamp-display>
               `
-            : computeStateDisplay(this.localize, stateObj, this.hass.language)}
+            : computeStateDisplay(
+                this.hass!.localize,
+                stateObj,
+                this.hass.language
+              )}
         </div>
       </hui-generic-entity-row>
     `;

src/panels/lovelace/entity-rows/hui-text-entity-row.ts

@@ -9,12 +9,10 @@ import "../components/hui-generic-entity-row";
 import "./hui-error-entity-row";
 
 import computeStateDisplay from "../../../common/entity/compute_state_display";
-import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
 import { HomeAssistant } from "../../../types";
 import { EntityRow, EntityConfig } from "./types";
 
-class HuiTextEntityRow extends hassLocalizeLitMixin(LitElement)
+class HuiTextEntityRow extends LitElement implements EntityRow {
-  implements EntityRow {
   public hass?: HomeAssistant;
   private _config?: EntityConfig;
 
@@ -51,7 +49,11 @@ class HuiTextEntityRow extends hassLocalizeLitMixin(LitElement)
       ${this.renderStyle()}
       <hui-generic-entity-row .hass="${this.hass}" .config="${this._config}">
         <div>
-          ${computeStateDisplay(this.localize, stateObj, this.hass.language)}
+          ${computeStateDisplay(
+            this.hass!.localize,
+            stateObj,
+            this.hass.language
+          )}
         </div>
       </hui-generic-entity-row>
     `;

src/panels/lovelace/entity-rows/hui-toggle-entity-row.ts

@@ -10,12 +10,10 @@ import "../../../components/entity/ha-entity-toggle";
 import "./hui-error-entity-row";
 
 import computeStateDisplay from "../../../common/entity/compute_state_display";
-import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
 import { HomeAssistant } from "../../../types";
 import { EntityRow, EntityConfig } from "./types";
 
-class HuiToggleEntityRow extends hassLocalizeLitMixin(LitElement)
+class HuiToggleEntityRow extends LitElement implements EntityRow {
-  implements EntityRow {
   public hass?: HomeAssistant;
   private _config?: EntityConfig;
 
@@ -60,7 +58,7 @@ class HuiToggleEntityRow extends hassLocalizeLitMixin(LitElement)
           : html`
               <div>
                 ${computeStateDisplay(
-                  this.localize,
+                  this.hass!.localize,
                   stateObj,
                   this.hass!.language
                 )}

src/panels/lovelace/ha-panel-lovelace.ts

@@ -6,8 +6,13 @@ import "../../layouts/hass-error-screen";
 import "./hui-root";
 import { HomeAssistant, PanelInfo, Route } from "../../types";
 import { Lovelace } from "./types";
-import { LitElement, html, PropertyValues, TemplateResult } from "lit-element";
+import {
-import { hassLocalizeLitMixin } from "../../mixins/lit-localize-mixin";
+  LitElement,
+  html,
+  PropertyValues,
+  TemplateResult,
+  PropertyDeclarations,
+} from "lit-element";
 import { showSaveDialog } from "./editor/show-save-config-dialog";
 import { generateLovelaceConfig } from "./common/generate-lovelace-config";
 
@@ -17,7 +22,7 @@ interface LovelacePanelConfig {
 
 let editorLoaded = false;
 
-class LovelacePanel extends hassLocalizeLitMixin(LitElement) {
+class LovelacePanel extends LitElement {
   public panel?: PanelInfo<LovelacePanelConfig>;
   public hass?: HomeAssistant;
   public narrow?: boolean;
@@ -29,22 +34,23 @@ class LovelacePanel extends hassLocalizeLitMixin(LitElement) {
   private lovelace?: Lovelace;
   private mqls?: MediaQueryList[];
 
-  static get properties() {
+  static get properties(): PropertyDeclarations {
     return {
       hass: {},
       lovelace: {},
-      narrow: { type: Boolean, value: false },
+      narrow: {},
-      showMenu: { type: Boolean, value: false },
+      showMenu: {},
       route: {},
-      _columns: { type: Number, value: 1 },
+      _columns: {},
-      _state: { type: String, value: "loading" },
+      _state: {},
-      _errorMsg: String,
+      _errorMsg: {},
-      _config: { type: {}, value: null },
+      _config: {},
     };
   }
 
   constructor() {
     super();
+    this._state = "loading";
     this._closeEditor = this._closeEditor.bind(this);
   }
 
@@ -155,7 +161,7 @@ class LovelacePanel extends hassLocalizeLitMixin(LitElement) {
         this._errorMsg = err.message;
         return;
       }
-      conf = generateLovelaceConfig(this.hass!, this.localize);
+      conf = generateLovelaceConfig(this.hass!, this.hass!.localize);
       confMode = "generated";
     }
 

src/panels/lovelace/hui-editor.ts

@@ -11,7 +11,6 @@ import "@polymer/paper-spinner/paper-spinner";
 
 import { struct } from "./common/structs/struct";
 import { Lovelace } from "./types";
-import { hassLocalizeLitMixin } from "../../mixins/lit-localize-mixin";
 
 import "../../components/ha-icon";
 import { haStyle } from "../../resources/ha-style";
@@ -24,7 +23,7 @@ const lovelaceStruct = struct.interface({
   resources: struct.optional(["object"]),
 });
 
-class LovelaceFullConfigEditor extends hassLocalizeLitMixin(LitElement) {
+class LovelaceFullConfigEditor extends LitElement {
   public lovelace?: Lovelace;
   public closeEditor?: () => void;
   private _saving?: boolean;

src/panels/lovelace/hui-root.ts

@@ -30,7 +30,6 @@ import "../../components/ha-icon";
 import { loadModule, loadCSS, loadJS } from "../../common/dom/load_resource";
 import { subscribeNotifications } from "../../data/ws-notifications";
 import debounce from "../../common/util/debounce";
-import { hassLocalizeLitMixin } from "../../mixins/lit-localize-mixin";
 import { HomeAssistant } from "../../types";
 import { LovelaceConfig } from "../../data/lovelace";
 import { navigate } from "../../common/navigate";
@@ -55,7 +54,7 @@ const JS_CACHE = {};
 
 let loadedUnusedEntities = false;
 
-class HUIRoot extends hassLocalizeLitMixin(LitElement) {
+class HUIRoot extends LitElement {
   public narrow?: boolean;
   public showMenu?: boolean;
   public hass?: HomeAssistant;
@@ -141,7 +140,7 @@ class HUIRoot extends hassLocalizeLitMixin(LitElement) {
                   ></paper-icon-button>
                   <div main-title>
                     ${this.config.title ||
-                      this.localize("ui.panel.lovelace.editor.header")}
+                      this.hass!.localize("ui.panel.lovelace.editor.header")}
                     <paper-icon-button
                       icon="hass:pencil"
                       class="edit-icon"
@@ -213,7 +212,7 @@ class HUIRoot extends hassLocalizeLitMixin(LitElement) {
                         >Unused entities</paper-item
                       >
                       <paper-item @click="${this._editModeEnable}"
-                        >${this.localize(
+                        >${this.hass!.localize(
                           "ui.panel.lovelace.editor.configure_ui"
                         )}</paper-item
                       >
@@ -260,7 +259,7 @@ class HUIRoot extends hassLocalizeLitMixin(LitElement) {
                       ? html`
                           <paper-button id="add-view" @click="${this._addView}">
                             <ha-icon
-                              title="${this.localize(
+                              title="${this.hass!.localize(
                                 "ui.panel.lovelace.editor.edit_view.add"
                               )}"
                               icon="hass:plus"

src/panels/lovelace/hui-view.ts

@@ -13,7 +13,6 @@ import { HaStateLabelBadge } from "../../components/entity/ha-state-label-badge"
 
 import applyThemesOnElement from "../../common/dom/apply_themes_on_element";
 
-import { hassLocalizeLitMixin } from "../../mixins/lit-localize-mixin";
 import { LovelaceViewConfig, LovelaceCardConfig } from "../../data/lovelace";
 import { HomeAssistant } from "../../types";
 
@@ -43,7 +42,7 @@ const getColumnIndex = (columnEntityCount: number[], size: number) => {
   return minIndex;
 };
 
-export class HUIView extends hassLocalizeLitMixin(LitElement) {
+export class HUIView extends LitElement {
   public hass?: HomeAssistant;
   public lovelace?: Lovelace;
   public columns?: number;
@@ -96,7 +95,9 @@ export class HUIView extends hassLocalizeLitMixin(LitElement) {
             <paper-fab
               elevated="2"
               icon="hass:plus"
-              title="${this.localize("ui.panel.lovelace.editor.edit_card.add")}"
+              title="${this.hass!.localize(
+                "ui.panel.lovelace.editor.edit_card.add"
+              )}"
               @click="${this._addCard}"
             ></paper-fab>
           `