myio-js-library 0.1.160 → 0.1.161

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

@@ -2059,8 +2059,9 @@
         lastValue: Number(entity.lastValue) || 0,
         unit: entity.unit || "",
         status: entity.status || "unknown",
-        ingestionId: entity.ingestionId || entity.id
+        ingestionId: entity.ingestionId || entity.id,
         // ⭐ ADD: Store ingestionId for API calls
+        customerName: entity.customerName || ""
       };
       this.entities.set(entity.id, normalizedEntity);
     }
@@ -4674,6 +4675,13 @@
      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>`,
+    waterDrop: `
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <g id="water" transform="translate(-4 -2)">
+    <path id="secondary" fill="#2ca9bc" d="M19,14A7,7,0,1,1,5,14C5,8,12,3,12,3S19,8,19,14Z"/>
+    <path id="primary" d="M19,14A7,7,0,1,1,5,14C5,8,12,3,12,3S19,8,19,14Z" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+  </g>
 </svg>`,
     // ⋮ Kebab (for actions menu)
     kebab: `
@@ -4702,6 +4710,7 @@
   var DEFAULT_I18N = {
     // Status labels with icons
     in_operation: "\u26A1 Normal",
+    in_operation_water: "\u{1F4A7} Normal",
     standby: "\u{1F4A4} Em standby",
     alert: "\u26A0\uFE0F Alerta",
     failure: "\u{1F6A8} Falha",
@@ -4758,7 +4767,13 @@
       }
     };
   }
-  function getIconSvg(deviceType) {
+  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) {
@@ -4798,9 +4813,23 @@
     const percentage = numericConsumption / numericTarget * 100;
     return percentage;
   }
