myio-js-library 0.1.174 → 0.1.177

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

@@ -16457,35 +16457,72 @@ ${rangeText}`;
   }
 
   // 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
@@ -16501,12 +16538,43 @@ ${rangeText}`;
       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";
@@ -16516,6 +16584,7 @@ ${rangeText}`;
         ${this.renderHeader()}
         ${this.renderSelectors()}
         ${this.renderStatusCards()}
+        ${this.renderToolbar()}
         ${this.renderLoadingState()}
         ${this.renderErrorState()}
         ${this.renderSuccessState()}
@@ -16532,80 +16601,107 @@ ${rangeText}`;
     }
     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>
@@ -16622,7 +16718,7 @@ ${rangeText}`;
       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>
     `;
     }
@@ -16638,7 +16734,7 @@ ${rangeText}`;
       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>
     `;
     }
@@ -16656,31 +16752,121 @@ ${rangeText}`;
       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") {
@@ -16703,7 +16889,7 @@ ${rangeText}`;
         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);
@@ -16727,13 +16913,13 @@ ${rangeText}`;
         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;
@@ -16802,11 +16988,13 @@ ${rangeText}`;
     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"];
@@ -16814,16 +17002,16 @@ ${rangeText}`;
         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 || {};
@@ -16847,7 +17035,7 @@ ${rangeText}`;
         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 {
@@ -16857,9 +17045,9 @@ ${rangeText}`;
 
       .myio-power-limits-card {
         background: ${styles.backgroundColor || "#ffffff"};
-        border-radius: ${styles.borderRadius || "12px"};
+        border-radius: ${styles.borderRadius || "10px"};
         width: 90%;
-        max-width: 875px;
+        max-width: 1104px;
         max-height: 90vh;
         overflow-y: auto;
         transform: scale(0.9);
@@ -16871,36 +17059,55 @@ ${rangeText}`;
         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 {
@@ -16922,33 +17129,21 @@ ${rangeText}`;
       }
 
       .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 {
@@ -16966,7 +17161,7 @@ ${rangeText}`;
 
       .myio-power-limits-selectors {
         display: grid;
-        grid-template-columns: 1fr 1fr;
+        grid-template-columns: 1fr 1fr 1fr;
         gap: 16px;
         padding: 20px 24px;
         background: #f9fafb;
@@ -17001,6 +17196,15 @@ ${rangeText}`;
         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);
@@ -17029,6 +17233,11 @@ ${rangeText}`;
         margin-bottom: 12px;
       }
 
+      .myio-status-icon {
+        font-size: 18px;
+        line-height: 1;
+      }
+
       .myio-status-indicator {
         width: 12px;
         height: 12px;
@@ -17219,6 +17428,8 @@ ${rangeText}`;
       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 },
@@ -17388,10 +17599,12 @@ ${rangeText}`;
     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) => {
@@ -17402,6 +17615,9 @@ ${rangeText}`;
         currentTelemetryType = telemetryType;
         await loadFormData();
       },
+      onDomainChange: (domain) => {
+        currentDomain = domain;
+      },
       onSave: async () => {
         const formData = view.getFormData();
         const updatedLimits = persister.mergeFormDataIntoLimits(existingLimits, formData);
@@ -17427,6 +17643,7 @@ ${rangeText}`;
           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);