myio-js-library 0.1.152 → 0.1.154

package/dist/index.cjs

@@ -3950,14 +3950,30 @@ var CSS_STRING = `
   --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;
@@ -4012,15 +4028,25 @@ var CSS_STRING = `
   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 */
@@ -4055,21 +4081,10 @@ var CSS_STRING = `
 
 /* 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 {
@@ -4441,6 +4456,11 @@ var CSS_STRING = `
   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);
@@ -4452,8 +4472,41 @@ var CSS_STRING = `
 }
 
 .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 */
@@ -4554,7 +4607,11 @@ var CSS_STRING = `
   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 {
@@ -4869,22 +4926,43 @@ function getStatusInfo(deviceStatus, i18n) {
 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");
@@ -5002,10 +5080,9 @@ function buildDOM(state) {
   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;
@@ -5016,10 +5093,9 @@ function buildDOM(state) {
   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";
@@ -5087,6 +5163,11 @@ function paint(root, state) {
     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;

package/dist/index.js

@@ -3842,14 +3842,30 @@ var CSS_STRING = `
   --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;
@@ -3904,15 +3920,25 @@ var CSS_STRING = `
   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 */
@@ -3947,21 +3973,10 @@ var CSS_STRING = `
 
 /* 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 {
@@ -4333,6 +4348,11 @@ var CSS_STRING = `
   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);
@@ -4344,8 +4364,41 @@ var CSS_STRING = `
 }
 
 .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 */
@@ -4446,7 +4499,11 @@ var CSS_STRING = `
   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 {
@@ -4761,22 +4818,43 @@ function getStatusInfo(deviceStatus, i18n) {
 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");
@@ -4894,10 +4972,9 @@ function buildDOM(state) {
   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;
@@ -4908,10 +4985,9 @@ function buildDOM(state) {
   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";
@@ -4979,6 +5055,11 @@ function paint(root, state) {
     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;