-  function getStatusInfo(deviceStatus, i18n) {
+  function getStatusInfo(deviceStatus, i18n, domain) {
     switch (deviceStatus) {
+      // --- Novos Status de Temperatura ---
+      case "normal":
+        return { chipClass: "chip--ok", label: "Normal" };
+      // Verde/Azul
+      case "cold":
+        return { chipClass: "chip--standby", label: "Frio" };
+      // Azul claro/Ciano
+      case "hot":
+        return { chipClass: "chip--alert", label: "Quente" };
+      // Laranja/Amarelo
+      // --- Status Existentes ---
       case DeviceStatusType.POWER_ON:
+        if (domain === "water") {
+          return { chipClass: "chip--ok", label: i18n.in_operation_water };
+        }
         return { chipClass: "chip--ok", label: i18n.in_operation };
       case DeviceStatusType.STANDBY:
         return { chipClass: "chip--standby", label: i18n.standby };
@@ -4813,6 +4842,7 @@
         return { chipClass: "chip--alert", label: i18n.maintenance };
       case DeviceStatusType.NOT_INSTALLED:
         return { chipClass: "chip--offline", label: i18n.not_installed };
+      // Default (Cai aqui se não achar 'normal', 'hot' etc)
       case DeviceStatusType.NO_INFO:
       default:
         return { chipClass: "chip--offline", label: i18n.offline };
@@ -4844,6 +4874,14 @@
   }
   function getStatusDotClass(deviceStatus) {
     switch (deviceStatus) {
+      // --- Novos Status de Temperatura ---
+      case "normal":
+        return "dot--ok";
+      case "cold":
+        return "dot--standby";
+      case "hot":
+        return "dot--alert";
+      // --- Status Existentes ---
       case DeviceStatusType.POWER_ON:
         return "dot--ok";
       case DeviceStatusType.STANDBY:
@@ -4871,7 +4909,7 @@
     header.className = "myio-ho-card__header";
     const iconContainer = document.createElement("div");
     iconContainer.className = "myio-ho-card__icon";
-    iconContainer.innerHTML = getIconSvg(entityObject.deviceType);
+    iconContainer.innerHTML = getIconSvg(entityObject.deviceType, entityObject.domain);
     header.appendChild(iconContainer);
     const titleSection = document.createElement("div");
     titleSection.className = "myio-ho-card__title";
@@ -4993,7 +5031,11 @@
     powerMetric.appendChild(statusDot);
     const powerLabel = document.createElement("div");
     powerLabel.className = "label";
-    powerLabel.textContent = i18n.instantaneous_power || "Pot\xEAncia";
+    if (entityObject.domain === "water") {
+      powerLabel.textContent = "Leitura";
+    } else {
+      powerLabel.textContent = i18n.instantaneous_power || "Pot\xEAncia";
+    }
     powerMetric.appendChild(powerLabel);
     const powerVal = document.createElement("div");
     powerVal.className = "val";
@@ -5017,7 +5059,7 @@
     return true;
   }
   function paint(root, state) {
-    const { entityObject, i18n, delayTimeConnectionInMins } = state;
+    const { entityObject, i18n, delayTimeConnectionInMins, isSelected } = state;
     if (entityObject.connectionStatus) {
       if (entityObject.connectionStatus === "offline") {
         entityObject.deviceStatus = DeviceStatusType.NO_INFO;
@@ -5029,16 +5071,23 @@
     }
     const stateClass = getCardStateClass(entityObject.deviceStatus);
     root.className = `myio-ho-card ${stateClass}`;
-    const statusInfo = getStatusInfo(entityObject.deviceStatus, i18n);
+    const statusInfo = getStatusInfo(entityObject.deviceStatus, i18n, entityObject.domain);
     const chip = root.querySelector(".chip");
     chip.className = `chip ${statusInfo.chipClass}`;
-    chip.textContent = statusInfo.label;
+    chip.innerHTML = statusInfo.label;
     const primaryValue = formatValueByDomain(entityObject.val, entityObject.domain);
     const numSpan = root.querySelector(".myio-ho-card__value .num");
     root.querySelector(".myio-ho-card__value .unit");
     numSpan.textContent = primaryValue;
     const barContainer = root.querySelector(".bar");
     const effContainer = root.querySelector(".myio-ho-card__eff");
+    if (state.enableSelection) {
+      const checkbox = root.querySelector('.myio-ho-card__select input[type="checkbox"]');
+      if (checkbox) {
+        checkbox.checked = !!isSelected;
+      }
+      root.classList.toggle("is-selected", !!isSelected);
+    }
     const targetValue = entityObject.consumptionTargetValue;
     if (targetValue) {
       barContainer.style.display = "";
@@ -5060,9 +5109,14 @@
     }
     const powerVal = root.querySelector(".myio-ho-card__footer .metric:nth-child(2) .val");
     if (powerVal) {
-      const instantPower = entityObject.instantaneousPower ?? entityObject.consumption_power ?? null;
-      const powerFormatted = formatPower(instantPower);
-      powerVal.textContent = instantPower !== null ? `${powerFormatted.num} ${powerFormatted.unit}` : "-";
+      if (entityObject.domain === "water") {
+        const pulses = entityObject.pulses ?? 0;
+        powerVal.textContent = `${pulses} L`;
+      } else {
+        const instantPower = entityObject.instantaneousPower ?? entityObject.consumption_power ?? null;
+        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) {
@@ -5122,6 +5176,26 @@
         callbacks.handleActionSettings(e, entityObject);
       });
     }
+    const MyIOSelectionStore2 = window.MyIOLibrary?.MyIOSelectionStore || window.MyIOSelectionStore;
+    if (MyIOSelectionStore2) {
+      const onSelectionChange = () => {
+        const selectedIds = MyIOSelectionStore2.getSelectedIds();
+        const isSelected = selectedIds.includes(entityObject.entityId);
+        if (state.isSelected !== isSelected) {
+          state.isSelected = isSelected;
+          paint(root, state);
+        }
+      };
+      MyIOSelectionStore2.on("selection:change", onSelectionChange);
+      root._selectionListener = onSelectionChange;
+    }
+    root._cleanup = () => {
+      document.removeEventListener("click", closeMenu);
+      document.removeEventListener("keydown", closeMenu);
+      if (MyIOSelectionStore2 && root._selectionListener) {
+        MyIOSelectionStore2.off("selection:change", root._selectionListener);
+      }
+    };
     const checkbox = root.querySelector('.myio-ho-card__select input[type="checkbox"]');
     if (checkbox && callbacks.handleSelect) {
       checkbox.addEventListener("change", (e) => {
@@ -5189,6 +5263,7 @@
     ensureCss();
     const state = normalizeParams(params);
     const root = buildDOM(state);
+    state.isSelected = params.isSelected || false;
     containerEl.appendChild(root);
     bindEvents(root, state, state.callbacks);
     paint(root, state);
@@ -10799,11 +10874,13 @@ ${rangeText}`;
       console.log("[EnergyModalView] Bar mode toggled to:", this.currentBarMode);
     }
     /**
-     * Applies the current theme to the modal and charts
-     */
+       * Applies the current theme to the modal and charts (Updated with #root override)
+       */
     applyTheme() {
       const themeToggleBtn = document.getElementById("theme-toggle-btn");
-      const modalContent = document.querySelector(".myio-energy-modal-scope");
+      const modalContent = this.container;
+      const externalBody = this.container?.closest(".myio-modal-body") || document.querySelector(".myio-modal-body");
+      const rootDiv = document.querySelector("#root > div");
       if (themeToggleBtn) {
         const sunIcon = themeToggleBtn.querySelector(".myio-theme-icon-sun");
         const moonIcon = themeToggleBtn.querySelector(".myio-theme-icon-moon");
@@ -10816,6 +10893,14 @@ ${rangeText}`;
             moonIcon.style.opacity = "0";
             moonIcon.style.transform = "translate(-50%, -50%) rotate(90deg) scale(0)";
           }
+          if (externalBody) {
+            externalBody.style.backgroundColor = "#ffffff";
+            externalBody.style.color = "#1f2937";
+          }
+          if (rootDiv) {
+            rootDiv.style.backgroundColor = "#ffffff";
+            rootDiv.style.color = "#1f2937";
+          }
         } else {
           if (sunIcon) {
             sunIcon.style.opacity = "0";
@@ -10825,6 +10910,14 @@ ${rangeText}`;
             moonIcon.style.opacity = "1";
             moonIcon.style.transform = "translate(-50%, -50%) rotate(0deg) scale(1)";
           }
+          if (externalBody) {
+            externalBody.style.backgroundColor = "#1f1f1f";
+            externalBody.style.color = "#f3f4f6";
+          }
+          if (rootDiv) {
+            rootDiv.style.backgroundColor = "#1f1f1f";
+            rootDiv.style.color = "#f3f4f6";
+          }
         }
       }
       if (modalContent) {
@@ -11053,7 +11146,7 @@ ${rangeText}`;
             ${this.config.params.mode === "comparison" ? `
             <!-- RFC-0097: Granularity Selector (only 1h and 1d supported) -->
             <div class="myio-granularity-selector" style="display: flex; align-items: center; gap: 4px; margin-left: 8px; padding: 4px 8px; background: rgba(0,0,0,0.05); border-radius: 8px;">
-              <span style="font-size: 11px; color: #666; margin-right: 4px; white-space: nowrap;">Granularidade:</span>
+              <span class="myio-label-secondary" style="font-size: 11px; margin-right: 4px; white-space: nowrap;">Granularidade:</span>
               <button class="myio-btn myio-btn-granularity ${this.currentGranularity === "1h" ? "active" : ""}" data-granularity="1h" title="Hora">1h</button>
               <button class="myio-btn myio-btn-granularity ${this.currentGranularity === "1d" ? "active" : ""}" data-granularity="1d" title="Dia">1d</button>
             </div>
@@ -11735,93 +11828,159 @@ ${rangeText}`;
       return i18n[key] || DEFAULT_I18N2[key];
     }
     /**
-     * Gets modal styles with header color matching openDashboardPopupEnergy
-     */
+       * Gets modal styles with fixed Dark/Light contrast
+       */
+    /**
+       * Gets modal styles with fixed Chart Border for Light Mode
+       */
     getModalStyles() {
       const styles = this.config.params.styles || {};
+      const defaultPrimary = styles.primaryColor || "#4A148C";
+      const defaultFont = styles.fontFamily || '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
       return `
+      /* --- VARI\xC1VEIS DE TEMA (LIGHT MODE - PADR\xC3O) --- */
       .myio-energy-modal-scope {
-        --myio-energy-primary: ${styles.primaryColor || "#4A148C"};
-        --myio-energy-bg: ${styles.backgroundColor || "#ffffff"};
-        --myio-energy-text: ${styles.textColor || "#1f2937"};
-        --myio-energy-border: ${styles.borderColor || "#e5e7eb"};
-        --myio-energy-radius: ${styles.borderRadius || "8px"};
-        --myio-energy-font: ${styles.fontFamily || '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'};
+        --myio-energy-primary: ${defaultPrimary};
+        --myio-energy-font: ${defaultFont};
+        --myio-energy-radius: 8px;
+        
+        /* Cores Gerais (Light Mode) */
+        --myio-energy-bg: #ffffff;
+        --myio-energy-text: #1f2937;
+        --myio-energy-text-secondary: #6b7280;
+        
+        /* Borda GERAL (para bot\xF5es e inputs) - Cinza suave */
+        --myio-energy-border: #e5e7eb;
+        
+        /* Borda ESPEC\xCDFICA DO GR\xC1FICO (Aqui est\xE1 a corre\xE7\xE3o) */
+        /* No Light Mode, definimos como transparente ou branco para "sumir" */
+        --myio-chart-border: transparent; 
+
+        --myio-energy-btn-bg: #f3f4f6;
+        --myio-energy-btn-hover: #e5e7eb;
+        --myio-energy-input-bg: #ffffff;
+        --myio-granularity-bg: #f9fafb;
         
         font-family: var(--myio-energy-font);
+        background-color: var(--myio-energy-bg);
         color: var(--myio-energy-text);
         height: -webkit-fill-available;
+        transition: background-color 0.3s ease, color 0.3s ease;
       }
 
-      .myio-btn {
-        padding: 8px 16px;
-        border-radius: var(--myio-energy-radius);
-        border: 1px solid var(--myio-energy-border);
-        background: var(--myio-energy-bg);
-        color: var(--myio-energy-text);
-        cursor: pointer;
-        font-size: 14px;
-        transition: all 0.2s;
-      }
+      /* --- DARK MODE OVERRIDES --- */
+      .myio-energy-modal-scope[data-theme="dark"] {
+        --myio-energy-bg: #1f1f1f;
+        --myio-energy-text: #f3f4f6;
+        --myio-energy-text-secondary: #9ca3af;
+        
+        /* No Dark Mode, as bordas precisam aparecer */
+        --myio-energy-border: #374151;
+        --myio-chart-border: #374151; /* Borda vis\xEDvel no escuro */
 
-      .myio-btn:hover:not(:disabled) {
-        background: #f3f4f6;
+        --myio-energy-btn-bg: #374151;
+        --myio-energy-btn-hover: #4b5563;
+        --myio-energy-input-bg: #111827;
+        --myio-granularity-bg: #111827;
       }
 
-      .myio-btn:disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-      }
+      /* --- COMPONENTES --- */
 
-      .myio-btn-primary {
-        background: var(--myio-energy-primary);
-        color: white;
-        border-color: var(--myio-energy-primary);
+      .myio-energy-chart-container {
+        flex: 1 !important;
+        min-height: 353px !important;
+        height: 353px !important;
+        background: var(--myio-energy-bg);
+        border-radius: var(--myio-energy-radius);
+        
+        /* USO DA VARI\xC1VEL ESPEC\xCDFICA AQUI */
+        border: 1px solid var(--myio-chart-border);
+        
+        padding: 10px !important;
+        display: block !important;
+        overflow: hidden !important;
       }
 
-      .myio-btn-primary:hover:not(:disabled) {
-        background: #6A1B9A;
+      .myio-chart-container {
+        /* Aplica a mesma l\xF3gica para o gr\xE1fico de fallback */
+        border: 1px solid var(--myio-chart-border);
+        border-radius: var(--myio-energy-radius);
+        overflow: hidden;
       }
 
-      .myio-btn-secondary {
-        background: #f3f4f6;
-        color: var(--myio-energy-text);
-        border-color: var(--myio-energy-border);
+      /* --- Resto dos estilos (Bot\xF5es, Labels, etc.) --- */
+      
+      .myio-label-secondary {
+        color: var(--myio-energy-text-secondary);
+        font-weight: 500;
       }
 
-      .myio-btn-secondary:hover:not(:disabled) {
-        background: #e5e7eb;
+      .myio-granularity-selector {
+        display: flex; 
+        align-items: center; 
+        gap: 4px; 
+        margin-left: 8px; 
+        padding: 4px 8px; 
+        border-radius: 8px;
+        background: var(--myio-granularity-bg);
+        border: 1px solid var(--myio-energy-border); /* Granularidade mant\xE9m borda suave */
       }
 
-      /* RFC-0097: Granularity selector buttons */
       .myio-btn-granularity {
         padding: 4px 10px;
         font-size: 12px;
         font-weight: 600;
         border-radius: 6px;
-        border: 1px solid var(--myio-energy-border);
-        background: var(--myio-energy-bg);
-        color: var(--myio-energy-text);
         cursor: pointer;
         transition: all 0.2s ease;
         min-width: 36px;
+        background: transparent;
+        border: 1px solid transparent;
+        color: var(--myio-energy-text-secondary);
       }
 
       .myio-btn-granularity:hover:not(.active) {
-        background: #f3f4f6;
-        border-color: var(--myio-energy-primary);
-        color: var(--myio-energy-primary);
+        background: var(--myio-energy-btn-hover);
+        color: var(--myio-energy-text);
       }
 
       .myio-btn-granularity.active {
         background: var(--myio-energy-primary);
         color: white;
         border-color: var(--myio-energy-primary);
-        box-shadow: 0 2px 4px rgba(74, 20, 140, 0.25);
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
       }
 
-      .myio-granularity-selector {
+      .myio-btn {
+        padding: 8px 16px;
+        border-radius: var(--myio-energy-radius);
         border: 1px solid var(--myio-energy-border);
+        background: var(--myio-energy-btn-bg);
+        color: var(--myio-energy-text);
+        cursor: pointer;
+        font-size: 14px;
+        transition: all 0.2s;
+      }
+
+      .myio-btn:hover:not(:disabled) {
+        background: var(--myio-energy-btn-hover);
+        border-color: var(--myio-energy-border);
+      }
+
+      .myio-btn-primary {
+        background: var(--myio-energy-primary);
+        color: white;
+        border-color: var(--myio-energy-primary);
+      }
+
+      .myio-btn-primary:hover:not(:disabled) {
+        opacity: 0.9;
+      }
+
+      .myio-btn-secondary {
+        background: var(--myio-energy-btn-bg);
+        color: var(--myio-energy-text);
+        border-color: var(--myio-energy-border);
       }
 
       .myio-modal-scope {
@@ -11830,42 +11989,30 @@ ${rangeText}`;
         flex-direction: column !important;
       }
 
-      .myio-energy-chart-container {
-        flex: 1 !important;
-        min-height: 353px !important;
-        height: 353px !important;
-        background: var(--myio-energy-bg);
-        border-radius: var(--myio-energy-radius);
-        border: 1px solid var(--myio-energy-border);
-        padding: 10px !important;
-        display: block !important;
-        overflow: hidden !important;
-      }
-
-      .myio-energy-chart-container > iframe {
-        width: 100% !important;
-        height: 100% !important;
-        min-height: 408px !important;
-        border: none !important;
+      .myio-form-group {
+        display: flex;
+        flex-direction: column;
       }
 
-      .myio-energy-chart-container iframe,
-      .myio-energy-chart-container iframe body,
-      .myio-energy-chart-container iframe html {
-        height: 100% !important;
-        min-height: 408px !important;
+      .myio-label {
+        font-weight: 500;
+        margin-bottom: 5px;
+        color: var(--myio-energy-text);
       }
 
-      .myio-energy-chart-container .chart-wrapper,
-      .myio-energy-chart-container .chart-container,
-      .myio-energy-chart-container canvas,
-      .myio-energy-chart-container svg {
-        height: 408px !important;
-        min-height: 408px !important;
+      .myio-input {
+        padding: 8px 12px;
+        border: 1px solid var(--myio-energy-border);
+        border-radius: var(--myio-energy-radius);
+        font-size: 14px;
+        background: var(--myio-energy-input-bg);
+        color: var(--myio-energy-text);
       }
 
-      .myio-loading-state {
-        text-align: center;
+      .myio-input:focus {
+        outline: none;
+        border-color: var(--myio-energy-primary);
+        box-shadow: 0 0 0 1px var(--myio-energy-primary);
       }
 
       .myio-spinner {
@@ -11877,78 +12024,40 @@ ${rangeText}`;
         animation: spin 1s linear infinite;
         margin: 0 auto 16px;
       }
-
+      
       @keyframes spin {
         0% { transform: rotate(0deg); }
         100% { transform: rotate(360deg); }
       }
 
+      .myio-loading-state p {
+        color: var(--myio-energy-text);
+      }
+
       .myio-energy-error {
-        background: #fef2f2;
-        border: 1px solid #fecaca;
+        background: rgba(254, 202, 202, 0.15);
+        border: 1px solid rgba(248, 113, 113, 0.5);
         border-radius: var(--myio-energy-radius);
         padding: 16px;
       }
-
-      .myio-error-content {
-        display: flex;
-        align-items: center;
-        gap: 12px;
-      }
-
-      .myio-error-icon {
-        font-size: 24px;
-      }
-
+      
       .myio-error-message {
-        color: #dc2626;
+        color: #ef4444;
         font-weight: 500;
       }
 
-
-
-      .myio-fallback-chart h4 {
-        margin: 0 0 16px 0;
-        text-align: center;
-      }
-
-      .myio-chart-container {
-        border: 1px solid var(--myio-energy-border);
-        border-radius: var(--myio-energy-radius);
-        overflow: hidden;
-      }
-
       .myio-chart-note {
         margin: 12px 0 0 0;
         font-size: 12px;
-        color: #666;
-        text-align: center;
-      }
-
-      .myio-form-group {
-        display: flex;
-        flex-direction: column;
-      }
-
-      .myio-label {
-        font-weight: 500;
-        margin-bottom: 5px;
-        color: var(--myio-energy-text);
-      }
-
-      .myio-input {
-        padding: 8px 12px;
-        border: 1px solid var(--myio-energy-border);
-        border-radius: var(--myio-energy-radius);
-        font-size: 14px;
-        background: var(--myio-energy-bg);
         color: var(--myio-energy-text);
+        opacity: 0.7;
+        text-align: center;
       }
 
-      .myio-input:focus {
-        outline: none;
-        border-color: var(--myio-energy-primary);
-        box-shadow: 0 0 0 3px rgba(74, 20, 140, 0.1);
+      .myio-energy-chart-container > iframe {
+        width: 100% !important;
+        height: 100% !important;
+        border: none !important;
       }
 
       @media (max-width: 768px) {
@@ -11956,12 +12065,6 @@ ${rangeText}`;
           grid-template-columns: 1fr;
           grid-template-rows: auto 1fr;
         }
-        
-        .myio-energy-header {
-          flex-direction: column;
-          gap: 12px;
-          align-items: stretch;
-        }
       }
     `;
     }