remove images

src/css/styles.css

@@ -102,23 +102,29 @@ header h1 {
 
 .info-box.charge {
   overflow: hidden;
-  padding-top: 0 !important;
-  justify-content: space-around;
+  justify-content: space-evenly;
   max-height: 0;
   opacity: 0;
-  transition: max-height 0.5s ease-in-out, opacity 0.5s ease;
+  transition: all 0.5s ease-in-out;
 }
 
 .info-box.charge.active {
   max-height: 100px; /* Adjust this to be more than the expected height of the content */
   opacity: 1;
+  padding-top: 0.5rem;
 }
 
-.info-box .item-secondary {
+.info-box.charge .item {
   display: flex;
-  align-items: flex-start;
-  flex-wrap: nowrap;
+  align-items: center;
+  flex-wrap: wrap;
   flex-direction: column;
+  gap: initial;
+  width: max-content;
+}
+
+.info-box.charge .item-name {
+  color: var(--secondary-text-color);
 }
 
 .fuel-wrapper {

src/declarations.d.ts

@@ -1,5 +1,2 @@
 // declaration.d.ts
 declare module '*.css';
-declare module '*.svg';
-declare module '*.png';
-declare module '*.gif';

src/vehicle-info-card.ts

@@ -38,8 +38,9 @@ import { tapFeedback } from './utils/tap-action.js';
 import styles from './css/styles.css';
 import './components/map-card.js';
 import './components/header-slide.js';
-import amgWhite from './images/amg_bg_white.png';
-import amgBlack from './images/amg_bg_black.png';
+
+import { amgBlack } from './utils/imgconst';
+import { amgWhite } from './utils/imgconst';
 
 declare global {
   interface Window {
@@ -124,11 +125,11 @@ export class VehicleCard extends LitElement {
   private lockAttributesVisible = false;
   private chargingInfoVisible = false;
 
-  get isCharging() {
-    return this.getEntityAttribute(this.sensorDevices.rangeElectric?.entity_id, 'chargingactive');
-  }
+  // get isCharging() {
+  //   return this.getEntityAttribute(this.sensorDevices.rangeElectric?.entity_id, 'chargingactive');
+  // }
 
-  // private isCharging = true;
+  private isCharging = true;
 
   protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
@@ -386,14 +387,16 @@ export class VehicleCard extends LitElement {
 
     return html`
       <div class=${chargingClass}>
-        ${chargingData.map(({ name, state, icon, unit }) => {
+        ${chargingDataSimulated.map(({ name, state, icon, unit }) => {
           return html`
-            <div class="item">
-              <ha-icon .icon=${icon}></ha-icon>
-              <div class="item-secondary">
-                <span>${name}</span>
+            <div class="item charge">
+              <div>
+                <ha-icon .icon=${icon}></ha-icon>
                 <span>${state} ${unit}</span>
               </div>
+              <div class="item-name">
+                <span>${name}</span>
+              </div>
             </div>
           `;
         })}