myio-js-library 0.1.152 → 0.1.154

package/dist/myio-js-library.umd.js

@@ -3848,14 +3848,30 @@
   --myio-card-bg: #fff;
   --myio-card-border: #e9eef5;
 
-  --myio-chip-ok-bg: #e8f7ff;
-  --myio-chip-ok-fg: #007ecc;
-  --myio-chip-alert-bg: #fff4e5;
-  --myio-chip-alert-fg: #b96b00;
-  --myio-chip-failure-bg: #ffeaea;
-  --myio-chip-failure-fg: #b71c1c;
+  /* Status colors - Normal/Power On (blue) */
+  --myio-chip-ok-bg: #dbeafe;
+  --myio-chip-ok-fg: #1d4ed8;
+  --myio-border-ok: rgba(59, 130, 246, 0.4);
+
+  /* Status colors - Standby (green) */
+  --myio-chip-standby-bg: #dcfce7;
+  --myio-chip-standby-fg: #15803d;
+  --myio-border-standby: rgba(34, 197, 94, 0.4);
+
+  /* Status colors - Alert/Warning (yellow) */
+  --myio-chip-alert-bg: #fef3c7;
+  --myio-chip-alert-fg: #b45309;
+  --myio-border-alert: rgba(245, 158, 11, 0.5);
+
+  /* Status colors - Failure (red) */
+  --myio-chip-failure-bg: #fee2e2;
+  --myio-chip-failure-fg: #b91c1c;
+  --myio-border-failure: rgba(239, 68, 68, 0.5);
+
+  /* Status colors - Offline (gray) */
   --myio-chip-offline-bg: #f1f5f9;
   --myio-chip-offline-fg: #64748b;
+  --myio-border-offline: rgba(100, 116, 139, 0.4);
 
   --myio-text-1: #0f172a;
   --myio-text-2: #4b5563;
@@ -3910,15 +3926,25 @@
   box-shadow: 0 16px 48px rgba(0, 224, 158, 0.3), 0 8px 16px rgba(0, 224, 158, 0.2);
 }
 
-/* Alert and failure states */
+/* Card border states based on device status */
+.myio-ho-card.is-ok {
+  border-color: var(--myio-border-ok);
+  box-shadow: 0 0 0 2px var(--myio-border-ok), var(--myio-card-shadow);
+}
+
+.myio-ho-card.is-standby {
+  border-color: var(--myio-border-standby);
+  box-shadow: 0 0 0 2px var(--myio-border-standby), var(--myio-card-shadow);
+}
+
 .myio-ho-card.is-alert {
-  border-color: var(--myio-badge-border);
-  box-shadow: 0 0 0 1px var(--myio-badge-border), var(--myio-card-shadow);
+  border-color: var(--myio-border-alert);
+  box-shadow: 0 0 0 2px var(--myio-border-alert), var(--myio-card-shadow);
 }
 
 .myio-ho-card.is-failure {
-  border-color: var(--myio-badge-border-failure);
-  box-shadow: 0 0 0 1px var(--myio-badge-border-failure), var(--myio-card-shadow);
+  border-color: var(--myio-border-failure);
+  box-shadow: 0 0 0 2px var(--myio-border-failure), var(--myio-card-shadow);
 }
 
 /* Header section */
@@ -3953,21 +3979,10 @@
 
 /* Adicione estas duas novas regras ao seu CSS_STRING */
 
-/* Estado Offline - Apenas borda do card */
+/* Estado Offline - borda cinza */
 .myio-ho-card.is-offline {
-  border-color: rgba(100, 116, 139, 0.4);
-  box-shadow: 0 0 0 1px rgba(100, 116, 139, 0.4), var(--myio-card-shadow);
-}
-
-/* Regras que j\xE1 existem (mantenha-as) */
-.myio-ho-card.is-alert {
-  border-color: var(--myio-badge-border);
-  box-shadow: 0 0 0 1px var(--myio-badge-border), var(--myio-card-shadow);
-}
-
-.myio-ho-card.is-failure {
-  border-color: var(--myio-badge-border-failure);
-  box-shadow: 0 0 0 1px var(--myio-badge-border-failure), var(--myio-card-shadow);
+  border-color: var(--myio-border-offline);
+  box-shadow: 0 0 0 2px var(--myio-border-offline), var(--myio-card-shadow);
 }
 
 .myio-ho-card__name {
@@ -4339,6 +4354,11 @@
   color: var(--myio-chip-ok-fg);
 }
 
