diff --git a/README.md b/README.md
index 2b471f7..42ee553 100644
--- a/README.md
+++ b/README.md
@@ -102,11 +102,6 @@ This will allow you to have two bubbles that are clickable and the flow from gri
 ```yml
 type: 'custom:tesla-style-solar-power-card'
 name: My Flows
-# 4 main bubble icons for clickable entities
-grid_consumption_entity: sensor.grid_consumption
-house_consumption_entity: sensor.house_consumption
-generation_yield_entity: sensor.solar_yield
-battery_consumption_entity: sensor.battery_consumption
 # 7 flows between bubbles
 grid_to_house_entity: sensor.grid_consumption
 grid_to_battery_entity: sensor.grid_battery_charge
@@ -120,11 +115,16 @@ battery_extra_entity: sensor.battery_charge
 house_extra_entity: sensor.current_temperature
 generation_extra_entity: sensor.percent_cloud_coverage
 grid_extra_entity: sensor.monthly_feed_in
-# appliances with consumption and extra values
+# optional appliances with consumption and extra values
 appliance1_consumption_entity: sensor.car_consumption
 appliance1_extra_entity: sensor.car_battery_state_of_charge 
 appliance2_consumption_entity: sensor.heating_consumption
 appliance2_extra_entity: sensor.heating_operation
+# optional 4 main bubble icons for clickable entities
+grid_entity: sensor.grid_consumption
+house_entity: sensor.house_consumption
+generation_entity: sensor.solar_yield
+battery_entity: sensor.battery_consumption
 ```
 If you define an extra entity for the battery bubble with the state of charge then the icon will be dynamically replaced with the value of that entity and will override the icon definition above.
 
@@ -140,7 +140,7 @@ One to force W (Watt) instead of kW, set it to 1 to use it:
 show_w_not_kw: 1
 ```
 
-One for the threshold from which W is converted to kW (the example below will change W into kilowatt from 5001 W onwards):
+One for the threshold from which W is converted to kW (the example below will change W into kilowatt from 5000 W onwards):
 ```yml
 threshold_in_k: 5
 ```
@@ -151,6 +151,11 @@ One to hide the lines not active to use it, please make sure everything is worki
 hide_inactive_lines: 1
 ```
 
+One to colour the house bubble depending on the highest flow:
+```yml
+change_house_bubble_color_with_flow: 1
+```
+
 One to not show moving circles but an energy flow diagramm (thicker lines when flow is higher):
 ```yml
 energy_flow_diagramm: 1
diff --git a/package.json b/package.json
index d1f5e0e..7d3e786 100644
--- a/package.json
+++ b/package.json
@@ -86,7 +86,7 @@
   "lint-staged": {
     "*.ts": [
       "eslint --fix",
-      "prettier --write"
+      "prettier --write --print-width 140"
     ]
   }
 }
diff --git a/src/TeslaStyleSolarPowerCard.ts b/src/TeslaStyleSolarPowerCard.ts
index ba53395..2981dbf 100644
--- a/src/TeslaStyleSolarPowerCard.ts
+++ b/src/TeslaStyleSolarPowerCard.ts
@@ -1,17 +1,6 @@
 /* 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 {
-  HomeAssistant,
-  LovelaceCardConfig /* , LovelaceCardEditor */,
-} from 'custom-card-helpers';
+import { LitElement, html, property, TemplateResult, CSSResult, css, internalProperty } from 'lit-element';
+import { HomeAssistant, LovelaceCardConfig /* , LovelaceCardEditor */ } from 'custom-card-helpers';
 import { TeslaStyleSolarPowerCardConfig } from './models/TeslaStyleSolarPowerCardConfig';
 
 import { SensorElement } from './models/SensorElement';
@@ -25,8 +14,7 @@ import { HtmlResizeForPowerCard } from './services/HtmlResizeForPowerCard';
 (window as any).customCards.push({
   type: 'tesla-style-solar-power-card',
   name: 'Tesla Style Solar Power Card',
-  description:
-    'A Solar Power Visualization with svg paths that mimmicks the powerwall app of tesla 2',
+  description: 'A Solar Power Visualization with svg paths that mimmicks the powerwall app of tesla 2',
 });
 
 export class TeslaStyleSolarPowerCard extends LitElement {
@@ -34,10 +22,7 @@ export class TeslaStyleSolarPowerCard extends LitElement {
 
   @internalProperty() private config!: TeslaStyleSolarPowerCardConfig;
 
-  @property({ attribute: false }) public solarCardElements: Map<
-    string,
-    SensorElement
-  > = new Map();
+  @property({ attribute: false }) public solarCardElements: Map<string, SensorElement> = new Map();
 
   @internalProperty() private oldWidth = 100;
 
@@ -45,10 +30,7 @@ export class TeslaStyleSolarPowerCard extends LitElement {
 
   private teslaCardElement?: HTMLElement;
 
-  private htmlWriter: HtmlWriterForPowerCard = new HtmlWriterForPowerCard(
-    this,
-    this.hass
-  );
+  private htmlWriter: HtmlWriterForPowerCard = new HtmlWriterForPowerCard(this, this.hass);
 
   @property({ type: String }) title = 'Hey there';
 
@@ -73,17 +55,12 @@ export class TeslaStyleSolarPowerCard extends LitElement {
       ...config,
     };
 
-    if (this.config.grid_icon == null)
-      this.config.grid_icon = 'mdi:transmission-tower';
-    if (this.config.generation_icon == null)
-      this.config.generation_icon = 'mdi:solar-panel-large';
+    if (this.config.grid_icon == null) this.config.grid_icon = 'mdi:transmission-tower';
+    if (this.config.generation_icon == null) this.config.generation_icon = 'mdi:solar-panel-large';
     if (this.config.house_icon == null) this.config.house_icon = 'mdi:home';
-    if (this.config.battery_icon == null)
-      this.config.battery_icon = 'mdi:battery-medium';
-    if (this.config.appliance1_icon == null)
-      this.config.appliance1_icon = 'mdi:car-sports';
-    if (this.config.appliance2_icon == null)
-      this.config.appliance2_icon = 'mdi:air-filter';
+    if (this.config.battery_icon == null) this.config.battery_icon = 'mdi:battery-medium';
+    if (this.config.appliance1_icon == null) this.config.appliance1_icon = 'mdi:car-sports';
+    if (this.config.appliance2_icon == null) this.config.appliance2_icon = 'mdi:air-filter';
 
     this.createSolarCardElements();
     if (!this.config.energy_flow_diagramm) {
@@ -118,12 +95,7 @@ export class TeslaStyleSolarPowerCard extends LitElement {
   async firstUpdated(): Promise<void> {
     // Give the browser a chance to paint
     await new Promise(r => setTimeout(r, 0));
-    this.oldWidth = HtmlResizeForPowerCard.changeStylesDependingOnWidth(
-      this,
-      this.solarCardElements,
-      this.clientWidth,
-      this.oldWidth
-    );
+    this.oldWidth = HtmlResizeForPowerCard.changeStylesDependingOnWidth(this, this.solarCardElements, this.clientWidth, this.oldWidth);
   }
 
   public connectedCallback(): void {
@@ -159,8 +131,7 @@ export class TeslaStyleSolarPowerCard extends LitElement {
     this.solarCardElements.forEach((_solarSensor, key) => {
       if (
         this.hass.states[this.config[key]] !== undefined &&
-        this.hass.states[this.config[key]].state !==
-          oldValue.states[this.config[key]].state
+        this.hass.states[this.config[key]].state !== oldValue.states[this.config[key]].state
       ) {
         change = true;
       }
@@ -179,14 +150,16 @@ export class TeslaStyleSolarPowerCard extends LitElement {
           this.config.threshold_in_k
         );
         solarSensor.setSpeed(this.config.show_w_not_kw);
-        if (this.config.energy_flow_diagramm) {
-          this.setFatLinesDependingOnElementsValue();
-        }
       } catch (err) {
-        this.error +=
-          "Configured '" + solarSensor.entity + "' entity was not found. ";
+        this.error += " Configured '" + solarSensor.entity + "' entity was not found. ";
       }
     });
+    if (this.config.energy_flow_diagramm) {
+      this.setEnergyFlowDiagramm();
+    }
+    if (this.config.change_house_bubble_color_with_flow) {
+      this.colourHouseBubbleDependingOnHighestInput();
+    }
     super.performUpdate();
   }
 
@@ -196,7 +169,7 @@ export class TeslaStyleSolarPowerCard extends LitElement {
 
     this.pxRate = this.clientWidth / 100;
     const half = 22 * this.pxRate;
-
+    //
     return html`
       <ha-card .header=${this.config.name} tabindex="0">
         <div id="tesla-style-solar-power-card">
@@ -214,149 +187,45 @@ export class TeslaStyleSolarPowerCard extends LitElement {
               >
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
-                  viewBox="${'0 0 ' +
-                  42 * this.pxRate +
-                  ' ' +
-                  42 * this.pxRate}"
+                  viewBox="${'0 0 ' + 42 * this.pxRate + ' ' + 42 * this.pxRate}"
                   preserveAspectRatio="xMinYMax slice"
-                  style="height:${42 * this.pxRate + 'px'};width:${42 *
-                    this.pxRate +
-                  'px'}"
+                  style="height:${42 * this.pxRate + 'px'};width:${42 * this.pxRate + 'px'}"
                 >
                   ${this.htmlWriter.writeCircleAndLine(
                     'generation_to_house_entity',
-                    'M' +
-                      half +
-                      ',0 C' +
-                      half +
-                      ',' +
-                      half +
-                      ' ' +
-                      half +
-                      ',' +
-                      half +
-                      ' ' +
-                      half * 2 +
-                      ',' +
-                      half
+                    'M' + half + ',0 C' + half + ',' + half + ' ' + half + ',' + half + ' ' + half * 2 + ',' + half
                   )}
                   ${this.htmlWriter.writeCircleAndLine(
                     'grid_to_house_entity',
-                    'M0,' +
-                      half +
-                      ' C' +
-                      half +
-                      ',' +
-                      half +
-                      ' ' +
-                      half +
-                      ',' +
-                      half +
-                      ' ' +
-                      half * 2 +
-                      ',' +
-                      half
+                    'M0,' + half + ' C' + half + ',' + half + ' ' + half + ',' + half + ' ' + half * 2 + ',' + half
                   )}
                   ${this.htmlWriter.writeCircleAndLine(
                     'generation_to_grid_entity',
-                    'M' +
-                      half +
-                      ',0 C' +
-                      half +
-                      ',' +
-                      half +
-                      ' ' +
-                      half +
-                      ',' +
-                      half +
-                      ' 0,' +
-                      half
+                    'M' + half + ',0 C' + half + ',' + half + ' ' + half + ',' + half + ' 0,' + half
                   )}
                   ${this.htmlWriter.writeCircleAndLine(
                     'grid_to_battery_entity',
-                    'M0,' +
-                      half +
-                      ' C' +
-                      half +
-                      ',' +
-                      half +
-                      ' ' +
-                      half +
-                      ',' +
-                      half +
-                      ' ' +
-                      half +
-                      ',' +
-                      half * 2
+                    'M0,' + half + ' C' + half + ',' + half + ' ' + half + ',' + half + ' ' + half + ',' + half * 2
                   )}
                   ${this.htmlWriter.writeCircleAndLine(
                     'battery_to_grid_entity',
-                    'M' +
-                      half +
-                      ',' +
-                      half * 2 +
-                      ' C' +
-                      half +
-                      ',' +
-                      half +
-                      ' ' +
-                      half +
-                      ',' +
-                      half +
-                      ' 0,' +
-                      half
+                    'M' + half + ',' + half * 2 + ' C' + half + ',' + half + ' ' + half + ',' + half + ' 0,' + half
                   )}
                   ${this.htmlWriter.writeCircleAndLine(
                     'generation_to_battery_entity',
-                    'M' +
-                      half +
-                      ',0 C' +
-                      half +
-                      ',0 ' +
-                      half +
-                      ',' +
-                      half * 2 +
-                      ' ' +
-                      half +
-                      ',' +
-                      half * 2
+                    'M' + half + ',0 C' + half + ',0 ' + half + ',' + half * 2 + ' ' + half + ',' + half * 2
                   )}
                   ${this.htmlWriter.writeCircleAndLine(
                     'battery_to_house_entity',
-                    'M' +
-                      half +
-                      ',' +
-                      half * 2 +
-                      ' C' +
-                      half +
-                      ',' +
-                      half +
-                      ' ' +
-                      half +
-                      ',' +
-                      half +
-                      ' ' +
-                      half * 2 +
-                      ',' +
-                      half
+                    'M' + half + ',' + half * 2 + ' C' + half + ',' + half + ' ' + half + ',' + half + ' ' + half * 2 + ',' + half
                   )}
                 </svg>
               </div>
 
               ${this.writeHouseIconBubble()} ${this.writeApplianceIconBubble(1)}
-              ${this.htmlWriter.writeAppliancePowerLineAndCircle(
-                1,
-                'M4,' +
-                  16 * this.pxRate +
-                  ' C4,' +
-                  16 * this.pxRate +
-                  ' 4,0 4,0'
-              )}
+              ${this.htmlWriter.writeAppliancePowerLineAndCircle(1, 'M4,' + 16 * this.pxRate + ' C4,' + 16 * this.pxRate + ' 4,0 4,0')}
               ${this.writeApplianceIconBubble(2)}
-              ${this.htmlWriter.writeAppliancePowerLineAndCircle(
-                2,
-                'M4,0 C4,0 4,' + 16 * this.pxRate + ' 4,' + 16 * this.pxRate
-              )}
+              ${this.htmlWriter.writeAppliancePowerLineAndCircle(2, 'M4,0 C4,0 4,' + 16 * this.pxRate + ' 4,' + 16 * this.pxRate)}
             </div>
           </div>
           <div class="acc_bottom">${this.writeBatteryIconBubble()}</div>
