upgraded lit and test

package.json

@@ -18,35 +18,35 @@
   "dependencies": {
     "custom-card-helpers": "^1.7.0",
     "home-assistant-js-websocket": "^5.7.0",
-    "lit-element": "^2.4.0",
-    "lit-html": "^1.3.0"
+    "lit": "^2.2.1"
   },
   "devDependencies": {
     "@babel/eslint-plugin": "^7.12.13",
     "@open-wc/building-rollup": "^1.9.4",
     "@open-wc/eslint-config": "^4.2.0",
     "@open-wc/testing": "^2.5.32",
-    "@rollup/plugin-node-resolve": "^11.2.0",
+    "@rollup/plugin-node-resolve": "^13.1.3",
     "@types/convert-source-map": "^1.5.1",
     "@types/istanbul-reports": "^3.0.0",
     "@typescript-eslint/eslint-plugin": "^4.14.1",
     "@typescript-eslint/parser": "^4.14.1",
     "@web/dev-server": "^0.1.5",
+    "@web/dev-server-legacy": "^0.1.7",
     "@web/dev-server-storybook": "^0.0.2",
     "@web/test-runner": "^0.12.7",
     "@web/test-runner-commands": "^0.4.1",
-    "concurrently": "^5.3.0",
+    "concurrently": "^7.1.0",
     "deepmerge": "^4.2.2",
     "eslint": "^7.18.0",
     "eslint-config-prettier": "^7.2.0",
-    "husky": "^4.3.8",
-    "lint-staged": "^10.5.3",
+    "husky": "^7.0.4",
+    "lint-staged": "^12.3.7",
     "prettier": "^2.2.1",
     "rimraf": "^3.0.2",
     "rollup": "^2.45.1",
     "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-typescript2": "^0.30.0",
-    "sinon": "^9.2.4",
+    "rollup-plugin-typescript2": "^0.31.2",
+    "sinon": "^13.0.1",
     "tslib": "^2.1.0",
     "typescript": "^4.1.3"
   },

src/TeslaStyleSolarPowerCard.ts

@@ -1,6 +1,8 @@
 /* eslint-disable no-restricted-globals, prefer-template, no-param-reassign, class-methods-use-this, lit-a11y/click-events-have-key-events, no-bitwise, import/extensions */
-import { LitElement, html, property, TemplateResult, CSSResult, css, internalProperty } from 'lit-element';
+import { LitElement, html, TemplateResult, CSSResult, css } from 'lit';
+import { property } from 'lit/decorators.js';
 import { HomeAssistant, LovelaceCardConfig /* , LovelaceCardEditor */ } from 'custom-card-helpers';
+import { HassEntity } from 'home-assistant-js-websocket';
 import { TeslaStyleSolarPowerCardConfig } from './models/TeslaStyleSolarPowerCardConfig';
 
 /* import './components/editor'; */
@@ -20,11 +22,11 @@ import { HtmlResizeForPowerCard } from './services/HtmlResizeForPowerCard';
 export class TeslaStyleSolarPowerCard extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @internalProperty() private config!: TeslaStyleSolarPowerCardConfig;
+  @property() private config!: TeslaStyleSolarPowerCardConfig;
 
   @property({ attribute: false }) public solarCardElements: Map<string, SensorElement> = new Map();
 
-  @internalProperty() private oldWidth = 100;
+  @property() private oldWidth = 100;
 
   public pxRate = 4;
 
@@ -393,7 +395,7 @@ export class TeslaStyleSolarPowerCard extends LitElement {
     let extraUnitOfMeasurement: string | undefined;
     let isSubstractionEntity = false;
     let oneDefinedEntity = false;
-    let clickEntityHassState = null;
+    let clickEntityHassState:HassEntity | null = null;
 
     entitiesForMainValue.forEach((entityHolder: string) => {
       if (entityHolder.substring(0, 1) === '-') {

src/components/editor.ts

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any, no-param-reassign, camelcase, lit/no-useless-template-literals, lit-a11y/click-events-have-key-events */
-import { LitElement, html, customElement, property, TemplateResult, CSSResult, css, internalProperty } from 'lit-element';
+import { LitElement, html, TemplateResult, CSSResult, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
 import { HomeAssistant, LovelaceCardEditor, ActionConfig, LovelaceCardConfig } from 'custom-card-helpers';
 import '../types.js';
 
@@ -50,11 +51,11 @@ const options = {
 export class TeslaStyleSolarPowerCardEditor extends LitElement implements LovelaceCardEditor {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @internalProperty() private _config?: LovelaceCardConfig;
+  @property() private _config?: LovelaceCardConfig;
 
-  @internalProperty() private _toggle?: boolean;
+  @property() private _toggle?: boolean;
 
-  @internalProperty() private _helpers?: any;
+  @property() private _helpers?: any;
 
   private _initialized = false;
 

src/services/htmlWriterForPowerCard.ts

@@ -1,5 +1,5 @@
 /* eslint-disable no-param-reassign,  import/extensions, prefer-template, class-methods-use-this, lit-a11y/click-events-have-key-events, lines-between-class-members */
-import { html, TemplateResult } from 'lit-element';
+import { html, TemplateResult } from 'lit';
 import { HomeAssistant } from 'custom-card-helpers';
 import { HassEntity } from 'home-assistant-js-websocket';
 import { SensorElement } from '../models/SensorElement';
@@ -43,8 +43,7 @@ export class HtmlWriterForPowerCard {
               style="font-size:${3 * this.pxRate + 'px'};
                         top: ${1 * this.pxRate + 'px'};
                         width: ${10 * this.pxRate + 'px'};"
-            >
-              ${extraValue} ${extraUnitOfMeasurement}
+            >${extraValue} ${extraUnitOfMeasurement}
             </div>`
           : html``}
         <ha-icon class="acc_icon" icon="${icon}"></ha-icon>
@@ -66,7 +65,7 @@ export class HtmlWriterForPowerCard {
     extraUnitOfMeasurement: string | undefined = undefined
   ): TemplateResult {
     if (extraValue !== undefined) {
-      if (icon == 'mdi:battery-medium' || icon == 'mdi:battery'){
+      if (icon === 'mdi:battery-medium' || icon === 'mdi:battery'){
         icon = this.getBatteryIcon(parseFloat(extraValue), mainValue);
       }
     }

src/translations/languages/de.json

@@ -0,0 +1,9 @@
+
+{
+    "common": {
+      "version": "Version",
+      "invalid_configuration": "Invalid configuration",
+      "show_warning": "Show Warning",
+      "show_error": "Show Error"
+    }
+  }

src/translations/localize.ts

@@ -0,0 +1,30 @@
+import * as en from './languages/en.json';
+import * as nb from './languages/de.json';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const languages: any = {
+  en,
+  nb,
+};
+
+export function localize(string: string, search = '', replace = ''): string {
+  const lang = (localStorage.getItem('selectedLanguage') || 'en')
+    .replace(/['"]+/g, '')
+    .replace('-', '_');
+
+  let translated: string;
+
+  try {
+    translated = string.split('.').reduce((o, i) => o[i], languages[lang]);
+  } catch (e) {
+    translated = string.split('.').reduce((o, i) => o[i], languages.en);
+  }
+
+  if (translated === undefined)
+    translated = string.split('.').reduce((o, i) => o[i], languages.en);
+
+  if (search !== '' && replace !== '') {
+    translated = translated.replace(search, replace);
+  }
+  return translated;
+}