myio-js-library 0.1.151 → 0.1.153

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,37 @@ 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);
 }
 
 /* Primary metric */
@@ -4818,6 +4867,19 @@ function normalizeParams(params) {
 function getIconSvg(deviceType) {
   return ICON_MAP[deviceType] || ICON_MAP.DEFAULT;
 }
+function formatPower(valueInWatts) {
+  if (valueInWatts === null || valueInWatts === void 0 || isNaN(valueInWatts)) {
+    return { num: "-", unit: "" };
+  }
+  const val = Number(valueInWatts);
+  if (val >= 1e3) {
+    const kw = Math.ceil(val / 1e3 * 100) / 100;
+    return { num: kw.toFixed(2), unit: "kW" };
+  } else {
+    const w = Math.ceil(val);
+    return { num: w.toString(), unit: "W" };
+  }
+}
 function formatValueByDomain(value, domain) {
   if (domain === "water") {
     return formatWaterVolumeM3(value);
@@ -4856,22 +4918,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");
@@ -5003,10 +5086,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";
@@ -5071,7 +5153,13 @@ function paint(root, state) {
   const powerVal = root.querySelector(".myio-ho-card__footer .metric:nth-child(2) .val");
   if (powerVal) {
     const instantPower = entityObject.instantaneousPower ?? entityObject.consumption_power ?? null;
-    powerVal.textContent = instantPower !== null ? `${Number(instantPower).toFixed(2)} kW` : "-";
+    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) {

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,37 @@ 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);
 }
 
 /* Primary metric */
@@ -4710,6 +4759,19 @@ function normalizeParams(params) {
 function getIconSvg(deviceType) {
   return ICON_MAP[deviceType] || ICON_MAP.DEFAULT;
 }
+function formatPower(valueInWatts) {
+  if (valueInWatts === null || valueInWatts === void 0 || isNaN(valueInWatts)) {
+    return { num: "-", unit: "" };
+  }
+  const val = Number(valueInWatts);
+  if (val >= 1e3) {
+    const kw = Math.ceil(val / 1e3 * 100) / 100;
+    return { num: kw.toFixed(2), unit: "kW" };
+  } else {
+    const w = Math.ceil(val);
+    return { num: w.toString(), unit: "W" };
+  }
+}
 function formatValueByDomain(value, domain) {
   if (domain === "water") {
     return formatWaterVolumeM3(value);
@@ -4748,22 +4810,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");
@@ -4895,10 +4978,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";
@@ -4963,7 +5045,13 @@ function paint(root, state) {
   const powerVal = root.querySelector(".myio-ho-card__footer .metric:nth-child(2) .val");
   if (powerVal) {
     const instantPower = entityObject.instantaneousPower ?? entityObject.consumption_power ?? null;
-    powerVal.textContent = instantPower !== null ? `${Number(instantPower).toFixed(2)} kW` : "-";
+    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) {