myio-js-library 0.1.173 → 0.1.177

package/dist/index.cjs

@@ -16785,35 +16785,72 @@ function validateOptions2(options) {
 }
 
 // src/components/premium-modals/power-limits/types.ts
+var DOMAINS = [
+  { value: "energy", label: "Energia", icon: "\u26A1" },
+  { value: "water", label: "\xC1gua", icon: "\u{1F4A7}" },
+  { value: "temperature", label: "Temperatura", icon: "\u{1F321}\uFE0F" }
+];
 var DEVICE_TYPES = [
-  { value: "ELEVADOR", label: "Elevator" },
-  { value: "ESCADA_ROLANTE", label: "Escalator" },
+  { value: "ELEVADOR", label: "Elevador" },
+  { value: "ESCADA_ROLANTE", label: "Escada Rolante" },
   { value: "MOTOR", label: "Motor" },
-  { value: "BOMBA", label: "Pump" },
+  { value: "BOMBA", label: "Bomba" },
   { value: "CHILLER", label: "Chiller" },
-  { value: "AR_CONDICIONADO", label: "Air Conditioner" },
+  { value: "AR_CONDICIONADO", label: "Ar Condicionado" },
   { value: "HVAC", label: "HVAC" },
   { value: "FANCOIL", label: "Fancoil" },
-  { value: "3F_MEDIDOR", label: "Three-phase Meter" }
+  { value: "3F_MEDIDOR", label: "Medidor Trif\xE1sico" }
 ];
 var TELEMETRY_TYPES2 = [
-  { value: "consumption", label: "Consumption (kW)", unit: "kW" },
-  { value: "voltage_a", label: "Voltage A (V)", unit: "V" },
-  { value: "voltage_b", label: "Voltage B (V)", unit: "V" },
-  { value: "voltage_c", label: "Voltage C (V)", unit: "V" },
-  { value: "current_a", label: "Current A (A)", unit: "A" },
-  { value: "current_b", label: "Current B (A)", unit: "A" },
-  { value: "current_c", label: "Current C (A)", unit: "A" },
-  { value: "total_current", label: "Total Current (A)", unit: "A" },
-  { value: "fp_a", label: "Power Factor A", unit: "" },
-  { value: "fp_b", label: "Power Factor B", unit: "" },
-  { value: "fp_c", label: "Power Factor C", unit: "" }
+  { value: "consumption", label: "Pot\xEAncia (kW)", unit: "kW" },
+  { value: "voltage_a", label: "Tens\xE3o A (V)", unit: "V" },
+  { value: "voltage_b", label: "Tens\xE3o B (V)", unit: "V" },
+  { value: "voltage_c", label: "Tens\xE3o C (V)", unit: "V" },
+  { value: "current_a", label: "Corrente A (A)", unit: "A" },
+  { value: "current_b", label: "Corrente B (A)", unit: "A" },
+  { value: "current_c", label: "Corrente C (A)", unit: "A" },
+  { value: "total_current", label: "Corrente Total (A)", unit: "A" },
+  { value: "fp_a", label: "Fator de Pot\xEAncia A", unit: "" },
+  { value: "fp_b", label: "Fator de Pot\xEAncia B", unit: "" },
+  { value: "fp_c", label: "Fator de Pot\xEAncia C", unit: "" }
 ];
+var STATUS_ICONS = {
+  energy: {
+    standBy: "\u{1F50C}",
+    // STANDBY
+    normal: "\u26A1",
+    // POWER_ON
+    alert: "\u26A0\uFE0F",
+    // WARNING
+    failure: "\u{1F6A8}"
+    // FAILURE
+  },
+  water: {
+    standBy: "\u{1F6B0}",
+    // STANDBY
+    normal: "\u{1F4A7}",
+    // POWER_ON
+    alert: "\u26A0\uFE0F",
+    // WARNING
+    failure: "\u{1F6A8}"
+    // FAILURE
+  },
+  temperature: {
+    standBy: "\u{1F321}\uFE0F",
+    // STANDBY
+    normal: "\u{1F321}\uFE0F",
+    // POWER_ON
+    alert: "\u26A0\uFE0F",
+    // WARNING
+    failure: "\u{1F6A8}"
+    // FAILURE
+  }
+};
 var STATUS_CONFIG = {
   standBy: { label: "StandBy", color: "#22c55e", bgColor: "rgba(34, 197, 94, 0.1)" },
   normal: { label: "Normal", color: "#3b82f6", bgColor: "rgba(59, 130, 246, 0.1)" },
-  alert: { label: "Alert", color: "#f59e0b", bgColor: "rgba(245, 158, 11, 0.1)" },
-  failure: { label: "Failure", color: "#ef4444", bgColor: "rgba(239, 68, 68, 0.1)" }
+  alert: { label: "Alerta", color: "#f59e0b", bgColor: "rgba(245, 158, 11, 0.1)" },
+  failure: { label: "Falha", color: "#ef4444", bgColor: "rgba(239, 68, 68, 0.1)" }
 };
 
 // src/components/premium-modals/power-limits/PowerLimitsModalView.ts
