myio-js-library 0.1.557 → 0.1.558

package/dist/index.cjs

@@ -908,7 +908,7 @@ module.exports = __toCommonJS(src_exports);
 // package.json
 var package_default = {
   name: "myio-js-library",
-  version: "0.1.557",
+  version: "0.1.558",
   description: "A clean, standalone JS SDK for MYIO projects",
   license: "MIT",
   repository: "github:gh-myio/myio-js-library",
@@ -12855,6 +12855,26 @@ var CSS_STRING = `
   margin-left: 4px;
 }
 
+/* Consumo ainda carregando (spinner no lugar do valor) */
+.myio-ho-card__value.is-loading .num {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--myio-muted, #9ca3af);
+}
+.myio-ho-card__value-spinner {
+  width: 14px;
+  height: 14px;
+  border: 2px solid rgba(124, 58, 237, 0.2);
+  border-top-color: var(--myio-brand-700, #7c3aed);
+  border-radius: 50%;
+  animation: myio-consumption-spin 0.8s linear infinite;
+  flex-shrink: 0;
+}
+@keyframes myio-consumption-spin { to { transform: rotate(360deg); } }
+
 /* Efficiency bar */
 .myio-ho-card__eff {
   display: flex;
@@ -16527,7 +16547,20 @@ function paint(root, state6) {
   const primaryValue = formatValueByDomain(entityObject.val, entityObject.domain);
   const numSpan = root.querySelector(".myio-ho-card__value .num");
   const unitSpan = root.querySelector(".myio-ho-card__value .unit");
-  numSpan.textContent = primaryValue;
+  const valueBox = root.querySelector(".myio-ho-card__value");
+  const dataLoading = !!entityObject.dataLoading && entityObject.domain !== "temperature";
+  if (valueBox) {
+    valueBox.classList.toggle("is-loading", dataLoading);
+    if (dataLoading) valueBox.setAttribute("aria-busy", "true");
+    else valueBox.removeAttribute("aria-busy");
+  }
+  if (dataLoading) {
+    numSpan.innerHTML = '<span class="myio-ho-card__value-spinner" aria-hidden="true"></span>Carregando\u2026';
+    numSpan.title = "Carregando consumo do per\xEDodo";
+  } else {
+    numSpan.textContent = primaryValue;
+    numSpan.removeAttribute("title");
+  }
   const barContainer = root.querySelector(".bar");
   const effContainer = root.querySelector(".myio-ho-card__eff");
   if (state6.enableSelection) {
@@ -71709,6 +71742,25 @@ var HeaderView = class {
   transition: color 0.2s ease;
 }
 
+/* Consumo ainda carregando */
+.${HEADER_CSS_PREFIX}-kpi-loading {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 1rem;
+  font-weight: 600;
+  opacity: 0.85;
+}
+.${HEADER_CSS_PREFIX}-kpi-spinner {
+  width: 18px;
+  height: 18px;
+  border: 2.5px solid rgba(255, 255, 255, 0.3);
+  border-top-color: currentColor;
+  border-radius: 50%;
+  animation: myio-consumption-spin 0.8s linear infinite;
+}
+@keyframes myio-consumption-spin { to { transform: rotate(360deg); } }
+
 .${HEADER_CSS_PREFIX}-card__subrow {
   display: flex;
   align-items: center;
@@ -72147,7 +72199,28 @@ var HeaderView = class {
   /**
    * Update energy card
    */
+  /** Spinner nos KPIs de consumo (energia e água) enquanto o período carrega */
+  setConsumptionLoading(loading) {
+    if (!loading) {
+      [this.energyKpiEl, this.waterKpiEl].forEach((el2) => {
+        if (el2?.querySelector(`.${HEADER_CSS_PREFIX}-kpi-loading`)) el2.textContent = "-";
+      });
+      return;
+    }
+    const html = `<span class="${HEADER_CSS_PREFIX}-kpi-loading" aria-busy="true"><span class="${HEADER_CSS_PREFIX}-kpi-spinner" aria-hidden="true"></span>Carregando\u2026</span>`;
+    if (this.energyKpiEl) this.energyKpiEl.innerHTML = html;
+    if (this.waterKpiEl) this.waterKpiEl.innerHTML = html;
+    if (this.energyTrendEl) this.energyTrendEl.textContent = "";
+    if (this.waterTrendEl) this.waterTrendEl.textContent = "";
+  }
   updateEnergyCard(data) {
+    if (data.loading) {
+      if (this.energyKpiEl) {
+        this.energyKpiEl.innerHTML = `<span class="${HEADER_CSS_PREFIX}-kpi-loading" aria-busy="true"><span class="${HEADER_CSS_PREFIX}-kpi-spinner" aria-hidden="true"></span>Carregando\u2026</span>`;
+      }
+      if (this.energyTrendEl) this.energyTrendEl.textContent = "";
+      return;
+    }
     if (this.energyKpiEl) {
       if (data.isFiltered && data.unfilteredTotal > 0) {
         const filteredFormatted = this.formatEnergy(data.customerTotal);
@@ -72196,6 +72269,13 @@ var HeaderView = class {
    * Update water card
    */
   updateWaterCard(data) {
+    if (data.loading) {
+      if (this.waterKpiEl) {
+        this.waterKpiEl.innerHTML = `<span class="${HEADER_CSS_PREFIX}-kpi-loading" aria-busy="true"><span class="${HEADER_CSS_PREFIX}-kpi-spinner" aria-hidden="true"></span>Carregando\u2026</span>`;
+      }
+      if (this.waterTrendEl) this.waterTrendEl.textContent = "";
+      return;
+    }
     if (this.waterKpiEl) {
       if (data.isFiltered && data.unfilteredTotal > 0) {
         const filteredFormatted = this.formatWater(data.filteredTotal);
@@ -73181,6 +73261,9 @@ function createHeaderComponent(params) {
     tooltipData.temperature = data;
     view.updateTemperatureCard(data);
   }
+  function setConsumptionLoading(loading) {
+    view.setConsumptionLoading(loading);
+  }
   function updateWaterKPI(data) {
     tooltipData.water = data;
     view.updateWaterCard(data);
@@ -73236,6 +73319,7 @@ function createHeaderComponent(params) {
     updateEnergyKPI,
     updateTemperatureKPI,
     updateWaterKPI,
+    setConsumptionLoading,
     updateTooltipData,
     // Shopping/Filter
     updateShoppings,
@@ -123722,6 +123806,20 @@ var HEADER_DEVICES_GRID_STYLES = `
   body.light-mode .telemetry-grid-wrap.maximized .telemetry-grid-header {
     background: #f8fafc;
   }
+
+/* Consumo ainda carregando */
+.hdg-value-spinner {
+  display: inline-block;
+  width: 13px;
+  height: 13px;
+  margin-right: 6px;
+  vertical-align: -2px;
+  border: 2px solid rgba(124, 58, 237, 0.2);
+  border-top-color: var(--myio-brand-700, #7c3aed);
+  border-radius: 50%;
+  animation: myio-consumption-spin 0.8s linear infinite;
+}
+@keyframes myio-consumption-spin { to { transform: rotate(360deg); } }
 `;
 function injectHeaderDevicesGridStyles() {
   const styleId = "hdg-styles";
@@ -123739,14 +123837,15 @@ var DOMAIN_CONFIG7 = {
     consumptionLabel: "Consumo Total",
     zeroLabel: "Sem Consumo",
     unit: "kWh",
-    formatValue: (value) => formatEnergy(value, void 0, 2)
+    // 3 casas: mesmo padrão do dashboard de shopping (RFC-0108, measurementSettings default)
+    formatValue: (value) => formatEnergy(value, void 0, 3)
   },
   water: {
     totalLabel: "Total Hidr\xF4metros",
     consumptionLabel: "Consumo Total",
     zeroLabel: "Sem Consumo",
     unit: "m\xB3",
-    formatValue: (value) => formatWater(value)
+    formatValue: (value) => `${(Number(value) || 0).toLocaleString("pt-BR", { minimumFractionDigits: 3, maximumFractionDigits: 3 })} m\xB3`
   },
   temperature: {
     totalLabel: "Total Sensores",
@@ -123914,6 +124013,16 @@ var HeaderDevicesGridView = class {
     const percentage = total > 0 ? (online / total * 100).toFixed(1) : "0.0";
     connectivityEl.textContent = `${online}/${total} (${percentage}%)`;
     totalEl.textContent = total.toString();
+    if (stats.loading) {
+      const spin = '<span class="hdg-value-spinner" aria-hidden="true"></span>';
+      consumptionEl.innerHTML = `${spin}Carregando\u2026`;
+      zeroEl.innerHTML = spin;
+      consumptionEl.setAttribute("aria-busy", "true");
+      zeroEl.setAttribute("aria-busy", "true");
+      return;
+    }
+    consumptionEl.removeAttribute("aria-busy");
+    zeroEl.removeAttribute("aria-busy");
     consumptionEl.textContent = this.domainConfig.formatValue(consumption);
     zeroEl.textContent = zeroCount.toString();
   }
@@ -124020,7 +124129,8 @@ var HeaderDevicesGridController = class {
       online,
       total: devices.length,
       consumption: displayValue,
-      zeroCount
+      zeroCount,
+      loading: this.domain !== "temperature" && devices.some((d) => d.dataLoading)
     });
   }
   setThemeMode(mode) {

package/dist/index.d.cts

@@ -7688,6 +7688,8 @@ interface ShoppingEnergy {
  * Energy KPI data
  */
 interface EnergyKPI {
+    /** Consumo do período ainda carregando → spinner no KPI */
+    loading?: boolean;
     /** Total consumption for selected customers */
     customerTotal: number;
     /** Total consumption before filtering */
@@ -7758,6 +7760,8 @@ interface ShoppingWater {
  * Water KPI data
  */
 interface WaterKPI {
+    /** Consumo do período ainda carregando → spinner no KPI */
+    loading?: boolean;
     /** Total consumption for selected customers */
     filteredTotal: number;
     /** Total consumption before filtering */
@@ -7939,6 +7943,8 @@ interface HeaderComponentInstance {
     updateTemperatureKPI: (data: TemperatureKPI) => void;
     /** Update water KPI */
     updateWaterKPI: (data: WaterKPI) => void;
+    /** Spinner nos KPIs de consumo (energia/água) enquanto o período carrega */
+    setConsumptionLoading: (loading: boolean) => void;
     /** Update tooltip data for a specific card */
     updateTooltipData: (cardType: CardType, data: unknown) => void;
     /** Update available shoppings */
@@ -8227,6 +8233,8 @@ declare class HeaderView {
     /**
      * Update energy card
      */
+    /** Spinner nos KPIs de consumo (energia e água) enquanto o período carrega */
+    setConsumptionLoading(loading: boolean): void;
     updateEnergyCard(data: EnergyKPI): void;
     /**
      * Update temperature card
@@ -17475,6 +17483,8 @@ interface HeaderStats {
     total: number;
     consumption: number;
     zeroCount: number;
+    /** Consumo ainda carregando → spinner em Consumo Total / Sem Consumo */
+    loading?: boolean;
 }
 interface HeaderLabels {
     connectivity?: string;
@@ -17509,6 +17519,8 @@ interface HeaderDevicesGridInstance {
     destroy: () => void;
 }
 interface HeaderDevice {
+    /** Consumo do período ainda não chegou (HO: /summary em andamento) */
+    dataLoading?: boolean;
     entityId?: string;
     ingestionId?: string;
     deviceStatus?: string;
@@ -17586,7 +17598,7 @@ declare class HeaderDevicesGridController implements HeaderDevicesGridInstance {
  * CSS-in-JS styles for the stats header
  * FIEL ao showcase/telemetry-grid/index.html
  */
-declare const HEADER_DEVICES_GRID_STYLES = "\n  /* RFC-0125: HeaderDevicesGrid Component - FIEL ao TELEMETRY widget */\n  .hdg-header {\n    display: flex !important;\n    flex-direction: row !important;\n    align-items: stretch;\n    gap: 0;\n    padding: 0;\n    background: var(--card-bg, #1e293b);\n    border-radius: 8px;\n    margin-bottom: 12px;\n    overflow: hidden;\n  }\n\n  .hdg-header .stat-item {\n    display: flex !important;\n    flex-direction: column !important;\n    gap: 2px;\n    flex: 1;\n    min-width: 0;\n    padding: 12px 16px;\n    border-right: 1px solid var(--card-bd, #334155);\n  }\n\n  .hdg-header .stat-item:last-of-type {\n    border-right: none;\n  }\n\n  .hdg-header .stat-label {\n    font-size: 11px;\n    color: var(--ink-2, #94a3b8);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .hdg-header .stat-value {\n    font-size: 18px;\n    font-weight: 700;\n    color: var(--ink-1, #f1f5f9);\n  }\n\n  /* Highlight com background de destaque e barras em ambos os lados */\n  .hdg-header .stat-item.highlight {\n    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.25) 100%);\n    border-left: 3px solid var(--telemetry-primary, #f59e0b);\n    border-right: 3px solid var(--telemetry-primary, #f59e0b);\n    position: relative;\n  }\n\n  .hdg-header .stat-item.highlight .stat-value {\n    color: var(--telemetry-primary, #f59e0b);\n    font-size: 20px;\n  }\n\n  /* Ajuste para o item apos o highlight nao ter borda dupla */\n  .hdg-header .stat-item.highlight + .stat-item {\n    border-left: none;\n  }\n\n  .hdg-header .filter-actions {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 12px;\n    border-left: 1px solid var(--card-bd, #334155);\n  }\n\n  .hdg-header .search-wrap {\n    display: none;\n    overflow: hidden;\n    transition: all 0.2s ease;\n  }\n\n  .hdg-header .search-wrap.active {\n    display: block;\n  }\n\n  .hdg-header .search-wrap input {\n    padding: 6px 12px;\n    border: 1px solid var(--card-bd, #334155);\n    border-radius: 6px;\n    background: transparent;\n    color: var(--ink-1, #f1f5f9);\n    font-size: 13px;\n    width: 180px;\n  }\n\n  .hdg-header .search-wrap input:focus {\n    outline: none;\n    border-color: var(--telemetry-primary, #f59e0b);\n  }\n\n  .hdg-header .icon-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 36px;\n    height: 36px;\n    border: 1px solid var(--card-bd, #334155);\n    border-radius: 6px;\n    background: transparent;\n    color: var(--ink-2, #94a3b8);\n    cursor: pointer;\n    transition: all 0.15s ease;\n  }\n\n  .hdg-header .icon-btn:hover {\n    background: var(--telemetry-primary, #f59e0b);\n    border-color: var(--telemetry-primary, #f59e0b);\n    color: white;\n  }\n\n  .hdg-header .icon-btn svg {\n    width: 18px;\n    height: 18px;\n    fill: currentColor;\n    display: block;\n  }\n\n  .hdg-header .icon-btn .icon-minimize {\n    display: none;\n  }\n\n  .hdg-header .icon-btn .icon-maximize {\n    display: block;\n  }\n\n  /* Light mode */\n  .hdg-header--light {\n    background: #ffffff;\n    border: 1px solid #e2e8f0;\n  }\n\n  .hdg-header--light .stat-item {\n    border-color: #e2e8f0;\n  }\n\n  .hdg-header--light .stat-item.highlight {\n    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(245, 158, 11, 0.2) 100%);\n    border-left-color: var(--telemetry-primary, #f59e0b);\n    border-right-color: var(--telemetry-primary, #f59e0b);\n  }\n\n  .hdg-header--light .stat-label {\n    color: #64748b;\n  }\n\n  .hdg-header--light .stat-value {\n    color: #1e293b;\n  }\n\n  .hdg-header--light .filter-actions {\n    border-color: #e2e8f0;\n  }\n\n  .hdg-header--light .search-wrap input {\n    background: #f1f5f9;\n    border-color: #cbd5e1;\n    color: #1e293b;\n  }\n\n  .hdg-header--light .icon-btn {\n    border-color: #cbd5e1;\n    color: #64748b;\n  }\n\n  /* Maximized state for parent container */\n  .telemetry-grid-wrap.maximized {\n    position: fixed !important;\n    inset: 0 !important;\n    z-index: 99999 !important;\n    width: 100vw !important;\n    height: 100vh !important;\n    background: var(--card-bg, #0f172a) !important;\n    border-radius: 0 !important;\n    overflow: auto !important;\n    padding: 16px !important;\n  }\n\n  .telemetry-grid-wrap.maximized .telemetry-grid-header {\n    position: sticky;\n    top: 0;\n    z-index: 10;\n    background: var(--card-bg, #0f172a);\n    padding-bottom: 12px;\n  }\n\n  .telemetry-grid-wrap.maximized .telemetry-cards-grid {\n    max-height: none !important;\n    overflow: visible !important;\n  }\n\n  .telemetry-grid-wrap.maximized .hdg-header .icon-btn .icon-maximize {\n    display: none;\n  }\n\n  .telemetry-grid-wrap.maximized .hdg-header .icon-btn .icon-minimize {\n    display: block;\n  }\n\n  /* Light mode maximized */\n  body.light-mode .telemetry-grid-wrap.maximized {\n    background: #f8fafc !important;\n  }\n\n  body.light-mode .telemetry-grid-wrap.maximized .telemetry-grid-header {\n    background: #f8fafc;\n  }\n";
+declare const HEADER_DEVICES_GRID_STYLES = "\n  /* RFC-0125: HeaderDevicesGrid Component - FIEL ao TELEMETRY widget */\n  .hdg-header {\n    display: flex !important;\n    flex-direction: row !important;\n    align-items: stretch;\n    gap: 0;\n    padding: 0;\n    background: var(--card-bg, #1e293b);\n    border-radius: 8px;\n    margin-bottom: 12px;\n    overflow: hidden;\n  }\n\n  .hdg-header .stat-item {\n    display: flex !important;\n    flex-direction: column !important;\n    gap: 2px;\n    flex: 1;\n    min-width: 0;\n    padding: 12px 16px;\n    border-right: 1px solid var(--card-bd, #334155);\n  }\n\n  .hdg-header .stat-item:last-of-type {\n    border-right: none;\n  }\n\n  .hdg-header .stat-label {\n    font-size: 11px;\n    color: var(--ink-2, #94a3b8);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .hdg-header .stat-value {\n    font-size: 18px;\n    font-weight: 700;\n    color: var(--ink-1, #f1f5f9);\n  }\n\n  /* Highlight com background de destaque e barras em ambos os lados */\n  .hdg-header .stat-item.highlight {\n    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.25) 100%);\n    border-left: 3px solid var(--telemetry-primary, #f59e0b);\n    border-right: 3px solid var(--telemetry-primary, #f59e0b);\n    position: relative;\n  }\n\n  .hdg-header .stat-item.highlight .stat-value {\n    color: var(--telemetry-primary, #f59e0b);\n    font-size: 20px;\n  }\n\n  /* Ajuste para o item apos o highlight nao ter borda dupla */\n  .hdg-header .stat-item.highlight + .stat-item {\n    border-left: none;\n  }\n\n  .hdg-header .filter-actions {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 12px;\n    border-left: 1px solid var(--card-bd, #334155);\n  }\n\n  .hdg-header .search-wrap {\n    display: none;\n    overflow: hidden;\n    transition: all 0.2s ease;\n  }\n\n  .hdg-header .search-wrap.active {\n    display: block;\n  }\n\n  .hdg-header .search-wrap input {\n    padding: 6px 12px;\n    border: 1px solid var(--card-bd, #334155);\n    border-radius: 6px;\n    background: transparent;\n    color: var(--ink-1, #f1f5f9);\n    font-size: 13px;\n    width: 180px;\n  }\n\n  .hdg-header .search-wrap input:focus {\n    outline: none;\n    border-color: var(--telemetry-primary, #f59e0b);\n  }\n\n  .hdg-header .icon-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 36px;\n    height: 36px;\n    border: 1px solid var(--card-bd, #334155);\n    border-radius: 6px;\n    background: transparent;\n    color: var(--ink-2, #94a3b8);\n    cursor: pointer;\n    transition: all 0.15s ease;\n  }\n\n  .hdg-header .icon-btn:hover {\n    background: var(--telemetry-primary, #f59e0b);\n    border-color: var(--telemetry-primary, #f59e0b);\n    color: white;\n  }\n\n  .hdg-header .icon-btn svg {\n    width: 18px;\n    height: 18px;\n    fill: currentColor;\n    display: block;\n  }\n\n  .hdg-header .icon-btn .icon-minimize {\n    display: none;\n  }\n\n  .hdg-header .icon-btn .icon-maximize {\n    display: block;\n  }\n\n  /* Light mode */\n  .hdg-header--light {\n    background: #ffffff;\n    border: 1px solid #e2e8f0;\n  }\n\n  .hdg-header--light .stat-item {\n    border-color: #e2e8f0;\n  }\n\n  .hdg-header--light .stat-item.highlight {\n    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(245, 158, 11, 0.2) 100%);\n    border-left-color: var(--telemetry-primary, #f59e0b);\n    border-right-color: var(--telemetry-primary, #f59e0b);\n  }\n\n  .hdg-header--light .stat-label {\n    color: #64748b;\n  }\n\n  .hdg-header--light .stat-value {\n    color: #1e293b;\n  }\n\n  .hdg-header--light .filter-actions {\n    border-color: #e2e8f0;\n  }\n\n  .hdg-header--light .search-wrap input {\n    background: #f1f5f9;\n    border-color: #cbd5e1;\n    color: #1e293b;\n  }\n\n  .hdg-header--light .icon-btn {\n    border-color: #cbd5e1;\n    color: #64748b;\n  }\n\n  /* Maximized state for parent container */\n  .telemetry-grid-wrap.maximized {\n    position: fixed !important;\n    inset: 0 !important;\n    z-index: 99999 !important;\n    width: 100vw !important;\n    height: 100vh !important;\n    background: var(--card-bg, #0f172a) !important;\n    border-radius: 0 !important;\n    overflow: auto !important;\n    padding: 16px !important;\n  }\n\n  .telemetry-grid-wrap.maximized .telemetry-grid-header {\n    position: sticky;\n    top: 0;\n    z-index: 10;\n    background: var(--card-bg, #0f172a);\n    padding-bottom: 12px;\n  }\n\n  .telemetry-grid-wrap.maximized .telemetry-cards-grid {\n    max-height: none !important;\n    overflow: visible !important;\n  }\n\n  .telemetry-grid-wrap.maximized .hdg-header .icon-btn .icon-maximize {\n    display: none;\n  }\n\n  .telemetry-grid-wrap.maximized .hdg-header .icon-btn .icon-minimize {\n    display: block;\n  }\n\n  /* Light mode maximized */\n  body.light-mode .telemetry-grid-wrap.maximized {\n    background: #f8fafc !important;\n  }\n\n  body.light-mode .telemetry-grid-wrap.maximized .telemetry-grid-header {\n    background: #f8fafc;\n  }\n\n/* Consumo ainda carregando */\n.hdg-value-spinner {\n  display: inline-block;\n  width: 13px;\n  height: 13px;\n  margin-right: 6px;\n  vertical-align: -2px;\n  border: 2px solid rgba(124, 58, 237, 0.2);\n  border-top-color: var(--myio-brand-700, #7c3aed);\n  border-radius: 50%;\n  animation: myio-consumption-spin 0.8s linear infinite;\n}\n@keyframes myio-consumption-spin { to { transform: rotate(360deg); } }\n";
 declare function injectHeaderDevicesGridStyles(): void;
 
 /**

package/dist/index.d.ts

@@ -7688,6 +7688,8 @@ interface ShoppingEnergy {
  * Energy KPI data
  */
 interface EnergyKPI {
+    /** Consumo do período ainda carregando → spinner no KPI */
+    loading?: boolean;
     /** Total consumption for selected customers */
     customerTotal: number;
     /** Total consumption before filtering */
@@ -7758,6 +7760,8 @@ interface ShoppingWater {
  * Water KPI data
  */
 interface WaterKPI {
+    /** Consumo do período ainda carregando → spinner no KPI */
+    loading?: boolean;
     /** Total consumption for selected customers */
     filteredTotal: number;
     /** Total consumption before filtering */
@@ -7939,6 +7943,8 @@ interface HeaderComponentInstance {
     updateTemperatureKPI: (data: TemperatureKPI) => void;
     /** Update water KPI */
     updateWaterKPI: (data: WaterKPI) => void;
+    /** Spinner nos KPIs de consumo (energia/água) enquanto o período carrega */
+    setConsumptionLoading: (loading: boolean) => void;
     /** Update tooltip data for a specific card */
     updateTooltipData: (cardType: CardType, data: unknown) => void;
     /** Update available shoppings */
@@ -8227,6 +8233,8 @@ declare class HeaderView {
     /**
      * Update energy card
      */
+    /** Spinner nos KPIs de consumo (energia e água) enquanto o período carrega */
+    setConsumptionLoading(loading: boolean): void;
     updateEnergyCard(data: EnergyKPI): void;
     /**
      * Update temperature card
@@ -17475,6 +17483,8 @@ interface HeaderStats {
     total: number;
     consumption: number;
     zeroCount: number;
+    /** Consumo ainda carregando → spinner em Consumo Total / Sem Consumo */
+    loading?: boolean;
 }
 interface HeaderLabels {
     connectivity?: string;
@@ -17509,6 +17519,8 @@ interface HeaderDevicesGridInstance {
     destroy: () => void;
 }
 interface HeaderDevice {
+    /** Consumo do período ainda não chegou (HO: /summary em andamento) */
+    dataLoading?: boolean;
     entityId?: string;
     ingestionId?: string;
     deviceStatus?: string;
@@ -17586,7 +17598,7 @@ declare class HeaderDevicesGridController implements HeaderDevicesGridInstance {
  * CSS-in-JS styles for the stats header
  * FIEL ao showcase/telemetry-grid/index.html
  */
-declare const HEADER_DEVICES_GRID_STYLES = "\n  /* RFC-0125: HeaderDevicesGrid Component - FIEL ao TELEMETRY widget */\n  .hdg-header {\n    display: flex !important;\n    flex-direction: row !important;\n    align-items: stretch;\n    gap: 0;\n    padding: 0;\n    background: var(--card-bg, #1e293b);\n    border-radius: 8px;\n    margin-bottom: 12px;\n    overflow: hidden;\n  }\n\n  .hdg-header .stat-item {\n    display: flex !important;\n    flex-direction: column !important;\n    gap: 2px;\n    flex: 1;\n    min-width: 0;\n    padding: 12px 16px;\n    border-right: 1px solid var(--card-bd, #334155);\n  }\n\n  .hdg-header .stat-item:last-of-type {\n    border-right: none;\n  }\n\n  .hdg-header .stat-label {\n    font-size: 11px;\n    color: var(--ink-2, #94a3b8);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .hdg-header .stat-value {\n    font-size: 18px;\n    font-weight: 700;\n    color: var(--ink-1, #f1f5f9);\n  }\n\n  /* Highlight com background de destaque e barras em ambos os lados */\n  .hdg-header .stat-item.highlight {\n    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.25) 100%);\n    border-left: 3px solid var(--telemetry-primary, #f59e0b);\n    border-right: 3px solid var(--telemetry-primary, #f59e0b);\n    position: relative;\n  }\n\n  .hdg-header .stat-item.highlight .stat-value {\n    color: var(--telemetry-primary, #f59e0b);\n    font-size: 20px;\n  }\n\n  /* Ajuste para o item apos o highlight nao ter borda dupla */\n  .hdg-header .stat-item.highlight + .stat-item {\n    border-left: none;\n  }\n\n  .hdg-header .filter-actions {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 12px;\n    border-left: 1px solid var(--card-bd, #334155);\n  }\n\n  .hdg-header .search-wrap {\n    display: none;\n    overflow: hidden;\n    transition: all 0.2s ease;\n  }\n\n  .hdg-header .search-wrap.active {\n    display: block;\n  }\n\n  .hdg-header .search-wrap input {\n    padding: 6px 12px;\n    border: 1px solid var(--card-bd, #334155);\n    border-radius: 6px;\n    background: transparent;\n    color: var(--ink-1, #f1f5f9);\n    font-size: 13px;\n    width: 180px;\n  }\n\n  .hdg-header .search-wrap input:focus {\n    outline: none;\n    border-color: var(--telemetry-primary, #f59e0b);\n  }\n\n  .hdg-header .icon-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 36px;\n    height: 36px;\n    border: 1px solid var(--card-bd, #334155);\n    border-radius: 6px;\n    background: transparent;\n    color: var(--ink-2, #94a3b8);\n    cursor: pointer;\n    transition: all 0.15s ease;\n  }\n\n  .hdg-header .icon-btn:hover {\n    background: var(--telemetry-primary, #f59e0b);\n    border-color: var(--telemetry-primary, #f59e0b);\n    color: white;\n  }\n\n  .hdg-header .icon-btn svg {\n    width: 18px;\n    height: 18px;\n    fill: currentColor;\n    display: block;\n  }\n\n  .hdg-header .icon-btn .icon-minimize {\n    display: none;\n  }\n\n  .hdg-header .icon-btn .icon-maximize {\n    display: block;\n  }\n\n  /* Light mode */\n  .hdg-header--light {\n    background: #ffffff;\n    border: 1px solid #e2e8f0;\n  }\n\n  .hdg-header--light .stat-item {\n    border-color: #e2e8f0;\n  }\n\n  .hdg-header--light .stat-item.highlight {\n    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(245, 158, 11, 0.2) 100%);\n    border-left-color: var(--telemetry-primary, #f59e0b);\n    border-right-color: var(--telemetry-primary, #f59e0b);\n  }\n\n  .hdg-header--light .stat-label {\n    color: #64748b;\n  }\n\n  .hdg-header--light .stat-value {\n    color: #1e293b;\n  }\n\n  .hdg-header--light .filter-actions {\n    border-color: #e2e8f0;\n  }\n\n  .hdg-header--light .search-wrap input {\n    background: #f1f5f9;\n    border-color: #cbd5e1;\n    color: #1e293b;\n  }\n\n  .hdg-header--light .icon-btn {\n    border-color: #cbd5e1;\n    color: #64748b;\n  }\n\n  /* Maximized state for parent container */\n  .telemetry-grid-wrap.maximized {\n    position: fixed !important;\n    inset: 0 !important;\n    z-index: 99999 !important;\n    width: 100vw !important;\n    height: 100vh !important;\n    background: var(--card-bg, #0f172a) !important;\n    border-radius: 0 !important;\n    overflow: auto !important;\n    padding: 16px !important;\n  }\n\n  .telemetry-grid-wrap.maximized .telemetry-grid-header {\n    position: sticky;\n    top: 0;\n    z-index: 10;\n    background: var(--card-bg, #0f172a);\n    padding-bottom: 12px;\n  }\n\n  .telemetry-grid-wrap.maximized .telemetry-cards-grid {\n    max-height: none !important;\n    overflow: visible !important;\n  }\n\n  .telemetry-grid-wrap.maximized .hdg-header .icon-btn .icon-maximize {\n    display: none;\n  }\n\n  .telemetry-grid-wrap.maximized .hdg-header .icon-btn .icon-minimize {\n    display: block;\n  }\n\n  /* Light mode maximized */\n  body.light-mode .telemetry-grid-wrap.maximized {\n    background: #f8fafc !important;\n  }\n\n  body.light-mode .telemetry-grid-wrap.maximized .telemetry-grid-header {\n    background: #f8fafc;\n  }\n";
+declare const HEADER_DEVICES_GRID_STYLES = "\n  /* RFC-0125: HeaderDevicesGrid Component - FIEL ao TELEMETRY widget */\n  .hdg-header {\n    display: flex !important;\n    flex-direction: row !important;\n    align-items: stretch;\n    gap: 0;\n    padding: 0;\n    background: var(--card-bg, #1e293b);\n    border-radius: 8px;\n    margin-bottom: 12px;\n    overflow: hidden;\n  }\n\n  .hdg-header .stat-item {\n    display: flex !important;\n    flex-direction: column !important;\n    gap: 2px;\n    flex: 1;\n    min-width: 0;\n    padding: 12px 16px;\n    border-right: 1px solid var(--card-bd, #334155);\n  }\n\n  .hdg-header .stat-item:last-of-type {\n    border-right: none;\n  }\n\n  .hdg-header .stat-label {\n    font-size: 11px;\n    color: var(--ink-2, #94a3b8);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .hdg-header .stat-value {\n    font-size: 18px;\n    font-weight: 700;\n    color: var(--ink-1, #f1f5f9);\n  }\n\n  /* Highlight com background de destaque e barras em ambos os lados */\n  .hdg-header .stat-item.highlight {\n    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.25) 100%);\n    border-left: 3px solid var(--telemetry-primary, #f59e0b);\n    border-right: 3px solid var(--telemetry-primary, #f59e0b);\n    position: relative;\n  }\n\n  .hdg-header .stat-item.highlight .stat-value {\n    color: var(--telemetry-primary, #f59e0b);\n    font-size: 20px;\n  }\n\n  /* Ajuste para o item apos o highlight nao ter borda dupla */\n  .hdg-header .stat-item.highlight + .stat-item {\n    border-left: none;\n  }\n\n  .hdg-header .filter-actions {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 12px;\n    border-left: 1px solid var(--card-bd, #334155);\n  }\n\n  .hdg-header .search-wrap {\n    display: none;\n    overflow: hidden;\n    transition: all 0.2s ease;\n  }\n\n  .hdg-header .search-wrap.active {\n    display: block;\n  }\n\n  .hdg-header .search-wrap input {\n    padding: 6px 12px;\n    border: 1px solid var(--card-bd, #334155);\n    border-radius: 6px;\n    background: transparent;\n    color: var(--ink-1, #f1f5f9);\n    font-size: 13px;\n    width: 180px;\n  }\n\n  .hdg-header .search-wrap input:focus {\n    outline: none;\n    border-color: var(--telemetry-primary, #f59e0b);\n  }\n\n  .hdg-header .icon-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 36px;\n    height: 36px;\n    border: 1px solid var(--card-bd, #334155);\n    border-radius: 6px;\n    background: transparent;\n    color: var(--ink-2, #94a3b8);\n    cursor: pointer;\n    transition: all 0.15s ease;\n  }\n\n  .hdg-header .icon-btn:hover {\n    background: var(--telemetry-primary, #f59e0b);\n    border-color: var(--telemetry-primary, #f59e0b);\n    color: white;\n  }\n\n  .hdg-header .icon-btn svg {\n    width: 18px;\n    height: 18px;\n    fill: currentColor;\n    display: block;\n  }\n\n  .hdg-header .icon-btn .icon-minimize {\n    display: none;\n  }\n\n  .hdg-header .icon-btn .icon-maximize {\n    display: block;\n  }\n\n  /* Light mode */\n  .hdg-header--light {\n    background: #ffffff;\n    border: 1px solid #e2e8f0;\n  }\n\n  .hdg-header--light .stat-item {\n    border-color: #e2e8f0;\n  }\n\n  .hdg-header--light .stat-item.highlight {\n    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(245, 158, 11, 0.2) 100%);\n    border-left-color: var(--telemetry-primary, #f59e0b);\n    border-right-color: var(--telemetry-primary, #f59e0b);\n  }\n\n  .hdg-header--light .stat-label {\n    color: #64748b;\n  }\n\n  .hdg-header--light .stat-value {\n    color: #1e293b;\n  }\n\n  .hdg-header--light .filter-actions {\n    border-color: #e2e8f0;\n  }\n\n  .hdg-header--light .search-wrap input {\n    background: #f1f5f9;\n    border-color: #cbd5e1;\n    color: #1e293b;\n  }\n\n  .hdg-header--light .icon-btn {\n    border-color: #cbd5e1;\n    color: #64748b;\n  }\n\n  /* Maximized state for parent container */\n  .telemetry-grid-wrap.maximized {\n    position: fixed !important;\n    inset: 0 !important;\n    z-index: 99999 !important;\n    width: 100vw !important;\n    height: 100vh !important;\n    background: var(--card-bg, #0f172a) !important;\n    border-radius: 0 !important;\n    overflow: auto !important;\n    padding: 16px !important;\n  }\n\n  .telemetry-grid-wrap.maximized .telemetry-grid-header {\n    position: sticky;\n    top: 0;\n    z-index: 10;\n    background: var(--card-bg, #0f172a);\n    padding-bottom: 12px;\n  }\n\n  .telemetry-grid-wrap.maximized .telemetry-cards-grid {\n    max-height: none !important;\n    overflow: visible !important;\n  }\n\n  .telemetry-grid-wrap.maximized .hdg-header .icon-btn .icon-maximize {\n    display: none;\n  }\n\n  .telemetry-grid-wrap.maximized .hdg-header .icon-btn .icon-minimize {\n    display: block;\n  }\n\n  /* Light mode maximized */\n  body.light-mode .telemetry-grid-wrap.maximized {\n    background: #f8fafc !important;\n  }\n\n  body.light-mode .telemetry-grid-wrap.maximized .telemetry-grid-header {\n    background: #f8fafc;\n  }\n\n/* Consumo ainda carregando */\n.hdg-value-spinner {\n  display: inline-block;\n  width: 13px;\n  height: 13px;\n  margin-right: 6px;\n  vertical-align: -2px;\n  border: 2px solid rgba(124, 58, 237, 0.2);\n  border-top-color: var(--myio-brand-700, #7c3aed);\n  border-radius: 50%;\n  animation: myio-consumption-spin 0.8s linear infinite;\n}\n@keyframes myio-consumption-spin { to { transform: rotate(360deg); } }\n";
 declare function injectHeaderDevicesGridStyles(): void;
 
 /**

package/dist/index.js

@@ -10,7 +10,7 @@ import {
 // package.json
 var package_default = {
   name: "myio-js-library",
-  version: "0.1.557",
+  version: "0.1.558",
   description: "A clean, standalone JS SDK for MYIO projects",
   license: "MIT",
   repository: "github:gh-myio/myio-js-library",
@@ -11242,6 +11242,26 @@ var CSS_STRING = `
   margin-left: 4px;
 }
 
+/* Consumo ainda carregando (spinner no lugar do valor) */
+.myio-ho-card__value.is-loading .num {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--myio-muted, #9ca3af);
+}
+.myio-ho-card__value-spinner {
+  width: 14px;
+  height: 14px;
+  border: 2px solid rgba(124, 58, 237, 0.2);
+  border-top-color: var(--myio-brand-700, #7c3aed);
+  border-radius: 50%;
+  animation: myio-consumption-spin 0.8s linear infinite;
+  flex-shrink: 0;
+}
+@keyframes myio-consumption-spin { to { transform: rotate(360deg); } }
+
 /* Efficiency bar */
 .myio-ho-card__eff {
   display: flex;
@@ -14914,7 +14934,20 @@ function paint(root, state5) {
   const primaryValue = formatValueByDomain(entityObject.val, entityObject.domain);
   const numSpan = root.querySelector(".myio-ho-card__value .num");
   const unitSpan = root.querySelector(".myio-ho-card__value .unit");
-  numSpan.textContent = primaryValue;
+  const valueBox = root.querySelector(".myio-ho-card__value");
+  const dataLoading = !!entityObject.dataLoading && entityObject.domain !== "temperature";
+  if (valueBox) {
+    valueBox.classList.toggle("is-loading", dataLoading);
+    if (dataLoading) valueBox.setAttribute("aria-busy", "true");
+    else valueBox.removeAttribute("aria-busy");
+  }
+  if (dataLoading) {
+    numSpan.innerHTML = '<span class="myio-ho-card__value-spinner" aria-hidden="true"></span>Carregando\u2026';
+    numSpan.title = "Carregando consumo do per\xEDodo";
+  } else {
+    numSpan.textContent = primaryValue;
+    numSpan.removeAttribute("title");
+  }
   const barContainer = root.querySelector(".bar");
   const effContainer = root.querySelector(".myio-ho-card__eff");
   if (state5.enableSelection) {
@@ -70086,6 +70119,25 @@ var HeaderView = class {
   transition: color 0.2s ease;
 }
 
+/* Consumo ainda carregando */
+.${HEADER_CSS_PREFIX}-kpi-loading {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 1rem;
+  font-weight: 600;
+  opacity: 0.85;
+}
+.${HEADER_CSS_PREFIX}-kpi-spinner {
+  width: 18px;
+  height: 18px;
+  border: 2.5px solid rgba(255, 255, 255, 0.3);
+  border-top-color: currentColor;
+  border-radius: 50%;
+  animation: myio-consumption-spin 0.8s linear infinite;
+}
+@keyframes myio-consumption-spin { to { transform: rotate(360deg); } }
+
 .${HEADER_CSS_PREFIX}-card__subrow {
   display: flex;
   align-items: center;
@@ -70524,7 +70576,28 @@ var HeaderView = class {
   /**
    * Update energy card
    */
+  /** Spinner nos KPIs de consumo (energia e água) enquanto o período carrega */
+  setConsumptionLoading(loading) {
+    if (!loading) {
+      [this.energyKpiEl, this.waterKpiEl].forEach((el2) => {
+        if (el2?.querySelector(`.${HEADER_CSS_PREFIX}-kpi-loading`)) el2.textContent = "-";
+      });
+      return;
+    }
+    const html = `<span class="${HEADER_CSS_PREFIX}-kpi-loading" aria-busy="true"><span class="${HEADER_CSS_PREFIX}-kpi-spinner" aria-hidden="true"></span>Carregando\u2026</span>`;
+    if (this.energyKpiEl) this.energyKpiEl.innerHTML = html;
+    if (this.waterKpiEl) this.waterKpiEl.innerHTML = html;
+    if (this.energyTrendEl) this.energyTrendEl.textContent = "";
+    if (this.waterTrendEl) this.waterTrendEl.textContent = "";
+  }
   updateEnergyCard(data) {
+    if (data.loading) {
+      if (this.energyKpiEl) {
+        this.energyKpiEl.innerHTML = `<span class="${HEADER_CSS_PREFIX}-kpi-loading" aria-busy="true"><span class="${HEADER_CSS_PREFIX}-kpi-spinner" aria-hidden="true"></span>Carregando\u2026</span>`;
+      }
+      if (this.energyTrendEl) this.energyTrendEl.textContent = "";
+      return;
+    }
     if (this.energyKpiEl) {
       if (data.isFiltered && data.unfilteredTotal > 0) {
         const filteredFormatted = this.formatEnergy(data.customerTotal);
@@ -70573,6 +70646,13 @@ var HeaderView = class {
    * Update water card
    */
   updateWaterCard(data) {
+    if (data.loading) {
+      if (this.waterKpiEl) {
+        this.waterKpiEl.innerHTML = `<span class="${HEADER_CSS_PREFIX}-kpi-loading" aria-busy="true"><span class="${HEADER_CSS_PREFIX}-kpi-spinner" aria-hidden="true"></span>Carregando\u2026</span>`;
+      }
+      if (this.waterTrendEl) this.waterTrendEl.textContent = "";
+      return;
+    }
     if (this.waterKpiEl) {
       if (data.isFiltered && data.unfilteredTotal > 0) {
         const filteredFormatted = this.formatWater(data.filteredTotal);
@@ -71558,6 +71638,9 @@ function createHeaderComponent(params) {
     tooltipData.temperature = data;
     view.updateTemperatureCard(data);
   }
+  function setConsumptionLoading(loading) {
+    view.setConsumptionLoading(loading);
+  }
   function updateWaterKPI(data) {
     tooltipData.water = data;
     view.updateWaterCard(data);
@@ -71613,6 +71696,7 @@ function createHeaderComponent(params) {
     updateEnergyKPI,
     updateTemperatureKPI,
     updateWaterKPI,
+    setConsumptionLoading,
     updateTooltipData,
     // Shopping/Filter
     updateShoppings,
@@ -120831,6 +120915,20 @@ var HEADER_DEVICES_GRID_STYLES = `
   body.light-mode .telemetry-grid-wrap.maximized .telemetry-grid-header {
     background: #f8fafc;
   }
+
+/* Consumo ainda carregando */
+.hdg-value-spinner {
+  display: inline-block;
+  width: 13px;
+  height: 13px;
+  margin-right: 6px;
+  vertical-align: -2px;
+  border: 2px solid rgba(124, 58, 237, 0.2);
+  border-top-color: var(--myio-brand-700, #7c3aed);
+  border-radius: 50%;
+  animation: myio-consumption-spin 0.8s linear infinite;
+}
+@keyframes myio-consumption-spin { to { transform: rotate(360deg); } }
 `;
 function injectHeaderDevicesGridStyles() {
   const styleId = "hdg-styles";
@@ -120848,14 +120946,15 @@ var DOMAIN_CONFIG7 = {
     consumptionLabel: "Consumo Total",
     zeroLabel: "Sem Consumo",
     unit: "kWh",
-    formatValue: (value) => formatEnergy(value, void 0, 2)
+    // 3 casas: mesmo padrão do dashboard de shopping (RFC-0108, measurementSettings default)
+    formatValue: (value) => formatEnergy(value, void 0, 3)
   },
   water: {
     totalLabel: "Total Hidr\xF4metros",
     consumptionLabel: "Consumo Total",
     zeroLabel: "Sem Consumo",
     unit: "m\xB3",
-    formatValue: (value) => formatWater(value)
+    formatValue: (value) => `${(Number(value) || 0).toLocaleString("pt-BR", { minimumFractionDigits: 3, maximumFractionDigits: 3 })} m\xB3`
   },
   temperature: {
     totalLabel: "Total Sensores",
@@ -121023,6 +121122,16 @@ var HeaderDevicesGridView = class {
     const percentage = total > 0 ? (online / total * 100).toFixed(1) : "0.0";
     connectivityEl.textContent = `${online}/${total} (${percentage}%)`;
     totalEl.textContent = total.toString();
+    if (stats.loading) {
+      const spin = '<span class="hdg-value-spinner" aria-hidden="true"></span>';
+      consumptionEl.innerHTML = `${spin}Carregando\u2026`;
+      zeroEl.innerHTML = spin;
+      consumptionEl.setAttribute("aria-busy", "true");
+      zeroEl.setAttribute("aria-busy", "true");
+      return;
+    }
+    consumptionEl.removeAttribute("aria-busy");
+    zeroEl.removeAttribute("aria-busy");
     consumptionEl.textContent = this.domainConfig.formatValue(consumption);
     zeroEl.textContent = zeroCount.toString();
   }
@@ -121129,7 +121238,8 @@ var HeaderDevicesGridController = class {
       online,
       total: devices.length,
       consumption: displayValue,
-      zeroCount
+      zeroCount,
+      loading: this.domain !== "temperature" && devices.some((d) => d.dataLoading)
     });
   }
   setThemeMode(mode) {