@@ -366,51 +235,21 @@ export class TeslaStyleSolarPowerCard extends LitElement {
   }
 
   private writeGenerationIconBubble(): TemplateResult {
-    const generationEntities = [
-      'generation_to_grid_entity',
-      'generation_to_house_entity',
-      'generation_to_battery_entity',
-    ];
+    const generationEntities = ['generation_to_grid_entity', 'generation_to_house_entity', 'generation_to_battery_entity'];
 
-    return this.writeIconBubble(
-      generationEntities,
-      'acc_top',
-      'generation_icon',
-      'generation_entity',
-      'generation_extra_entity'
-    );
+    return this.writeIconBubble(generationEntities, 'acc_top', 'generation_icon', 'generation_entity', 'generation_extra_entity');
   }
 
   private writeGridIconBubble(): TemplateResult {
-    const gridEntities = [
-      '-generation_to_grid_entity',
-      'grid_to_house_entity',
-      '-battery_to_grid_entity',
-    ];
+    const gridEntities = ['-generation_to_grid_entity', 'grid_to_house_entity', '-battery_to_grid_entity'];
 
-    return this.writeIconBubble(
-      gridEntities,
-      'acc_left',
-      'grid_icon',
-      'grid_entity',
-      'grid_extra_entity'
-    );
+    return this.writeIconBubble(gridEntities, 'acc_left', 'grid_icon', 'grid_entity', 'grid_extra_entity');
   }
 
   private writeHouseIconBubble(): TemplateResult {
-    const houseEntities = [
-      'generation_to_house_entity',
-      'grid_to_house_entity',
-      'battery_to_house_entity',
-    ];
+    const houseEntities = ['generation_to_house_entity', 'grid_to_house_entity', 'battery_to_house_entity'];
 
-    return this.writeIconBubble(
-      houseEntities,
-      'acc_right',
-      'house_icon',
-      'house_entity',
-      'house_extra_entity'
-    );
+    return this.writeIconBubble(houseEntities, 'acc_right', 'house_icon', 'house_entity', 'house_extra_entity');
   }
 
   private writeBatteryIconBubble(): TemplateResult {
@@ -420,20 +259,11 @@ export class TeslaStyleSolarPowerCard extends LitElement {
       '-battery_to_house_entity',
       '-battery_to_grid_entity',
     ];
-    return this.writeIconBubble(
-      batteryEntities,
-      'acc_bottom',
-      'battery_icon',
-      'battery_entity',
-      'battery_extra_entity',
-      true
-    );
+    return this.writeIconBubble(batteryEntities, 'acc_bottom', 'battery_icon', 'battery_entity', 'battery_extra_entity', true);
   }
 
   private writeApplianceIconBubble(applianceNumber: number): TemplateResult {
-    const applianceEntities = [
-      'appliance' + applianceNumber + '_consumption_entity',
-    ];
+    const applianceEntities = ['appliance' + applianceNumber + '_consumption_entity'];
     return this.writeIconBubble(
       applianceEntities,
       'acc_appliance' + applianceNumber,
@@ -487,9 +317,7 @@ export class TeslaStyleSolarPowerCard extends LitElement {
     }
 
     if (bubblClickEntitySlot !== null) {
-      clickEntityHassState = this.hass.states[
-        this.config[bubblClickEntitySlot]
-      ];
+      clickEntityHassState = this.hass.states[this.config[bubblClickEntitySlot]];
     }
 
     if (isBatteryBubble) {
@@ -533,23 +361,16 @@ export class TeslaStyleSolarPowerCard extends LitElement {
 
   private updateOneCircle(timestamp: number, entity: SensorElement) {
     if (this.shadowRoot == null) return;
-    const teslaCardElement = <HTMLElement>(
-      this.shadowRoot.querySelector('#tesla-style-solar-power-card')
-    );
+    const teslaCardElement = <HTMLElement>this.shadowRoot.querySelector('#tesla-style-solar-power-card');
     if (teslaCardElement == null) return;
-    entity.line = <SVGPathElement>(
-      teslaCardElement.querySelector('#' + entity.entitySlot + '_line')
-    );
+    entity.line = <SVGPathElement>teslaCardElement.querySelector('#' + entity.entitySlot + '_line');
     if (entity.line === null) return;
     const lineLength = entity.line.getTotalLength();
     if (isNaN(lineLength)) return;
-    entity.circle = <SVGPathElement>(
-      teslaCardElement.querySelector('#' + entity.entitySlot + '_circle')
-    );
+    entity.circle = <SVGPathElement>teslaCardElement.querySelector('#' + entity.entitySlot + '_circle');
     if (entity.speed === 0) {
       entity.circle.setAttribute('visibility', 'hidden');
-      if (this.config.hide_inactive_lines)
-        entity.line.setAttribute('visibility', 'hidden');
+      if (this.config.hide_inactive_lines) entity.line.setAttribute('visibility', 'hidden');
       return;
     }
 
@@ -562,8 +383,7 @@ export class TeslaStyleSolarPowerCard extends LitElement {
       entity.currentDelta = 0;
     }
 
-    entity.currentDelta +=
-      Math.abs(entity.speed) * (timestamp - entity.prevTimestamp);
+    entity.currentDelta += Math.abs(entity.speed) * (timestamp - entity.prevTimestamp);
     let percentageDelta = entity.currentDelta / lineLength;
     if (entity.speed > 0) {
       if (percentageDelta >= 1 || isNaN(percentageDelta)) {
@@ -586,16 +406,10 @@ export class TeslaStyleSolarPowerCard extends LitElement {
 
   private colourHouseBubbleDependingOnHighestInput() {
     if (this.shadowRoot == null) return;
-    const teslaCardElement = <HTMLElement>(
-      this.shadowRoot.querySelector('#tesla-style-solar-power-card')
-    );
+    const teslaCardElement = <HTMLElement>this.shadowRoot.querySelector('#tesla-style-solar-power-card');
     if (teslaCardElement == null) return;
 
-    const houseEntities = [
-      'generation_to_house_entity',
-      'grid_to_house_entity',
-      'battery_to_house_entity',
-    ];
+    const houseEntities = ['generation_to_house_entity', 'grid_to_house_entity', 'battery_to_house_entity'];
     let oldEntity: SensorElement | null = null;
     let highestEntityHolder = '';
     houseEntities.forEach(entityHolder => {
@@ -607,28 +421,47 @@ export class TeslaStyleSolarPowerCard extends LitElement {
         oldEntity = divEntity;
       }
     });
-    const element = <HTMLElement>(
-      teslaCardElement.querySelector('.house_entity')
-    );
+
     switch (highestEntityHolder) {
       case 'generation_to_house_entity':
-        element.style.color = 'var(--info-color)';
-        element.style.border = 'var(--info-color)';
+        this.colourBubble('.house_entity', teslaCardElement, 'warning');
+        this.colourBubble('.appliance1_consumption_entity', teslaCardElement, 'warning');
+        this.colourBubble('.appliance2_consumption_entity', teslaCardElement, 'warning');
+        this.colourLineAndCircle('#appliance1_consumption_entity', teslaCardElement, 'warning');
+        this.colourLineAndCircle('#appliance2_consumption_entity', teslaCardElement, 'warning');
         break;
       case 'battery_to_house_entity':
-        element.style.color = 'var(--success-color)';
-        element.style.border = 'var(--success-color)';
+        this.colourBubble('.house_entity', teslaCardElement, 'success');
+        this.colourBubble('.appliance1_consumption_entity', teslaCardElement, 'success');
+        this.colourBubble('.appliance2_consumption_entity', teslaCardElement, 'success');
+        this.colourLineAndCircle('#appliance1_consumption_entity', teslaCardElement, 'success');
+        this.colourLineAndCircle('#appliance2_consumption_entity', teslaCardElement, 'success');
         break;
       default:
     }
   }
 
-  private setFatLinesDependingOnElementsValue() {
-    console.log('setting fat lines');
+  private colourBubble(elementName: string, teslaCardElement: HTMLElement, colour: string) {
+    const element = <HTMLElement>teslaCardElement.querySelector(elementName);
+
+    if (element === null) return;
+
+    element.style.color = 'var(--' + colour + '-color)';
+    element.style.border = '1px solid var(--' + colour + '-color)';
+  }
+
+  private colourLineAndCircle(elementName: string, teslaCardElement: HTMLElement, colour: string) {
+    const elementLine = <HTMLElement>teslaCardElement.querySelector(elementName + '_line');
+    const elementCircle = <HTMLElement>teslaCardElement.querySelector(elementName + '_circle');
+
+    if (elementLine === null) return;
+    elementLine.style.stroke = 'var(--' + colour + '-color)';
+    elementCircle.style.fill = 'var(--' + colour + '-color)';
+  }
+
+  private setEnergyFlowDiagramm() {
     if (this.shadowRoot == null) return;
-    const teslaCardElement = <HTMLElement>(
-      this.shadowRoot.querySelector('#tesla-style-solar-power-card')
-    );
+    const teslaCardElement = <HTMLElement>this.shadowRoot.querySelector('#tesla-style-solar-power-card');
 
     if (teslaCardElement == null) return;
 
@@ -637,24 +470,15 @@ export class TeslaStyleSolarPowerCard extends LitElement {
 
       let width = 1;
       if (teslaCardElement == null) return;
-      const entityLine = <SVGPathElement>(
-        teslaCardElement.querySelector('#' + key + '_line')
-      );
+      const entityLine = <SVGPathElement>teslaCardElement.querySelector('#' + key + '_line');
       if (entityLine != null && element !== undefined) {
-        const entityCircle = <SVGPathElement>(
-          teslaCardElement.querySelector('#' + key + '_circle')
-        );
+        const entityCircle = <SVGPathElement>teslaCardElement.querySelector('#' + key + '_circle');
         entityCircle.style.visibility = 'hidden';
-        if (this.config.energy_flow_diagramm_lines_factor === undefined)
-          this.config.energy_flow_diagramm_lines_factor = 2;
+        if (this.config.energy_flow_diagramm_lines_factor === undefined) this.config.energy_flow_diagramm_lines_factor = 2;
         if (element?.unitOfMeasurement === 'W') {
-          width =
-            (Math.floor(element?.value / 100) / 10) *
-            this.config.energy_flow_diagramm_lines_factor;
+          width = (Math.floor(element?.value / 100) / 10) * this.config.energy_flow_diagramm_lines_factor;
         } else {
-          width =
-            (Math.floor(element?.value * 10) / 10) *
-            this.config.energy_flow_diagramm_lines_factor;
+          width = (Math.floor(element?.value * 10) / 10) * this.config.energy_flow_diagramm_lines_factor;
         }
         if (width <= 0.1 && width !== 0) width = 0.1;
         entityLine.style.strokeWidth = width + 'px';
@@ -664,12 +488,7 @@ export class TeslaStyleSolarPowerCard extends LitElement {
 
   private redraw(ev: UIEvent) {
     if (this.hass && this.config && ev.type === 'resize') {
-      this.oldWidth = HtmlResizeForPowerCard.changeStylesDependingOnWidth(
-        this,
-        this.solarCardElements,
-        this.clientWidth,
-        this.oldWidth
-      );
+      this.oldWidth = HtmlResizeForPowerCard.changeStylesDependingOnWidth(this, this.solarCardElements, this.clientWidth, this.oldWidth);
     }
   }
 
diff --git a/src/models/SensorElement.ts b/src/models/SensorElement.ts
index 84943bd..57ec8af 100644
--- a/src/models/SensorElement.ts
+++ b/src/models/SensorElement.ts
@@ -46,7 +46,7 @@ export class SensorElement {
     entityState: string | undefined,
     unitOfMeasurement: string | undefined,
     useWnotkW = false,
-    threshold = 1
+    thresholdInK = 1
   ): void {
     if (entityState === undefined) {
       this.value = 0;
@@ -62,12 +62,7 @@ export class SensorElement {
     switch (unitOfMeasurement) {
       case 'W':
       case 'kW':
-        this.setValueAndUnitDependingExtraOptions(
-          unitOfMeasurement,
-          valueFromState,
-          useWnotkW,
-          threshold
-        );
+        this.setValueAndUnitDependingOnExtraOptions(unitOfMeasurement, valueFromState, useWnotkW, thresholdInK);
         break;
       case '%':
         this.value = valueFromState;
@@ -82,7 +77,7 @@ export class SensorElement {
     this.value = this.roundValue(this.value);
   }
 
-  private setValueAndUnitDependingExtraOptions(
+  private setValueAndUnitDependingOnExtraOptions(
     unitOfMeasurement: string,
     valueFromState: number,
     useWnotkW: boolean,
@@ -98,22 +93,17 @@ export class SensorElement {
       return;
     }
 
-    if (
-      thresholdInK !== 1 &&
-      unitOfMeasurement === 'kW' &&
-      valueFromState < thresholdInK
-    ) {
-      this.value = valueFromState * 1000;
-      this.unitOfMeasurement = 'W';
-      return;
-    }
-
     if (unitOfMeasurement === 'kW') {
       this.value = valueFromState;
     } else if (unitOfMeasurement === 'W') {
       this.value = valueFromState / 1000;
     }
     this.unitOfMeasurement = 'kW';
+
+    if (thresholdInK !== 1 && this.unitOfMeasurement === 'kW' && this.value < thresholdInK) {
+      this.value *= 1000;
+      this.unitOfMeasurement = 'W';
+    }
   }
 
   private roundValue(value: number): number {
diff --git a/src/models/TeslaStyleSolarPowerCardConfig.ts b/src/models/TeslaStyleSolarPowerCardConfig.ts
index d1ee45d..410c639 100644
--- a/src/models/TeslaStyleSolarPowerCardConfig.ts
+++ b/src/models/TeslaStyleSolarPowerCardConfig.ts
@@ -14,6 +14,7 @@ export interface TeslaStyleSolarPowerCardConfig extends LovelaceCardConfig {
   threshold_in_k?: number;
   energy_flow_diagramm?: boolean;
   energy_flow_diagramm_lines_factor?: number;
+  change_house_bubble_color_with_flow?: boolean;
 
   grid_icon?: string;
   generation_icon?: string;
diff --git a/src/services/htmlWriterForPowerCard.ts b/src/services/htmlWriterForPowerCard.ts
index 5b27733..8dc3010 100644
--- a/src/services/htmlWriterForPowerCard.ts
+++ b/src/services/htmlWriterForPowerCard.ts
@@ -1,4 +1,4 @@
-/* eslint-disable no-param-reassign, import/extensions, prefer-template, class-methods-use-this, lit-a11y/click-events-have-key-events, lines-between-class-members */
+/* 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 { HomeAssistant } from 'custom-card-helpers';
 import { HassEntity } from 'home-assistant-js-websocket';
@@ -34,13 +34,7 @@ export class HtmlWriterForPowerCard {
     return html` <div class="acc_td ${cssSelector}">
       <div
         class="acc_container ${bubblClickEntitySlot}"
-        style="${'width:' +
-        9 * this.pxRate +
-        'px; height: ' +
-        9 * this.pxRate +
-        'px; padding:' +
-        5 * this.pxRate +
-        'px'}"
+        style="${'width:' + 9 * this.pxRate + 'px; height: ' + 9 * this.pxRate + 'px; padding:' + 5 * this.pxRate + 'px;'}"
         @click="${() => this._handleClick(bubblClickEntitySlotHassState)}"
       >
         ${extraValue !== null
@@ -54,12 +48,7 @@ export class HtmlWriterForPowerCard {
             </div>`
           : html``}
         <ha-icon class="acc_icon" icon="${icon}"></ha-icon>
-        <div
-          class="acc_text"
-          style="font-size:${3 * this.pxRate + 'px'}; margin-top:${-0.5 *
-            this.pxRate +
-          'px'}"
-        >
+        <div class="acc_text" style="font-size:${3 * this.pxRate + 'px'}; margin-top:${-0.5 * this.pxRate + 'px'}">
           ${mainValue} ${mainUnitOfMeasurement}
         </div>
       </div>
@@ -91,10 +80,7 @@ export class HtmlWriterForPowerCard {
     );
   }
 
-  private getBatteryIcon(
-    batteryValue: number,
-    batteryChargeDischargeValue: number
-  ) {
+  private getBatteryIcon(batteryValue: number, batteryChargeDischargeValue: number) {
     let TempSocValue = batteryValue;
     if (batteryValue <= 5) TempSocValue = 0;
 
@@ -112,13 +98,8 @@ export class HtmlWriterForPowerCard {
     return 'mdi:battery' + batteryCharging + batteryStateIconString;
   }
 
-  public writeAppliancePowerLineAndCircle(
-    applianceNumber: number,
-    pathDAttribute: string
-  ) {
-    const divEntity = this.solarCardElements.get(
-      'appliance' + applianceNumber + '_consumption_entity'
-    );
+  public writeAppliancePowerLineAndCircle(applianceNumber: number, pathDAttribute: string) {
+    const divEntity = this.solarCardElements.get('appliance' + applianceNumber + '_consumption_entity');
     if (divEntity == null) return html``;
     const height = 18;
     const width = 4;
@@ -141,15 +122,10 @@ export class HtmlWriterForPowerCard {
         xmlns="http://www.w3.org/2000/svg"
         viewBox="${'0 0 ' + 26 * this.pxRate + ' ' + 26 * this.pxRate}"
         preserveAspectRatio="xMinYMax slice"
-        style="height:${height * this.pxRate + 'px'};width:${width *
-          this.pxRate +
-        'px'}"
+        style="height:${height * this.pxRate + 'px'};width:${width * this.pxRate + 'px'}"
         class="acc_appliance${applianceNumber}_line_svg"
       >
-        ${this.writeCircleAndLine(
-          'appliance' + applianceNumber + '_consumption_entity',
-          pathDAttribute
-        )}
+        ${this.writeCircleAndLine('appliance' + applianceNumber + '_consumption_entity', pathDAttribute)}
       </svg>
     </div>`;
   }
@@ -158,13 +134,7 @@ export class HtmlWriterForPowerCard {
     const entity = this.solarCardElements.get(sensorName);
     if (entity == null) return html``;
     return html`<svg>
-      <circle
-        r="4"
-        cx="${entity.startPosition.toString()}"
-        cy="4"
-        fill="${entity.color}"
-        id="${sensorName + '_circle'}"
-      ></circle>
+      <circle r="4" cx="${entity.startPosition.toString()}" cy="4" fill="${entity.color}" id="${sensorName + '_circle'}"></circle>
       <path d="${pathDAttribute}" id="${sensorName + '_line'}"></path>
     </svg>`;
   }
diff --git a/tesla-style-solar-power-card.js b/tesla-style-solar-power-card.js
index bf05b31..0440c2c 100644
--- a/tesla-style-solar-power-card.js
+++ b/tesla-style-solar-power-card.js
@@ -25,7 +25,7 @@
      * Code distributed by Google as part of the polymer project is also
      * subject to an additional IP rights grant found at
      * http://polymer.github.io/PATENTS.txt
-     */}const e="undefined"!=typeof window&&null!=window.customElements&&void 0!==window.customElements.polyfillWrapFlushCallback,i=(t,e,i=null)=>{for(;e!==i;){const i=e.nextSibling;t.removeChild(e),e=i}},n=`{{lit-${String(Math.random()).slice(2)}}}`,s=`\x3c!--${n}--\x3e`,r=new RegExp(`${n}|${s}`),o="$lit$";class a{constructor(t,e){this.parts=[],this.element=e;const i=[],s=[],a=document.createTreeWalker(e.content,133,null,!1);let c=0,p=-1,u=0;const{strings:_,values:{length:y}}=t;for(;u<y;){const t=a.nextNode();if(null!==t){if(p++,1===t.nodeType){if(t.hasAttributes()){const e=t.attributes,{length:i}=e;let n=0;for(let t=0;t<i;t++)l(e[t].name,o)&&n++;for(;n-- >0;){const e=_[u],i=d.exec(e)[2],n=i.toLowerCase()+o,s=t.getAttribute(n);t.removeAttribute(n);const a=s.split(r);this.parts.push({type:"attribute",index:p,name:i,strings:a}),u+=a.length-1}}"TEMPLATE"===t.tagName&&(s.push(t),a.currentNode=t.content)}else if(3===t.nodeType){const e=t.data;if(e.indexOf(n)>=0){const n=t.parentNode,s=e.split(r),a=s.length-1;for(let e=0;e<a;e++){let i,r=s[e];if(""===r)i=h();else{const t=d.exec(r);null!==t&&l(t[2],o)&&(r=r.slice(0,t.index)+t[1]+t[2].slice(0,-o.length)+t[3]),i=document.createTextNode(r)}n.insertBefore(i,t),this.parts.push({type:"node",index:++p})}""===s[a]?(n.insertBefore(h(),t),i.push(t)):t.data=s[a],u+=a}}else if(8===t.nodeType)if(t.data===n){const e=t.parentNode;null!==t.previousSibling&&p!==c||(p++,e.insertBefore(h(),t)),c=p,this.parts.push({type:"node",index:p}),null===t.nextSibling?t.data="":(i.push(t),p--),u++}else{let e=-1;for(;-1!==(e=t.data.indexOf(n,e+1));)this.parts.push({type:"node",index:-1}),u++}}else a.currentNode=s.pop()}for(const t of i)t.parentNode.removeChild(t)}}const l=(t,e)=>{const i=t.length-e.length;return i>=0&&t.slice(i)===e},c=t=>-1!==t.index,h=()=>document.createComment(""),d=/([ \x09\x0a\x0c\x0d])([^\0-\x1F\x7F-\x9F "'>=/]+)([ \x09\x0a\x0c\x0d]*=[ \x09\x0a\x0c\x0d]*(?:[^ \x09\x0a\x0c\x0d"'`<>=]*|"[^"]*|'[^']*))$/;function p(t,e){const{element:{content:i},parts:n}=t,s=document.createTreeWalker(i,133,null,!1);let r=_(n),o=n[r],a=-1,l=0;const c=[];let h=null;for(;s.nextNode();){a++;const t=s.currentNode;for(t.previousSibling===h&&(h=null),e.has(t)&&(c.push(t),null===h&&(h=t)),null!==h&&l++;void 0!==o&&o.index===a;)o.index=null!==h?-1:o.index-l,r=_(n,r),o=n[r]}c.forEach((t=>t.parentNode.removeChild(t)))}const u=t=>{let e=11===t.nodeType?0:1;const i=document.createTreeWalker(t,133,null,!1);for(;i.nextNode();)e++;return e},_=(t,e=-1)=>{for(let i=e+1;i<t.length;i++){const e=t[i];if(c(e))return i}return-1};
+     */}const e="undefined"!=typeof window&&null!=window.customElements&&void 0!==window.customElements.polyfillWrapFlushCallback,i=(t,e,i=null)=>{for(;e!==i;){const i=e.nextSibling;t.removeChild(e),e=i}},n=`{{lit-${String(Math.random()).slice(2)}}}`,s=`\x3c!--${n}--\x3e`,r=new RegExp(`${n}|${s}`),o="$lit$";class a{constructor(t,e){this.parts=[],this.element=e;const i=[],s=[],a=document.createTreeWalker(e.content,133,null,!1);let c=0,d=-1,u=0;const{strings:_,values:{length:y}}=t;for(;u<y;){const t=a.nextNode();if(null!==t){if(d++,1===t.nodeType){if(t.hasAttributes()){const e=t.attributes,{length:i}=e;let n=0;for(let t=0;t<i;t++)l(e[t].name,o)&&n++;for(;n-- >0;){const e=_[u],i=p.exec(e)[2],n=i.toLowerCase()+o,s=t.getAttribute(n);t.removeAttribute(n);const a=s.split(r);this.parts.push({type:"attribute",index:d,name:i,strings:a}),u+=a.length-1}}"TEMPLATE"===t.tagName&&(s.push(t),a.currentNode=t.content)}else if(3===t.nodeType){const e=t.data;if(e.indexOf(n)>=0){const n=t.parentNode,s=e.split(r),a=s.length-1;for(let e=0;e<a;e++){let i,r=s[e];if(""===r)i=h();else{const t=p.exec(r);null!==t&&l(t[2],o)&&(r=r.slice(0,t.index)+t[1]+t[2].slice(0,-o.length)+t[3]),i=document.createTextNode(r)}n.insertBefore(i,t),this.parts.push({type:"node",index:++d})}""===s[a]?(n.insertBefore(h(),t),i.push(t)):t.data=s[a],u+=a}}else if(8===t.nodeType)if(t.data===n){const e=t.parentNode;null!==t.previousSibling&&d!==c||(d++,e.insertBefore(h(),t)),c=d,this.parts.push({type:"node",index:d}),null===t.nextSibling?t.data="":(i.push(t),d--),u++}else{let e=-1;for(;-1!==(e=t.data.indexOf(n,e+1));)this.parts.push({type:"node",index:-1}),u++}}else a.currentNode=s.pop()}for(const t of i)t.parentNode.removeChild(t)}}const l=(t,e)=>{const i=t.length-e.length;return i>=0&&t.slice(i)===e},c=t=>-1!==t.index,h=()=>document.createComment(""),p=/([ \x09\x0a\x0c\x0d])([^\0-\x1F\x7F-\x9F "'>=/]+)([ \x09\x0a\x0c\x0d]*=[ \x09\x0a\x0c\x0d]*(?:[^ \x09\x0a\x0c\x0d"'`<>=]*|"[^"]*|'[^']*))$/;function d(t,e){const{element:{content:i},parts:n}=t,s=document.createTreeWalker(i,133,null,!1);let r=_(n),o=n[r],a=-1,l=0;const c=[];let h=null;for(;s.nextNode();){a++;const t=s.currentNode;for(t.previousSibling===h&&(h=null),e.has(t)&&(c.push(t),null===h&&(h=t)),null!==h&&l++;void 0!==o&&o.index===a;)o.index=null!==h?-1:o.index-l,r=_(n,r),o=n[r]}c.forEach((t=>t.parentNode.removeChild(t)))}const u=t=>{let e=11===t.nodeType?0:1;const i=document.createTreeWalker(t,133,null,!1);for(;i.nextNode();)e++;return e},_=(t,e=-1)=>{for(let i=e+1;i<t.length;i++){const e=t[i];if(c(e))return i}return-1};
 /**
      * @license
      * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
@@ -66,7 +66,7 @@ class v{constructor(t,e,i){this.__parts=[],this.template=t,this.processor=e,this
      * Code distributed by Google as part of the polymer project is also
      * subject to an additional IP rights grant found at
      * http://polymer.github.io/PATENTS.txt
-     */const w=window.trustedTypes&&trustedTypes.createPolicy("lit-html",{createHTML:t=>t}),b=` ${n} `;class x{constructor(t,e,i,n){this.strings=t,this.values=e,this.type=i,this.processor=n}getHTML(){const t=this.strings.length-1;let e="",i=!1;for(let r=0;r<t;r++){const t=this.strings[r],a=t.lastIndexOf("\x3c!--");i=(a>-1||i)&&-1===t.indexOf("--\x3e",a+1);const l=d.exec(t);e+=null===l?t+(i?b:s):t.substr(0,l.index)+l[1]+l[2]+o+l[3]+n}return e+=this.strings[t],e}getTemplateElement(){const t=document.createElement("template");let e=this.getHTML();return void 0!==w&&(e=w.createHTML(e)),t.innerHTML=e,t}}
+     */const w=window.trustedTypes&&trustedTypes.createPolicy("lit-html",{createHTML:t=>t}),b=` ${n} `;class x{constructor(t,e,i,n){this.strings=t,this.values=e,this.type=i,this.processor=n}getHTML(){const t=this.strings.length-1;let e="",i=!1;for(let r=0;r<t;r++){const t=this.strings[r],a=t.lastIndexOf("\x3c!--");i=(a>-1||i)&&-1===t.indexOf("--\x3e",a+1);const l=p.exec(t);e+=null===l?t+(i?b:s):t.substr(0,l.index)+l[1]+l[2]+o+l[3]+n}return e+=this.strings[t],e}getTemplateElement(){const t=document.createElement("template");let e=this.getHTML();return void 0!==w&&(e=w.createHTML(e)),t.innerHTML=e,t}}
 /**
      * @license
      * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
@@ -79,7 +79,7 @@ class v{constructor(t,e,i){this.__parts=[],this.template=t,this.processor=e,this
      * Code distributed by Google as part of the polymer project is also
      * subject to an additional IP rights grant found at
      * http://polymer.github.io/PATENTS.txt
-     */const S=t=>null===t||!("object"==typeof t||"function"==typeof t),C=t=>Array.isArray(t)||!(!t||!t[Symbol.iterator]);class P{constructor(t,e,i){this.dirty=!0,this.element=t,this.name=e,this.strings=i,this.parts=[];for(let t=0;t<i.length-1;t++)this.parts[t]=this._createPart()}_createPart(){return new A(this)}_getValue(){const t=this.strings,e=t.length-1,i=this.parts;if(1===e&&""===t[0]&&""===t[1]){const t=i[0].value;if("symbol"==typeof t)return String(t);if("string"==typeof t||!C(t))return t}let n="";for(let s=0;s<e;s++){n+=t[s];const e=i[s];if(void 0!==e){const t=e.value;if(S(t)||!C(t))n+="string"==typeof t?t:String(t);else for(const e of t)n+="string"==typeof e?e:String(e)}}return n+=t[e],n}commit(){this.dirty&&(this.dirty=!1,this.element.setAttribute(this.name,this._getValue()))}}class A{constructor(t){this.value=void 0,this.committer=t}setValue(t){t===m||S(t)&&t===this.value||(this.value=t,g(t)||(this.committer.dirty=!0))}commit(){for(;g(this.value);){const t=this.value;this.value=m,t(this)}this.value!==m&&this.committer.commit()}}class E{constructor(t){this.value=void 0,this.__pendingValue=void 0,this.options=t}appendInto(t){this.startNode=t.appendChild(h()),this.endNode=t.appendChild(h())}insertAfterNode(t){this.startNode=t,this.endNode=t.nextSibling}appendIntoPart(t){t.__insert(this.startNode=h()),t.__insert(this.endNode=h())}insertAfterPart(t){t.__insert(this.startNode=h()),this.endNode=t.endNode,t.endNode=this.startNode}setValue(t){this.__pendingValue=t}commit(){if(null===this.startNode.parentNode)return;for(;g(this.__pendingValue);){const t=this.__pendingValue;this.__pendingValue=m,t(this)}const t=this.__pendingValue;t!==m&&(S(t)?t!==this.value&&this.__commitText(t):t instanceof x?this.__commitTemplateResult(t):t instanceof Node?this.__commitNode(t):C(t)?this.__commitIterable(t):t===f?(this.value=f,this.clear()):this.__commitText(t))}__insert(t){this.endNode.parentNode.insertBefore(t,this.endNode)}__commitNode(t){this.value!==t&&(this.clear(),this.__insert(t),this.value=t)}__commitText(t){const e=this.startNode.nextSibling,i="string"==typeof(t=null==t?"":t)?t:String(t);e===this.endNode.previousSibling&&3===e.nodeType?e.data=i:this.__commitNode(document.createTextNode(i)),this.value=t}__commitTemplateResult(t){const e=this.options.templateFactory(t);if(this.value instanceof v&&this.value.template===e)this.value.update(t.values);else{const i=new v(e,t.processor,this.options),n=i._clone();i.update(t.values),this.__commitNode(n),this.value=i}}__commitIterable(t){Array.isArray(this.value)||(this.value=[],this.clear());const e=this.value;let i,n=0;for(const s of t)i=e[n],void 0===i&&(i=new E(this.options),e.push(i),0===n?i.appendIntoPart(this):i.insertAfterPart(e[n-1])),i.setValue(s),i.commit(),n++;n<e.length&&(e.length=n,this.clear(i&&i.endNode))}clear(t=this.startNode){i(this.startNode.parentNode,t.nextSibling,this.endNode)}}class N{constructor(t,e,i){if(this.value=void 0,this.__pendingValue=void 0,2!==i.length||""!==i[0]||""!==i[1])throw new Error("Boolean attributes can only contain a single expression");this.element=t,this.name=e,this.strings=i}setValue(t){this.__pendingValue=t}commit(){for(;g(this.__pendingValue);){const t=this.__pendingValue;this.__pendingValue=m,t(this)}if(this.__pendingValue===m)return;const t=!!this.__pendingValue;this.value!==t&&(t?this.element.setAttribute(this.name,""):this.element.removeAttribute(this.name),this.value=t),this.__pendingValue=m}}class R extends P{constructor(t,e,i){super(t,e,i),this.single=2===i.length&&""===i[0]&&""===i[1]}_createPart(){return new T(this)}_getValue(){return this.single?this.parts[0].value:super._getValue()}commit(){this.dirty&&(this.dirty=!1,this.element[this.name]=this._getValue())}}class T extends A{}let $=!1;(()=>{try{const t={get capture(){return $=!0,!1}};window.addEventListener("test",t,t),window.removeEventListener("test",t,t)}catch(t){}})();class O{constructor(t,e,i){this.value=void 0,this.__pendingValue=void 0,this.element=t,this.eventName=e,this.eventContext=i,this.__boundHandleEvent=t=>this.handleEvent(t)}setValue(t){this.__pendingValue=t}commit(){for(;g(this.__pendingValue);){const t=this.__pendingValue;this.__pendingValue=m,t(this)}if(this.__pendingValue===m)return;const t=this.__pendingValue,e=this.value,i=null==t||null!=e&&(t.capture!==e.capture||t.once!==e.once||t.passive!==e.passive),n=null!=t&&(null==e||i);i&&this.element.removeEventListener(this.eventName,this.__boundHandleEvent,this.__options),n&&(this.__options=M(t),this.element.addEventListener(this.eventName,this.__boundHandleEvent,this.__options)),this.value=t,this.__pendingValue=m}handleEvent(t){"function"==typeof this.value?this.value.call(this.eventContext||this.element,t):this.value.handleEvent(t)}}const M=t=>t&&($?{capture:t.capture,passive:t.passive,once:t.once}:t.capture)
+     */const S=t=>null===t||!("object"==typeof t||"function"==typeof t),C=t=>Array.isArray(t)||!(!t||!t[Symbol.iterator]);class A{constructor(t,e,i){this.dirty=!0,this.element=t,this.name=e,this.strings=i,this.parts=[];for(let t=0;t<i.length-1;t++)this.parts[t]=this._createPart()}_createPart(){return new P(this)}_getValue(){const t=this.strings,e=t.length-1,i=this.parts;if(1===e&&""===t[0]&&""===t[1]){const t=i[0].value;if("symbol"==typeof t)return String(t);if("string"==typeof t||!C(t))return t}let n="";for(let s=0;s<e;s++){n+=t[s];const e=i[s];if(void 0!==e){const t=e.value;if(S(t)||!C(t))n+="string"==typeof t?t:String(t);else for(const e of t)n+="string"==typeof e?e:String(e)}}return n+=t[e],n}commit(){this.dirty&&(this.dirty=!1,this.element.setAttribute(this.name,this._getValue()))}}class P{constructor(t){this.value=void 0,this.committer=t}setValue(t){t===m||S(t)&&t===this.value||(this.value=t,g(t)||(this.committer.dirty=!0))}commit(){for(;g(this.value);){const t=this.value;this.value=m,t(this)}this.value!==m&&this.committer.commit()}}class E{constructor(t){this.value=void 0,this.__pendingValue=void 0,this.options=t}appendInto(t){this.startNode=t.appendChild(h()),this.endNode=t.appendChild(h())}insertAfterNode(t){this.startNode=t,this.endNode=t.nextSibling}appendIntoPart(t){t.__insert(this.startNode=h()),t.__insert(this.endNode=h())}insertAfterPart(t){t.__insert(this.startNode=h()),this.endNode=t.endNode,t.endNode=this.startNode}setValue(t){this.__pendingValue=t}commit(){if(null===this.startNode.parentNode)return;for(;g(this.__pendingValue);){const t=this.__pendingValue;this.__pendingValue=m,t(this)}const t=this.__pendingValue;t!==m&&(S(t)?t!==this.value&&this.__commitText(t):t instanceof x?this.__commitTemplateResult(t):t instanceof Node?this.__commitNode(t):C(t)?this.__commitIterable(t):t===f?(this.value=f,this.clear()):this.__commitText(t))}__insert(t){this.endNode.parentNode.insertBefore(t,this.endNode)}__commitNode(t){this.value!==t&&(this.clear(),this.__insert(t),this.value=t)}__commitText(t){const e=this.startNode.nextSibling,i="string"==typeof(t=null==t?"":t)?t:String(t);e===this.endNode.previousSibling&&3===e.nodeType?e.data=i:this.__commitNode(document.createTextNode(i)),this.value=t}__commitTemplateResult(t){const e=this.options.templateFactory(t);if(this.value instanceof v&&this.value.template===e)this.value.update(t.values);else{const i=new v(e,t.processor,this.options),n=i._clone();i.update(t.values),this.__commitNode(n),this.value=i}}__commitIterable(t){Array.isArray(this.value)||(this.value=[],this.clear());const e=this.value;let i,n=0;for(const s of t)i=e[n],void 0===i&&(i=new E(this.options),e.push(i),0===n?i.appendIntoPart(this):i.insertAfterPart(e[n-1])),i.setValue(s),i.commit(),n++;n<e.length&&(e.length=n,this.clear(i&&i.endNode))}clear(t=this.startNode){i(this.startNode.parentNode,t.nextSibling,this.endNode)}}class N{constructor(t,e,i){if(this.value=void 0,this.__pendingValue=void 0,2!==i.length||""!==i[0]||""!==i[1])throw new Error("Boolean attributes can only contain a single expression");this.element=t,this.name=e,this.strings=i}setValue(t){this.__pendingValue=t}commit(){for(;g(this.__pendingValue);){const t=this.__pendingValue;this.__pendingValue=m,t(this)}if(this.__pendingValue===m)return;const t=!!this.__pendingValue;this.value!==t&&(t?this.element.setAttribute(this.name,""):this.element.removeAttribute(this.name),this.value=t),this.__pendingValue=m}}class R extends A{constructor(t,e,i){super(t,e,i),this.single=2===i.length&&""===i[0]&&""===i[1]}_createPart(){return new T(this)}_getValue(){return this.single?this.parts[0].value:super._getValue()}commit(){this.dirty&&(this.dirty=!1,this.element[this.name]=this._getValue())}}class T extends P{}let $=!1;(()=>{try{const t={get capture(){return $=!0,!1}};window.addEventListener("test",t,t),window.removeEventListener("test",t,t)}catch(t){}})();class O{constructor(t,e,i){this.value=void 0,this.__pendingValue=void 0,this.element=t,this.eventName=e,this.eventContext=i,this.__boundHandleEvent=t=>this.handleEvent(t)}setValue(t){this.__pendingValue=t}commit(){for(;g(this.__pendingValue);){const t=this.__pendingValue;this.__pendingValue=m,t(this)}if(this.__pendingValue===m)return;const t=this.__pendingValue,e=this.value,i=null==t||null!=e&&(t.capture!==e.capture||t.once!==e.once||t.passive!==e.passive),n=null!=t&&(null==e||i);i&&this.element.removeEventListener(this.eventName,this.__boundHandleEvent,this.__options),n&&(this.__options=M(t),this.element.addEventListener(this.eventName,this.__boundHandleEvent,this.__options)),this.value=t,this.__pendingValue=m}handleEvent(t){"function"==typeof this.value?this.value.call(this.eventContext||this.element,t):this.value.handleEvent(t)}}const M=t=>t&&($?{capture:t.capture,passive:t.passive,once:t.once}:t.capture)
 /**
      * @license
      * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
@@ -92,7 +92,7 @@ class v{constructor(t,e,i){this.__parts=[],this.template=t,this.processor=e,this
      * Code distributed by Google as part of the polymer project is also
      * subject to an additional IP rights grant found at
      * http://polymer.github.io/PATENTS.txt
-     */;function k(t){let e=V.get(t.type);void 0===e&&(e={stringsArray:new WeakMap,keyString:new Map},V.set(t.type,e));let i=e.stringsArray.get(t.strings);if(void 0!==i)return i;const s=t.strings.join(n);return i=e.keyString.get(s),void 0===i&&(i=new a(t,t.getTemplateElement()),e.keyString.set(s,i)),e.stringsArray.set(t.strings,i),i}const V=new Map,B=new WeakMap;
+     */;function k(t){let e=B.get(t.type);void 0===e&&(e={stringsArray:new WeakMap,keyString:new Map},B.set(t.type,e));let i=e.stringsArray.get(t.strings);if(void 0!==i)return i;const s=t.strings.join(n);return i=e.keyString.get(s),void 0===i&&(i=new a(t,t.getTemplateElement()),e.keyString.set(s,i)),e.stringsArray.set(t.strings,i),i}const B=new Map,V=new WeakMap;
 /**
      * @license
      * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
@@ -119,7 +119,7 @@ class v{constructor(t,e,i){this.__parts=[],this.template=t,this.processor=e,this
      * subject to an additional IP rights grant found at
      * http://polymer.github.io/PATENTS.txt
      */
-class{handleAttributeExpressions(t,e,i,n){const s=e[0];if("."===s){return new R(t,e.slice(1),i).parts}if("@"===s)return[new O(t,e.slice(1),n.eventContext)];if("?"===s)return[new N(t,e.slice(1),i)];return new P(t,e,i).parts}handleTextExpression(t){return new E(t)}};
+class{handleAttributeExpressions(t,e,i,n){const s=e[0];if("."===s){return new R(t,e.slice(1),i).parts}if("@"===s)return[new O(t,e.slice(1),n.eventContext)];if("?"===s)return[new N(t,e.slice(1),i)];return new A(t,e,i).parts}handleTextExpression(t){return new E(t)}};
 /**
      * @license
      * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
@@ -145,7 +145,7 @@ class{handleAttributeExpressions(t,e,i,n){const s=e[0];if("."===s){return new R(
      * Code distributed by Google as part of the polymer project is also
      * subject to an additional IP rights grant found at
      * http://polymer.github.io/PATENTS.txt
-     */,q=(t,e)=>`${t}--${e}`;let I=!0;void 0===window.ShadyCSS?I=!1:void 0===window.ShadyCSS.prepareTemplateDom&&(console.warn("Incompatible ShadyCSS version detected. Please update to at least @webcomponents/webcomponentsjs@2.0.2 and @webcomponents/shadycss@1.3.1."),I=!1);const L=t=>e=>{const i=q(e.type,t);let s=V.get(i);void 0===s&&(s={stringsArray:new WeakMap,keyString:new Map},V.set(i,s));let r=s.stringsArray.get(e.strings);if(void 0!==r)return r;const o=e.strings.join(n);if(r=s.keyString.get(o),void 0===r){const i=e.getTemplateElement();I&&window.ShadyCSS.prepareTemplateDom(i,t),r=new a(e,i),s.keyString.set(o,r)}return s.stringsArray.set(e.strings,r),r},D=["html","svg"],z=new Set,F=(t,e,i)=>{z.add(t);const n=i?i.element:document.createElement("template"),s=e.querySelectorAll("style"),{length:r}=s;if(0===r)return void window.ShadyCSS.prepareTemplateStyles(n,t);const o=document.createElement("style");for(let t=0;t<r;t++){const e=s[t];e.parentNode.removeChild(e),o.textContent+=e.textContent}(t=>{D.forEach((e=>{const i=V.get(q(e,t));void 0!==i&&i.keyString.forEach((t=>{const{element:{content:e}}=t,i=new Set;Array.from(e.querySelectorAll("style")).forEach((t=>{i.add(t)})),p(t,i)}))}))})(t);const a=n.content;i?function(t,e,i=null){const{element:{content:n},parts:s}=t;if(null==i)return void n.appendChild(e);const r=document.createTreeWalker(n,133,null,!1);let o=_(s),a=0,l=-1;for(;r.nextNode();)for(l++,r.currentNode===i&&(a=u(e),i.parentNode.insertBefore(e,i));-1!==o&&s[o].index===l;){if(a>0){for(;-1!==o;)s[o].index+=a,o=_(s,o);return}o=_(s,o)}}(i,o,a.firstChild):a.insertBefore(o,a.firstChild),window.ShadyCSS.prepareTemplateStyles(n,t);const l=a.querySelector("style");if(window.ShadyCSS.nativeShadow&&null!==l)e.insertBefore(l.cloneNode(!0),e.firstChild);else if(i){a.insertBefore(o,a.firstChild);const t=new Set;t.add(o),p(i,t)}};window.JSCompiler_renameProperty=(t,e)=>t;const j={toAttribute(t,e){switch(e){case Boolean:return t?"":null;case Object:case Array:return null==t?t:JSON.stringify(t)}return t},fromAttribute(t,e){switch(e){case Boolean:return null!==t;case Number:return null===t?null:Number(t);case Object:case Array:return JSON.parse(t)}return t}},H=(t,e)=>e!==t&&(e==e||t==t),J={attribute:!0,type:String,converter:j,reflect:!1,hasChanged:H},G="finalized";class Y extends HTMLElement{constructor(){super(),this.initialize()}static get observedAttributes(){this.finalize();const t=[];return this._classProperties.forEach(((e,i)=>{const n=this._attributeNameForProperty(i,e);void 0!==n&&(this._attributeToPropertyMap.set(n,i),t.push(n))})),t}static _ensureClassProperties(){if(!this.hasOwnProperty(JSCompiler_renameProperty("_classProperties",this))){this._classProperties=new Map;const t=Object.getPrototypeOf(this)._classProperties;void 0!==t&&t.forEach(((t,e)=>this._classProperties.set(e,t)))}}static createProperty(t,e=J){if(this._ensureClassProperties(),this._classProperties.set(t,e),e.noAccessor||this.prototype.hasOwnProperty(t))return;const i="symbol"==typeof t?Symbol():`__${t}`,n=this.getPropertyDescriptor(t,i,e);void 0!==n&&Object.defineProperty(this.prototype,t,n)}static getPropertyDescriptor(t,e,i){return{get(){return this[e]},set(n){const s=this[t];this[e]=n,this.requestUpdateInternal(t,s,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this._classProperties&&this._classProperties.get(t)||J}static finalize(){const t=Object.getPrototypeOf(this);if(t.hasOwnProperty(G)||t.finalize(),this.finalized=!0,this._ensureClassProperties(),this._attributeToPropertyMap=new Map,this.hasOwnProperty(JSCompiler_renameProperty("properties",this))){const t=this.properties,e=[...Object.getOwnPropertyNames(t),..."function"==typeof Object.getOwnPropertySymbols?Object.getOwnPropertySymbols(t):[]];for(const i of e)this.createProperty(i,t[i])}}static _attributeNameForProperty(t,e){const i=e.attribute;return!1===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}static _valueHasChanged(t,e,i=H){return i(t,e)}static _propertyValueFromAttribute(t,e){const i=e.type,n=e.converter||j,s="function"==typeof n?n:n.fromAttribute;return s?s(t,i):t}static _propertyValueToAttribute(t,e){if(void 0===e.reflect)return;const i=e.type,n=e.converter;return(n&&n.toAttribute||j.toAttribute)(t,i)}initialize(){this._updateState=0,this._updatePromise=new Promise((t=>this._enableUpdatingResolver=t)),this._changedProperties=new Map,this._saveInstanceProperties(),this.requestUpdateInternal()}_saveInstanceProperties(){this.constructor._classProperties.forEach(((t,e)=>{if(this.hasOwnProperty(e)){const t=this[e];delete this[e],this._instanceProperties||(this._instanceProperties=new Map),this._instanceProperties.set(e,t)}}))}_applyInstanceProperties(){this._instanceProperties.forEach(((t,e)=>this[e]=t)),this._instanceProperties=void 0}connectedCallback(){this.enableUpdating()}enableUpdating(){void 0!==this._enableUpdatingResolver&&(this._enableUpdatingResolver(),this._enableUpdatingResolver=void 0)}disconnectedCallback(){}attributeChangedCallback(t,e,i){e!==i&&this._attributeToProperty(t,i)}_propertyToAttribute(t,e,i=J){const n=this.constructor,s=n._attributeNameForProperty(t,i);if(void 0!==s){const t=n._propertyValueToAttribute(e,i);if(void 0===t)return;this._updateState=8|this._updateState,null==t?this.removeAttribute(s):this.setAttribute(s,t),this._updateState=-9&this._updateState}}_attributeToProperty(t,e){if(8&this._updateState)return;const i=this.constructor,n=i._attributeToPropertyMap.get(t);if(void 0!==n){const t=i.getPropertyOptions(n);this._updateState=16|this._updateState,this[n]=i._propertyValueFromAttribute(e,t),this._updateState=-17&this._updateState}}requestUpdateInternal(t,e,i){let n=!0;if(void 0!==t){const s=this.constructor;i=i||s.getPropertyOptions(t),s._valueHasChanged(this[t],e,i.hasChanged)?(this._changedProperties.has(t)||this._changedProperties.set(t,e),!0!==i.reflect||16&this._updateState||(void 0===this._reflectingProperties&&(this._reflectingProperties=new Map),this._reflectingProperties.set(t,i))):n=!1}!this._hasRequestedUpdate&&n&&(this._updatePromise=this._enqueueUpdate())}requestUpdate(t,e){return this.requestUpdateInternal(t,e),this.updateComplete}async _enqueueUpdate(){this._updateState=4|this._updateState;try{await this._updatePromise}catch(t){}const t=this.performUpdate();return null!=t&&await t,!this._hasRequestedUpdate}get _hasRequestedUpdate(){return 4&this._updateState}get hasUpdated(){return 1&this._updateState}performUpdate(){if(!this._hasRequestedUpdate)return;this._instanceProperties&&this._applyInstanceProperties();let t=!1;const e=this._changedProperties;try{t=this.shouldUpdate(e),t?this.update(e):this._markUpdated()}catch(e){throw t=!1,this._markUpdated(),e}t&&(1&this._updateState||(this._updateState=1|this._updateState,this.firstUpdated(e)),this.updated(e))}_markUpdated(){this._changedProperties=new Map,this._updateState=-5&this._updateState}get updateComplete(){return this._getUpdateComplete()}_getUpdateComplete(){return this._updatePromise}shouldUpdate(t){return!0}update(t){void 0!==this._reflectingProperties&&this._reflectingProperties.size>0&&(this._reflectingProperties.forEach(((t,e)=>this._propertyToAttribute(e,this[e],t))),this._reflectingProperties=void 0),this._markUpdated()}updated(t){}firstUpdated(t){}}Y.finalized=!0;
+     */,q=(t,e)=>`${t}--${e}`;let I=!0;void 0===window.ShadyCSS?I=!1:void 0===window.ShadyCSS.prepareTemplateDom&&(console.warn("Incompatible ShadyCSS version detected. Please update to at least @webcomponents/webcomponentsjs@2.0.2 and @webcomponents/shadycss@1.3.1."),I=!1);const L=t=>e=>{const i=q(e.type,t);let s=B.get(i);void 0===s&&(s={stringsArray:new WeakMap,keyString:new Map},B.set(i,s));let r=s.stringsArray.get(e.strings);if(void 0!==r)return r;const o=e.strings.join(n);if(r=s.keyString.get(o),void 0===r){const i=e.getTemplateElement();I&&window.ShadyCSS.prepareTemplateDom(i,t),r=new a(e,i),s.keyString.set(o,r)}return s.stringsArray.set(e.strings,r),r},D=["html","svg"],z=new Set,F=(t,e,i)=>{z.add(t);const n=i?i.element:document.createElement("template"),s=e.querySelectorAll("style"),{length:r}=s;if(0===r)return void window.ShadyCSS.prepareTemplateStyles(n,t);const o=document.createElement("style");for(let t=0;t<r;t++){const e=s[t];e.parentNode.removeChild(e),o.textContent+=e.textContent}(t=>{D.forEach((e=>{const i=B.get(q(e,t));void 0!==i&&i.keyString.forEach((t=>{const{element:{content:e}}=t,i=new Set;Array.from(e.querySelectorAll("style")).forEach((t=>{i.add(t)})),d(t,i)}))}))})(t);const a=n.content;i?function(t,e,i=null){const{element:{content:n},parts:s}=t;if(null==i)return void n.appendChild(e);const r=document.createTreeWalker(n,133,null,!1);let o=_(s),a=0,l=-1;for(;r.nextNode();)for(l++,r.currentNode===i&&(a=u(e),i.parentNode.insertBefore(e,i));-1!==o&&s[o].index===l;){if(a>0){for(;-1!==o;)s[o].index+=a,o=_(s,o);return}o=_(s,o)}}(i,o,a.firstChild):a.insertBefore(o,a.firstChild),window.ShadyCSS.prepareTemplateStyles(n,t);const l=a.querySelector("style");if(window.ShadyCSS.nativeShadow&&null!==l)e.insertBefore(l.cloneNode(!0),e.firstChild);else if(i){a.insertBefore(o,a.firstChild);const t=new Set;t.add(o),d(i,t)}};window.JSCompiler_renameProperty=(t,e)=>t;const j={toAttribute(t,e){switch(e){case Boolean:return t?"":null;case Object:case Array:return null==t?t:JSON.stringify(t)}return t},fromAttribute(t,e){switch(e){case Boolean:return null!==t;case Number:return null===t?null:Number(t);case Object:case Array:return JSON.parse(t)}return t}},H=(t,e)=>e!==t&&(e==e||t==t),J={attribute:!0,type:String,converter:j,reflect:!1,hasChanged:H},G="finalized";class Y extends HTMLElement{constructor(){super(),this.initialize()}static get observedAttributes(){this.finalize();const t=[];return this._classProperties.forEach(((e,i)=>{const n=this._attributeNameForProperty(i,e);void 0!==n&&(this._attributeToPropertyMap.set(n,i),t.push(n))})),t}static _ensureClassProperties(){if(!this.hasOwnProperty(JSCompiler_renameProperty("_classProperties",this))){this._classProperties=new Map;const t=Object.getPrototypeOf(this)._classProperties;void 0!==t&&t.forEach(((t,e)=>this._classProperties.set(e,t)))}}static createProperty(t,e=J){if(this._ensureClassProperties(),this._classProperties.set(t,e),e.noAccessor||this.prototype.hasOwnProperty(t))return;const i="symbol"==typeof t?Symbol():`__${t}`,n=this.getPropertyDescriptor(t,i,e);void 0!==n&&Object.defineProperty(this.prototype,t,n)}static getPropertyDescriptor(t,e,i){return{get(){return this[e]},set(n){const s=this[t];this[e]=n,this.requestUpdateInternal(t,s,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this._classProperties&&this._classProperties.get(t)||J}static finalize(){const t=Object.getPrototypeOf(this);if(t.hasOwnProperty(G)||t.finalize(),this.finalized=!0,this._ensureClassProperties(),this._attributeToPropertyMap=new Map,this.hasOwnProperty(JSCompiler_renameProperty("properties",this))){const t=this.properties,e=[...Object.getOwnPropertyNames(t),..."function"==typeof Object.getOwnPropertySymbols?Object.getOwnPropertySymbols(t):[]];for(const i of e)this.createProperty(i,t[i])}}static _attributeNameForProperty(t,e){const i=e.attribute;return!1===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}static _valueHasChanged(t,e,i=H){return i(t,e)}static _propertyValueFromAttribute(t,e){const i=e.type,n=e.converter||j,s="function"==typeof n?n:n.fromAttribute;return s?s(t,i):t}static _propertyValueToAttribute(t,e){if(void 0===e.reflect)return;const i=e.type,n=e.converter;return(n&&n.toAttribute||j.toAttribute)(t,i)}initialize(){this._updateState=0,this._updatePromise=new Promise((t=>this._enableUpdatingResolver=t)),this._changedProperties=new Map,this._saveInstanceProperties(),this.requestUpdateInternal()}_saveInstanceProperties(){this.constructor._classProperties.forEach(((t,e)=>{if(this.hasOwnProperty(e)){const t=this[e];delete this[e],this._instanceProperties||(this._instanceProperties=new Map),this._instanceProperties.set(e,t)}}))}_applyInstanceProperties(){this._instanceProperties.forEach(((t,e)=>this[e]=t)),this._instanceProperties=void 0}connectedCallback(){this.enableUpdating()}enableUpdating(){void 0!==this._enableUpdatingResolver&&(this._enableUpdatingResolver(),this._enableUpdatingResolver=void 0)}disconnectedCallback(){}attributeChangedCallback(t,e,i){e!==i&&this._attributeToProperty(t,i)}_propertyToAttribute(t,e,i=J){const n=this.constructor,s=n._attributeNameForProperty(t,i);if(void 0!==s){const t=n._propertyValueToAttribute(e,i);if(void 0===t)return;this._updateState=8|this._updateState,null==t?this.removeAttribute(s):this.setAttribute(s,t),this._updateState=-9&this._updateState}}_attributeToProperty(t,e){if(8&this._updateState)return;const i=this.constructor,n=i._attributeToPropertyMap.get(t);if(void 0!==n){const t=i.getPropertyOptions(n);this._updateState=16|this._updateState,this[n]=i._propertyValueFromAttribute(e,t),this._updateState=-17&this._updateState}}requestUpdateInternal(t,e,i){let n=!0;if(void 0!==t){const s=this.constructor;i=i||s.getPropertyOptions(t),s._valueHasChanged(this[t],e,i.hasChanged)?(this._changedProperties.has(t)||this._changedProperties.set(t,e),!0!==i.reflect||16&this._updateState||(void 0===this._reflectingProperties&&(this._reflectingProperties=new Map),this._reflectingProperties.set(t,i))):n=!1}!this._hasRequestedUpdate&&n&&(this._updatePromise=this._enqueueUpdate())}requestUpdate(t,e){return this.requestUpdateInternal(t,e),this.updateComplete}async _enqueueUpdate(){this._updateState=4|this._updateState;try{await this._updatePromise}catch(t){}const t=this.performUpdate();return null!=t&&await t,!this._hasRequestedUpdate}get _hasRequestedUpdate(){return 4&this._updateState}get hasUpdated(){return 1&this._updateState}performUpdate(){if(!this._hasRequestedUpdate)return;this._instanceProperties&&this._applyInstanceProperties();let t=!1;const e=this._changedProperties;try{t=this.shouldUpdate(e),t?this.update(e):this._markUpdated()}catch(e){throw t=!1,this._markUpdated(),e}t&&(1&this._updateState||(this._updateState=1|this._updateState,this.firstUpdated(e)),this.updated(e))}_markUpdated(){this._changedProperties=new Map,this._updateState=-5&this._updateState}get updateComplete(){return this._getUpdateComplete()}_getUpdateComplete(){return this._updatePromise}shouldUpdate(t){return!0}update(t){void 0!==this._reflectingProperties&&this._reflectingProperties.size>0&&(this._reflectingProperties.forEach(((t,e)=>this._propertyToAttribute(e,this[e],t))),this._reflectingProperties=void 0),this._markUpdated()}updated(t){}firstUpdated(t){}}Y.finalized=!0;
 /**
      * @license
      * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
@@ -183,10 +183,10 @@ const Z=(t,e)=>"method"===e.kind&&e.descriptor&&!("value"in e.descriptor)?Object
      * subject to an additional IP rights grant found at
      * http://polymer.github.io/PATENTS.txt
      */
-(window.litElementVersions||(window.litElementVersions=[])).push("2.4.0");const nt={};class st extends Y{static getStyles(){return this.styles}static _getUniqueStyles(){if(this.hasOwnProperty(JSCompiler_renameProperty("_styles",this)))return;const t=this.getStyles();if(Array.isArray(t)){const e=(t,i)=>t.reduceRight(((t,i)=>Array.isArray(i)?e(i,t):(t.add(i),t)),i),i=e(t,new Set),n=[];i.forEach((t=>n.unshift(t))),this._styles=n}else this._styles=void 0===t?[]:[t];this._styles=this._styles.map((t=>{if(t instanceof CSSStyleSheet&&!X){const e=Array.prototype.slice.call(t.cssRules).reduce(((t,e)=>t+e.cssText),"");return new et(String(e),tt)}return t}))}initialize(){super.initialize(),this.constructor._getUniqueStyles(),this.renderRoot=this.createRenderRoot(),window.ShadowRoot&&this.renderRoot instanceof window.ShadowRoot&&this.adoptStyles()}createRenderRoot(){return this.attachShadow({mode:"open"})}adoptStyles(){const t=this.constructor._styles;0!==t.length&&(void 0===window.ShadyCSS||window.ShadyCSS.nativeShadow?X?this.renderRoot.adoptedStyleSheets=t.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet)):this._needsShimAdoptedStyleSheets=!0:window.ShadyCSS.ScopingShim.prepareAdoptedCssText(t.map((t=>t.cssText)),this.localName))}connectedCallback(){super.connectedCallback(),this.hasUpdated&&void 0!==window.ShadyCSS&&window.ShadyCSS.styleElement(this)}update(t){const e=this.render();super.update(t),e!==nt&&this.constructor.render(e,this.renderRoot,{scopeName:this.localName,eventContext:this}),this._needsShimAdoptedStyleSheets&&(this._needsShimAdoptedStyleSheets=!1,this.constructor._styles.forEach((t=>{const e=document.createElement("style");e.textContent=t.cssText,this.renderRoot.appendChild(e)})))}render(){return nt}}st.finalized=!0,st.render=(t,e,n)=>{if(!n||"object"!=typeof n||!n.scopeName)throw new Error("The `scopeName` option is required.");const s=n.scopeName,r=B.has(e),o=I&&11===e.nodeType&&!!e.host,a=o&&!z.has(s),l=a?document.createDocumentFragment():e;if(((t,e,n)=>{let s=B.get(e);void 0===s&&(i(e,e.firstChild),B.set(e,s=new E(Object.assign({templateFactory:k},n))),s.appendInto(e)),s.setValue(t),s.commit()})(t,l,Object.assign({templateFactory:L(s)},n)),a){const t=B.get(l);B.delete(l);const n=t.value instanceof v?t.value.template:void 0;F(s,l,n),i(e,e.firstChild),e.appendChild(l),B.set(e,t)}!r&&o&&window.ShadyCSS.styleElement(e.host)};class rt{constructor(t,e){this.speed=0,this.startPosition=0,this.currentPosition=0,this.currentDelta=0,this.maxPosition=30,this.unitOfMeasurement="",this.accText="",this.accTextclassName="accText",this.entity="",this.color="stroke:var(--info-color)",this.circleColor="var(--primary-color)",this.prevTimestamp=0,this.accTextElement=null,this.entity=t,this.entitySlot=e,this.value=0}setValueAndUnitOfMeasurement(t,e,i=!1,n=1){if(void 0===t)return void(this.value=0);if(void 0===e)return void(this.value=t);const s=parseFloat(t);switch(e){case"W":case"kW":this.setValueAndUnitDependingExtraOptions(e,s,i,n);break;case"%":this.value=s,this.unitOfMeasurement=e;break;default:return this.value=t,void(this.unitOfMeasurement=e)}this.value=this.roundValue(this.value)}setValueAndUnitDependingExtraOptions(t,e,i,n){if(i)"kW"===t?(this.value=1e3*e,this.unitOfMeasurement="W"):this.value=e;else{if(1!==n&&"kW"===t&&e<n)return this.value=1e3*e,void(this.unitOfMeasurement="W");"kW"===t?this.value=e:"W"===t&&(this.value=e/1e3),this.unitOfMeasurement="kW"}}roundValue(t){let e;return e=t>.1?(0|Math.round(10*(t+Number.EPSILON)))/10:(0|Math.round(100*(t+Number.EPSILON)))/100,e}setSpeed(t){this.speed=0,0!==Math.abs(this.value)&&(this.speed=t?rt.SPEEDFACTOR/1e3*this.value:rt.SPEEDFACTOR*this.value)}}rt.SPEEDFACTOR=.04;class ot{constructor(t,e){this.teslaCard=t,this.solarCardElements=t.solarCardElements,this.pxRate=t.pxRate,this.hass=e}writeBubbleDiv(t,e,i,n,s=null,r=null,o=null,a=null){return U` <div class="acc_td ${i}">
+(window.litElementVersions||(window.litElementVersions=[])).push("2.4.0");const nt={};class st extends Y{static getStyles(){return this.styles}static _getUniqueStyles(){if(this.hasOwnProperty(JSCompiler_renameProperty("_styles",this)))return;const t=this.getStyles();if(Array.isArray(t)){const e=(t,i)=>t.reduceRight(((t,i)=>Array.isArray(i)?e(i,t):(t.add(i),t)),i),i=e(t,new Set),n=[];i.forEach((t=>n.unshift(t))),this._styles=n}else this._styles=void 0===t?[]:[t];this._styles=this._styles.map((t=>{if(t instanceof CSSStyleSheet&&!X){const e=Array.prototype.slice.call(t.cssRules).reduce(((t,e)=>t+e.cssText),"");return new et(String(e),tt)}return t}))}initialize(){super.initialize(),this.constructor._getUniqueStyles(),this.renderRoot=this.createRenderRoot(),window.ShadowRoot&&this.renderRoot instanceof window.ShadowRoot&&this.adoptStyles()}createRenderRoot(){return this.attachShadow({mode:"open"})}adoptStyles(){const t=this.constructor._styles;0!==t.length&&(void 0===window.ShadyCSS||window.ShadyCSS.nativeShadow?X?this.renderRoot.adoptedStyleSheets=t.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet)):this._needsShimAdoptedStyleSheets=!0:window.ShadyCSS.ScopingShim.prepareAdoptedCssText(t.map((t=>t.cssText)),this.localName))}connectedCallback(){super.connectedCallback(),this.hasUpdated&&void 0!==window.ShadyCSS&&window.ShadyCSS.styleElement(this)}update(t){const e=this.render();super.update(t),e!==nt&&this.constructor.render(e,this.renderRoot,{scopeName:this.localName,eventContext:this}),this._needsShimAdoptedStyleSheets&&(this._needsShimAdoptedStyleSheets=!1,this.constructor._styles.forEach((t=>{const e=document.createElement("style");e.textContent=t.cssText,this.renderRoot.appendChild(e)})))}render(){return nt}}st.finalized=!0,st.render=(t,e,n)=>{if(!n||"object"!=typeof n||!n.scopeName)throw new Error("The `scopeName` option is required.");const s=n.scopeName,r=V.has(e),o=I&&11===e.nodeType&&!!e.host,a=o&&!z.has(s),l=a?document.createDocumentFragment():e;if(((t,e,n)=>{let s=V.get(e);void 0===s&&(i(e,e.firstChild),V.set(e,s=new E(Object.assign({templateFactory:k},n))),s.appendInto(e)),s.setValue(t),s.commit()})(t,l,Object.assign({templateFactory:L(s)},n)),a){const t=V.get(l);V.delete(l);const n=t.value instanceof v?t.value.template:void 0;F(s,l,n),i(e,e.firstChild),e.appendChild(l),V.set(e,t)}!r&&o&&window.ShadyCSS.styleElement(e.host)};class rt{constructor(t,e){this.speed=0,this.startPosition=0,this.currentPosition=0,this.currentDelta=0,this.maxPosition=30,this.unitOfMeasurement="",this.accText="",this.accTextclassName="accText",this.entity="",this.color="stroke:var(--info-color)",this.circleColor="var(--primary-color)",this.prevTimestamp=0,this.accTextElement=null,this.entity=t,this.entitySlot=e,this.value=0}setValueAndUnitOfMeasurement(t,e,i=!1,n=1){if(void 0===t)return void(this.value=0);if(void 0===e)return void(this.value=t);const s=parseFloat(t);switch(e){case"W":case"kW":this.setValueAndUnitDependingOnExtraOptions(e,s,i,n);break;case"%":this.value=s,this.unitOfMeasurement=e;break;default:return this.value=t,void(this.unitOfMeasurement=e)}this.value=this.roundValue(this.value)}setValueAndUnitDependingOnExtraOptions(t,e,i,n){i?"kW"===t?(this.value=1e3*e,this.unitOfMeasurement="W"):this.value=e:("kW"===t?this.value=e:"W"===t&&(this.value=e/1e3),this.unitOfMeasurement="kW",1!==n&&"kW"===this.unitOfMeasurement&&this.value<n&&(this.value*=1e3,this.unitOfMeasurement="W"))}roundValue(t){let e;return e=t>.1?(0|Math.round(10*(t+Number.EPSILON)))/10:(0|Math.round(100*(t+Number.EPSILON)))/100,e}setSpeed(t){this.speed=0,0!==Math.abs(this.value)&&(this.speed=t?rt.SPEEDFACTOR/1e3*this.value:rt.SPEEDFACTOR*this.value)}}rt.SPEEDFACTOR=.04;class ot{constructor(t,e){this.teslaCard=t,this.solarCardElements=t.solarCardElements,this.pxRate=t.pxRate,this.hass=e}writeBubbleDiv(t,e,i,n,s=null,r=null,o=null,a=null){return U` <div class="acc_td ${i}">
       <div
         class="acc_container ${s}"
-        style="${"width:"+9*this.pxRate+"px; height: "+9*this.pxRate+"px; padding:"+5*this.pxRate+"px"}"
+        style="${"width:"+9*this.pxRate+"px; height: "+9*this.pxRate+"px; padding:"+5*this.pxRate+"px;"}"
         @click="${()=>this._handleClick(r)}"
       >
         ${null!==o?U` <div
@@ -232,7 +232,7 @@ const Z=(t,e)=>"method"===e.kind&&e.descriptor&&!("value"in e.descriptor)?Object
         id="${t+"_circle"}"
       ></circle>
       <path d="${e}" id="${t+"_line"}"></path>
-    </svg>`}_handleClick(t){if(null==t)return;const e=new Event("hass-more-info",{bubbles:!0,cancelable:!0,composed:!0});e.detail={entityId:t.entity_id},null!=this.teslaCard.shadowRoot&&this.teslaCard.shadowRoot.dispatchEvent(e)}}class at{static changeStylesDependingOnWidth(t,e,i,n){if("complete"!==document.readyState||n===i)return n;if(null==t.shadowRoot)return n;const s=t.shadowRoot.querySelector("#tesla-style-solar-power-card");if(null==s)return n;const r=i/100,o=function(t,e,i){const n=s.querySelector(t);null!==n&&(n.style[e]=i)};o(".acc_left","top",12*r+"px"),o(".acc_right","top",12*r+"px"),s.querySelectorAll(".acc_container").forEach(((t,e,i)=>{const n=i[e];n.style.height=9*r+"px",n.style.width=9*r+"px",n.style.padding=5*r+"px"})),s.querySelectorAll("ha-icon").forEach(((t,e,i)=>{var n;const s=null===(n=i[e].shadowRoot)||void 0===n?void 0:n.querySelector("ha-svg-icon");null!=s&&(s.style.height=9*r+"px",s.style.width=9*r+"px")})),s.querySelectorAll(".acc_text").forEach((t=>{t.style["font-size"]=3*r+"px",t.style["margin-top"]=-.5*r+"px"})),s.querySelectorAll(".acc_text_extra").forEach((t=>{t.style["font-size"]=3*r+"px",t.style.top=1*r+"px",t.style.width=10*r+"px"})),o(".power_lines","height",42*r+"px"),o(".power_lines","width",42*r+"px"),o(".power_lines","top",21*r+"px"),o(".power_lines","left",21*r+"px"),o(".power_lines svg","width",42*r+"px"),o(".power_lines svg","height",42*r+"px"),o(".power_lines svg","viewBox","0 0 "+42*r+" "+42*r);let a=s.querySelector(".power_lines svg");null!==a&&a.setAttribute("viewBox","0 0 "+42*r+" "+42*r);const l=22*r;o("#generation_to_house_entity_line","d","M"+l+",0 C"+l+","+l+" "+l+","+l+" "+2*l+","+l),o("#grid_feed_in_entity_line","d","M"+l+",0 C"+l+","+l+" "+l+","+l+" 0,"+l),o("#grid_to_house_entity_line","d","M0,"+l+" C"+l+","+l+" "+l+","+l+" "+2*l+","+l),o("#grid_to_battery_entity_line","d","M0,"+l+" C"+l+","+l+" "+l+","+l+" "+l+","+2*l),o("#battery_to_house_entity_line","d","M"+l+","+2*l+" C"+l+","+l+" "+l+","+l+" "+2*l+","+l),o("#generation_to_battery_entity_line","d","M"+l+",0 C"+l+",0 "+l+","+2*l+" "+l+","+2*l),[1,2].forEach((t=>{o(".acc_appliance"+t+"_line svg","viewBox","0 0 "+26*r+" "+26*r),o(".acc_appliance"+t+"_line","right",10*r+"px"),o(".acc_appliance"+t+"_line","width",4*r+"px"),o(".acc_appliance"+t+"_line","height",18*r+"px"),o(".acc_appliance"+t+"_line svg","width",4*r+"px"),o(".acc_appliance"+t+"_line svg","height",18*r+"px"),a=s.querySelector(".acc_appliance"+t+"_line_svg"),null!==a&&a.setAttribute("viewBox","0 0 "+26*r+" "+26*r);null===s.querySelector(".generation_entity")&&1===t&&null!==a&&o(".acc_center_container","margin-top",19*r+"px");null===s.querySelector(".battery_entity")&&2===t&&null!==a&&o(".acc_center_container","margin-bottom",19*r+"px")}));return null===s.querySelector(".grid_entity")&&(o(".generation_entity","margin","0px"),o(".battery_entity","margin","0px"),o(".power_lines","width",30*r+"px"),a=s.querySelector(".power_lines svg"),null!==a&&a.setAttribute("viewBox",12*r+" 0 "+42*r+" "+42*r)),o(".acc_appliance1","top","10px"),o(".acc_appliance1_line","top",23*r+"px"),o(".acc_appliance2","bottom","10px"),o(".acc_appliance2_line","bottom",15*r+"px"),i}}window.customCards=window.customCards||[],window.customCards.push({type:"tesla-style-solar-power-card",name:"Tesla Style Solar Power Card",description:"A Solar Power Visualization with svg paths that mimmicks the powerwall app of tesla 2"});class lt extends st{constructor(){super(...arguments),this.solarCardElements=new Map,this.oldWidth=100,this.pxRate=4,this.htmlWriter=new ot(this,this.hass),this.title="Hey there",this.counter=5,this.error=""}__increment(){this.counter+=1}setConfig(t){if(t.test_gui,this.config={...t},null==this.config.grid_icon&&(this.config.grid_icon="mdi:transmission-tower"),null==this.config.generation_icon&&(this.config.generation_icon="mdi:solar-panel-large"),null==this.config.house_icon&&(this.config.house_icon="mdi:home"),null==this.config.battery_icon&&(this.config.battery_icon="mdi:battery-medium"),null==this.config.appliance1_icon&&(this.config.appliance1_icon="mdi:car-sports"),null==this.config.appliance2_icon&&(this.config.appliance2_icon="mdi:air-filter"),this.createSolarCardElements(),!this.config.energy_flow_diagramm){const t=this;setInterval(this.animateCircles,15,t)}}createSolarCardElements(){Object.keys(this.config).forEach((t=>{if(null!=this.config[t]&&t.indexOf("_entity")>5){const e=this.config[t].toString();this.solarCardElements.set(t,new rt(e,t))}}))}getCardSize(){return 5}static getStubConfig(){return{}}async firstUpdated(){await new Promise((t=>setTimeout(t,0))),this.oldWidth=at.changeStylesDependingOnWidth(this,this.solarCardElements,this.clientWidth,this.oldWidth)}connectedCallback(){super.connectedCallback(),this.redraw=this.redraw.bind(this),window.addEventListener("resize",this.redraw)}shouldUpdate(t){let e;e=this,this.config.energy_flow_diagramm||requestAnimationFrame((t=>{e.updateAllCircles(t)})),e=this;let i=!0;return Array.from(t.keys()).some((e=>{const n=t.get(e);return"hass"===e&&n&&(i=i&&this.sensorChangeDetected(n)),!i})),i}sensorChangeDetected(t){let e=!1;return this.solarCardElements.forEach(((i,n)=>{void 0!==this.hass.states[this.config[n]]&&this.hass.states[this.config[n]].state!==t.states[this.config[n]].state&&(e=!0)})),e}async performUpdate(){this.error="",this.solarCardElements.forEach((t=>{try{t.setValueAndUnitOfMeasurement(this.hass.states[t.entity].state,this.hass.states[t.entity].attributes.unit_of_measurement,this.config.show_w_not_kw,this.config.threshold_in_k),t.setSpeed(this.config.show_w_not_kw),this.config.energy_flow_diagramm&&this.setFatLinesDependingOnElementsValue()}catch(e){this.error+="Configured '"+t.entity+"' entity was not found. "}})),super.performUpdate()}render(){if(""!==this.error)return this._showError();this.pxRate=this.clientWidth/100;const t=22*this.pxRate;return U`
+    </svg>`}_handleClick(t){if(null==t)return;const e=new Event("hass-more-info",{bubbles:!0,cancelable:!0,composed:!0});e.detail={entityId:t.entity_id},null!=this.teslaCard.shadowRoot&&this.teslaCard.shadowRoot.dispatchEvent(e)}}class at{static changeStylesDependingOnWidth(t,e,i,n){if("complete"!==document.readyState||n===i)return n;if(null==t.shadowRoot)return n;const s=t.shadowRoot.querySelector("#tesla-style-solar-power-card");if(null==s)return n;const r=i/100,o=function(t,e,i){const n=s.querySelector(t);null!==n&&(n.style[e]=i)};o(".acc_left","top",12*r+"px"),o(".acc_right","top",12*r+"px"),s.querySelectorAll(".acc_container").forEach(((t,e,i)=>{const n=i[e];n.style.height=9*r+"px",n.style.width=9*r+"px",n.style.padding=5*r+"px"})),s.querySelectorAll("ha-icon").forEach(((t,e,i)=>{var n;const s=null===(n=i[e].shadowRoot)||void 0===n?void 0:n.querySelector("ha-svg-icon");null!=s&&(s.style.height=9*r+"px",s.style.width=9*r+"px")})),s.querySelectorAll(".acc_text").forEach((t=>{t.style["font-size"]=3*r+"px",t.style["margin-top"]=-.5*r+"px"})),s.querySelectorAll(".acc_text_extra").forEach((t=>{t.style["font-size"]=3*r+"px",t.style.top=1*r+"px",t.style.width=10*r+"px"})),o(".power_lines","height",42*r+"px"),o(".power_lines","width",42*r+"px"),o(".power_lines","top",21*r+"px"),o(".power_lines","left",21*r+"px"),o(".power_lines svg","width",42*r+"px"),o(".power_lines svg","height",42*r+"px"),o(".power_lines svg","viewBox","0 0 "+42*r+" "+42*r);let a=s.querySelector(".power_lines svg");null!==a&&a.setAttribute("viewBox","0 0 "+42*r+" "+42*r);const l=22*r;o("#generation_to_house_entity_line","d","M"+l+",0 C"+l+","+l+" "+l+","+l+" "+2*l+","+l),o("#grid_feed_in_entity_line","d","M"+l+",0 C"+l+","+l+" "+l+","+l+" 0,"+l),o("#grid_to_house_entity_line","d","M0,"+l+" C"+l+","+l+" "+l+","+l+" "+2*l+","+l),o("#grid_to_battery_entity_line","d","M0,"+l+" C"+l+","+l+" "+l+","+l+" "+l+","+2*l),o("#battery_to_house_entity_line","d","M"+l+","+2*l+" C"+l+","+l+" "+l+","+l+" "+2*l+","+l),o("#generation_to_battery_entity_line","d","M"+l+",0 C"+l+",0 "+l+","+2*l+" "+l+","+2*l),[1,2].forEach((t=>{o(".acc_appliance"+t+"_line svg","viewBox","0 0 "+26*r+" "+26*r),o(".acc_appliance"+t+"_line","right",10*r+"px"),o(".acc_appliance"+t+"_line","width",4*r+"px"),o(".acc_appliance"+t+"_line","height",18*r+"px"),o(".acc_appliance"+t+"_line svg","width",4*r+"px"),o(".acc_appliance"+t+"_line svg","height",18*r+"px"),a=s.querySelector(".acc_appliance"+t+"_line_svg"),null!==a&&a.setAttribute("viewBox","0 0 "+26*r+" "+26*r);null===s.querySelector(".generation_entity")&&1===t&&null!==a&&o(".acc_center_container","margin-top",19*r+"px");null===s.querySelector(".battery_entity")&&2===t&&null!==a&&o(".acc_center_container","margin-bottom",19*r+"px")}));return null===s.querySelector(".grid_entity")&&(o(".generation_entity","margin","0px"),o(".battery_entity","margin","0px"),o(".power_lines","width",30*r+"px"),a=s.querySelector(".power_lines svg"),null!==a&&a.setAttribute("viewBox",12*r+" 0 "+42*r+" "+42*r)),o(".acc_appliance1","top","10px"),o(".acc_appliance1_line","top",23*r+"px"),o(".acc_appliance2","bottom","10px"),o(".acc_appliance2_line","bottom",15*r+"px"),i}}window.customCards=window.customCards||[],window.customCards.push({type:"tesla-style-solar-power-card",name:"Tesla Style Solar Power Card",description:"A Solar Power Visualization with svg paths that mimmicks the powerwall app of tesla 2"});class lt extends st{constructor(){super(...arguments),this.solarCardElements=new Map,this.oldWidth=100,this.pxRate=4,this.htmlWriter=new ot(this,this.hass),this.title="Hey there",this.counter=5,this.error=""}__increment(){this.counter+=1}setConfig(t){if(t.test_gui,this.config={...t},null==this.config.grid_icon&&(this.config.grid_icon="mdi:transmission-tower"),null==this.config.generation_icon&&(this.config.generation_icon="mdi:solar-panel-large"),null==this.config.house_icon&&(this.config.house_icon="mdi:home"),null==this.config.battery_icon&&(this.config.battery_icon="mdi:battery-medium"),null==this.config.appliance1_icon&&(this.config.appliance1_icon="mdi:car-sports"),null==this.config.appliance2_icon&&(this.config.appliance2_icon="mdi:air-filter"),this.createSolarCardElements(),!this.config.energy_flow_diagramm){const t=this;setInterval(this.animateCircles,15,t)}}createSolarCardElements(){Object.keys(this.config).forEach((t=>{if(null!=this.config[t]&&t.indexOf("_entity")>5){const e=this.config[t].toString();this.solarCardElements.set(t,new rt(e,t))}}))}getCardSize(){return 5}static getStubConfig(){return{}}async firstUpdated(){await new Promise((t=>setTimeout(t,0))),this.oldWidth=at.changeStylesDependingOnWidth(this,this.solarCardElements,this.clientWidth,this.oldWidth)}connectedCallback(){super.connectedCallback(),this.redraw=this.redraw.bind(this),window.addEventListener("resize",this.redraw)}shouldUpdate(t){let e;e=this,this.config.energy_flow_diagramm||requestAnimationFrame((t=>{e.updateAllCircles(t)})),e=this;let i=!0;return Array.from(t.keys()).some((e=>{const n=t.get(e);return"hass"===e&&n&&(i=i&&this.sensorChangeDetected(n)),!i})),i}sensorChangeDetected(t){let e=!1;return this.solarCardElements.forEach(((i,n)=>{void 0!==this.hass.states[this.config[n]]&&this.hass.states[this.config[n]].state!==t.states[this.config[n]].state&&(e=!0)})),e}async performUpdate(){this.error="",this.solarCardElements.forEach((t=>{try{t.setValueAndUnitOfMeasurement(this.hass.states[t.entity].state,this.hass.states[t.entity].attributes.unit_of_measurement,this.config.show_w_not_kw,this.config.threshold_in_k),t.setSpeed(this.config.show_w_not_kw)}catch(e){this.error+=" Configured '"+t.entity+"' entity was not found. "}})),this.config.energy_flow_diagramm&&this.setEnergyFlowDiagramm(),this.config.change_house_bubble_color_with_flow&&this.colourHouseBubbleDependingOnHighestInput(),super.performUpdate()}render(){if(""!==this.error)return this._showError();this.pxRate=this.clientWidth/100;const t=22*this.pxRate;return U`
       <ha-card .header=${this.config.name} tabindex="0">
         <div id="tesla-style-solar-power-card">
           ${this.writeGenerationIconBubble()}
@@ -272,7 +272,7 @@ const Z=(t,e)=>"method"===e.kind&&e.descriptor&&!("value"in e.descriptor)?Object
           <div class="acc_bottom">${this.writeBatteryIconBubble()}</div>
         </div>
       </ha-card>
-    `}writeGenerationIconBubble(){return this.writeIconBubble(["generation_to_grid_entity","generation_to_house_entity","generation_to_battery_entity"],"acc_top","generation_icon","generation_entity","generation_extra_entity")}writeGridIconBubble(){return this.writeIconBubble(["-generation_to_grid_entity","grid_to_house_entity","-battery_to_grid_entity"],"acc_left","grid_icon","grid_entity","grid_extra_entity")}writeHouseIconBubble(){return this.writeIconBubble(["generation_to_house_entity","grid_to_house_entity","battery_to_house_entity"],"acc_right","house_icon","house_entity","house_extra_entity")}writeBatteryIconBubble(){return this.writeIconBubble(["generation_to_battery_entity","grid_to_battery_entity","-battery_to_house_entity","-battery_to_grid_entity"],"acc_bottom","battery_icon","battery_entity","battery_extra_entity",!0)}writeApplianceIconBubble(t){const e=["appliance"+t+"_consumption_entity"];return this.writeIconBubble(e,"acc_appliance"+t,"appliance"+t+"_icon","appliance"+t+"_consumption_entity","appliance"+t+"_extra_entity")}writeIconBubble(t,e,i,n=null,s=null,r=!1){let o,a,l,c=0,h=!1,d=!1,p=null;if(t.forEach((t=>{"-"===t.substring(0,1)&&(t=t.substring(1),h=!0);const e=this.solarCardElements.get(t);null!==e&&void 0!==(null==e?void 0:e.value)&&(d=!0,h?c-=null==e?void 0:e.value:c+=null==e?void 0:e.value,c=(100*c|0)/100,o=null==e?void 0:e.unitOfMeasurement),h=!1})),!d)return U``;if(null!==s){const t=this.solarCardElements.get(s);a=null==t?void 0:t.value,l=null==t?void 0:t.unitOfMeasurement}return null!==n&&(p=this.hass.states[this.config[n]]),r?this.htmlWriter.writeBatteryBubbleDiv(c,o,e,this.config[i],n,p,a,l):this.htmlWriter.writeBubbleDiv(c,o,e,this.config[i],n,p,a,l)}animateCircles(t){requestAnimationFrame((e=>{t.updateAllCircles(e)}))}updateAllCircles(t){this.solarCardElements.forEach(((e,i)=>{const n=this.solarCardElements.get(i);void 0!==n&&this.updateOneCircle(t,n)}))}updateOneCircle(t,e){if(null==this.shadowRoot)return;const i=this.shadowRoot.querySelector("#tesla-style-solar-power-card");if(null==i)return;if(e.line=i.querySelector("#"+e.entitySlot+"_line"),null===e.line)return;const n=e.line.getTotalLength();if(isNaN(n))return;if(e.circle=i.querySelector("#"+e.entitySlot+"_circle"),0===e.speed)return e.circle.setAttribute("visibility","hidden"),void(this.config.hide_inactive_lines&&e.line.setAttribute("visibility","hidden"));e.circle.setAttribute("visibility","visible"),this.config.hide_inactive_lines&&e.line.setAttribute("visibility","visible"),0===e.prevTimestamp&&(e.prevTimestamp=t,e.currentDelta=0),e.currentDelta+=Math.abs(e.speed)*(t-e.prevTimestamp);let s=e.currentDelta/n;e.speed>0?(s>=1||isNaN(s))&&(e.currentDelta=0,s=.01):(s=1-s,(s<=0||isNaN(s))&&(e.currentDelta=0,s=1));const r=e.line.getPointAtLength(n*s);e.circle.setAttributeNS(null,"cx",r.x.toString()),e.circle.setAttributeNS(null,"cy",r.y.toString()),e.prevTimestamp=t}colourHouseBubbleDependingOnHighestInput(){if(null==this.shadowRoot)return;const t=this.shadowRoot.querySelector("#tesla-style-solar-power-card");if(null==t)return;let e=null,i="";["generation_to_house_entity","grid_to_house_entity","battery_to_house_entity"].forEach((t=>{const n=this.solarCardElements.get(t);null!==n&&void 0!==(null==n?void 0:n.value)&&((null==e||(null==n?void 0:n.value)>e.value)&&(i=t),e=n)}));const n=t.querySelector(".house_entity");switch(i){case"generation_to_house_entity":n.style.color="var(--info-color)",n.style.border="var(--info-color)";break;case"battery_to_house_entity":n.style.color="var(--success-color)",n.style.border="var(--success-color)"}}setFatLinesDependingOnElementsValue(){if(console.log("setting fat lines"),null==this.shadowRoot)return;const t=this.shadowRoot.querySelector("#tesla-style-solar-power-card");null!=t&&this.solarCardElements.forEach(((e,i)=>{const n=this.solarCardElements.get(i);let s=1;if(null==t)return;const r=t.querySelector("#"+i+"_line");if(null!=r&&void 0!==n){t.querySelector("#"+i+"_circle").style.visibility="hidden",void 0===this.config.energy_flow_diagramm_lines_factor&&(this.config.energy_flow_diagramm_lines_factor=2),s="W"===(null==n?void 0:n.unitOfMeasurement)?Math.floor((null==n?void 0:n.value)/100)/10*this.config.energy_flow_diagramm_lines_factor:Math.floor(10*(null==n?void 0:n.value))/10*this.config.energy_flow_diagramm_lines_factor,s<=.1&&0!==s&&(s=.1),r.style.strokeWidth=s+"px"}}))}redraw(t){this.hass&&this.config&&"resize"===t.type&&(this.oldWidth=at.changeStylesDependingOnWidth(this,this.solarCardElements,this.clientWidth,this.oldWidth))}_showWarning(t){return U` <hui-warning>${t}</hui-warning> `}_showError(){return console.log(this.error),U`
+    `}writeGenerationIconBubble(){return this.writeIconBubble(["generation_to_grid_entity","generation_to_house_entity","generation_to_battery_entity"],"acc_top","generation_icon","generation_entity","generation_extra_entity")}writeGridIconBubble(){return this.writeIconBubble(["-generation_to_grid_entity","grid_to_house_entity","-battery_to_grid_entity"],"acc_left","grid_icon","grid_entity","grid_extra_entity")}writeHouseIconBubble(){return this.writeIconBubble(["generation_to_house_entity","grid_to_house_entity","battery_to_house_entity"],"acc_right","house_icon","house_entity","house_extra_entity")}writeBatteryIconBubble(){return this.writeIconBubble(["generation_to_battery_entity","grid_to_battery_entity","-battery_to_house_entity","-battery_to_grid_entity"],"acc_bottom","battery_icon","battery_entity","battery_extra_entity",!0)}writeApplianceIconBubble(t){const e=["appliance"+t+"_consumption_entity"];return this.writeIconBubble(e,"acc_appliance"+t,"appliance"+t+"_icon","appliance"+t+"_consumption_entity","appliance"+t+"_extra_entity")}writeIconBubble(t,e,i,n=null,s=null,r=!1){let o,a,l,c=0,h=!1,p=!1,d=null;if(t.forEach((t=>{"-"===t.substring(0,1)&&(t=t.substring(1),h=!0);const e=this.solarCardElements.get(t);null!==e&&void 0!==(null==e?void 0:e.value)&&(p=!0,h?c-=null==e?void 0:e.value:c+=null==e?void 0:e.value,c=(100*c|0)/100,o=null==e?void 0:e.unitOfMeasurement),h=!1})),!p)return U``;if(null!==s){const t=this.solarCardElements.get(s);a=null==t?void 0:t.value,l=null==t?void 0:t.unitOfMeasurement}return null!==n&&(d=this.hass.states[this.config[n]]),r?this.htmlWriter.writeBatteryBubbleDiv(c,o,e,this.config[i],n,d,a,l):this.htmlWriter.writeBubbleDiv(c,o,e,this.config[i],n,d,a,l)}animateCircles(t){requestAnimationFrame((e=>{t.updateAllCircles(e)}))}updateAllCircles(t){this.solarCardElements.forEach(((e,i)=>{const n=this.solarCardElements.get(i);void 0!==n&&this.updateOneCircle(t,n)}))}updateOneCircle(t,e){if(null==this.shadowRoot)return;const i=this.shadowRoot.querySelector("#tesla-style-solar-power-card");if(null==i)return;if(e.line=i.querySelector("#"+e.entitySlot+"_line"),null===e.line)return;const n=e.line.getTotalLength();if(isNaN(n))return;if(e.circle=i.querySelector("#"+e.entitySlot+"_circle"),0===e.speed)return e.circle.setAttribute("visibility","hidden"),void(this.config.hide_inactive_lines&&e.line.setAttribute("visibility","hidden"));e.circle.setAttribute("visibility","visible"),this.config.hide_inactive_lines&&e.line.setAttribute("visibility","visible"),0===e.prevTimestamp&&(e.prevTimestamp=t,e.currentDelta=0),e.currentDelta+=Math.abs(e.speed)*(t-e.prevTimestamp);let s=e.currentDelta/n;e.speed>0?(s>=1||isNaN(s))&&(e.currentDelta=0,s=.01):(s=1-s,(s<=0||isNaN(s))&&(e.currentDelta=0,s=1));const r=e.line.getPointAtLength(n*s);e.circle.setAttributeNS(null,"cx",r.x.toString()),e.circle.setAttributeNS(null,"cy",r.y.toString()),e.prevTimestamp=t}colourHouseBubbleDependingOnHighestInput(){if(null==this.shadowRoot)return;const t=this.shadowRoot.querySelector("#tesla-style-solar-power-card");if(null==t)return;let e=null,i="";switch(["generation_to_house_entity","grid_to_house_entity","battery_to_house_entity"].forEach((t=>{const n=this.solarCardElements.get(t);null!==n&&void 0!==(null==n?void 0:n.value)&&((null==e||(null==n?void 0:n.value)>e.value)&&(i=t),e=n)})),i){case"generation_to_house_entity":this.colourBubble(".house_entity",t,"warning"),this.colourBubble(".appliance1_consumption_entity",t,"warning"),this.colourBubble(".appliance2_consumption_entity",t,"warning"),this.colourLineAndCircle("#appliance1_consumption_entity",t,"warning"),this.colourLineAndCircle("#appliance2_consumption_entity",t,"warning");break;case"battery_to_house_entity":this.colourBubble(".house_entity",t,"success"),this.colourBubble(".appliance1_consumption_entity",t,"success"),this.colourBubble(".appliance2_consumption_entity",t,"success"),this.colourLineAndCircle("#appliance1_consumption_entity",t,"success"),this.colourLineAndCircle("#appliance2_consumption_entity",t,"success")}}colourBubble(t,e,i){const n=e.querySelector(t);null!==n&&(n.style.color="var(--"+i+"-color)",n.style.border="1px solid var(--"+i+"-color)")}colourLineAndCircle(t,e,i){const n=e.querySelector(t+"_line"),s=e.querySelector(t+"_circle");null!==n&&(n.style.stroke="var(--"+i+"-color)",s.style.fill="var(--"+i+"-color)")}setEnergyFlowDiagramm(){if(null==this.shadowRoot)return;const t=this.shadowRoot.querySelector("#tesla-style-solar-power-card");null!=t&&this.solarCardElements.forEach(((e,i)=>{const n=this.solarCardElements.get(i);let s=1;if(null==t)return;const r=t.querySelector("#"+i+"_line");if(null!=r&&void 0!==n){t.querySelector("#"+i+"_circle").style.visibility="hidden",void 0===this.config.energy_flow_diagramm_lines_factor&&(this.config.energy_flow_diagramm_lines_factor=2),s="W"===(null==n?void 0:n.unitOfMeasurement)?Math.floor((null==n?void 0:n.value)/100)/10*this.config.energy_flow_diagramm_lines_factor:Math.floor(10*(null==n?void 0:n.value))/10*this.config.energy_flow_diagramm_lines_factor,s<=.1&&0!==s&&(s=.1),r.style.strokeWidth=s+"px"}}))}redraw(t){this.hass&&this.config&&"resize"===t.type&&(this.oldWidth=at.changeStylesDependingOnWidth(this,this.solarCardElements,this.clientWidth,this.oldWidth))}_showWarning(t){return U` <hui-warning>${t}</hui-warning> `}_showError(){return console.log(this.error),U`
       <hui-warning
         ><div>
           ERROR:<br />