myio-js-library 0.1.204 → 0.1.207

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

@@ -25471,9 +25471,12 @@
     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");
       }
@@ -35939,14 +35942,18 @@
     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 `
@@ -35982,6 +35989,7 @@
         clearTimeout(state3.hideTimer);
         state3.hideTimer = null;
       }
+      resetSafetyTimer();
     };
     container.onmouseleave = () => {
       state3.isMouseOverTooltip = false;
@@ -36163,15 +36171,42 @@
     }
   }
   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");
@@ -36216,12 +36251,10 @@
      * 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)}
@@ -36235,6 +36268,7 @@
       setupHoverListeners3(container);
       setupButtonListeners3(container);
       setupDragListeners3(container);
+      resetSafetyTimer();
     },
     /**
      * Start delayed hide
@@ -36246,10 +36280,7 @@
      * Hide immediately
      */
     hide() {
-      if (state3.hideTimer) {
-        clearTimeout(state3.hideTimer);
-        state3.hideTimer = null;
-      }
+      clearAllTimers();
       state3.isMouseOverTooltip = false;
       const container = document.getElementById(this.containerId);
       if (container) {
@@ -36260,19 +36291,36 @@
      * 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
      */
@@ -41950,24 +41998,25 @@
             <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>
@@ -41980,24 +42029,25 @@
             <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>
@@ -42010,19 +42060,20 @@
             <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>
@@ -42221,6 +42272,26 @@
           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;
@@ -42299,22 +42370,22 @@
         }
       };
       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");
@@ -42346,6 +42417,50 @@
           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");