+.chip--standby {
+  background: var(--myio-chip-standby-bg);
+  color: var(--myio-chip-standby-fg);
+}
+
 .chip--alert {
   background: var(--myio-chip-alert-bg);
   color: var(--myio-chip-alert-fg);
@@ -4350,8 +4370,41 @@
 }
 
 .chip--offline {
-  background: #e37171 !important;
-  color: #ffffff !important;
+  background: var(--myio-chip-offline-bg);
+  color: var(--myio-chip-offline-fg);
+}
+
+/* Status indicator dot for power metric */
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  background: var(--myio-chip-offline-fg);
+}
+
+.status-dot.dot--ok {
+  background: var(--myio-chip-ok-fg);
+}
+
+.status-dot.dot--standby {
+  background: var(--myio-chip-standby-fg);
+}
+
+.status-dot.dot--alert {
+  background: var(--myio-chip-alert-fg);
+}
+
+.status-dot.dot--failure {
+  background: var(--myio-chip-failure-fg);
+}
+
+.status-dot.dot--offline {
+  background: var(--myio-chip-offline-fg);
+}
+
+.status-dot.dot--neutral {
+  background: var(--myio-muted);
 }
 
 /* Primary metric */
@@ -4452,7 +4505,11 @@
   flex-direction: column;
   align-items: center;
   text-align: center;
-  gap: 4px;
+  gap: 2px;
+}
+
+.myio-ho-card__footer .metric .status-dot {
+  margin-bottom: 2px;
 }
 
 .myio-ho-card__footer .metric .ico {
@@ -4617,12 +4674,6 @@
      viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false">
   <rect x="5" y="4" width="14" height="16" rx="2"/>
   <path d="M7 12c1.5 1 3 .9 5-.3s3.5-1.3 5 .3v4H7v-4Z" fill="#fff" fill-opacity=".25"/>
-</svg>`,
-    // 🟦 Online chip (dot)
-    dot: `
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
-     viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false">
-  <circle cx="12" cy="12" r="5"/>
 </svg>`,
     // ⋮ Kebab (for actions menu)
     kebab: `
@@ -4759,22 +4810,43 @@
   function getCardStateClass(deviceStatus) {
     switch (deviceStatus) {
       case DeviceStatusType.POWER_ON:
-        return "";
-      case DeviceStatusType.NO_INFO:
-        return "is-offline";
-      case DeviceStatusType.WARNING:
+        return "is-ok";
+      // Blue border
       case DeviceStatusType.STANDBY:
+        return "is-standby";
+      // Green border
+      case DeviceStatusType.WARNING:
       case DeviceStatusType.MAINTENANCE:
         return "is-alert";
+      // Yellow border
       case DeviceStatusType.FAILURE:
       case DeviceStatusType.POWER_OFF:
         return "is-failure";
+      // Red border
+      case DeviceStatusType.NO_INFO:
       case DeviceStatusType.NOT_INSTALLED:
         return "is-offline";
+      // Gray border
       default:
         return "";
     }
   }
+  function getStatusDotClass(deviceStatus) {
+    switch (deviceStatus) {
+      case DeviceStatusType.POWER_ON:
+        return "dot--ok";
+      case DeviceStatusType.STANDBY:
+        return "dot--standby";
+      case DeviceStatusType.WARNING:
+      case DeviceStatusType.MAINTENANCE:
+        return "dot--alert";
+      case DeviceStatusType.FAILURE:
+      case DeviceStatusType.POWER_OFF:
+        return "dot--failure";
+      default:
+        return "dot--offline";
+    }
+  }
   function buildDOM(state) {
     const { entityObject, i18n, enableSelection, enableDragDrop } = state;
     const root = document.createElement("div");
@@ -4892,10 +4964,9 @@
     footer.className = "myio-ho-card__footer";
     const opTimeMetric = document.createElement("div");
     opTimeMetric.className = "metric";
-    const opTimeIcon = document.createElement("i");
-    opTimeIcon.className = "ico ico-clock";
-    opTimeIcon.innerHTML = Icons.dot;
-    opTimeMetric.appendChild(opTimeIcon);
+    const opTimeDot = document.createElement("span");
+    opTimeDot.className = "status-dot dot--neutral";
+    opTimeMetric.appendChild(opTimeDot);
     const opTimeLabel = document.createElement("div");
     opTimeLabel.className = "label";
     opTimeLabel.textContent = i18n.operation_time;
@@ -4906,10 +4977,9 @@
     footer.appendChild(opTimeMetric);
     const powerMetric = document.createElement("div");
     powerMetric.className = "metric";
-    const powerIcon = document.createElement("i");
-    powerIcon.className = "ico ico-power";
-    powerIcon.innerHTML = Icons.dot;
-    powerMetric.appendChild(powerIcon);
+    const statusDot = document.createElement("span");
+    statusDot.className = "status-dot";
+    powerMetric.appendChild(statusDot);
     const powerLabel = document.createElement("div");
     powerLabel.className = "label";
     powerLabel.textContent = i18n.instantaneous_power || "Pot\xEAncia";
@@ -4977,6 +5047,11 @@
       const powerFormatted = formatPower(instantPower);
       powerVal.textContent = instantPower !== null ? `${powerFormatted.num} ${powerFormatted.unit}` : "-";
     }
+    const statusDot = root.querySelector(".myio-ho-card__footer .metric:nth-child(2) .status-dot");
+    if (statusDot) {
+      const dotClass = getStatusDotClass(entityObject.deviceStatus);
+      statusDot.className = `status-dot ${dotClass}`;
+    }
   }
   function bindEvents(root, state, callbacks) {
     const { entityObject } = state;