myio-js-library 0.1.62 → 0.1.63

package/dist/index.cjs

@@ -6408,12 +6408,15 @@ var EnergyModalView = class {
     this.setupEventListeners();
   }
   /**
-   * Creates the main modal content structure - clean layout with single header
+   * Creates the main modal content structure - CLEAN LAYOUT, NO BLUR ON MODAL
    */
   createModalContent() {
     const container = document.createElement("div");
-    container.className = "myio-modal-overlay";
     container.id = "dashboard-popup";
+    container.className = "myio-modal-overlay";
+    container.setAttribute("role", "dialog");
+    container.setAttribute("aria-modal", "true");
+    container.setAttribute("aria-labelledby", "modal-title");
     const { device } = this.config.context;
     const identifier = device.attributes.identifier || "SEM IDENTIFICADOR";
     const label = device.label || "SEM ETIQUETA";
@@ -6422,34 +6425,39 @@ var EnergyModalView = class {
         ${this.getModalStyles()}
       </style>
       
-      <div class="myio-modal energy-report-modal" role="dialog" aria-modal="true" aria-labelledby="modal-title">
-        <!-- Single Header Only -->
+      <div class="myio-modal energy-report-modal">
+        <!-- SINGLE HEADER ONLY -->
         <header class="myio-modal__header">
           <h2 id="modal-title">Relat\xF3rio de Energia \u2013 ${identifier} \u2013 ${label}</h2>
           <button id="close-btn" class="myio-modal__close" aria-label="Fechar">\xD7</button>
         </header>
 
-        <!-- Toolbar -->
+        <!-- TOOLBAR -->
         <div class="myio-modal__toolbar">
-          <input type="text" id="date-range" class="myio-input" readonly placeholder="Selecione o per\xEDodo">
-          <div class="toolbar-actions">
-            <button id="load-btn" class="btn btn-ghost">
+          <div class="tb-start">
+            <input type="text" id="energy-date-range" readonly placeholder="Selecione o per\xEDodo">
+            <button id="btn-load" class="btn btn-ghost">
               <span class="myio-spinner" id="load-spinner" style="display: none;"></span>
               Carregar
             </button>
-            <button id="export-csv-btn" class="btn btn-ghost" disabled>Exportar CSV</button>
-            <button id="export-pdf-btn" class="btn btn-premium">Exportar PDF</button>
+          </div>
+          <div class="tb-end">
+            <button id="btn-csv" class="btn btn-ghost" disabled>Exportar CSV</button>
+            <button id="btn-pdf" class="btn btn-premium">Exportar PDF</button>
+            <button id="btn-close" class="btn btn-ghost">Fechar</button>
           </div>
         </div>
 
-        <!-- Error Container -->
+        <!-- ERROR CONTAINER -->
         <div id="energy-error" class="myio-energy-error" style="display: none;">
           <!-- Error messages will be displayed here -->
         </div>
 
-        <!-- Main Chart Container - Full Height -->
+        <!-- MAIN CHART CONTAINER - FULL HEIGHT -->
         <main class="myio-modal__body">
           <div class="chart-iframe-wrap">
+            <iframe id="energy-report-iframe" src="" loading="lazy" title="Energy Chart" style="display: none;">
+            </iframe>
             <div id="energy-chart-container" class="myio-energy-chart-container">
               <div class="myio-loading-state">
                 <div class="myio-spinner"></div>
@@ -6475,6 +6483,11 @@ var EnergyModalView = class {
           <p>${this.getI18nText("loading")}</p>
         </div>
       `;
+      this.chartContainer.style.display = "flex";
+    }
+    const iframe = document.getElementById("energy-report-iframe");
+    if (iframe) {
+      iframe.style.display = "none";
     }
     this.hideError();
   }
@@ -6502,8 +6515,8 @@ var EnergyModalView = class {
     this.hideLoadingState();
     this.hideError();
     this.renderChart(energyData);
-    const exportCsvBtn = document.getElementById("export-csv-btn");
-    const exportPdfBtn = document.getElementById("export-pdf-btn");
+    const exportCsvBtn = document.getElementById("btn-csv");
+    const exportPdfBtn = document.getElementById("btn-pdf");
     if (exportCsvBtn) exportCsvBtn.disabled = false;
     if (exportPdfBtn) exportPdfBtn.disabled = false;
   }
@@ -6552,19 +6565,12 @@ var EnergyModalView = class {
           endDate: chartConfig.endDate,
           granularity: chartConfig.granularity
         });
-        this.chartContainer.innerHTML = "";
-        window.EnergyChartSDK.renderTelemetryChart(this.chartContainer, chartConfig);
-        setTimeout(() => {
-          const iframe = this.chartContainer?.querySelector("iframe");
-          if (iframe) {
-            iframe.id = "energy-report-iframe";
-            iframe.style.width = "100%";
-            iframe.style.height = "100%";
-            iframe.style.border = "0";
-            iframe.style.borderRadius = "12px";
-            iframe.style.background = "#f8f8fb";
-          }
-        }, 100);
+        this.chartContainer.style.display = "none";
+        const iframe = document.getElementById("energy-report-iframe");
+        if (iframe) {
+          iframe.style.display = "block";
+          window.EnergyChartSDK.renderTelemetryChart(iframe.parentElement, chartConfig);
+        }
         return true;
       }
     } catch (error) {
@@ -6598,18 +6604,21 @@ var EnergyModalView = class {
    */
   renderFallbackChart(energyData) {
     if (!this.chartContainer) return;
+    this.chartContainer.style.display = "flex";
+    const iframe = document.getElementById("energy-report-iframe");
+    if (iframe) {
+      iframe.style.display = "none";
+    }
     const chartHTML = `
-      <div class="myio-fallback-chart" style="height: 100%; display: flex; flex-direction: column;">
-        <div style="flex: 1; border: 1px solid #e5e7eb; border-radius: 12px; background: #f8f8fb; display: flex; align-items: center; justify-content: center;">
-          <div style="text-align: center; color: #666;">
-            <div style="font-size: 48px; margin-bottom: 16px;">\u{1F4CA}</div>
-            <h3 style="margin: 0 0 8px 0; color: #2D1458;">Full-Height Energy Chart</h3>
-            <p style="margin: 0; color: #6b7280; line-height: 1.5;">
-              EnergyChartSDK iframe renders here at 100% height<br>
-              Data points: ${energyData.consumption.length}<br>
-              <strong style="color: #2D1458;">Chart takes all available space</strong>
-            </p>
-          </div>
+      <div class="myio-fallback-chart" style="height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;">
+        <div style="text-align: center; color: #666;">
+          <div style="font-size: 48px; margin-bottom: 16px;">\u{1F4CA}</div>
+          <h3 style="margin: 0 0 8px 0; color: #2D1458;">Full-Height Energy Chart</h3>
+          <p style="margin: 0; color: #6b7280; line-height: 1.5;">
+            EnergyChartSDK iframe renders here at 100% height<br>
+            Data points: ${energyData.consumption.length}<br>
+            <strong style="color: #2D1458;">Chart takes all available space</strong>
+          </p>
         </div>
       </div>
     `;
@@ -6644,65 +6653,72 @@ var EnergyModalView = class {
     this.downloadCSV(csvContent, `energy-report-${device.id}-${(/* @__PURE__ */ new Date()).toISOString().split("T")[0]}.csv`);
   }
   /**
-   * Robust PDF export using CDN libraries and iframe handshake
+   * Robust PDF export using UMD libraries and iframe handshake
    */
   async exportToPdf() {
-    if (!this.currentEnergyData || !this.container) {
-      throw new Error("No data available for export");
-    }
     try {
       await this.ensurePdfLibs();
-      const { device } = this.config.context;
-      const identifier = device.attributes.identifier || "SEM_IDENTIFICADOR";
-      const startDate = this.config.params.startDate instanceof Date ? this.config.params.startDate.toISOString().split("T")[0] : this.config.params.startDate;
-      const endDate = this.config.params.endDate instanceof Date ? this.config.params.endDate.toISOString().split("T")[0] : this.config.params.endDate;
-      const filename = `EnergyReport_${identifier}_${startDate}_to_${endDate}.pdf`;
       const iframe = document.getElementById("energy-report-iframe");
-      let pngDataUrl;
-      if (iframe && iframe.contentWindow) {
-        try {
-          const requestId = "energy-report:" + Date.now();
-          pngDataUrl = await this.requestIframePng(iframe, requestId, 1200);
-        } catch (error) {
-          console.warn("[EnergyModalView] Iframe handshake failed, using modal capture:", error);
-          pngDataUrl = await this.captureModalAsPng();
-        }
-      } else {
-        pngDataUrl = await this.captureModalAsPng();
-      }
+      const requestId = "energy-pdf:" + Date.now();
+      const png = await this.requestIframePng(iframe, requestId, 1400).catch(() => null);
       const { jsPDF } = window.jspdf;
       const pdf = new jsPDF({ orientation: "landscape", unit: "px", format: "a4" });
       const W = pdf.internal.pageSize.getWidth();
       pdf.setFillColor(45, 20, 88);
-      pdf.rect(0, 0, W, 50, "F");
+      pdf.rect(0, 0, W, 56, "F");
       pdf.setTextColor(255, 255, 255);
-      pdf.setFontSize(16);
-      pdf.text(`Relat\xF3rio de Energia - ${identifier}`, 20, 32);
-      const img = new Image();
-      img.src = pngDataUrl;
-      await img.decode();
-      const maxW = W - 40;
-      const ratio = img.height / img.width;
-      const drawW = maxW;
-      const drawH = drawW * ratio;
-      pdf.addImage(pngDataUrl, "PNG", 20, 70, drawW, drawH, void 0, "FAST");
-      pdf.save(filename);
+      pdf.setFontSize(18);
+      const title = document.getElementById("modal-title")?.textContent || "Relat\xF3rio de Energia";
+      pdf.text(title, 20, 34);
+      if (png) {
+        const img = new Image();
+        img.src = png;
+        await img.decode();
+        const maxW = W - 40;
+        const ratio = img.height / img.width;
+        const drawW = maxW;
+        const drawH = drawW * ratio;
+        pdf.addImage(png, "PNG", 20, 76, drawW, drawH, void 0, "FAST");
+      } else {
+        const toolbar = document.querySelector(".myio-modal__toolbar");
+        if (toolbar) {
+          const cap = await window.html2canvas(toolbar, {
+            backgroundColor: "#ffffff",
+            scale: Math.min(window.devicePixelRatio || 1, 2)
+          });
+          const dataUrl = cap.toDataURL("image/png", 0.92);
+          pdf.addImage(dataUrl, "PNG", 20, 76, W - 40, (W - 40) * (cap.height / cap.width));
+        }
+        pdf.setTextColor(85, 85, 85);
+        pdf.setFontSize(12);
+        pdf.text("Nota: o gr\xE1fico est\xE1 hospedado em iframe cross-origin; use a vers\xE3o integrada/same-origin para exportar o gr\xE1fico completo.", 20, 70);
+      }
+      const fname = this.buildEnergyFileName();
+      pdf.save(fname);
     } catch (error) {
       console.error("[EnergyModalView] PDF export error:", error);
       throw new Error("Failed to export PDF. Please try again.");
     }
   }
   /**
-   * Ensure PDF libraries are loaded from CDN
+   * Build energy filename
+   */
+  buildEnergyFileName() {
+    const { device } = this.config.context;
+    const identifier = device.attributes.identifier || "SEM_IDENTIFICADOR";
+    const startDate = this.config.params.startDate instanceof Date ? this.config.params.startDate.toISOString().split("T")[0] : this.config.params.startDate;
+    const endDate = this.config.params.endDate instanceof Date ? this.config.params.endDate.toISOString().split("T")[0] : this.config.params.endDate;
+    return `EnergyReport_${identifier}_${startDate}_to_${endDate}.pdf`;
+  }
+  /**
+   * Ensure PDF libraries are loaded from CDN (UMD)
    */
   async ensurePdfLibs() {
-    const needH2C = !("html2canvas" in window);
-    const needPDF = !window.jspdf;
     const tasks = [];
-    if (needH2C) {
+    if (!window.html2canvas) {
       tasks.push(this.loadScript("https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"));
     }
-    if (needPDF) {
+    if (!(window.jspdf && window.jspdf.jsPDF)) {
       tasks.push(this.loadScript("https://cdn.jsdelivr.net/npm/jspdf@2.5.1/dist/jspdf.umd.min.js"));
     }
     await Promise.all(tasks);
@@ -6721,41 +6737,31 @@ var EnergyModalView = class {
     });
   }
   /**
-   * Request PNG from iframe via postMessage
+   * Request PNG from iframe via postMessage (same-origin)
    */
-  requestIframePng(iframe, requestId, targetWidth = 1200) {
+  requestIframePng(iframe, requestId, targetWidth = 1400) {
     return new Promise((resolve, reject) => {
-      const timeout = setTimeout(() => reject(new Error("iframe timeout")), 8e3);
+      const timeout = setTimeout(() => {
+        cleanup();
+        reject(new Error("iframe timeout"));
+      }, 6e3);
+      function cleanup() {
+        clearTimeout(timeout);
+        window.removeEventListener("message", onMessage);
+      }
       function onMessage(ev) {
         if (!ev.data || ev.data.type !== "energy-report:png" || ev.data.requestId !== requestId) return;
-        window.removeEventListener("message", onMessage);
-        clearTimeout(timeout);
+        cleanup();
         resolve(ev.data.dataUrl);
       }
       window.addEventListener("message", onMessage);
-      iframe.contentWindow?.postMessage({
+      iframe?.contentWindow?.postMessage({
         type: "energy-report:render-png",
         requestId,
         targetWidth
       }, "*");
     });
   }
-  /**
-   * Capture modal as PNG fallback
-   */
-  async captureModalAsPng() {
-    const modalElement = this.container?.querySelector(".energy-report-modal");
-    if (!modalElement) {
-      throw new Error("Modal element not found");
-    }
-    const canvas = await window.html2canvas(modalElement, {
-      scale: Math.min(window.devicePixelRatio || 1, 2),
-      backgroundColor: "#ffffff",
-      useCORS: true,
-      allowTaint: true
-    });
-    return canvas.toDataURL("image/png", 0.92);
-  }
   /**
    * Downloads CSV file
    */
@@ -6778,9 +6784,9 @@ var EnergyModalView = class {
    */
   async loadData() {
     if (this.isLoading) return;
-    const loadBtn = document.getElementById("load-btn");
-    const exportCsvBtn = document.getElementById("export-csv-btn");
-    const exportPdfBtn = document.getElementById("export-pdf-btn");
+    const loadBtn = document.getElementById("btn-load");
+    const exportCsvBtn = document.getElementById("btn-csv");
+    const exportPdfBtn = document.getElementById("btn-pdf");
     const spinner = document.getElementById("load-spinner");
     if (!this.dateRangePicker) {
       this.showError("Seletor de data n\xE3o inicializado");
@@ -6814,11 +6820,12 @@ var EnergyModalView = class {
    * Sets up event listeners
    */
   async setupEventListeners() {
-    const exportCsvBtn = document.getElementById("export-csv-btn");
-    const exportPdfBtn = document.getElementById("export-pdf-btn");
+    const exportCsvBtn = document.getElementById("btn-csv");
+    const exportPdfBtn = document.getElementById("btn-pdf");
     const closeBtn = document.getElementById("close-btn");
-    const loadBtn = document.getElementById("load-btn");
-    const dateRangeInput = document.getElementById("date-range");
+    const closeBtnToolbar = document.getElementById("btn-close");
+    const loadBtn = document.getElementById("btn-load");
+    const dateRangeInput = document.getElementById("energy-date-range");
     if (exportCsvBtn) {
       exportCsvBtn.addEventListener("click", () => {
         try {
@@ -6852,6 +6859,11 @@ var EnergyModalView = class {
         this.modal.close();
       });
     }
+    if (closeBtnToolbar) {
+      closeBtnToolbar.addEventListener("click", () => {
+        this.modal.close();
+      });
+    }
     if (loadBtn) {
       loadBtn.addEventListener("click", () => this.loadData());
     }
@@ -6869,20 +6881,23 @@ var EnergyModalView = class {
     } catch (error) {
       console.warn("DateRangePicker initialization failed, using fallback:", error);
     }
-    setTimeout(() => {
-      const wrap = document.querySelector(".chart-iframe-wrap");
-      if (wrap) {
-        wrap.style.height = "calc(90vh - 120px)";
-      }
-    }, 100);
+    this.applyDynamicHeights();
+  }
+  /**
+   * Apply dynamic heights to prevent iframe squashing
+   */
+  applyDynamicHeights() {
+    const modal = document.querySelector(".energy-report-modal");
+    const body = document.querySelector(".myio-modal__body");
+    if (!modal || !body) return;
+    body.style.minHeight = "0px";
   }
   /**
    * Helper methods for hiding/showing sections
    */
   hideLoadingState() {
-    const loadingState = this.chartContainer?.querySelector(".myio-loading-state");
-    if (loadingState) {
-      loadingState.remove();
+    if (this.chartContainer) {
+      this.chartContainer.style.display = "none";
     }
   }
   hideError() {
@@ -6899,39 +6914,47 @@ var EnergyModalView = class {
     return i18n[key] || DEFAULT_I18N2[key];
   }
   /**
-   * Gets modal styles with MYIO premium palette and clean layout
+   * Gets modal styles - FIXED BLUR ISSUE + PROPER LAYOUT
    */
   getModalStyles() {
     return `
-      /* Overlay + blur */
+      /* === Overlay: blur ONLY the background, NOT the modal === */
       .myio-modal-overlay {
         position: fixed; 
         inset: 0; 
-        z-index: 9999;
-        background: rgba(45,20,88,0.35); 
-        backdrop-filter: blur(4px);
+        z-index: 9998;
+        /* Use the requested brand tint but semi-transparent */
+        background: rgba(150,132,181,0.35);           /* #9684B5 @ 35% */
+        backdrop-filter: blur(6px);                    /* blur the page behind */
         display: grid; 
         place-items: center;
       }
 
-      /* Fullscreen-ish modal */
-      .energy-report-modal.myio-modal {
-        width: 96vw; 
-        max-width: 96vw; 
-        max-height: 90vh;
+      /* Modal sits ABOVE overlay */
+      .myio-modal {
+        position: relative; 
+        z-index: 9999;            /* ensure not blurred */
         background: #fff; 
+        color: #111;
         border-radius: 16px; 
         overflow: hidden;
+        box-shadow: 0 24px 64px rgba(0,0,0,.25);
+      }
+
+      /* Fullscreen-ish layout */
+      .energy-report-modal {
+        width: 96vw; 
+        max-width: 96vw;
+        max-height: calc(100vh - 48px);
         display: flex; 
-        flex-direction: column; 
-        box-shadow: 0 24px 64px rgba(0,0,0,0.25);
+        flex-direction: column;
       }
 
-      /* Single header only */
+      /* Header */
       .myio-modal__header {
         background: #2D1458; 
         color: #fff;
-        padding: 16px 20px; 
+        padding: 16px 20px;
         display: flex; 
         align-items: center; 
         justify-content: space-between;
@@ -6962,29 +6985,29 @@ var EnergyModalView = class {
       /* Toolbar */
       .myio-modal__toolbar {
         display: flex; 
-        gap: 12px; 
         align-items: center; 
         justify-content: space-between;
-        padding: 12px 16px; 
-        border-bottom: 1px solid rgba(45,20,88,0.12);
+        gap: 12px; 
+        padding: 12px 16px;
+        border-bottom: 1px solid rgba(45,20,88,.12);
         flex-shrink: 0;
       }
 
-      .toolbar-actions {
+      .tb-start, .tb-end {
         display: flex;
         align-items: center;
         gap: 12px;
       }
 
-      /* Body grows; iframe fills */
+      /* Body must grow; enable internal scroll only */
       .myio-modal__body {
         flex: 1 1 auto; 
-        min-height: 0; 
-        overflow: auto; 
+        min-height: 0;                /* critical to avoid squashing */
         padding: 12px 16px 16px;
+        overflow: auto;
       }
 
-      /* Let the iframe claim all remaining height */
+      /* Chart area fills the remaining height */
       .chart-iframe-wrap {
         flex: 1 1 auto; 
         min-height: 0; 
@@ -6995,14 +7018,20 @@ var EnergyModalView = class {
       .chart-iframe-wrap iframe,
       .myio-energy-chart-container {
         flex: 1 1 auto; 
-        min-height: 0; 
+        min-height: 0;
         width: 100%; 
         height: 100%;
         border: 0; 
-        border-radius: 12px; 
+        border-radius: 12px;
         background: #f8f8fb;
       }
 
+      .myio-energy-chart-container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
       /* Premium buttons */
       .btn {
         padding: 8px 12px; 
@@ -7015,6 +7044,7 @@ var EnergyModalView = class {
         display: flex;
         align-items: center;
         gap: 4px;
+        background: transparent;
       }
 
       .btn:disabled {
@@ -7024,8 +7054,8 @@ var EnergyModalView = class {
 
       .btn-premium {
         background: #2D1458; 
-        color: #fff; 
-        border: 1px solid rgba(255,255,255,0.08);
+        color: #fff;
+        border: 1px solid rgba(255,255,255,.08);
       }
 
       .btn-premium:hover:not(:disabled) { 
@@ -7033,7 +7063,7 @@ var EnergyModalView = class {
       }
 
       .btn-premium:focus { 
-        outline: 3px solid rgba(45,20,88,0.35); 
+        outline: 3px solid rgba(45,20,88,.35); 
         outline-offset: 2px; 
       }
 
@@ -7048,7 +7078,7 @@ var EnergyModalView = class {
       }
 
       /* Input styling */
-      .myio-input {
+      #energy-date-range {
         padding: 8px 12px;
         border: 1px solid rgba(45,20,88,0.12);
         border-radius: 8px;
@@ -7058,7 +7088,7 @@ var EnergyModalView = class {
         width: 300px;
       }
 
-      .myio-input:focus {
+      #energy-date-range:focus {
         outline: none;
         border-color: #2D1458;
         box-shadow: 0 0 0 3px rgba(45,20,88,0.1);
@@ -7121,11 +7151,11 @@ var EnergyModalView = class {
           gap: 8px;
         }
         
-        .toolbar-actions {
+        .tb-start, .tb-end {
           justify-content: center;
         }
 
-        .myio-input {
+        #energy-date-range {
           width: 100%;
         }
       }