myio-js-library 0.1.204 → 0.1.207

package/dist/index.js

@@ -25657,9 +25657,12 @@ var AnnotationsTab = class {
   attachEventListeners() {
     const openModalBtn = this.container.querySelector("#open-new-annotation-modal");
     if (openModalBtn) {
-      openModalBtn.onclick = () => {
+      openModalBtn.addEventListener("click", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        console.log("[AnnotationsTab] Create button clicked");
         this.showNewAnnotationModal();
-      };
+      });
     } else {
       console.warn("[AnnotationsTab] Create button not found");
     }
@@ -36125,14 +36128,18 @@ function injectCSS7() {
   document.head.appendChild(style);
   cssInjected7 = true;
 }
+var HIDE_DELAY_MS = 2500;
+var SAFETY_TIMEOUT_MS = 15e3;
 var state3 = {
   hideTimer: null,
+  safetyTimer: null,
   isMouseOverTooltip: false,
   isMaximized: false,
   isDragging: false,
   dragOffset: { x: 0, y: 0 },
   savedPosition: null,
-  pinnedCounter: 0
+  pinnedCounter: 0,
+  isPinned: false
 };
 function generateHeaderHTML3(icon, title) {
   return `
@@ -36168,6 +36175,7 @@ function setupHoverListeners3(container) {
       clearTimeout(state3.hideTimer);
       state3.hideTimer = null;
     }
+    resetSafetyTimer();
   };
   container.onmouseleave = () => {
     state3.isMouseOverTooltip = false;
@@ -36349,15 +36357,42 @@ function toggleMaximize3(container) {
   }
 }
 function startDelayedHide3() {
-  if (state3.isMouseOverTooltip) return;
+  if (state3.isMouseOverTooltip || state3.isPinned) return;
   if (state3.hideTimer) {
     clearTimeout(state3.hideTimer);
   }
   state3.hideTimer = setTimeout(() => {
     hideWithAnimation3();
-  }, 1500);
+  }, HIDE_DELAY_MS);
+}
+function resetSafetyTimer() {
+  if (state3.safetyTimer) {
+    clearTimeout(state3.safetyTimer);
+    state3.safetyTimer = null;
+  }
+  const container = document.getElementById("myio-info-tooltip");
+  if (container && container.classList.contains("visible") && !state3.isPinned) {
+    state3.safetyTimer = setTimeout(() => {
+      console.log("[InfoTooltip] Safety timeout reached - forcing hide");
+      InfoTooltip.destroy();
+    }, SAFETY_TIMEOUT_MS);
+  }
+}
+function clearAllTimers() {
+  if (state3.hideTimer) {
+    clearTimeout(state3.hideTimer);
+    state3.hideTimer = null;
+  }
+  if (state3.safetyTimer) {
+    clearTimeout(state3.safetyTimer);
+    state3.safetyTimer = null;
+  }
 }
 function hideWithAnimation3() {
+  if (state3.safetyTimer) {
+    clearTimeout(state3.safetyTimer);
+    state3.safetyTimer = null;
+  }
   const container = document.getElementById("myio-info-tooltip");
   if (container && container.classList.contains("visible")) {
     container.classList.add("closing");
@@ -36402,12 +36437,10 @@ var InfoTooltip = {
    * Show tooltip
    */
   show(triggerElement, options) {
-    if (state3.hideTimer) {
-      clearTimeout(state3.hideTimer);
-      state3.hideTimer = null;
-    }
+    clearAllTimers();
     const container = this.getContainer();
     container.classList.remove("closing");
+    state3.isPinned = false;
     container.innerHTML = `
       <div class="myio-info-tooltip__panel">
         ${generateHeaderHTML3(options.icon, options.title)}
@@ -36421,6 +36454,7 @@ var InfoTooltip = {
     setupHoverListeners3(container);
     setupButtonListeners3(container);
     setupDragListeners3(container);
+    resetSafetyTimer();
   },
   /**
    * Start delayed hide
@@ -36432,10 +36466,7 @@ var InfoTooltip = {
    * Hide immediately
    */
   hide() {
-    if (state3.hideTimer) {
-      clearTimeout(state3.hideTimer);
-      state3.hideTimer = null;
-    }
+    clearAllTimers();
     state3.isMouseOverTooltip = false;
     const container = document.getElementById(this.containerId);
     if (container) {
@@ -36446,19 +36477,36 @@ var InfoTooltip = {
    * Close and reset all states
    */
   close() {
+    clearAllTimers();
     state3.isMaximized = false;
     state3.isDragging = false;
     state3.savedPosition = null;
-    if (state3.hideTimer) {
-      clearTimeout(state3.hideTimer);
-      state3.hideTimer = null;
-    }
     state3.isMouseOverTooltip = false;
+    state3.isPinned = false;
     const container = document.getElementById(this.containerId);
     if (container) {
       container.classList.remove("visible", "pinned", "maximized", "dragging", "closing");
     }
   },
+  /**
+   * Destroy tooltip completely - guaranteed cleanup
+   * Removes from DOM and clears all timers/state
+   */
+  destroy() {
+    clearAllTimers();
+    state3.isMaximized = false;
+    state3.isDragging = false;
+    state3.savedPosition = null;
+    state3.isMouseOverTooltip = false;
+    state3.isPinned = false;
+    const container = document.getElementById(this.containerId);
+    if (container) {
+      container.remove();
+    }
+    const pinnedClones = document.querySelectorAll('[id^="myio-info-tooltip-pinned-"]');
+    pinnedClones.forEach((clone) => clone.remove());
+    console.log("[InfoTooltip] Destroyed - all tooltips removed");
+  },
   /**
    * Attach tooltip to trigger element with hover behavior
    */
@@ -42141,24 +42189,25 @@ var ContractDevicesModalView = class {
             <h4>Energia</h4>
           </div>
           <div class="domain-fields">
-            <div class="field-group">
+            <div class="field-group field-total">
               <label for="energy_total">Total Contratado</label>
-              <input type="number" id="energy_total" name="energy_total" min="0" step="1" placeholder="0">
+              <input type="number" id="energy_total" name="energy_total" min="0" step="1" placeholder="0" readonly class="input-readonly">
               <small class="field-key">${DEVICE_COUNT_KEYS.energy.total}</small>
+              <small class="field-hint">Soma automatica</small>
             </div>
             <div class="field-group">
               <label for="energy_entries">Entradas</label>
-              <input type="number" id="energy_entries" name="energy_entries" min="0" step="1" placeholder="0">
+              <input type="number" id="energy_entries" name="energy_entries" min="0" step="1" placeholder="0" data-domain="energy">
               <small class="field-key">${DEVICE_COUNT_KEYS.energy.entries}</small>
             </div>
             <div class="field-group">
               <label for="energy_commonArea">Area Comum</label>
-              <input type="number" id="energy_commonArea" name="energy_commonArea" min="0" step="1" placeholder="0">
+              <input type="number" id="energy_commonArea" name="energy_commonArea" min="0" step="1" placeholder="0" data-domain="energy">
               <small class="field-key">${DEVICE_COUNT_KEYS.energy.commonArea}</small>
             </div>
             <div class="field-group">
               <label for="energy_stores">Lojas</label>
-              <input type="number" id="energy_stores" name="energy_stores" min="0" step="1" placeholder="0">
+              <input type="number" id="energy_stores" name="energy_stores" min="0" step="1" placeholder="0" data-domain="energy">
               <small class="field-key">${DEVICE_COUNT_KEYS.energy.stores}</small>
             </div>
           </div>
@@ -42171,24 +42220,25 @@ var ContractDevicesModalView = class {
             <h4>Agua</h4>
           </div>
           <div class="domain-fields">
-            <div class="field-group">
+            <div class="field-group field-total">
               <label for="water_total">Total Contratado</label>
-              <input type="number" id="water_total" name="water_total" min="0" step="1" placeholder="0">
+              <input type="number" id="water_total" name="water_total" min="0" step="1" placeholder="0" readonly class="input-readonly">
               <small class="field-key">${DEVICE_COUNT_KEYS.water.total}</small>
+              <small class="field-hint">Soma automatica</small>
             </div>
             <div class="field-group">
               <label for="water_entries">Entradas</label>
-              <input type="number" id="water_entries" name="water_entries" min="0" step="1" placeholder="0">
+              <input type="number" id="water_entries" name="water_entries" min="0" step="1" placeholder="0" data-domain="water">
               <small class="field-key">${DEVICE_COUNT_KEYS.water.entries}</small>
             </div>
             <div class="field-group">
               <label for="water_commonArea">Area Comum</label>
-              <input type="number" id="water_commonArea" name="water_commonArea" min="0" step="1" placeholder="0">
+              <input type="number" id="water_commonArea" name="water_commonArea" min="0" step="1" placeholder="0" data-domain="water">
               <small class="field-key">${DEVICE_COUNT_KEYS.water.commonArea}</small>
             </div>
             <div class="field-group">
               <label for="water_stores">Lojas</label>
-              <input type="number" id="water_stores" name="water_stores" min="0" step="1" placeholder="0">
+              <input type="number" id="water_stores" name="water_stores" min="0" step="1" placeholder="0" data-domain="water">
               <small class="field-key">${DEVICE_COUNT_KEYS.water.stores}</small>
             </div>
           </div>
@@ -42201,19 +42251,20 @@ var ContractDevicesModalView = class {
             <h4>Temperatura</h4>
           </div>
           <div class="domain-fields">
-            <div class="field-group">
+            <div class="field-group field-total">
               <label for="temperature_total">Total Contratado</label>
-              <input type="number" id="temperature_total" name="temperature_total" min="0" step="1" placeholder="0">
+              <input type="number" id="temperature_total" name="temperature_total" min="0" step="1" placeholder="0" readonly class="input-readonly">
               <small class="field-key">${DEVICE_COUNT_KEYS.temperature.total}</small>
+              <small class="field-hint">Soma automatica</small>
             </div>
             <div class="field-group">
               <label for="temperature_internal">Sensores Internos</label>
-              <input type="number" id="temperature_internal" name="temperature_internal" min="0" step="1" placeholder="0">
+              <input type="number" id="temperature_internal" name="temperature_internal" min="0" step="1" placeholder="0" data-domain="temperature">
               <small class="field-key">${DEVICE_COUNT_KEYS.temperature.internal}</small>
             </div>
             <div class="field-group">
-              <label for="temperature_stores">Lojas</label>
-              <input type="number" id="temperature_stores" name="temperature_stores" min="0" step="1" placeholder="0">
+              <label for="temperature_stores">Sensores Externos</label>
+              <input type="number" id="temperature_stores" name="temperature_stores" min="0" step="1" placeholder="0" data-domain="temperature">
               <small class="field-key">${DEVICE_COUNT_KEYS.temperature.stores}</small>
             </div>
           </div>
@@ -42412,6 +42463,26 @@ var ContractDevicesModalView = class {
           font-family: 'Courier New', monospace;
         }
 
+        .myio-contract-devices-modal .field-hint {
+          font-size: 10px;
+          color: #6c757d;
+          font-style: italic;
+        }
+
+        .myio-contract-devices-modal .input-readonly {
+          background: #f0f0f0;
+          color: #555;
+          cursor: not-allowed;
+          font-weight: 600;
+        }
+
+        .myio-contract-devices-modal .field-total {
+          background: #f8f9fa;
+          padding: 10px;
+          border-radius: 6px;
+          margin-bottom: 4px;
+        }
+
         .myio-contract-devices-modal .modal-footer {
           padding: 16px 24px;
           border-top: 1px solid #e0e0e0;
@@ -42490,22 +42561,22 @@ var ContractDevicesModalView = class {
       }
     };
     if (data.energy) {
-      setValue("energy_total", data.energy.total);
       setValue("energy_entries", data.energy.entries);
       setValue("energy_commonArea", data.energy.commonArea);
       setValue("energy_stores", data.energy.stores);
     }
     if (data.water) {
-      setValue("water_total", data.water.total);
       setValue("water_entries", data.water.entries);
       setValue("water_commonArea", data.water.commonArea);
       setValue("water_stores", data.water.stores);
     }
     if (data.temperature) {
-      setValue("temperature_total", data.temperature.total);
       setValue("temperature_internal", data.temperature.internal);
       setValue("temperature_stores", data.temperature.stores);
     }
+    this.calculateDomainTotal("energy");
+    this.calculateDomainTotal("water");
+    this.calculateDomainTotal("temperature");
   }
   attachEventListeners() {
     const closeBtn = this.modal.querySelector(".close-btn");
@@ -42537,6 +42608,50 @@ var ContractDevicesModalView = class {
         this.config.onClose();
       }
     });
+    this.setupAutoCalculation();
+  }
+  setupAutoCalculation() {
+    const energyFields = ["energy_entries", "energy_commonArea", "energy_stores"];
+    energyFields.forEach((fieldName) => {
+      const input = this.form.querySelector(`[name="${fieldName}"]`);
+      if (input) {
+        input.addEventListener("input", () => this.calculateDomainTotal("energy"));
+      }
+    });
+    const waterFields = ["water_entries", "water_commonArea", "water_stores"];
+    waterFields.forEach((fieldName) => {
+      const input = this.form.querySelector(`[name="${fieldName}"]`);
+      if (input) {
+        input.addEventListener("input", () => this.calculateDomainTotal("water"));
+      }
+    });
+    const temperatureFields = ["temperature_internal", "temperature_stores"];
+    temperatureFields.forEach((fieldName) => {
+      const input = this.form.querySelector(`[name="${fieldName}"]`);
+      if (input) {
+        input.addEventListener("input", () => this.calculateDomainTotal("temperature"));
+      }
+    });
+  }
+  calculateDomainTotal(domain) {
+    const getValue = (name) => {
+      const input = this.form.querySelector(`[name="${name}"]`);
+      if (!input || input.value === "") return 0;
+      const num = parseInt(input.value, 10);
+      return isNaN(num) ? 0 : num;
+    };
+    let total = 0;
+    if (domain === "energy") {
+      total = getValue("energy_entries") + getValue("energy_commonArea") + getValue("energy_stores");
+    } else if (domain === "water") {
+      total = getValue("water_entries") + getValue("water_commonArea") + getValue("water_stores");
+    } else if (domain === "temperature") {
+      total = getValue("temperature_internal") + getValue("temperature_stores");
+    }
+    const totalInput = this.form.querySelector(`[name="${domain}_total"]`);
+    if (totalInput) {
+      totalInput.value = String(total);
+    }
   }
   setupAccessibility() {
     const firstInput = this.modal.querySelector("input");