myio-js-library 0.1.181 → 0.1.182

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

@@ -5910,185 +5910,253 @@
     };
   }
 
-  // src/thingsboard/main-dashboard-shopping/v-4.0.0/card/head-office/card-head-office.js
-  var LABEL_CHAR_LIMIT = 18;
-  var DEFAUL_DELAY_TIME_CONNECTION_IN_MINS = 1440;
-  var CSS_TAG = "head-office-card-v1";
-  function ensureCss() {
-    if (!document.querySelector(`style[data-myio-css="${CSS_TAG}"]`)) {
-      const style = document.createElement("style");
-      style.setAttribute("data-myio-css", CSS_TAG);
-      style.textContent = CSS_STRING;
-      document.head.appendChild(style);
-    }
-  }
-  function normalizeParams(params) {
-    if (!params || !params.entityObject) {
-      throw new Error("renderCardCompenteHeadOffice: entityObject is required");
-    }
-    const LogHelper2 = createLogHelper(params.debugActive ?? false);
-    const entityObject = params.entityObject;
-    if (!entityObject.entityId) {
-      LogHelper2.warn("[CardHeadOffice] entityId is missing, generating temporary ID");
-      entityObject.entityId = `temp-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-    }
-    if (!params.delayTimeConnectionInMins) {
-      LogHelper2.warn(
-        `[CardHeadOffice] delayTimeConnectionInMins is missing, defaulting to ${DEFAUL_DELAY_TIME_CONNECTION_IN_MINS} mins`
-      );
-    }
-    return {
-      entityObject,
-      i18n: { ...DEFAULT_I18N, ...params.i18n || {} },
-      enableSelection: Boolean(params.enableSelection),
-      enableDragDrop: Boolean(params.enableDragDrop),
-      useNewComponents: Boolean(params.useNewComponents),
-      // RFC-0091: Configurable delay time for connection status check (default 15 minutes)
-      delayTimeConnectionInMins: params.delayTimeConnectionInMins ?? DEFAUL_DELAY_TIME_CONNECTION_IN_MINS,
-      // Debug options
-      debugActive: params.debugActive ?? false,
-      activeTooltipDebug: params.activeTooltipDebug ?? false,
-      // LogHelper instance for this card
-      LogHelper: LogHelper2,
-      callbacks: {
-        handleActionDashboard: params.handleActionDashboard,
-        handleActionReport: params.handleActionReport,
-        handleActionSettings: params.handleActionSettings,
-        handleSelect: params.handleSelect,
-        handInfo: params.handInfo,
-        handleClickCard: params.handleClickCard
-      }
-    };
-  }
-  function getIconSvg(deviceType, domain) {
-    if (domain === "water") {
-      return Icons.waterDrop;
-    }
-    if (domain === "temperature") {
-      return Icons.thermometer;
-    }
-    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);
-    }
-    if (domain === "temperature") {
-      return formatTemperature(value, 0);
-    }
-    return formatEnergy(value);
-  }
-  function formatRelativeTime2(timestamp) {
-    if (!timestamp || isNaN(timestamp)) return "\u2014";
-    const date = new Date(timestamp);
-    const hours = String(date.getHours()).padStart(2, "0");
-    const minutes = String(date.getMinutes()).padStart(2, "0");
-    const day = String(date.getDate()).padStart(2, "0");
-    const month = String(date.getMonth() + 1).padStart(2, "0");
-    const year = date.getFullYear();
-    return `${hours}:${minutes} ${day}/${month}/${year}`;
-  }
-  function calculateConsumptionPercentage(target, consumption) {
-    const numericTarget = Number(target);
-    const numericConsumption = Number(consumption);
-    if (isNaN(numericTarget) || isNaN(numericConsumption) || numericTarget <= 0) {
-      return 0;
-    }
-    const percentage = numericConsumption / numericTarget * 100;
-    return percentage;
+  // src/utils/TempRangeTooltip.ts
+  var TOOLTIP_STYLES = `
+.temp-range-tooltip {
+  position: fixed;
+  z-index: 99999;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.2s ease, transform 0.2s ease;
+  transform: translateY(5px);
+}
+
+.temp-range-tooltip.visible {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateY(0);
+}
+
+.temp-range-tooltip__content {
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15), 0 2px 10px rgba(0, 0, 0, 0.08);
+  min-width: 280px;
+  max-width: 320px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 12px;
+  color: #1e293b;
+  overflow: hidden;
+}
+
+.temp-range-tooltip__header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  background: linear-gradient(90deg, #fff7ed 0%, #fed7aa 100%);
+  border-bottom: 1px solid #fdba74;
+}
+
+.temp-range-tooltip__icon {
+  font-size: 18px;
+}
+
+.temp-range-tooltip__title {
+  font-weight: 700;
+  font-size: 13px;
+  color: #c2410c;
+}
+
+.temp-range-tooltip__body {
+  padding: 16px;
+}
+
+.temp-range-tooltip__value-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.temp-range-tooltip__current {
+  font-size: 28px;
+  font-weight: 700;
+  color: #1e293b;
+}
+
+.temp-range-tooltip__current sup {
+  font-size: 14px;
+  color: #64748b;
+}
+
+.temp-range-tooltip__deviation {
+  text-align: right;
+}
+
+.temp-range-tooltip__deviation-value {
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.temp-range-tooltip__deviation-value.cold {
+  color: #2563eb;
+}
+
+.temp-range-tooltip__deviation-value.ok {
+  color: #16a34a;
+}
+
+.temp-range-tooltip__deviation-value.hot {
+  color: #dc2626;
+}
+
+.temp-range-tooltip__deviation-label {
+  font-size: 10px;
+  color: #64748b;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.temp-range-tooltip__ruler {
+  position: relative;
+  height: 32px;
+  margin: 12px 0;
+  border-radius: 8px;
+  overflow: visible;
+}
+
+.temp-range-tooltip__ruler-track {
+  position: absolute;
+  top: 12px;
+  left: 0;
+  right: 0;
+  height: 8px;
+  background: linear-gradient(90deg, #dbeafe 0%, #dcfce7 50%, #fee2e2 100%);
+  border-radius: 4px;
+  border: 1px solid #e2e8f0;
+}
+
+.temp-range-tooltip__ruler-range {
+  position: absolute;
+  top: 12px;
+  height: 8px;
+  background: #22c55e;
+  border-radius: 4px;
+  opacity: 0.6;
+}
+
+.temp-range-tooltip__ruler-marker {
+  position: absolute;
+  top: 4px;
+  width: 4px;
+  height: 24px;
+  background: #1e293b;
+  border-radius: 2px;
+  transform: translateX(-50%);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.temp-range-tooltip__ruler-marker::after {
+  content: '';
+  position: absolute;
+  top: -4px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 12px;
+  height: 12px;
+  background: #1e293b;
+  border-radius: 50%;
+  border: 2px solid #fff;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.temp-range-tooltip__ruler-labels {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 8px;
+  font-size: 10px;
+  color: #64748b;
+}
+
+.temp-range-tooltip__ruler-min,
+.temp-range-tooltip__ruler-max {
+  font-weight: 600;
+}
+
+.temp-range-tooltip__range-info {
+  display: flex;
+  justify-content: space-between;
+  padding: 10px 12px;
+  background: #f8fafc;
+  border-radius: 8px;
+  margin-top: 12px;
+}
+
+.temp-range-tooltip__range-item {
+  text-align: center;
+}
+
+.temp-range-tooltip__range-label {
+  font-size: 10px;
+  color: #64748b;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+  margin-bottom: 2px;
+}
+
+.temp-range-tooltip__range-value {
+  font-size: 14px;
+  font-weight: 600;
+  color: #334155;
+}
+
+.temp-range-tooltip__status {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  margin-top: 12px;
+  padding: 8px 12px;
+  border-radius: 6px;
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.temp-range-tooltip__status.cold {
+  background: #dbeafe;
+  color: #1d4ed8;
+  border: 1px solid #93c5fd;
+}
+
+.temp-range-tooltip__status.ok {
+  background: #dcfce7;
+  color: #15803d;
+  border: 1px solid #86efac;
+}
+
+.temp-range-tooltip__status.hot {
+  background: #fee2e2;
+  color: #b91c1c;
+  border: 1px solid #fca5a5;
+}
+
+.temp-range-tooltip__status.unknown {
+  background: #f3f4f6;
+  color: #6b7280;
+  border: 1px solid #d1d5db;
+}
+`;
+  function injectStyles() {
+    if (typeof document === "undefined") return;
+    const styleId = "myio-temp-range-tooltip-styles";
+    if (document.getElementById(styleId)) return;
+    const style = document.createElement("style");
+    style.id = styleId;
+    style.textContent = TOOLTIP_STYLES;
+    document.head.appendChild(style);
   }
-  function getStatusInfo(deviceStatus, i18n, domain) {
-    switch (deviceStatus) {
-      // --- Novos Status de Temperatura ---
-      case "normal":
-        return { chipClass: "chip--ok", label: "Normal" };
-      case "cold":
-        return { chipClass: "chip--standby", label: "Frio" };
-      case "hot":
-        return { chipClass: "chip--alert", label: "Quente" };
-      // --- Status Existentes (aligned with getCardStateClass) ---
-      case DeviceStatusType.POWER_ON:
-        if (domain === "water") {
-          return { chipClass: "chip--power-on", label: i18n.in_operation_water };
-        }
-        return { chipClass: "chip--power-on", label: i18n.in_operation };
-      case DeviceStatusType.STANDBY:
-        return { chipClass: "chip--standby", label: i18n.standby };
-      case DeviceStatusType.WARNING:
-        return { chipClass: "chip--warning", label: i18n.alert };
-      case DeviceStatusType.MAINTENANCE:
-        return { chipClass: "chip--maintenance", label: i18n.maintenance };
-      case DeviceStatusType.FAILURE:
-        return { chipClass: "chip--failure", label: i18n.failure };
-      case DeviceStatusType.POWER_OFF:
-        return { chipClass: "chip--power-off", label: i18n.power_off || i18n.failure };
-      case DeviceStatusType.OFFLINE:
-        return { chipClass: "chip--offline", label: i18n.offline };
-      case DeviceStatusType.NO_INFO:
-        return { chipClass: "chip--no-info", label: i18n.no_info || i18n.offline };
-      case DeviceStatusType.NOT_INSTALLED:
-        return { chipClass: "chip--not-installed", label: i18n.not_installed };
-      default:
-        return { chipClass: "chip--offline", label: i18n.offline };
-    }
+  function extractTemperature(entityData) {
+    return Number(entityData.val ?? entityData.currentTemperature ?? entityData.temperature) || 0;
   }
-  function getCardStateClass(deviceStatus) {
-    switch (deviceStatus) {
-      case DeviceStatusType.POWER_ON:
-        return "is-power-on";
-      // Blue border
-      case DeviceStatusType.STANDBY:
-        return "is-standby";
-      // Green border
-      case DeviceStatusType.WARNING:
-        return "is-warning";
-      // Yellow border
-      case DeviceStatusType.MAINTENANCE:
-        return "is-maintenance";
-      // Yellow border
-      case DeviceStatusType.FAILURE:
-        return "is-failure";
-      // Dark Red border
-      case DeviceStatusType.POWER_OFF:
-        return "is-power-off";
-      // Light Red border
-      case DeviceStatusType.OFFLINE:
-        return "is-offline";
-      // Dark Gray border
-      case DeviceStatusType.NO_INFO:
-        return "is-no-info";
-      // Dark Orange border
-      case DeviceStatusType.NOT_INSTALLED:
-        return "is-not-installed";
-      // Purple border
-      default:
-        return "";
-    }
+  function extractRange(entityData) {
+    const tempMin = entityData.temperatureMin ?? entityData.minTemperature ?? null;
+    const tempMax = entityData.temperatureMax ?? entityData.maxTemperature ?? null;
+    return { tempMin, tempMax };
   }
-  function getTempRangeClass(entityObject) {
-    if (entityObject.domain !== "temperature") return "";
-    const currentTemp = Number(entityObject.val ?? entityObject.currentTemperature ?? entityObject.temperature) || 0;
-    const tempMin = entityObject.temperatureMin ?? entityObject.minTemperature;
-    const tempMax = entityObject.temperatureMax ?? entityObject.maxTemperature;
-    if (tempMin === void 0 || tempMax === void 0 || tempMin === null || tempMax === null) {
-      return "";
-    }
-    if (currentTemp > tempMax) return "is-temp-hot";
-    if (currentTemp < tempMin) return "is-temp-cold";
-    return "is-temp-ok";
+  function extractLabel(entityData) {
+    return entityData.labelOrName || entityData.name || entityData.label || "Sensor";
   }
   var TempRangeTooltip = {
     containerId: "myio-temp-range-tooltip",
@@ -6096,6 +6164,7 @@
      * Create or get the tooltip container
      */
     getContainer() {
+      injectStyles();
       let container = document.getElementById(this.containerId);
       if (!container) {
         container = document.createElement("div");
@@ -6143,20 +6212,20 @@
     },
     /**
      * Show tooltip for a temperature card
-     * @param {HTMLElement} triggerElement - The card element
-     * @param {Object} entityObject - Entity data
-     * @param {MouseEvent} event - Mouse event for cursor position
+     * @param triggerElement - The card element
+     * @param entityData - Entity data with temperature info
+     * @param event - Mouse event for cursor position
      */
-    show(triggerElement, entityObject, event) {
+    show(triggerElement, entityData, event) {
       const container = this.getContainer();
-      const currentTemp = Number(entityObject.val ?? entityObject.currentTemperature ?? entityObject.temperature) || 0;
-      const tempMin = entityObject.temperatureMin ?? entityObject.minTemperature;
-      const tempMax = entityObject.temperatureMax ?? entityObject.maxTemperature;
+      const currentTemp = extractTemperature(entityData);
+      const { tempMin, tempMax } = extractRange(entityData);
+      const label = extractLabel(entityData);
       const hasRange = tempMin != null && tempMax != null;
-      const { status, deviation, deviationPercent } = this.calculateStatus(currentTemp, tempMin, tempMax);
+      const { status, deviationPercent } = this.calculateStatus(currentTemp, tempMin, tempMax);
       const markerPos = this.calculateMarkerPosition(currentTemp, tempMin, tempMax);
       let rangeLeft = 0, rangeWidth = 100;
-      if (hasRange) {
+      if (hasRange && tempMin != null && tempMax != null) {
         const rangeSize = tempMax - tempMin;
         const extension = rangeSize * 0.3;
         const visibleMin = tempMin - extension;
@@ -6165,23 +6234,23 @@
         rangeLeft = (tempMin - visibleMin) / visibleRange * 100;
         rangeWidth = rangeSize / visibleRange * 100;
       }
-      let deviationClass = status;
-      if (status === "cold") {
-        `${Math.abs(deviation).toFixed(1)}\xB0C abaixo`;
-      } else if (status === "hot") {
-        `+${deviation.toFixed(1)}\xB0C acima`;
-      } else ;
       const statusLabels = {
         cold: "\u2744\uFE0F Abaixo da Faixa Ideal",
         ok: "\u2714\uFE0F Dentro da Faixa Ideal",
         hot: "\u{1F525} Acima da Faixa Ideal",
         unknown: "\u2753 Faixa N\xE3o Configurada"
       };
+      const statusColors = {
+        cold: "#2563eb",
+        ok: "#16a34a",
+        hot: "#dc2626",
+        unknown: "#64748b"
+      };
       container.innerHTML = `
       <div class="temp-range-tooltip__content">
         <div class="temp-range-tooltip__header">
           <span class="temp-range-tooltip__icon">\u{1F321}\uFE0F</span>
-          <span class="temp-range-tooltip__title">${entityObject.labelOrName || entityObject.name || "Sensor"}</span>
+          <span class="temp-range-tooltip__title">${label}</span>
         </div>
         <div class="temp-range-tooltip__body">
           <div class="temp-range-tooltip__value-row">
@@ -6189,79 +6258,392 @@
               ${currentTemp.toFixed(1)}<sup>\xB0C</sup>
             </div>
             <div class="temp-range-tooltip__deviation">
-              <div class="temp-range-tooltip__deviation-value ${deviationClass}">
+              <div class="temp-range-tooltip__deviation-value ${status}">
                 ${status === "ok" ? "\u2713" : status === "cold" ? "\u2193" : status === "hot" ? "\u2191" : "?"} ${Math.abs(deviationPercent || 0).toFixed(0)}%
               </div>
               <div class="temp-range-tooltip__deviation-label">Desvio</div>
             </div>
           </div>
 
-          ${hasRange ? `
-          <div class="temp-range-tooltip__ruler">
-            <div class="temp-range-tooltip__ruler-track"></div>
-            <div class="temp-range-tooltip__ruler-range" style="left: ${rangeLeft}%; width: ${rangeWidth}%;"></div>
-            <div class="temp-range-tooltip__ruler-marker" style="left: ${markerPos}%;"></div>
-          </div>
-          <div class="temp-range-tooltip__ruler-labels">
-            <span class="temp-range-tooltip__ruler-min">${tempMin}\xB0C</span>
-            <span style="color: #22c55e; font-weight: 600;">Faixa Ideal</span>
-            <span class="temp-range-tooltip__ruler-max">${tempMax}\xB0C</span>
-          </div>
-          ` : ""}
+          ${hasRange ? `
+          <div class="temp-range-tooltip__ruler">
+            <div class="temp-range-tooltip__ruler-track"></div>
+            <div class="temp-range-tooltip__ruler-range" style="left: ${rangeLeft}%; width: ${rangeWidth}%;"></div>
+            <div class="temp-range-tooltip__ruler-marker" style="left: ${markerPos}%;"></div>
+          </div>
+          <div class="temp-range-tooltip__ruler-labels">
+            <span class="temp-range-tooltip__ruler-min">${tempMin}\xB0C</span>
+            <span style="color: #22c55e; font-weight: 600;">Faixa Ideal</span>
+            <span class="temp-range-tooltip__ruler-max">${tempMax}\xB0C</span>
+          </div>
+          ` : ""}
+
+          <div class="temp-range-tooltip__range-info">
+            <div class="temp-range-tooltip__range-item">
+              <div class="temp-range-tooltip__range-label">M\xEDnimo</div>
+              <div class="temp-range-tooltip__range-value">${hasRange ? tempMin + "\xB0C" : "--"}</div>
+            </div>
+            <div class="temp-range-tooltip__range-item">
+              <div class="temp-range-tooltip__range-label">Atual</div>
+              <div class="temp-range-tooltip__range-value" style="color: ${statusColors[status]}">${currentTemp.toFixed(1)}\xB0C</div>
+            </div>
+            <div class="temp-range-tooltip__range-item">
+              <div class="temp-range-tooltip__range-label">M\xE1ximo</div>
+              <div class="temp-range-tooltip__range-value">${hasRange ? tempMax + "\xB0C" : "--"}</div>
+            </div>
+          </div>
+
+          <div class="temp-range-tooltip__status ${status}">
+            ${statusLabels[status]}
+          </div>
+        </div>
+      </div>
+    `;
+      let left, top;
+      if (event && event.clientX && event.clientY) {
+        left = event.clientX + 15;
+        top = event.clientY + 15;
+      } else {
+        const rect = triggerElement.getBoundingClientRect();
+        left = rect.left + rect.width / 2 - 150;
+        top = rect.bottom + 8;
+      }
+      const tooltipWidth = 300;
+      const tooltipHeight = 350;
+      if (left + tooltipWidth > window.innerWidth - 10) {
+        left = (event?.clientX || left) - tooltipWidth - 15;
+      }
+      if (left < 10) left = 10;
+      if (top + tooltipHeight > window.innerHeight - 10) {
+        top = (event?.clientY || top) - tooltipHeight - 15;
+      }
+      if (top < 10) top = 10;
+      container.style.left = left + "px";
+      container.style.top = top + "px";
+      container.classList.add("visible");
+    },
+    /**
+     * Hide tooltip
+     */
+    hide() {
+      const container = document.getElementById(this.containerId);
+      if (container) {
+        container.classList.remove("visible");
+      }
+    },
+    /**
+     * Attach tooltip to an element
+     * Returns cleanup function
+     */
+    attach(element, entityData) {
+      const showHandler = (e) => this.show(element, entityData, e);
+      const hideHandler = () => this.hide();
+      element.style.cursor = "help";
+      element.addEventListener("mouseenter", showHandler);
+      element.addEventListener("mouseleave", hideHandler);
+      return () => {
+        element.removeEventListener("mouseenter", showHandler);
+        element.removeEventListener("mouseleave", hideHandler);
+        element.style.cursor = "";
+        this.hide();
+      };
+    }
+  };
+
+  // src/utils/EnergyRangeTooltip.ts
+  var ENERGY_RANGE_TOOLTIP_CSS = `
+/* ============================================
+   Energy Range Tooltip (for domain=energy)
+   Shows power ruler with current position and status ranges
+   ============================================ */
+.energy-range-tooltip {
+  position: fixed;
+  z-index: 99999;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.2s ease, transform 0.2s ease;
+  transform: translateY(5px);
+}
+
+.energy-range-tooltip.visible {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateY(0);
+}
+
+.energy-range-tooltip__content {
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15), 0 2px 10px rgba(0, 0, 0, 0.08);
+  min-width: 300px;
+  max-width: 360px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 12px;
+  color: #1e293b;
+  overflow: hidden;
+}
+
+.energy-range-tooltip__header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  background: linear-gradient(90deg, #ecfdf5 0%, #d1fae5 100%);
+  border-bottom: 1px solid #6ee7b7;
+}
+
+.energy-range-tooltip__icon {
+  font-size: 18px;
+}
+
+.energy-range-tooltip__title {
+  font-weight: 700;
+  font-size: 13px;
+  color: #047857;
+}
+
+.energy-range-tooltip__body {
+  padding: 16px;
+}
+
+/* Power value display */
+.energy-range-tooltip__value-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.energy-range-tooltip__current {
+  font-size: 28px;
+  font-weight: 700;
+  color: #1e293b;
+}
 
-          <div class="temp-range-tooltip__range-info">
-            <div class="temp-range-tooltip__range-item">
-              <div class="temp-range-tooltip__range-label">M\xEDnimo</div>
-              <div class="temp-range-tooltip__range-value">${hasRange ? tempMin + "\xB0C" : "--"}</div>
-            </div>
-            <div class="temp-range-tooltip__range-item">
-              <div class="temp-range-tooltip__range-label">Atual</div>
-              <div class="temp-range-tooltip__range-value" style="color: ${status === "ok" ? "#16a34a" : status === "cold" ? "#2563eb" : "#dc2626"}">${currentTemp.toFixed(1)}\xB0C</div>
-            </div>
-            <div class="temp-range-tooltip__range-item">
-              <div class="temp-range-tooltip__range-label">M\xE1ximo</div>
-              <div class="temp-range-tooltip__range-value">${hasRange ? tempMax + "\xB0C" : "--"}</div>
-            </div>
-          </div>
+.energy-range-tooltip__current sup {
+  font-size: 14px;
+  color: #64748b;
+}
 
-          <div class="temp-range-tooltip__status ${status}">
-            ${statusLabels[status]}
-          </div>
-        </div>
-      </div>
-    `;
-      let left, top;
-      if (event && event.clientX && event.clientY) {
-        left = event.clientX + 15;
-        top = event.clientY + 15;
-      } else {
-        const rect = triggerElement.getBoundingClientRect();
-        left = rect.left + rect.width / 2 - 150;
-        top = rect.bottom + 8;
-      }
-      const tooltipWidth = 300;
-      const tooltipHeight = 350;
-      if (left + tooltipWidth > window.innerWidth - 10) {
-        left = (event?.clientX || left) - tooltipWidth - 15;
-      }
-      if (left < 10) left = 10;
-      if (top + tooltipHeight > window.innerHeight - 10) {
-        top = (event?.clientY || top) - tooltipHeight - 15;
-      }
-      if (top < 10) top = 10;
-      container.style.left = left + "px";
-      container.style.top = top + "px";
-      container.classList.add("visible");
-    },
-    /**
-     * Hide tooltip
-     */
-    hide() {
-      const container = document.getElementById(this.containerId);
-      if (container) {
-        container.classList.remove("visible");
-      }
+.energy-range-tooltip__status-badge {
+  text-align: right;
+}
+
+.energy-range-tooltip__status-value {
+  font-size: 14px;
+  font-weight: 700;
+  padding: 4px 10px;
+  border-radius: 6px;
+}
+
+.energy-range-tooltip__status-value.standby {
+  background: #dbeafe;
+  color: #1d4ed8;
+}
+
+.energy-range-tooltip__status-value.normal {
+  background: #dcfce7;
+  color: #15803d;
+}
+
+.energy-range-tooltip__status-value.alert {
+  background: #fef3c7;
+  color: #b45309;
+}
+
+.energy-range-tooltip__status-value.failure {
+  background: #fee2e2;
+  color: #b91c1c;
+}
+
+.energy-range-tooltip__status-value.offline {
+  background: #f3f4f6;
+  color: #6b7280;
+}
+
+/* Power ruler/gauge */
+.energy-range-tooltip__ruler {
+  position: relative;
+  height: 40px;
+  margin: 12px 0;
+  border-radius: 8px;
+  overflow: visible;
+}
+
+.energy-range-tooltip__ruler-track {
+  position: absolute;
+  top: 16px;
+  left: 0;
+  right: 0;
+  height: 8px;
+  display: flex;
+  border-radius: 4px;
+  overflow: hidden;
+  border: 1px solid #e2e8f0;
+}
+
+.energy-range-tooltip__ruler-segment {
+  height: 100%;
+}
+
+.energy-range-tooltip__ruler-segment.standby {
+  background: #dbeafe;
+}
+
+.energy-range-tooltip__ruler-segment.normal {
+  background: #dcfce7;
+}
+
+.energy-range-tooltip__ruler-segment.alert {
+  background: #fef3c7;
+}
+
+.energy-range-tooltip__ruler-segment.failure {
+  background: #fee2e2;
+}
+
+.energy-range-tooltip__ruler-marker {
+  position: absolute;
+  top: 8px;
+  width: 4px;
+  height: 24px;
+  background: #1e293b;
+  border-radius: 2px;
+  transform: translateX(-50%);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.energy-range-tooltip__ruler-marker::after {
+  content: '';
+  position: absolute;
+  top: -4px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 12px;
+  height: 12px;
+  background: #1e293b;
+  border-radius: 50%;
+  border: 2px solid #fff;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+/* Range info grid */
+.energy-range-tooltip__ranges {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 8px;
+  margin-top: 16px;
+}
+
+.energy-range-tooltip__range-item {
+  text-align: center;
+  padding: 8px 4px;
+  border-radius: 6px;
+  background: #f8fafc;
+}
+
+.energy-range-tooltip__range-item.standby {
+  border-left: 3px solid #3b82f6;
+}
+
+.energy-range-tooltip__range-item.normal {
+  border-left: 3px solid #22c55e;
+}
+
+.energy-range-tooltip__range-item.alert {
+  border-left: 3px solid #f59e0b;
+}
+
+.energy-range-tooltip__range-item.failure {
+  border-left: 3px solid #ef4444;
+}
+
+.energy-range-tooltip__range-label {
+  font-size: 9px;
+  color: #64748b;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+  margin-bottom: 2px;
+}
+
+.energy-range-tooltip__range-value {
+  font-size: 11px;
+  font-weight: 600;
+  color: #334155;
+}
+
+/* Status info */
+.energy-range-tooltip__status-info {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  margin-top: 12px;
+  padding: 8px 12px;
+  border-radius: 6px;
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.energy-range-tooltip__status-info.standby {
+  background: #dbeafe;
+  color: #1d4ed8;
+  border: 1px solid #93c5fd;
+}
+
+.energy-range-tooltip__status-info.normal {
+  background: #dcfce7;
+  color: #15803d;
+  border: 1px solid #86efac;
+}
+
+.energy-range-tooltip__status-info.alert {
+  background: #fef3c7;
+  color: #b45309;
+  border: 1px solid #fcd34d;
+}
+
+.energy-range-tooltip__status-info.failure {
+  background: #fee2e2;
+  color: #b91c1c;
+  border: 1px solid #fca5a5;
+}
+
+.energy-range-tooltip__status-info.offline {
+  background: #f3f4f6;
+  color: #6b7280;
+  border: 1px solid #d1d5db;
+}
+`;
+  var cssInjected = false;
+  function injectCSS() {
+    if (cssInjected) return;
+    if (typeof document === "undefined") return;
+    const styleId = "myio-energy-range-tooltip-styles";
+    if (document.getElementById(styleId)) {
+      cssInjected = true;
+      return;
     }
+    const style = document.createElement("style");
+    style.id = styleId;
+    style.textContent = ENERGY_RANGE_TOOLTIP_CSS;
+    document.head.appendChild(style);
+    cssInjected = true;
+  }
+  var STATUS_LABELS = {
+    standby: "Standby",
+    normal: "Operacao Normal",
+    alert: "Alerta",
+    failure: "Falha",
+    offline: "Fora da faixa"
+  };
+  var STATUS_INFO_LABELS = {
+    standby: "\u{1F535} Standby",
+    normal: "\u2705 Operacao Normal",
+    alert: "\u26A0\uFE0F Alerta",
+    failure: "\u{1F534} Falha",
+    offline: "\u26AB Offline / Sem dados"
   };
   var EnergyRangeTooltip = {
     containerId: "myio-energy-range-tooltip",
@@ -6269,6 +6651,7 @@
      * Create or get the tooltip container
      */
     getContainer() {
+      injectCSS();
       let container = document.getElementById(this.containerId);
       if (!container) {
         container = document.createElement("div");
@@ -6288,18 +6671,18 @@
       const power = Number(powerValue) || 0;
       const { standbyRange, normalRange, alertRange, failureRange } = ranges;
       if (standbyRange && power >= standbyRange.down && power <= standbyRange.up) {
-        return { status: "standby", label: "Standby" };
+        return { status: "standby", label: STATUS_LABELS.standby };
       }
       if (normalRange && power >= normalRange.down && power <= normalRange.up) {
-        return { status: "normal", label: "Normal" };
+        return { status: "normal", label: STATUS_LABELS.normal };
       }
       if (alertRange && power >= alertRange.down && power <= alertRange.up) {
-        return { status: "alert", label: "Alerta" };
+        return { status: "alert", label: STATUS_LABELS.alert };
       }
       if (failureRange && power >= failureRange.down && power <= failureRange.up) {
-        return { status: "failure", label: "Falha" };
+        return { status: "failure", label: STATUS_LABELS.failure };
       }
-      return { status: "offline", label: "Fora da faixa" };
+      return { status: "offline", label: STATUS_LABELS.offline };
     },
     /**
      * Calculate marker position on ruler (0-100%)
@@ -6330,7 +6713,7 @@
      * Format power value for display
      */
     formatPower(value) {
-      if (value == null || isNaN(value)) return "-";
+      if (value == null || isNaN(Number(value))) return "-";
       const num = Number(value);
       if (num >= 1e3) {
         return `${(num / 1e3).toFixed(2)} kW`;
@@ -6348,13 +6731,40 @@
       const { status, label } = this.calculateStatus(powerValue, ranges);
       const markerPos = this.calculateMarkerPosition(powerValue, ranges);
       const segmentWidths = this.calculateSegmentWidths(ranges);
-      const statusLabels = {
-        standby: "\u{1F535} Standby",
-        normal: "\u2705 Opera\xE7\xE3o Normal",
-        alert: "\u26A0\uFE0F Alerta",
-        failure: "\u{1F534} Falha",
-        offline: "\u26AB Offline / Sem dados"
-      };
+      const rangesHtml = hasRanges && ranges ? `
+      <div class="energy-range-tooltip__ruler">
+        <div class="energy-range-tooltip__ruler-track">
+          <div class="energy-range-tooltip__ruler-segment standby" style="width: ${segmentWidths.standby}%"></div>
+          <div class="energy-range-tooltip__ruler-segment normal" style="width: ${segmentWidths.normal}%"></div>
+          <div class="energy-range-tooltip__ruler-segment alert" style="width: ${segmentWidths.alert}%"></div>
+          <div class="energy-range-tooltip__ruler-segment failure" style="width: ${segmentWidths.failure}%"></div>
+        </div>
+        <div class="energy-range-tooltip__ruler-marker" style="left: ${markerPos}%;"></div>
+      </div>
+
+      <div class="energy-range-tooltip__ranges">
+        <div class="energy-range-tooltip__range-item standby">
+          <div class="energy-range-tooltip__range-label">Standby</div>
+          <div class="energy-range-tooltip__range-value">${ranges.standbyRange?.down || 0}-${ranges.standbyRange?.up || 0}W</div>
+        </div>
+        <div class="energy-range-tooltip__range-item normal">
+          <div class="energy-range-tooltip__range-label">Normal</div>
+          <div class="energy-range-tooltip__range-value">${ranges.normalRange?.down || 0}-${ranges.normalRange?.up || 0}W</div>
+        </div>
+        <div class="energy-range-tooltip__range-item alert">
+          <div class="energy-range-tooltip__range-label">Alerta</div>
+          <div class="energy-range-tooltip__range-value">${ranges.alertRange?.down || 0}-${ranges.alertRange?.up || 0}W</div>
+        </div>
+        <div class="energy-range-tooltip__range-item failure">
+          <div class="energy-range-tooltip__range-label">Falha</div>
+          <div class="energy-range-tooltip__range-value">&gt;${ranges.failureRange?.down || 0}W</div>
+        </div>
+      </div>
+    ` : `
+      <div style="text-align: center; padding: 16px; color: #64748b; font-size: 12px;">
+        Ranges de potencia nao configurados
+      </div>
+    `;
       container.innerHTML = `
       <div class="energy-range-tooltip__content">
         <div class="energy-range-tooltip__header">
@@ -6371,51 +6781,18 @@
             </div>
           </div>
 
-          ${hasRanges ? `
-          <div class="energy-range-tooltip__ruler">
-            <div class="energy-range-tooltip__ruler-track">
-              <div class="energy-range-tooltip__ruler-segment standby" style="width: ${segmentWidths.standby}%"></div>
-              <div class="energy-range-tooltip__ruler-segment normal" style="width: ${segmentWidths.normal}%"></div>
-              <div class="energy-range-tooltip__ruler-segment alert" style="width: ${segmentWidths.alert}%"></div>
-              <div class="energy-range-tooltip__ruler-segment failure" style="width: ${segmentWidths.failure}%"></div>
-            </div>
-            <div class="energy-range-tooltip__ruler-marker" style="left: ${markerPos}%;"></div>
-          </div>
-
-          <div class="energy-range-tooltip__ranges">
-            <div class="energy-range-tooltip__range-item standby">
-              <div class="energy-range-tooltip__range-label">Standby</div>
-              <div class="energy-range-tooltip__range-value">${ranges.standbyRange?.down || 0}-${ranges.standbyRange?.up || 0}W</div>
-            </div>
-            <div class="energy-range-tooltip__range-item normal">
-              <div class="energy-range-tooltip__range-label">Normal</div>
-              <div class="energy-range-tooltip__range-value">${ranges.normalRange?.down || 0}-${ranges.normalRange?.up || 0}W</div>
-            </div>
-            <div class="energy-range-tooltip__range-item alert">
-              <div class="energy-range-tooltip__range-label">Alerta</div>
-              <div class="energy-range-tooltip__range-value">${ranges.alertRange?.down || 0}-${ranges.alertRange?.up || 0}W</div>
-            </div>
-            <div class="energy-range-tooltip__range-item failure">
-              <div class="energy-range-tooltip__range-label">Falha</div>
-              <div class="energy-range-tooltip__range-value">&gt;${ranges.failureRange?.down || 0}W</div>
-            </div>
-          </div>
-          ` : `
-          <div style="text-align: center; padding: 16px; color: #64748b; font-size: 12px;">
-            Ranges de pot\xEAncia n\xE3o configurados
-          </div>
-          `}
+          ${rangesHtml}
 
           <div class="energy-range-tooltip__status-info ${status}">
-            ${statusLabels[status] || statusLabels.offline}
+            ${STATUS_INFO_LABELS[status] || STATUS_INFO_LABELS.offline}
           </div>
         </div>
       </div>
     `;
       let left, top;
       if (event && event.clientX && event.clientY) {
-        left = event.clientX + 15;
-        top = event.clientY + 15;
+        left = event.clientX + 8;
+        top = event.clientY + 8;
       } else {
         const rect = triggerElement.getBoundingClientRect();
         left = rect.left + rect.width / 2 - 150;
@@ -6424,11 +6801,11 @@
       const tooltipWidth = 320;
       const tooltipHeight = 380;
       if (left + tooltipWidth > window.innerWidth - 10) {
-        left = (event?.clientX || left) - tooltipWidth - 15;
+        left = (event?.clientX || left) - tooltipWidth - 8;
       }
       if (left < 10) left = 10;
       if (top + tooltipHeight > window.innerHeight - 10) {
-        top = (event?.clientY || top) - tooltipHeight - 15;
+        top = (event?.clientY || top) - tooltipHeight - 8;
       }
       if (top < 10) top = 10;
       container.style.left = left + "px";
@@ -6443,8 +6820,229 @@
       if (container) {
         container.classList.remove("visible");
       }
+    },
+    /**
+     * Attach tooltip to an element with automatic show/hide on hover
+     * Returns cleanup function to remove event listeners
+     */
+    attach(element, entityData) {
+      const handleMouseEnter = (e) => {
+        this.show(element, entityData, e);
+      };
+      const handleMouseLeave = () => {
+        this.hide();
+      };
+      const handleMouseMove = (e) => {
+        const container = document.getElementById(this.containerId);
+        if (container && container.classList.contains("visible")) {
+          let left = e.clientX + 8;
+          let top = e.clientY + 8;
+          const tooltipWidth = 320;
+          const tooltipHeight = 380;
+          if (left + tooltipWidth > window.innerWidth - 10) {
+            left = e.clientX - tooltipWidth - 8;
+          }
+          if (left < 10) left = 10;
+          if (top + tooltipHeight > window.innerHeight - 10) {
+            top = e.clientY - tooltipHeight - 8;
+          }
+          if (top < 10) top = 10;
+          container.style.left = left + "px";
+          container.style.top = top + "px";
+        }
+      };
+      element.addEventListener("mouseenter", handleMouseEnter);
+      element.addEventListener("mouseleave", handleMouseLeave);
+      element.addEventListener("mousemove", handleMouseMove);
+      return () => {
+        element.removeEventListener("mouseenter", handleMouseEnter);
+        element.removeEventListener("mouseleave", handleMouseLeave);
+        element.removeEventListener("mousemove", handleMouseMove);
+        this.hide();
+      };
     }
   };
+
+  // src/thingsboard/main-dashboard-shopping/v-4.0.0/card/head-office/card-head-office.js
+  var LABEL_CHAR_LIMIT = 18;
+  var DEFAUL_DELAY_TIME_CONNECTION_IN_MINS = 1440;
+  var CSS_TAG = "head-office-card-v1";
+  function ensureCss() {
+    if (!document.querySelector(`style[data-myio-css="${CSS_TAG}"]`)) {
+      const style = document.createElement("style");
+      style.setAttribute("data-myio-css", CSS_TAG);
+      style.textContent = CSS_STRING;
+      document.head.appendChild(style);
+    }
+  }
+  function normalizeParams(params) {
+    if (!params || !params.entityObject) {
+      throw new Error("renderCardCompenteHeadOffice: entityObject is required");
+    }
+    const LogHelper2 = createLogHelper(params.debugActive ?? false);
+    const entityObject = params.entityObject;
+    if (!entityObject.entityId) {
+      LogHelper2.warn("[CardHeadOffice] entityId is missing, generating temporary ID");
+      entityObject.entityId = `temp-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    }
+    if (!params.delayTimeConnectionInMins) {
+      LogHelper2.warn(
+        `[CardHeadOffice] delayTimeConnectionInMins is missing, defaulting to ${DEFAUL_DELAY_TIME_CONNECTION_IN_MINS} mins`
+      );
+    }
+    return {
+      entityObject,
+      i18n: { ...DEFAULT_I18N, ...params.i18n || {} },
+      enableSelection: Boolean(params.enableSelection),
+      enableDragDrop: Boolean(params.enableDragDrop),
+      useNewComponents: Boolean(params.useNewComponents),
+      // RFC-0091: Configurable delay time for connection status check (default 15 minutes)
+      delayTimeConnectionInMins: params.delayTimeConnectionInMins ?? DEFAUL_DELAY_TIME_CONNECTION_IN_MINS,
+      // Debug options
+      debugActive: params.debugActive ?? false,
+      activeTooltipDebug: params.activeTooltipDebug ?? false,
+      // LogHelper instance for this card
+      LogHelper: LogHelper2,
+      callbacks: {
+        handleActionDashboard: params.handleActionDashboard,
+        handleActionReport: params.handleActionReport,
+        handleActionSettings: params.handleActionSettings,
+        handleSelect: params.handleSelect,
+        handInfo: params.handInfo,
+        handleClickCard: params.handleClickCard
+      }
+    };
+  }
+  function getIconSvg(deviceType, domain) {
+    if (domain === "water") {
+      return Icons.waterDrop;
+    }
+    if (domain === "temperature") {
+      return Icons.thermometer;
+    }
+    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);
+    }
+    if (domain === "temperature") {
+      return formatTemperature(value, 0);
+    }
+    return formatEnergy(value);
+  }
+  function formatRelativeTime2(timestamp) {
+    if (!timestamp || isNaN(timestamp)) return "\u2014";
+    const date = new Date(timestamp);
+    const hours = String(date.getHours()).padStart(2, "0");
+    const minutes = String(date.getMinutes()).padStart(2, "0");
+    const day = String(date.getDate()).padStart(2, "0");
+    const month = String(date.getMonth() + 1).padStart(2, "0");
+    const year = date.getFullYear();
+    return `${hours}:${minutes} ${day}/${month}/${year}`;
+  }
+  function calculateConsumptionPercentage(target, consumption) {
+    const numericTarget = Number(target);
+    const numericConsumption = Number(consumption);
+    if (isNaN(numericTarget) || isNaN(numericConsumption) || numericTarget <= 0) {
+      return 0;
+    }
+    const percentage = numericConsumption / numericTarget * 100;
+    return percentage;
+  }
+  function getStatusInfo(deviceStatus, i18n, domain) {
+    switch (deviceStatus) {
+      // --- Novos Status de Temperatura ---
+      case "normal":
+        return { chipClass: "chip--ok", label: "Normal" };
+      case "cold":
+        return { chipClass: "chip--standby", label: "Frio" };
+      case "hot":
+        return { chipClass: "chip--alert", label: "Quente" };
+      // --- Status Existentes (aligned with getCardStateClass) ---
+      case DeviceStatusType.POWER_ON:
+        if (domain === "water") {
+          return { chipClass: "chip--power-on", label: i18n.in_operation_water };
+        }
+        return { chipClass: "chip--power-on", label: i18n.in_operation };
+      case DeviceStatusType.STANDBY:
+        return { chipClass: "chip--standby", label: i18n.standby };
+      case DeviceStatusType.WARNING:
+        return { chipClass: "chip--warning", label: i18n.alert };
+      case DeviceStatusType.MAINTENANCE:
+        return { chipClass: "chip--maintenance", label: i18n.maintenance };
+      case DeviceStatusType.FAILURE:
+        return { chipClass: "chip--failure", label: i18n.failure };
+      case DeviceStatusType.POWER_OFF:
+        return { chipClass: "chip--power-off", label: i18n.power_off || i18n.failure };
+      case DeviceStatusType.OFFLINE:
+        return { chipClass: "chip--offline", label: i18n.offline };
+      case DeviceStatusType.NO_INFO:
+        return { chipClass: "chip--no-info", label: i18n.no_info || i18n.offline };
+      case DeviceStatusType.NOT_INSTALLED:
+        return { chipClass: "chip--not-installed", label: i18n.not_installed };
+      default:
+        return { chipClass: "chip--offline", label: i18n.offline };
+    }
+  }
+  function getCardStateClass(deviceStatus) {
+    switch (deviceStatus) {
+      case DeviceStatusType.POWER_ON:
+        return "is-power-on";
+      // Blue border
+      case DeviceStatusType.STANDBY:
+        return "is-standby";
+      // Green border
+      case DeviceStatusType.WARNING:
+        return "is-warning";
+      // Yellow border
+      case DeviceStatusType.MAINTENANCE:
+        return "is-maintenance";
+      // Yellow border
+      case DeviceStatusType.FAILURE:
+        return "is-failure";
+      // Dark Red border
+      case DeviceStatusType.POWER_OFF:
+        return "is-power-off";
+      // Light Red border
+      case DeviceStatusType.OFFLINE:
+        return "is-offline";
+      // Dark Gray border
+      case DeviceStatusType.NO_INFO:
+        return "is-no-info";
+      // Dark Orange border
+      case DeviceStatusType.NOT_INSTALLED:
+        return "is-not-installed";
+      // Purple border
+      default:
+        return "";
+    }
+  }
+  function getTempRangeClass(entityObject) {
+    if (entityObject.domain !== "temperature") return "";
+    const currentTemp = Number(entityObject.val ?? entityObject.currentTemperature ?? entityObject.temperature) || 0;
+    const tempMin = entityObject.temperatureMin ?? entityObject.minTemperature;
+    const tempMax = entityObject.temperatureMax ?? entityObject.maxTemperature;
+    if (tempMin === void 0 || tempMax === void 0 || tempMin === null || tempMax === null) {
+      return "";
+    }
+    if (currentTemp > tempMax) return "is-temp-hot";
+    if (currentTemp < tempMin) return "is-temp-cold";
+    return "is-temp-ok";
+  }
   function getStatusDotClass(deviceStatus) {
     switch (deviceStatus) {
       // --- Novos Status de Temperatura ---
@@ -7565,6 +8163,7 @@
     };
     const isTankDevice = deviceType === "TANK" || deviceType === "CAIXA_DAGUA";
     const isTermostatoDevice = deviceType?.toUpperCase() === "TERMOSTATO";
+    const isEnergyDeviceFlag = isEnergyDevice(deviceType);
     const percentageForDisplay = isTankDevice ? (waterPercentage || 0) * 100 : perc;
     const calculateTempStatus = () => {
       if (temperatureStatus) return temperatureStatus;
@@ -7581,33 +8180,6 @@
       tempStatus,
       isOffline
     });
-    const getTemperatureTooltip = () => {
-      if (!isTermostatoDevice) return "";
-      const currentTemp = Number(val) || 0;
-      const hasRange = temperatureMin !== void 0 && temperatureMax !== void 0 && temperatureMin !== null && temperatureMax !== null;
-      if (isOffline) {
-        return "Dispositivo offline";
-      }
-      if (!hasRange) {
-        return `Temperatura atual: ${currentTemp.toFixed(1)}\xB0C
-Faixa n\xE3o configurada`;
-      }
-      const rangeText = `Faixa ideal: ${temperatureMin}\xB0C a ${temperatureMax}\xB0C`;
-      if (tempStatus === "above") {
-        return `ACIMA da faixa ideal
-Temperatura atual: ${currentTemp.toFixed(1)}\xB0C
-${rangeText}`;
-      } else if (tempStatus === "below") {
-        return `ABAIXO da faixa ideal
-Temperatura atual: ${currentTemp.toFixed(1)}\xB0C
-${rangeText}`;
-      } else {
-        return `DENTRO da faixa ideal
-Temperatura atual: ${currentTemp.toFixed(1)}\xB0C
-${rangeText}`;
-      }
-    };
-    const temperatureTooltip = getTemperatureTooltip();
     const cardHTML = `
       <div class="device-card-centered clickable ${cardEntity.status === "offline" ? "offline" : ""}"
           data-entity-id="${entityId}"
@@ -7633,7 +8205,7 @@ ${rangeText}`;
                 ` : ""}
               </div>
 
-              <img class="device-image" src="${deviceImageUrl}" alt="${deviceType}" ${isTermostatoDevice && temperatureTooltip ? `title="${temperatureTooltip}"` : ""} style="${isTermostatoDevice ? "cursor: help;" : ""}" />
+              <img class="device-image ${isTermostatoDevice ? "temp-tooltip-trigger" : ""}${isEnergyDeviceFlag ? " energy-tooltip-trigger" : ""}" src="${deviceImageUrl}" alt="${deviceType}" style="${isTermostatoDevice || isEnergyDeviceFlag ? "cursor: help;" : ""}" />
 
 
               ${customerName && String(customerName).trim() !== "" ? `
@@ -8197,6 +8769,33 @@ ${rangeText}`;
         }
       });
     }
+    const tempTooltipTrigger = enhancedCardElement.querySelector(".temp-tooltip-trigger");
+    let tempTooltipCleanup = null;
+    if (tempTooltipTrigger && isTermostatoDevice) {
+      const tooltipEntityData = {
+        val,
+        temperatureMin,
+        temperatureMax,
+        labelOrName: cardEntity.name,
+        name: cardEntity.name
+      };
+      tempTooltipCleanup = TempRangeTooltip.attach(tempTooltipTrigger, tooltipEntityData);
+    }
+    const energyTooltipTrigger = enhancedCardElement.querySelector(".energy-tooltip-trigger");
+    let energyTooltipCleanup = null;
+    if (energyTooltipTrigger && isEnergyDeviceFlag) {
+      const energyTooltipData = {
+        labelOrName: cardEntity.name,
+        name: cardEntity.name,
+        instantaneousPower: entityObject.instantaneousPower ?? entityObject.consumption_power ?? val,
+        powerRanges: entityObject.powerRanges || entityObject.ranges
+      };
+      energyTooltipCleanup = EnergyRangeTooltip.attach(energyTooltipTrigger, energyTooltipData);
+    }
+    container._cleanup = () => {
+      if (tempTooltipCleanup) tempTooltipCleanup();
+      if (energyTooltipCleanup) energyTooltipCleanup();
+    };
     const jQueryLikeObject = {
       get: (index) => index === 0 ? container : void 0,
       0: container,
@@ -11178,7 +11777,7 @@ ${rangeText}`;
   var zoomPluginLoaded = false;
   var jsPdfLoaded = false;
   var _jspdfPromise = null;
-  var cssInjected = false;
+  var cssInjected2 = false;
   var STRINGS2 = {
     "pt-BR": {
       title: "Demanda",
@@ -11354,8 +11953,8 @@ ${rangeText}`;
     }
     return nextY;
   }
-  function injectCSS(styles) {
-    if (cssInjected) return;
+  function injectCSS2(styles) {
+    if (cssInjected2) return;
     const css = `
     .myio-demand-modal-overlay {
       position: fixed;
@@ -11750,7 +12349,7 @@ ${rangeText}`;
     const style = document.createElement("style");
     style.textContent = css;
     document.head.appendChild(style);
-    cssInjected = true;
+    cssInjected2 = true;
   }
   function formatDate2(date, locale) {
     return date.toLocaleDateString(locale, {
@@ -11932,7 +12531,7 @@ ${rangeText}`;
     const locale = params.locale || "pt-BR";
     const strings = STRINGS2[locale] || STRINGS2["pt-BR"];
     await loadExternalLibraries();
-    injectCSS(styles);
+    injectCSS2(styles);
     const container = typeof params.container === "string" ? document.querySelector(params.container) : params.container || document.body;
     if (!container) {
       throw new Error("Container element not found");
@@ -21410,7 +22009,7 @@ ${rangeText}`;
       placeholder = "Clique para selecionar per\xEDodo",
       pickerOptions = {},
       classNames = {},
-      injectStyles = true,
+      injectStyles: injectStyles2 = true,
       showHelper = true
     } = params;
     validateId(containerId, "containerId");
@@ -21419,7 +22018,7 @@ ${rangeText}`;
     if (!container) {
       throw new Error(`[createInputDateRangePickerInsideDIV] Container '#${containerId}' not found`);
     }
-    if (injectStyles) {
+    if (injectStyles2) {
       injectPremiumStyles();
     }
     let inputEl = document.getElementById(inputId);
@@ -21614,7 +22213,7 @@ ${rangeText}`;
       modal.setAttribute("aria-labelledby", "goals-modal-title");
       modal.innerHTML = generateModalHTML();
       document.body.appendChild(modal);
-      injectStyles();
+      injectStyles2();
       attachEventListeners();
       trapFocus(modal);
       renderTabContent();
@@ -22367,7 +22966,7 @@ ${rangeText}`;
         maximumFractionDigits: 2
       }).format(value);
     }
-    function injectStyles() {
+    function injectStyles2() {
       const styleId = "myio-goals-panel-styles";
       if (document.getElementById(styleId)) return;
       const style = document.createElement("style");
@@ -24624,7 +25223,7 @@ ${rangeText}`;
   function getColors(theme) {
     return theme === "dark" ? DARK_THEME2 : LIGHT_THEME2;
   }
-  async function fetchCustomerAttributes(customerId, token) {
+  async function fetchCustomerAttributes(customerId, token, onError) {
     const url = `/api/plugins/telemetry/CUSTOMER/${customerId}/values/attributes/SERVER_SCOPE`;
     const response = await fetch(url, {
       method: "GET",
@@ -24637,6 +25236,10 @@ ${rangeText}`;
       if (response.status === 404 || response.status === 400) {
         return { minTemperature: null, maxTemperature: null };
       }
+      if (onError) {
+        onError({ status: response.status, message: `Failed to fetch attributes: ${response.status}` });
+        return { minTemperature: null, maxTemperature: null };
+      }
       throw new Error(`Failed to fetch attributes: ${response.status}`);
     }
     const attributes = await response.json();
@@ -24653,7 +25256,7 @@ ${rangeText}`;
     }
     return { minTemperature, maxTemperature };
   }
-  async function saveCustomerAttributes(customerId, token, minTemperature, maxTemperature) {
+  async function saveCustomerAttributes(customerId, token, minTemperature, maxTemperature, onError) {
     const url = `/api/plugins/telemetry/CUSTOMER/${customerId}/SERVER_SCOPE`;
     const attributes = {
       minTemperature,
@@ -24668,6 +25271,10 @@ ${rangeText}`;
       body: JSON.stringify(attributes)
     });
     if (!response.ok) {
+      if (onError) {
+        onError({ status: response.status, message: `Failed to save attributes: ${response.status}` });
+        return;
+      }
       throw new Error(`Failed to save attributes: ${response.status}`);
     }
   }
@@ -25084,7 +25691,7 @@ ${rangeText}`;
       state.successMessage = null;
       renderModal3(container, state, modalId, destroy, handleSave);
       try {
-        await saveCustomerAttributes(state.customerId, state.token, min, max);
+        await saveCustomerAttributes(state.customerId, state.token, min, max, params.onError);
         state.minTemperature = min;
         state.maxTemperature = max;
         state.isSaving = false;
@@ -25101,7 +25708,7 @@ ${rangeText}`;
       }
     };
     renderModal3(container, state, modalId, destroy, handleSave);
-    fetchCustomerAttributes(state.customerId, state.token).then(({ minTemperature, maxTemperature }) => {
+    fetchCustomerAttributes(state.customerId, state.token, params.onError).then(({ minTemperature, maxTemperature }) => {
       state.minTemperature = minTemperature;
       state.maxTemperature = maxTemperature;
       state.isLoading = false;
@@ -27260,7 +27867,7 @@ ${rangeText}`;
       </div>
     `;
     }
-    function injectStyles() {
+    function injectStyles2() {
       if (styleElement) return;
       styleElement = document.createElement("style");
       styleElement.id = `${widgetId}-styles`;
@@ -27741,7 +28348,7 @@ ${rangeText}`;
           console.error(`[ConsumptionWidget] Container #${config.containerId} not found`);
           return;
         }
-        injectStyles();
+        injectStyles2();
         containerElement.innerHTML = renderHTML();
         setupListeners();
         setLoading(true);
@@ -28878,6 +29485,7 @@ ${rangeText}`;
   exports.EXPORT_DOMAIN_ICONS = EXPORT_DOMAIN_ICONS;
   exports.EXPORT_DOMAIN_LABELS = EXPORT_DOMAIN_LABELS;
   exports.EXPORT_DOMAIN_UNITS = EXPORT_DOMAIN_UNITS;
+  exports.EnergyRangeTooltip = EnergyRangeTooltip;
   exports.MyIOChartModal = MyIOChartModal;
   exports.MyIODraggableCard = MyIODraggableCard;
   exports.MyIOSelectionStoreClass = MyIOSelectionStoreClass;
@@ -28885,6 +29493,7 @@ ${rangeText}`;
   exports.POWER_LIMITS_DEVICE_TYPES = DEVICE_TYPES;
   exports.POWER_LIMITS_STATUS_CONFIG = STATUS_CONFIG;
   exports.POWER_LIMITS_TELEMETRY_TYPES = TELEMETRY_TYPES2;
+  exports.TempRangeTooltip = TempRangeTooltip;
   exports.addDetectionContext = addDetectionContext;
   exports.addNamespace = addNamespace;
   exports.aggregateByDay = aggregateByDay;