@@ -16829,12 +16866,43 @@ var PowerLimitsModalView = class {
     this.formData = {
       deviceType: config.deviceType,
       telemetryType: config.telemetryType,
+      domain: config.domain,
       standby: { baseValue: null, topValue: null },
       normal: { baseValue: null, topValue: null },
       alert: { baseValue: null, topValue: null },
       failure: { baseValue: null, topValue: null }
     };
   }
+  // Format number with thousand separator (.) and up to 2 decimal places
+  formatNumberForDisplay(value) {
+    if (value === null || value === void 0) return "";
+    const parts = value.toFixed(2).split(".");
+    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ".");
+    return parts.join(",");
+  }
+  // Parse formatted string back to number
+  parseFormattedNumber(value) {
+    if (!value || value.trim() === "") return null;
+    const normalized = value.replace(/\./g, "").replace(",", ".");
+    const num = parseFloat(normalized);
+    return isNaN(num) ? null : num;
+  }
+  // Handle input formatting on blur
+  formatInputValue(input) {
+    const rawValue = input.value;
+    const parsed = this.parseFormattedNumber(rawValue);
+    if (parsed !== null) {
+      input.value = this.formatNumberForDisplay(parsed);
+    }
+  }
+  // Handle input on focus - show raw value for editing
+  unformatInputValue(input) {
+    const formatted = input.value;
+    const parsed = this.parseFormattedNumber(formatted);
+    if (parsed !== null) {
+      input.value = parsed.toString().replace(".", ",");
+    }
+  }
   render(targetContainer) {
     this.overlayEl = document.createElement("div");
     this.overlayEl.className = "myio-power-limits-overlay";
@@ -16844,6 +16912,7 @@ var PowerLimitsModalView = class {
         ${this.renderHeader()}
         ${this.renderSelectors()}
         ${this.renderStatusCards()}
+        ${this.renderToolbar()}
         ${this.renderLoadingState()}
         ${this.renderErrorState()}
         ${this.renderSuccessState()}
@@ -16860,80 +16929,107 @@ var PowerLimitsModalView = class {
   }
   renderHeader() {
     return `
-      <div class="myio-power-limits-header">
-        <div class="myio-power-limits-title-section">
-          <span class="myio-power-limits-icon">&#x2699;</span>
-          <h2 class="myio-power-limits-title">Power Limits Setup</h2>
-        </div>
-        <div class="myio-power-limits-actions">
+      <div class="myio-modal-header">
+        <h2 class="myio-modal-title">\u2699\uFE0F Configura\xE7\xE3o de Limites</h2>
+        <button class="myio-modal-close" id="plm-close-btn" type="button" aria-label="Fechar modal">\xD7</button>
+      </div>
+    `;
+  }
+  renderToolbar() {
+    return `
+      <div class="myio-power-limits-toolbar">
+        <div class="myio-toolbar-actions">
+          <button class="myio-btn myio-btn-secondary" id="plm-reset-btn" type="button">Limpar</button>
           <button class="myio-btn myio-btn-primary" id="plm-save-btn" type="button">
-            <span class="myio-btn-text">Save</span>
+            <span class="myio-btn-text">Salvar</span>
             <span class="myio-btn-spinner" style="display: none;"></span>
           </button>
-          <button class="myio-btn myio-btn-secondary" id="plm-reset-btn" type="button">Reset</button>
-          <button class="myio-btn myio-btn-close" id="plm-close-btn" type="button" aria-label="Close">&times;</button>
         </div>
       </div>
     `;
   }
   renderSelectors() {
-    const deviceOptions = DEVICE_TYPES.map(
-      (dt) => `<option value="${dt.value}" ${dt.value === this.config.deviceType ? "selected" : ""}>${dt.label}</option>`
-    ).join("");
-    const telemetryOptions = TELEMETRY_TYPES2.map(
-      (tt) => `<option value="${tt.value}" ${tt.value === this.config.telemetryType ? "selected" : ""}>${tt.label}</option>`
+    const domain = this.formData.domain || "energy";
+    const domainOptions = DOMAINS.map(
+      (d) => `<option value="${d.value}" ${d.value === domain ? "selected" : ""}>${d.icon} ${d.label}</option>`
     ).join("");
+    let deviceTypeContent;
+    let telemetryLabel;
+    switch (domain) {
+      case "temperature":
+        deviceTypeContent = `<div class="myio-fixed-value">Sensor de Temperatura</div>`;
+        telemetryLabel = "Temperatura em Celsius";
+        break;
+      case "water":
+        deviceTypeContent = `<div class="myio-fixed-value">Hidr\xF4metro</div>`;
+        telemetryLabel = "Litros";
+        break;
+      case "energy":
+      default:
+        deviceTypeContent = `<select id="plm-device-type" class="myio-select">
+          ${DEVICE_TYPES.map(
+          (dt) => `<option value="${dt.value}" ${dt.value === this.formData.deviceType ? "selected" : ""}>${dt.label}</option>`
+        ).join("")}
+        </select>`;
+        telemetryLabel = "Pot\xEAncia (kW)";
+        break;
+    }
     return `
       <div class="myio-power-limits-selectors">
         <div class="myio-form-group">
-          <label for="plm-device-type">Device Type</label>
-          <select id="plm-device-type" class="myio-select">
-            ${deviceOptions}
+          <label for="plm-domain">Dom\xEDnio</label>
+          <select id="plm-domain" class="myio-select">
+            ${domainOptions}
           </select>
         </div>
         <div class="myio-form-group">
-          <label for="plm-telemetry-type">Telemetry Type</label>
-          <select id="plm-telemetry-type" class="myio-select">
-            ${telemetryOptions}
-          </select>
+          <label>Tipo de Dispositivo</label>
+          ${deviceTypeContent}
+        </div>
+        <div class="myio-form-group">
+          <label>Tipo de Telemetria</label>
+          <div class="myio-fixed-value">${telemetryLabel}</div>
         </div>
       </div>
     `;
   }
   renderStatusCards() {
     const statuses = ["standby", "normal", "alert", "failure"];
+    const domain = this.formData.domain || "energy";
+    const domainIcons = STATUS_ICONS[domain];
     const cards = statuses.map((status) => {
-      const config = STATUS_CONFIG[status === "standby" ? "standBy" : status];
+      const statusKey = status === "standby" ? "standBy" : status;
+      const config = STATUS_CONFIG[statusKey];
       const formValues = this.formData[status];
+      const icon = domainIcons[statusKey];
       return `
         <div class="myio-power-limits-card-item myio-status-${status}" style="--status-color: ${config.color}; --status-bg: ${config.bgColor};">
           <div class="myio-card-header">
+            <span class="myio-status-icon">${icon}</span>
             <span class="myio-status-indicator"></span>
             <span class="myio-status-label">${config.label}</span>
           </div>
           <div class="myio-card-inputs">
             <div class="myio-input-group">
-              <label for="plm-${status}-base">Base Value</label>
+              <label for="plm-${status}-base">Limite Inferior</label>
               <input
-                type="number"
+                type="text"
                 id="plm-${status}-base"
-                class="myio-input"
-                min="0"
-                step="0.01"
-                value="${formValues.baseValue ?? ""}"
-                placeholder="0"
+                class="myio-input myio-formatted-number"
+                inputmode="decimal"
+                value="${this.formatNumberForDisplay(formValues.baseValue)}"
+                placeholder="0,00"
               >
             </div>
             <div class="myio-input-group">
-              <label for="plm-${status}-top">Top Value</label>
+              <label for="plm-${status}-top">Limite Superior</label>
               <input
-                type="number"
+                type="text"
                 id="plm-${status}-top"
-                class="myio-input"
-                min="0"
-                step="0.01"
-                value="${formValues.topValue ?? ""}"
-                placeholder="0"
+                class="myio-input myio-formatted-number"
+                inputmode="decimal"
+                value="${this.formatNumberForDisplay(formValues.topValue)}"
+                placeholder="0,00"
               >
             </div>
           </div>
@@ -16950,7 +17046,7 @@ var PowerLimitsModalView = class {
     return `
       <div class="myio-power-limits-loading" id="plm-loading" style="display: none;">
         <div class="myio-spinner"></div>
-        <span>Loading configuration...</span>
+        <span>Carregando configura\xE7\xE3o...</span>
       </div>
     `;
   }
@@ -16966,7 +17062,7 @@ var PowerLimitsModalView = class {
     return `
       <div class="myio-power-limits-success" id="plm-success" style="display: none;">
         <span class="myio-success-icon">&#x2713;</span>
-        <span class="myio-success-message">Configuration saved successfully!</span>
+        <span class="myio-success-message">Configura\xE7\xE3o salva com sucesso!</span>
       </div>
     `;
   }
@@ -16984,31 +17080,121 @@ var PowerLimitsModalView = class {
     saveBtn?.addEventListener("click", () => this.handleSave());
     const resetBtn = this.overlayEl.querySelector("#plm-reset-btn");
     resetBtn?.addEventListener("click", () => this.handleReset());
-    const deviceSelect = this.overlayEl.querySelector("#plm-device-type");
-    deviceSelect?.addEventListener("change", (e) => {
-      const value = e.target.value;
-      this.formData.deviceType = value;
-      this.config.onDeviceTypeChange(value);
-    });
-    const telemetrySelect = this.overlayEl.querySelector("#plm-telemetry-type");
-    telemetrySelect?.addEventListener("change", (e) => {
+    const domainSelect = this.overlayEl.querySelector("#plm-domain");
+    domainSelect?.addEventListener("change", (e) => {
       const value = e.target.value;
-      this.formData.telemetryType = value;
-      this.config.onTelemetryTypeChange(value);
+      this.formData.domain = value;
+      switch (value) {
+        case "temperature":
+          this.formData.deviceType = "SENSOR_TEMPERATURA";
+          this.formData.telemetryType = "temperature";
+          break;
+        case "water":
+          this.formData.deviceType = "HIDROMETRO";
+          this.formData.telemetryType = "liters";
+          break;
+        case "energy":
+        default:
+          this.formData.telemetryType = "consumption";
+          break;
+      }
+      this.config.onDomainChange(value);
+      this.updateSelectorsUI();
+      this.updateStatusIcons();
     });
+    this.setupDeviceTypeListener();
     const statuses = ["standby", "normal", "alert", "failure"];
     statuses.forEach((status) => {
       const baseInput = this.overlayEl?.querySelector(`#plm-${status}-base`);
       const topInput = this.overlayEl?.querySelector(`#plm-${status}-top`);
-      baseInput?.addEventListener("input", (e) => {
+      if (baseInput) {
+        baseInput.addEventListener("focus", () => this.unformatInputValue(baseInput));
+        baseInput.addEventListener("blur", () => {
+          this.formData[status].baseValue = this.parseFormattedNumber(baseInput.value);
+          this.formatInputValue(baseInput);
+        });
+        baseInput.addEventListener("keydown", (e) => this.handleNumberKeydown(e));
+      }
+      if (topInput) {
+        topInput.addEventListener("focus", () => this.unformatInputValue(topInput));
+        topInput.addEventListener("blur", () => {
+          this.formData[status].topValue = this.parseFormattedNumber(topInput.value);
+          this.formatInputValue(topInput);
+        });
+        topInput.addEventListener("keydown", (e) => this.handleNumberKeydown(e));
+      }
+    });
+  }
+  // Handle keyboard input to allow only valid number characters
+  handleNumberKeydown(e) {
+    const allowedKeys = ["Backspace", "Delete", "ArrowLeft", "ArrowRight", "Tab", "Home", "End"];
+    const isDigit = /^\d$/.test(e.key);
+    const isComma = e.key === ",";
+    const isAllowedKey = allowedKeys.includes(e.key);
+    const hasCtrl = e.ctrlKey || e.metaKey;
+    if (!isDigit && !isComma && !isAllowedKey && !hasCtrl) {
+      e.preventDefault();
+    }
+    if (isComma) {
+      const input = e.target;
+      if (input.value.includes(",")) {
+        e.preventDefault();
+      }
+    }
+  }
+  // Update status icons when domain changes
+  updateStatusIcons() {
+    const domain = this.formData.domain || "energy";
+    const domainIcons = STATUS_ICONS[domain];
+    const statuses = ["standby", "normal", "alert", "failure"];
+    statuses.forEach((status) => {
+      const statusKey = status === "standby" ? "standBy" : status;
+      const iconEl = this.overlayEl?.querySelector(`.myio-status-${status} .myio-status-icon`);
+      if (iconEl) {
+        iconEl.textContent = domainIcons[statusKey];
+      }
+    });
+  }
+  // Update selectors UI when domain changes
+  updateSelectorsUI() {
+    const selectorsContainer = this.overlayEl?.querySelector(".myio-power-limits-selectors");
+    if (selectorsContainer) {
+      selectorsContainer.outerHTML = this.renderSelectors();
+      const domainSelect = this.overlayEl?.querySelector("#plm-domain");
+      domainSelect?.addEventListener("change", (e) => {
         const value = e.target.value;
-        this.formData[status].baseValue = value ? parseFloat(value) : null;
+        this.formData.domain = value;
+        switch (value) {
+          case "temperature":
+            this.formData.deviceType = "SENSOR_TEMPERATURA";
+            this.formData.telemetryType = "temperature";
+            break;
+          case "water":
+            this.formData.deviceType = "HIDROMETRO";
+            this.formData.telemetryType = "liters";
+            break;
+          case "energy":
+          default:
+            this.formData.telemetryType = "consumption";
+            break;
+        }
+        this.config.onDomainChange(value);
+        this.updateSelectorsUI();
+        this.updateStatusIcons();
       });
-      topInput?.addEventListener("input", (e) => {
+      this.setupDeviceTypeListener();
+    }
+  }
+  // Setup device type listener (only for energy/water domains)
+  setupDeviceTypeListener() {
+    const deviceSelect = this.overlayEl?.querySelector("#plm-device-type");
+    if (deviceSelect) {
+      deviceSelect.addEventListener("change", (e) => {
         const value = e.target.value;
-        this.formData[status].topValue = value ? parseFloat(value) : null;
+        this.formData.deviceType = value;
+        this.config.onDeviceTypeChange(value);
       });
-    });
+    }
   }
   handleKeyDown = (e) => {
     if (e.key === "Escape") {
@@ -17031,7 +17217,7 @@ var PowerLimitsModalView = class {
       this.showSuccess();
       setTimeout(() => this.hideSuccess(), 3e3);
     } catch (error) {
-      this.showError(error.message || "Failed to save configuration");
+      this.showError(error.message || "Falha ao salvar configura\xE7\xE3o");
     } finally {
       this.isSaving = false;
       this.showSaveLoading(false);
@@ -17055,13 +17241,13 @@ var PowerLimitsModalView = class {
       const base = this.formData[status].baseValue;
       const top = this.formData[status].topValue;
       if (base !== null && base < 0) {
-        return `${STATUS_CONFIG[status === "standby" ? "standBy" : status].label}: Base value cannot be negative`;
+        return `${STATUS_CONFIG[status === "standby" ? "standBy" : status].label}: Limite inferior n\xE3o pode ser negativo`;
       }
       if (top !== null && top < 0) {
-        return `${STATUS_CONFIG[status === "standby" ? "standBy" : status].label}: Top value cannot be negative`;
+        return `${STATUS_CONFIG[status === "standby" ? "standBy" : status].label}: Limite superior n\xE3o pode ser negativo`;
       }
       if (base !== null && top !== null && base > top) {
-        return `${STATUS_CONFIG[status === "standby" ? "standBy" : status].label}: Base value should not exceed top value`;
+        return `${STATUS_CONFIG[status === "standby" ? "standBy" : status].label}: Limite inferior n\xE3o pode ser maior que o limite superior`;
       }
     }
     return null;
@@ -17130,11 +17316,13 @@ var PowerLimitsModalView = class {
   setFormData(data) {
     if (data.deviceType) this.formData.deviceType = data.deviceType;
     if (data.telemetryType) this.formData.telemetryType = data.telemetryType;
+    if (data.domain) this.formData.domain = data.domain;
     if (data.standby) this.formData.standby = { ...data.standby };
     if (data.normal) this.formData.normal = { ...data.normal };
     if (data.alert) this.formData.alert = { ...data.alert };
     if (data.failure) this.formData.failure = { ...data.failure };
     this.updateInputValues();
+    this.updateStatusIcons();
   }
   updateInputValues() {
     const statuses = ["standby", "normal", "alert", "failure"];
@@ -17142,16 +17330,16 @@ var PowerLimitsModalView = class {
       const baseInput = this.overlayEl?.querySelector(`#plm-${status}-base`);
       const topInput = this.overlayEl?.querySelector(`#plm-${status}-top`);
       if (baseInput) {
-        baseInput.value = this.formData[status].baseValue?.toString() ?? "";
+        baseInput.value = this.formatNumberForDisplay(this.formData[status].baseValue);
       }
       if (topInput) {
-        topInput.value = this.formData[status].topValue?.toString() ?? "";
+        topInput.value = this.formatNumberForDisplay(this.formData[status].topValue);
       }
     });
+    const domainSelect = this.overlayEl?.querySelector("#plm-domain");
     const deviceSelect = this.overlayEl?.querySelector("#plm-device-type");
-    const telemetrySelect = this.overlayEl?.querySelector("#plm-telemetry-type");
+    if (domainSelect) domainSelect.value = this.formData.domain;
     if (deviceSelect) deviceSelect.value = this.formData.deviceType;
-    if (telemetrySelect) telemetrySelect.value = this.formData.telemetryType;
   }
   getStyles() {
     const styles = this.config.styles || {};
@@ -17175,7 +17363,7 @@ var PowerLimitsModalView = class {
         opacity: 0;
         visibility: hidden;
         transition: all 0.3s ease;
-        font-family: ${styles.fontFamily || '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'};
+        font-family: ${styles.fontFamily || "'Roboto', Arial, sans-serif"};
       }
 
       .myio-power-limits-overlay.active {
@@ -17185,9 +17373,9 @@ var PowerLimitsModalView = class {
 
       .myio-power-limits-card {
         background: ${styles.backgroundColor || "#ffffff"};
-        border-radius: ${styles.borderRadius || "12px"};
+        border-radius: ${styles.borderRadius || "10px"};
         width: 90%;
-        max-width: 700px;
+        max-width: 1104px;
         max-height: 90vh;
         overflow-y: auto;
         transform: scale(0.9);
@@ -17199,36 +17387,55 @@ var PowerLimitsModalView = class {
         transform: scale(1);
       }
 
-      .myio-power-limits-header {
+      /* Header - ModalPremiumShell pattern */
+      .myio-modal-header {
         display: flex;
         align-items: center;
         justify-content: space-between;
-        padding: 20px 24px;
-        background: linear-gradient(135deg, ${primaryColor}, ${this.lightenColor(primaryColor, 20)});
-        color: white;
-        border-radius: 12px 12px 0 0;
+        padding: 4px 8px;
+        background: ${primaryColor};
+        border-radius: 10px 10px 0 0;
+        min-height: 20px;
       }
 
-      .myio-power-limits-title-section {
-        display: flex;
-        align-items: center;
-        gap: 12px;
+      .myio-modal-title {
+        margin: 6px;
+        font-size: 18px;
+        font-weight: 600;
+        color: white;
+        line-height: 2;
       }
 
-      .myio-power-limits-icon {
+      .myio-modal-close {
+        background: none;
+        border: none;
         font-size: 24px;
+        cursor: pointer;
+        padding: 4px 12px;
+        border-radius: 6px;
+        color: rgba(255, 255, 255, 0.8);
+        transition: background-color 0.2s, color 0.2s;
+        line-height: 1;
       }
 
-      .myio-power-limits-title {
-        font-size: 1.25rem;
-        font-weight: 600;
-        margin: 0;
+      .myio-modal-close:hover {
+        background-color: rgba(255, 255, 255, 0.2);
+        color: white;
       }
 
-      .myio-power-limits-actions {
+      /* Toolbar with Save/Reset buttons */
+      .myio-power-limits-toolbar {
+        display: flex;
+        justify-content: flex-end;
+        padding: 16px 24px;
+        background: #f9fafb;
+        border-top: 1px solid #e5e7eb;
+      }
+
+      .myio-toolbar-actions {
         display: flex;
         align-items: center;
-        gap: 8px;
+        gap: 12px;
       }
 
       .myio-btn {
@@ -17250,33 +17457,21 @@ var PowerLimitsModalView = class {
       }
 
       .myio-btn-primary {
-        background: white;
-        color: ${primaryColor};
+        background: ${primaryColor};
+        color: white;
       }
 
       .myio-btn-primary:hover:not(:disabled) {
-        background: #f3f4f6;
+        background: ${this.lightenColor(primaryColor, -10)};
       }
 
       .myio-btn-secondary {
-        background: rgba(255, 255, 255, 0.2);
-        color: white;
+        background: #e5e7eb;
+        color: #374151;
       }
 
       .myio-btn-secondary:hover:not(:disabled) {
-        background: rgba(255, 255, 255, 0.3);
-      }
-
-      .myio-btn-close {
-        background: transparent;
-        color: white;
-        font-size: 24px;
-        padding: 4px 8px;
-        line-height: 1;
-      }
-
-      .myio-btn-close:hover {
-        background: rgba(255, 255, 255, 0.1);
+        background: #d1d5db;
       }
 
       .myio-btn-spinner {
@@ -17294,7 +17489,7 @@ var PowerLimitsModalView = class {
 
       .myio-power-limits-selectors {
         display: grid;
-        grid-template-columns: 1fr 1fr;
+        grid-template-columns: 1fr 1fr 1fr;
         gap: 16px;
         padding: 20px 24px;
         background: #f9fafb;
@@ -17329,6 +17524,15 @@ var PowerLimitsModalView = class {
         box-shadow: 0 0 0 3px ${this.hexToRgba(primaryColor, 0.1)};
       }
 
+      .myio-fixed-value {
+        padding: 10px 12px;
+        border: 1px solid #e5e7eb;
+        border-radius: 6px;
+        font-size: 14px;
+        background: #f9fafb;
+        color: #6b7280;
+      }
+
       .myio-power-limits-grid {
         display: grid;
         grid-template-columns: repeat(2, 1fr);
@@ -17357,6 +17561,11 @@ var PowerLimitsModalView = class {
         margin-bottom: 12px;
       }
 
+      .myio-status-icon {
+        font-size: 18px;
+        line-height: 1;
+      }
+
       .myio-status-indicator {
         width: 12px;
         height: 12px;
@@ -17547,6 +17756,8 @@ var PowerLimitsPersister = class {
     const defaultFormData = {
       deviceType,
       telemetryType,
+      domain: "energy",
+      // Default to energy, will be overwritten by caller if needed
       standby: { baseValue: null, topValue: null },
       normal: { baseValue: null, topValue: null },
       alert: { baseValue: null, topValue: null },
@@ -17716,10 +17927,12 @@ async function openPowerLimitsSetupModal(params) {
   const persister = new PowerLimitsPersister(params.token, params.tbBaseUrl);
   let currentDeviceType = params.deviceType || "ELEVADOR";
   let currentTelemetryType = params.telemetryType || "consumption";
+  let currentDomain = params.domain || "energy";
   let existingLimits = params.existingMapPower || null;
   const view = new PowerLimitsModalView({
     deviceType: currentDeviceType,
     telemetryType: currentTelemetryType,
+    domain: currentDomain,
     styles: params.styles,
     locale: params.locale,
     onDeviceTypeChange: async (deviceType) => {
@@ -17730,6 +17943,9 @@ async function openPowerLimitsSetupModal(params) {
       currentTelemetryType = telemetryType;
       await loadFormData();
     },
+    onDomainChange: (domain) => {
+      currentDomain = domain;
+    },
     onSave: async () => {
       const formData = view.getFormData();
       const updatedLimits = persister.mergeFormDataIntoLimits(existingLimits, formData);
@@ -17755,6 +17971,7 @@ async function openPowerLimitsSetupModal(params) {
         existingLimits = await persister.loadCustomerPowerLimits(params.customerId);
       }
       const formData = persister.extractFormData(existingLimits, currentDeviceType, currentTelemetryType);
+      formData.domain = currentDomain;
       view.setFormData(formData);
     } catch (error) {
       console.error("[PowerLimitsSetupModal] Error loading form data:", error);