myio-js-library 0.1.215 → 0.1.217

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

@@ -43378,6 +43378,1064 @@
     }
   }
 
+  // src/components/premium-modals/measurement-setup/types.ts
+  var WATER_UNITS = [
+    { value: "m3", label: "Metros C\xFAbicos (m\xB3)" },
+    { value: "liters", label: "Litros (L)" }
+  ];
+  var ENERGY_UNITS = [
+    { value: "auto", label: "Autom\xE1tico (kWh/MWh)" },
+    { value: "kwh", label: "Quilowatt-hora (kWh)" },
+    { value: "mwh", label: "Megawatt-hora (MWh)" }
+  ];
+  var TEMPERATURE_UNITS = [
+    { value: "celsius", label: "Celsius (\xB0C)" },
+    { value: "fahrenheit", label: "Fahrenheit (\xB0F)" }
+  ];
+  var DECIMAL_OPTIONS = [
+    { value: 0, label: "0 casas" },
+    { value: 1, label: "1 casa" },
+    { value: 2, label: "2 casas" },
+    { value: 3, label: "3 casas" },
+    { value: 4, label: "4 casas" },
+    { value: 5, label: "5 casas" },
+    { value: 6, label: "6 casas" }
+  ];
+  var DOMAIN_CONFIG5 = {
+    water: {
+      icon: "\u{1F4A7}",
+      label: "\xC1gua",
+      color: "#3b82f6",
+      bgColor: "rgba(59, 130, 246, 0.1)"
+    },
+    energy: {
+      icon: "\u26A1",
+      label: "Energia",
+      color: "#f59e0b",
+      bgColor: "rgba(245, 158, 11, 0.1)"
+    },
+    temperature: {
+      icon: "\u{1F321}\uFE0F",
+      label: "Temperatura",
+      color: "#ef4444",
+      bgColor: "rgba(239, 68, 68, 0.1)"
+    }
+  };
+  var DEFAULT_SETTINGS = {
+    version: "1.0.0",
+    updatedAt: (/* @__PURE__ */ new Date()).toISOString(),
+    water: {
+      unit: "m3",
+      decimalPlaces: 3,
+      autoScale: true
+    },
+    energy: {
+      unit: "auto",
+      decimalPlaces: 3,
+      forceUnit: false
+    },
+    temperature: {
+      unit: "celsius",
+      decimalPlaces: 1
+    }
+  };
+
+  // src/components/premium-modals/measurement-setup/MeasurementSetupView.ts
+  var MeasurementSetupView = class {
+    container = null;
+    overlayEl = null;
+    config;
+    formData;
+    isLoading = false;
+    isSaving = false;
+    constructor(config) {
+      this.config = config;
+      this.formData = {
+        water: { ...DEFAULT_SETTINGS.water },
+        energy: { ...DEFAULT_SETTINGS.energy },
+        temperature: { ...DEFAULT_SETTINGS.temperature }
+      };
+    }
+    render(targetContainer) {
+      this.overlayEl = document.createElement("div");
+      this.overlayEl.className = "myio-measurement-setup-overlay";
+      this.overlayEl.innerHTML = `
+      <style>${this.getStyles()}</style>
+      <div class="myio-measurement-setup-card">
+        ${this.renderHeader()}
+        <div class="myio-measurement-setup-body">
+          ${this.renderWaterSection()}
+          ${this.renderEnergySection()}
+          ${this.renderTemperatureSection()}
+        </div>
+        ${this.renderToolbar()}
+        ${this.renderLoadingState()}
+        ${this.renderErrorState()}
+        ${this.renderSuccessState()}
+      </div>
+    `;
+      const target = targetContainer || document.body;
+      target.appendChild(this.overlayEl);
+      this.container = this.overlayEl.querySelector(".myio-measurement-setup-card");
+      this.setupEventListeners();
+      requestAnimationFrame(() => {
+        this.overlayEl?.classList.add("active");
+      });
+      return this.overlayEl;
+    }
+    renderHeader() {
+      return `
+      <div class="myio-modal-header">
+        <h2 class="myio-modal-title">\u{1F4D0} Configura\xE7\xE3o de Medidas</h2>
+        <button class="myio-modal-close" id="msm-close-btn" type="button" aria-label="Fechar modal">\xD7</button>
+      </div>
+    `;
+    }
+    renderWaterSection() {
+      const cfg = DOMAIN_CONFIG5.water;
+      return `
+      <div class="myio-measurement-section" style="--section-color: ${cfg.color}; --section-bg: ${cfg.bgColor};">
+        <div class="myio-section-header">
+          <span class="myio-section-icon">${cfg.icon}</span>
+          <span class="myio-section-title">${cfg.label}</span>
+        </div>
+        <div class="myio-section-content">
+          <div class="myio-form-group">
+            <label for="msm-water-unit">Unidade</label>
+            <select id="msm-water-unit" class="myio-select">
+              ${WATER_UNITS.map((u) => `
+                <option value="${u.value}" ${u.value === this.formData.water.unit ? "selected" : ""}>
+                  ${u.label}
+                </option>
+              `).join("")}
+            </select>
+          </div>
+          <div class="myio-form-group">
+            <label for="msm-water-decimals">Casas Decimais</label>
+            <select id="msm-water-decimals" class="myio-select">
+              ${DECIMAL_OPTIONS.map((d) => `
+                <option value="${d.value}" ${d.value === this.formData.water.decimalPlaces ? "selected" : ""}>
+                  ${d.label}
+                </option>
+              `).join("")}
+            </select>
+          </div>
+          <div class="myio-form-group myio-checkbox-group">
+            <label class="myio-checkbox-label">
+              <input type="checkbox" id="msm-water-autoscale" ${this.formData.water.autoScale ? "checked" : ""}>
+              <span class="myio-checkbox-text">Escala autom\xE1tica (L\u2194m\xB3)</span>
+            </label>
+            <span class="myio-form-hint">Converte automaticamente entre unidades</span>
+          </div>
+        </div>
+        <div class="myio-section-preview">
+          <span class="myio-preview-label">Exemplo:</span>
+          <span class="myio-preview-value" id="msm-water-preview">1.234,567 m\xB3</span>
+        </div>
+      </div>
+    `;
+    }
+    renderEnergySection() {
+      const cfg = DOMAIN_CONFIG5.energy;
+      return `
+      <div class="myio-measurement-section" style="--section-color: ${cfg.color}; --section-bg: ${cfg.bgColor};">
+        <div class="myio-section-header">
+          <span class="myio-section-icon">${cfg.icon}</span>
+          <span class="myio-section-title">${cfg.label}</span>
+        </div>
+        <div class="myio-section-content">
+          <div class="myio-form-group">
+            <label for="msm-energy-unit">Unidade</label>
+            <select id="msm-energy-unit" class="myio-select">
+              ${ENERGY_UNITS.map((u) => `
+                <option value="${u.value}" ${u.value === this.formData.energy.unit ? "selected" : ""}>
+                  ${u.label}
+                </option>
+              `).join("")}
+            </select>
+          </div>
+          <div class="myio-form-group">
+            <label for="msm-energy-decimals">Casas Decimais</label>
+            <select id="msm-energy-decimals" class="myio-select">
+              ${DECIMAL_OPTIONS.filter((d) => d.value <= 4).map((d) => `
+                <option value="${d.value}" ${d.value === this.formData.energy.decimalPlaces ? "selected" : ""}>
+                  ${d.label}
+                </option>
+              `).join("")}
+            </select>
+          </div>
+          <div class="myio-form-group myio-checkbox-group">
+            <label class="myio-checkbox-label">
+              <input type="checkbox" id="msm-energy-forceunit" ${this.formData.energy.forceUnit ? "checked" : ""}>
+              <span class="myio-checkbox-text">For\xE7ar unidade selecionada</span>
+            </label>
+            <span class="myio-form-hint">Quando ativo, n\xE3o converte automaticamente kWh\u2194MWh</span>
+          </div>
+        </div>
+        <div class="myio-section-preview">
+          <span class="myio-preview-label">Exemplo:</span>
+          <span class="myio-preview-value" id="msm-energy-preview">1.234,567 kWh</span>
+        </div>
+      </div>
+    `;
+    }
+    renderTemperatureSection() {
+      const cfg = DOMAIN_CONFIG5.temperature;
+      return `
+      <div class="myio-measurement-section" style="--section-color: ${cfg.color}; --section-bg: ${cfg.bgColor};">
+        <div class="myio-section-header">
+          <span class="myio-section-icon">${cfg.icon}</span>
+          <span class="myio-section-title">${cfg.label}</span>
+        </div>
+        <div class="myio-section-content">
+          <div class="myio-form-group">
+            <label for="msm-temp-unit">Unidade</label>
+            <select id="msm-temp-unit" class="myio-select">
+              ${TEMPERATURE_UNITS.map((u) => `
+                <option value="${u.value}" ${u.value === this.formData.temperature.unit ? "selected" : ""}>
+                  ${u.label}
+                </option>
+              `).join("")}
+            </select>
+          </div>
+          <div class="myio-form-group">
+            <label for="msm-temp-decimals">Casas Decimais</label>
+            <select id="msm-temp-decimals" class="myio-select">
+              ${DECIMAL_OPTIONS.filter((d) => d.value <= 3).map((d) => `
+                <option value="${d.value}" ${d.value === this.formData.temperature.decimalPlaces ? "selected" : ""}>
+                  ${d.label}
+                </option>
+              `).join("")}
+            </select>
+          </div>
+        </div>
+        <div class="myio-section-preview">
+          <span class="myio-preview-label">Exemplo:</span>
+          <span class="myio-preview-value" id="msm-temp-preview">23,5 \xB0C</span>
+        </div>
+      </div>
+    `;
+    }
+    renderToolbar() {
+      return `
+      <div class="myio-measurement-setup-toolbar">
+        <div class="myio-toolbar-actions">
+          <button class="myio-btn myio-btn-secondary" id="msm-reset-btn" type="button">
+            Restaurar Padr\xE3o
+          </button>
+          <button class="myio-btn myio-btn-primary" id="msm-save-btn" type="button">
+            <span class="myio-btn-text">Salvar</span>
+            <span class="myio-btn-spinner" style="display: none;"></span>
+          </button>
+        </div>
+      </div>
+    `;
+    }
+    renderLoadingState() {
+      return `
+      <div class="myio-measurement-setup-loading" id="msm-loading" style="display: none;">
+        <div class="myio-spinner"></div>
+        <span>Carregando configura\xE7\xE3o...</span>
+      </div>
+    `;
+    }
+    renderErrorState() {
+      return `
+      <div class="myio-measurement-setup-error" id="msm-error" style="display: none;">
+        <span class="myio-error-icon">&#x26A0;</span>
+        <span class="myio-error-message" id="msm-error-msg"></span>
+      </div>
+    `;
+    }
+    renderSuccessState() {
+      return `
+      <div class="myio-measurement-setup-success" id="msm-success" style="display: none;">
+        <span class="myio-success-icon">&#x2713;</span>
+        <span class="myio-success-message">Configura\xE7\xE3o salva com sucesso!</span>
+      </div>
+    `;
+    }
+    setupEventListeners() {
+      if (!this.overlayEl) return;
+      const closeBtn = this.overlayEl.querySelector("#msm-close-btn");
+      closeBtn?.addEventListener("click", () => this.close());
+      this.overlayEl.addEventListener("click", (e) => {
+        if (e.target === this.overlayEl) {
+          this.close();
+        }
+      });
+      document.addEventListener("keydown", this.handleKeyDown);
+      const saveBtn = this.overlayEl.querySelector("#msm-save-btn");
+      saveBtn?.addEventListener("click", () => this.handleSave());
+      const resetBtn = this.overlayEl.querySelector("#msm-reset-btn");
+      resetBtn?.addEventListener("click", () => this.handleReset());
+      const waterUnit = this.overlayEl.querySelector("#msm-water-unit");
+      const waterDecimals = this.overlayEl.querySelector("#msm-water-decimals");
+      const waterAutoScale = this.overlayEl.querySelector("#msm-water-autoscale");
+      waterUnit?.addEventListener("change", (e) => {
+        this.formData.water.unit = e.target.value;
+        this.updatePreviews();
+      });
+      waterDecimals?.addEventListener("change", (e) => {
+        this.formData.water.decimalPlaces = parseInt(e.target.value, 10);
+        this.updatePreviews();
+      });
+      waterAutoScale?.addEventListener("change", (e) => {
+        this.formData.water.autoScale = e.target.checked;
+      });
+      const energyUnit = this.overlayEl.querySelector("#msm-energy-unit");
+      const energyDecimals = this.overlayEl.querySelector("#msm-energy-decimals");
+      const energyForceUnit = this.overlayEl.querySelector("#msm-energy-forceunit");
+      energyUnit?.addEventListener("change", (e) => {
+        this.formData.energy.unit = e.target.value;
+        this.updatePreviews();
+      });
+      energyDecimals?.addEventListener("change", (e) => {
+        this.formData.energy.decimalPlaces = parseInt(e.target.value, 10);
+        this.updatePreviews();
+      });
+      energyForceUnit?.addEventListener("change", (e) => {
+        this.formData.energy.forceUnit = e.target.checked;
+      });
+      const tempUnit = this.overlayEl.querySelector("#msm-temp-unit");
+      const tempDecimals = this.overlayEl.querySelector("#msm-temp-decimals");
+      tempUnit?.addEventListener("change", (e) => {
+        this.formData.temperature.unit = e.target.value;
+        this.updatePreviews();
+      });
+      tempDecimals?.addEventListener("change", (e) => {
+        this.formData.temperature.decimalPlaces = parseInt(e.target.value, 10);
+        this.updatePreviews();
+      });
+      this.updatePreviews();
+    }
+    updatePreviews() {
+      const waterPreview = this.overlayEl?.querySelector("#msm-water-preview");
+      if (waterPreview) {
+        const sampleValue = 1234.567;
+        const unit = this.formData.water.unit === "liters" ? "L" : "m\xB3";
+        const displayValue = this.formData.water.unit === "liters" ? sampleValue * 1e3 : sampleValue;
+        waterPreview.textContent = this.formatNumber(displayValue, this.formData.water.decimalPlaces) + " " + unit;
+      }
+      const energyPreview = this.overlayEl?.querySelector("#msm-energy-preview");
+      if (energyPreview) {
+        const sampleValueKwh = 1234.567;
+        let displayValue = sampleValueKwh;
+        let unit = "kWh";
+        if (this.formData.energy.unit === "mwh") {
+          displayValue = sampleValueKwh / 1e3;
+          unit = "MWh";
+        } else if (this.formData.energy.unit === "auto" && sampleValueKwh > 1e3) {
+          displayValue = sampleValueKwh / 1e3;
+          unit = "MWh";
+        }
+        energyPreview.textContent = this.formatNumber(displayValue, this.formData.energy.decimalPlaces) + " " + unit;
+      }
+      const tempPreview = this.overlayEl?.querySelector("#msm-temp-preview");
+      if (tempPreview) {
+        const sampleCelsius = 23.5;
+        let displayValue = sampleCelsius;
+        let unit = "\xB0C";
+        if (this.formData.temperature.unit === "fahrenheit") {
+          displayValue = sampleCelsius * 9 / 5 + 32;
+          unit = "\xB0F";
+        }
+        tempPreview.textContent = this.formatNumber(displayValue, this.formData.temperature.decimalPlaces) + " " + unit;
+      }
+    }
+    formatNumber(value, decimals) {
+      const parts = value.toFixed(decimals).split(".");
+      parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ".");
+      return decimals > 0 ? parts.join(",") : parts[0];
+    }
+    handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        this.close();
+      }
+    };
+    async handleSave() {
+      if (this.isSaving) return;
+      this.isSaving = true;
+      this.showSaveLoading(true);
+      this.hideError();
+      this.hideSuccess();
+      try {
+        await this.config.onSave();
+        this.showSuccess();
+        setTimeout(() => this.hideSuccess(), 3e3);
+      } catch (error) {
+        this.showError(error.message || "Falha ao salvar configura\xE7\xE3o");
+      } finally {
+        this.isSaving = false;
+        this.showSaveLoading(false);
+      }
+    }
+    handleReset() {
+      this.formData = {
+        water: { ...DEFAULT_SETTINGS.water },
+        energy: { ...DEFAULT_SETTINGS.energy },
+        temperature: { ...DEFAULT_SETTINGS.temperature }
+      };
+      this.updateFormInputs();
+      this.updatePreviews();
+      this.hideError();
+      this.hideSuccess();
+    }
+    updateFormInputs() {
+      const waterUnit = this.overlayEl?.querySelector("#msm-water-unit");
+      const waterDecimals = this.overlayEl?.querySelector("#msm-water-decimals");
+      const waterAutoScale = this.overlayEl?.querySelector("#msm-water-autoscale");
+      if (waterUnit) waterUnit.value = this.formData.water.unit;
+      if (waterDecimals) waterDecimals.value = String(this.formData.water.decimalPlaces);
+      if (waterAutoScale) waterAutoScale.checked = this.formData.water.autoScale;
+      const energyUnit = this.overlayEl?.querySelector("#msm-energy-unit");
+      const energyDecimals = this.overlayEl?.querySelector("#msm-energy-decimals");
+      const energyForceUnit = this.overlayEl?.querySelector("#msm-energy-forceunit");
+      if (energyUnit) energyUnit.value = this.formData.energy.unit;
+      if (energyDecimals) energyDecimals.value = String(this.formData.energy.decimalPlaces);
+      if (energyForceUnit) energyForceUnit.checked = this.formData.energy.forceUnit;
+      const tempUnit = this.overlayEl?.querySelector("#msm-temp-unit");
+      const tempDecimals = this.overlayEl?.querySelector("#msm-temp-decimals");
+      if (tempUnit) tempUnit.value = this.formData.temperature.unit;
+      if (tempDecimals) tempDecimals.value = String(this.formData.temperature.decimalPlaces);
+    }
+    close() {
+      document.removeEventListener("keydown", this.handleKeyDown);
+      if (this.overlayEl) {
+        this.overlayEl.classList.remove("active");
+        setTimeout(() => {
+          this.overlayEl?.remove();
+          this.overlayEl = null;
+          this.container = null;
+          this.config.onClose();
+        }, 300);
+      }
+    }
+    destroy() {
+      document.removeEventListener("keydown", this.handleKeyDown);
+      this.overlayEl?.remove();
+      this.overlayEl = null;
+      this.container = null;
+    }
+    showLoading() {
+      this.isLoading = true;
+      const loadingEl = this.overlayEl?.querySelector("#msm-loading");
+      const bodyEl = this.overlayEl?.querySelector(".myio-measurement-setup-body");
+      if (loadingEl) loadingEl.style.display = "flex";
+      if (bodyEl) bodyEl.style.opacity = "0.5";
+    }
+    hideLoading() {
+      this.isLoading = false;
+      const loadingEl = this.overlayEl?.querySelector("#msm-loading");
+      const bodyEl = this.overlayEl?.querySelector(".myio-measurement-setup-body");
+      if (loadingEl) loadingEl.style.display = "none";
+      if (bodyEl) bodyEl.style.opacity = "1";
+    }
+    showSaveLoading(show) {
+      const saveBtn = this.overlayEl?.querySelector("#msm-save-btn");
+      const btnText = saveBtn?.querySelector(".myio-btn-text");
+      const btnSpinner = saveBtn?.querySelector(".myio-btn-spinner");
+      if (saveBtn) saveBtn.disabled = show;
+      if (btnText) btnText.style.display = show ? "none" : "inline";
+      if (btnSpinner) btnSpinner.style.display = show ? "inline-block" : "none";
+    }
+    showError(message) {
+      const errorEl = this.overlayEl?.querySelector("#msm-error");
+      const errorMsg = this.overlayEl?.querySelector("#msm-error-msg");
+      if (errorEl) errorEl.style.display = "flex";
+      if (errorMsg) errorMsg.textContent = message;
+    }
+    hideError() {
+      const errorEl = this.overlayEl?.querySelector("#msm-error");
+      if (errorEl) errorEl.style.display = "none";
+    }
+    showSuccess() {
+      const successEl = this.overlayEl?.querySelector("#msm-success");
+      if (successEl) successEl.style.display = "flex";
+    }
+    hideSuccess() {
+      const successEl = this.overlayEl?.querySelector("#msm-success");
+      if (successEl) successEl.style.display = "none";
+    }
+    getFormData() {
+      return {
+        water: { ...this.formData.water },
+        energy: { ...this.formData.energy },
+        temperature: { ...this.formData.temperature }
+      };
+    }
+    setFormData(data) {
+      if (data.water) this.formData.water = { ...data.water };
+      if (data.energy) this.formData.energy = { ...data.energy };
+      if (data.temperature) this.formData.temperature = { ...data.temperature };
+      this.updateFormInputs();
+      this.updatePreviews();
+    }
+    getStyles() {
+      const styles = this.config.styles || {};
+      const primaryColor = styles.primaryColor || "#4A148C";
+      const successColor = styles.successColor || "#22c55e";
+      const dangerColor = styles.dangerColor || "#ef4444";
+      return `
+      .myio-measurement-setup-overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.6);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: ${styles.zIndex || 1e4};
+        opacity: 0;
+        visibility: hidden;
+        transition: all 0.3s ease;
+        font-family: ${styles.fontFamily || "'Roboto', Arial, sans-serif"};
+      }
+
+      .myio-measurement-setup-overlay.active {
+        opacity: 1;
+        visibility: visible;
+      }
+
+      .myio-measurement-setup-card {
+        background: ${styles.backgroundColor || "#ffffff"};
+        border-radius: ${styles.borderRadius || "8px"};
+        width: 90%;
+        max-width: 580px;
+        max-height: 90vh;
+        overflow-y: auto;
+        transform: scale(0.9);
+        transition: transform 0.3s ease;
+        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+      }
+
+      .myio-measurement-setup-overlay.active .myio-measurement-setup-card {
+        transform: scale(1);
+      }
+
+      /* Header */
+      .myio-modal-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 6px 12px;
+        background: ${primaryColor};
+        border-radius: 8px 8px 0 0;
+        min-height: 18px;
+      }
+
+      .myio-modal-title {
+        margin: 4px;
+        font-size: 14px;
+        font-weight: 600;
+        color: white;
+        line-height: 1.5;
+      }
+
+      .myio-modal-close {
+        background: none;
+        border: none;
+        font-size: 18px;
+        cursor: pointer;
+        padding: 2px 8px;
+        border-radius: 4px;
+        color: rgba(255, 255, 255, 0.8);
+        transition: background-color 0.2s, color 0.2s;
+        line-height: 1;
+      }
+
+      .myio-modal-close:hover {
+        background-color: rgba(255, 255, 255, 0.2);
+        color: white;
+      }
+
+      /* Body */
+      .myio-measurement-setup-body {
+        padding: 12px 16px;
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        transition: opacity 0.3s;
+      }
+
+      /* Section cards */
+      .myio-measurement-section {
+        background: var(--section-bg);
+        border: 1px solid var(--section-color);
+        border-radius: 6px;
+        padding: 10px 12px;
+        transition: transform 0.2s, box-shadow 0.2s;
+      }
+
+      .myio-measurement-section:hover {
+        transform: translateY(-1px);
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+      }
+
+      .myio-section-header {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        margin-bottom: 8px;
+        padding-bottom: 6px;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+      }
+
+      .myio-section-icon {
+        font-size: 16px;
+        line-height: 1;
+      }
+
+      .myio-section-title {
+        font-weight: 600;
+        font-size: 13px;
+        color: #1f2937;
+      }
+
+      .myio-section-content {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+        gap: 10px;
+      }
+
+      .myio-section-preview {
+        margin-top: 8px;
+        padding-top: 6px;
+        border-top: 1px dashed rgba(0, 0, 0, 0.08);
+        display: flex;
+        align-items: center;
+        gap: 6px;
+      }
+
+      .myio-preview-label {
+        font-size: 11px;
+        color: #6b7280;
+      }
+
+      .myio-preview-value {
+        font-size: 13px;
+        font-weight: 600;
+        color: var(--section-color);
+        font-family: 'Consolas', 'Monaco', monospace;
+      }
+
+      /* Form elements */
+      .myio-form-group {
+        display: flex;
+        flex-direction: column;
+        gap: 3px;
+      }
+
+      .myio-form-group label {
+        font-size: 11px;
+        font-weight: 500;
+        color: #374151;
+      }
+
+      .myio-select {
+        padding: 6px 8px;
+        border: 1px solid #d1d5db;
+        border-radius: 4px;
+        font-size: 12px;
+        background: white;
+        color: #1f2937;
+        transition: border-color 0.2s, box-shadow 0.2s;
+        cursor: pointer;
+      }
+
+      .myio-select:focus {
+        outline: none;
+        border-color: ${primaryColor};
+        box-shadow: 0 0 0 2px ${this.hexToRgba(primaryColor, 0.1)};
+      }
+
+      .myio-checkbox-group {
+        grid-column: 1 / -1;
+      }
+
+      .myio-checkbox-label {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        cursor: pointer;
+      }
+
+      .myio-checkbox-label input[type="checkbox"] {
+        width: 14px;
+        height: 14px;
+        accent-color: ${primaryColor};
+        cursor: pointer;
+      }
+
+      .myio-checkbox-text {
+        font-size: 12px;
+        color: #374151;
+      }
+
+      .myio-form-hint {
+        font-size: 10px;
+        color: #9ca3af;
+        margin-top: 2px;
+      }
+
+      /* Toolbar */
+      .myio-measurement-setup-toolbar {
+        display: flex;
+        justify-content: flex-end;
+        padding: 10px 16px;
+        background: #f9fafb;
+        border-top: 1px solid #e5e7eb;
+        border-radius: 0 0 8px 8px;
+      }
+
+      .myio-toolbar-actions {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      .myio-btn {
+        padding: 6px 14px;
+        border-radius: ${styles.buttonRadius || "4px"};
+        font-size: 12px;
+        font-weight: 500;
+        cursor: pointer;
+        border: none;
+        transition: all 0.2s;
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+      }
+
+      .myio-btn:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+      }
+
+      .myio-btn-primary {
+        background: ${primaryColor};
+        color: white;
+      }
+
+      .myio-btn-primary:hover:not(:disabled) {
+        background: ${this.lightenColor(primaryColor, -10)};
+      }
+
+      .myio-btn-secondary {
+        background: #e5e7eb;
+        color: #374151;
+      }
+
+      .myio-btn-secondary:hover:not(:disabled) {
+        background: #d1d5db;
+      }
+
+      .myio-btn-spinner {
+        width: 12px;
+        height: 12px;
+        border: 2px solid white;
+        border-top-color: transparent;
+        border-radius: 50%;
+        animation: spin 0.8s linear infinite;
+      }
+
+      @keyframes spin {
+        to { transform: rotate(360deg); }
+      }
+
+      /* Loading, Error, Success states */
+      .myio-measurement-setup-loading,
+      .myio-measurement-setup-error,
+      .myio-measurement-setup-success {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+        padding: 8px 12px;
+        margin: 0 16px 12px;
+        border-radius: 4px;
+        font-size: 12px;
+      }
+
+      .myio-measurement-setup-loading {
+        background: #f3f4f6;
+        color: #6b7280;
+      }
+
+      .myio-measurement-setup-error {
+        background: #fef2f2;
+        color: ${dangerColor};
+        border: 1px solid ${dangerColor};
+      }
+
+      .myio-measurement-setup-success {
+        background: #f0fdf4;
+        color: ${successColor};
+        border: 1px solid ${successColor};
+      }
+
+      .myio-spinner {
+        width: 16px;
+        height: 16px;
+        border: 2px solid #e5e7eb;
+        border-top-color: ${primaryColor};
+        border-radius: 50%;
+        animation: spin 0.8s linear infinite;
+      }
+
+      .myio-error-icon, .myio-success-icon {
+        font-size: 14px;
+      }
+
+      @media (max-width: 500px) {
+        .myio-section-content {
+          grid-template-columns: 1fr;
+        }
+
+        .myio-toolbar-actions {
+          flex-direction: column;
+          width: 100%;
+        }
+
+        .myio-btn {
+          width: 100%;
+          justify-content: center;
+        }
+      }
+    `;
+    }
+    lightenColor(hex, percent) {
+      const num = parseInt(hex.replace("#", ""), 16);
+      const amt = Math.round(2.55 * percent);
+      const R = (num >> 16) + amt;
+      const G = (num >> 8 & 255) + amt;
+      const B = (num & 255) + amt;
+      return "#" + (16777216 + (R < 255 ? R < 1 ? 0 : R : 255) * 65536 + (G < 255 ? G < 1 ? 0 : G : 255) * 256 + (B < 255 ? B < 1 ? 0 : B : 255)).toString(16).slice(1);
+    }
+    hexToRgba(hex, alpha) {
+      const num = parseInt(hex.replace("#", ""), 16);
+      const R = num >> 16;
+      const G = num >> 8 & 255;
+      const B = num & 255;
+      return `rgba(${R}, ${G}, ${B}, ${alpha})`;
+    }
+  };
+
+  // src/components/premium-modals/measurement-setup/MeasurementSetupPersister.ts
+  var MeasurementSetupPersister = class _MeasurementSetupPersister {
+    token;
+    tbBaseUrl;
+    static ATTRIBUTE_KEY = "measurementDisplaySettings";
+    static FETCH_TIMEOUT_MS = 8e3;
+    constructor(token, tbBaseUrl) {
+      this.token = token;
+      this.tbBaseUrl = tbBaseUrl || window.location.origin;
+    }
+    /**
+     * Fetch with timeout to prevent hanging requests
+     */
+    async fetchWithTimeout(url, options, timeoutMs = _MeasurementSetupPersister.FETCH_TIMEOUT_MS) {
+      const controller = new AbortController();
+      const timeoutId = setTimeout(() => controller.abort(), timeoutMs);
+      try {
+        const response = await fetch(url, {
+          ...options,
+          signal: controller.signal
+        });
+        return response;
+      } finally {
+        clearTimeout(timeoutId);
+      }
+    }
+    /**
+     * Load measurement settings from customer SERVER_SCOPE
+     */
+    async loadSettings(customerId) {
+      try {
+        const url = `${this.tbBaseUrl}/api/plugins/telemetry/CUSTOMER/${customerId}/values/attributes/SERVER_SCOPE?keys=${_MeasurementSetupPersister.ATTRIBUTE_KEY}`;
+        console.log("[MeasurementSetupPersister] Loading settings from:", url);
+        const response = await this.fetchWithTimeout(url, {
+          headers: {
+            "X-Authorization": `Bearer ${this.token}`,
+            "Content-Type": "application/json"
+          }
+        });
+        if (!response.ok) {
+          console.warn(`[MeasurementSetupPersister] HTTP ${response.status}: ${response.statusText}`);
+          return null;
+        }
+        const attrs = await response.json();
+        const settingsAttr = attrs.find((a) => a.key === _MeasurementSetupPersister.ATTRIBUTE_KEY);
+        if (!settingsAttr) {
+          console.log("[MeasurementSetupPersister] No existing settings found, using defaults");
+          return null;
+        }
+        const value = typeof settingsAttr.value === "string" ? JSON.parse(settingsAttr.value) : settingsAttr.value;
+        console.log("[MeasurementSetupPersister] Loaded settings:", value);
+        return this.validateAndMergeSettings(value);
+      } catch (error) {
+        console.error("[MeasurementSetupPersister] Failed to load settings:", error);
+        return null;
+      }
+    }
+    /**
+     * Save measurement settings to customer SERVER_SCOPE
+     */
+    async saveSettings(customerId, settings) {
+      try {
+        const url = `${this.tbBaseUrl}/api/plugins/telemetry/CUSTOMER/${customerId}/attributes/SERVER_SCOPE`;
+        console.log("[MeasurementSetupPersister] Saving settings to:", url);
+        const payload = {
+          [_MeasurementSetupPersister.ATTRIBUTE_KEY]: JSON.stringify(settings)
+        };
+        const response = await this.fetchWithTimeout(url, {
+          method: "POST",
+          headers: {
+            "X-Authorization": `Bearer ${this.token}`,
+            "Content-Type": "application/json"
+          },
+          body: JSON.stringify(payload)
+        });
+        if (!response.ok) {
+          const errorText = await response.text();
+          console.error("[MeasurementSetupPersister] Save failed:", response.status, errorText);
+          return {
+            ok: false,
+            error: {
+              code: response.status === 401 ? "AUTH_ERROR" : "NETWORK_ERROR",
+              message: `Failed to save settings: HTTP ${response.status}`,
+              cause: errorText
+            }
+          };
+        }
+        console.log("[MeasurementSetupPersister] Settings saved successfully");
+        return { ok: true, settings };
+      } catch (error) {
+        console.error("[MeasurementSetupPersister] Save error:", error);
+        return {
+          ok: false,
+          error: {
+            code: "UNKNOWN_ERROR",
+            message: error.message || "Failed to save settings",
+            cause: error
+          }
+        };
+      }
+    }
+    /**
+     * Validate and merge settings with defaults to ensure all fields exist
+     */
+    validateAndMergeSettings(settings) {
+      return {
+        version: settings.version || DEFAULT_SETTINGS.version,
+        updatedAt: settings.updatedAt || DEFAULT_SETTINGS.updatedAt,
+        updatedBy: settings.updatedBy,
+        water: {
+          unit: settings.water?.unit || DEFAULT_SETTINGS.water.unit,
+          decimalPlaces: settings.water?.decimalPlaces ?? DEFAULT_SETTINGS.water.decimalPlaces,
+          autoScale: settings.water?.autoScale ?? DEFAULT_SETTINGS.water.autoScale
+        },
+        energy: {
+          unit: settings.energy?.unit || DEFAULT_SETTINGS.energy.unit,
+          decimalPlaces: settings.energy?.decimalPlaces ?? DEFAULT_SETTINGS.energy.decimalPlaces,
+          forceUnit: settings.energy?.forceUnit ?? DEFAULT_SETTINGS.energy.forceUnit
+        },
+        temperature: {
+          unit: settings.temperature?.unit || DEFAULT_SETTINGS.temperature.unit,
+          decimalPlaces: settings.temperature?.decimalPlaces ?? DEFAULT_SETTINGS.temperature.decimalPlaces
+        }
+      };
+    }
+    /**
+     * Convert form data to full settings object for persistence
+     */
+    formDataToSettings(formData, existingSettings) {
+      return {
+        version: existingSettings?.version || DEFAULT_SETTINGS.version,
+        updatedAt: (/* @__PURE__ */ new Date()).toISOString(),
+        updatedBy: existingSettings?.updatedBy,
+        water: { ...formData.water },
+        energy: { ...formData.energy },
+        temperature: { ...formData.temperature }
+      };
+    }
+    /**
+     * Extract form data from settings
+     */
+    settingsToFormData(settings) {
+      const s = settings || DEFAULT_SETTINGS;
+      return {
+        water: { ...s.water },
+        energy: { ...s.energy },
+        temperature: { ...s.temperature }
+      };
+    }
+  };
+
+  // src/components/premium-modals/measurement-setup/openMeasurementSetupModal.ts
+  async function openMeasurementSetupModal(params) {
+    if (!params.token) {
+      throw new Error("[MeasurementSetupModal] token is required");
+    }
+    if (!params.customerId) {
+      throw new Error("[MeasurementSetupModal] customerId is required");
+    }
+    const persister = new MeasurementSetupPersister(params.token, params.tbBaseUrl);
+    let existingSettings = params.existingSettings || null;
+    const view = new MeasurementSetupView({
+      styles: params.styles,
+      onSave: async () => {
+        const formData = view.getFormData();
+        const settings = persister.formDataToSettings(formData, existingSettings);
+        const result = await persister.saveSettings(params.customerId, settings);
+        if (!result.ok) {
+          throw new Error(result.error?.message || "Failed to save configuration");
+        }
+        existingSettings = settings;
+        if (params.onSave) {
+          params.onSave(settings);
+        }
+      },
+      onClose: () => {
+        if (params.onClose) {
+          params.onClose();
+        }
+      }
+    });
+    async function loadFormData() {
+      view.showLoading();
+      try {
+        if (!existingSettings) {
+          existingSettings = await persister.loadSettings(params.customerId);
+        }
+        const formData = persister.settingsToFormData(existingSettings);
+        view.setFormData(formData);
+      } catch (error) {
+        console.error("[MeasurementSetupModal] Error loading form data:", error);
+        view.showError(error.message || "Failed to load configuration");
+      } finally {
+        view.hideLoading();
+      }
+    }
+    let container;
+    if (params.container) {
+      if (typeof params.container === "string") {
+        container = document.querySelector(params.container);
+      } else {
+        container = params.container;
+      }
+    }
+    view.render(container);
+    await loadFormData();
+    return {
+      destroy: () => view.destroy(),
+      getFormData: () => view.getFormData(),
+      setFormData: (data) => view.setFormData(data)
+    };
+  }
+
   exports.ANNOTATION_TYPE_COLORS = ANNOTATION_TYPE_COLORS;
   exports.ANNOTATION_TYPE_LABELS = ANNOTATION_TYPE_LABELS;
   exports.ANNOTATION_TYPE_LABELS_EN = ANNOTATION_TYPE_LABELS_EN;
@@ -43388,14 +44446,17 @@
   exports.CONSUMPTION_THEME_COLORS = THEME_COLORS;
   exports.ConnectionStatusType = ConnectionStatusType;
   exports.ContractSummaryTooltip = ContractSummaryTooltip;
+  exports.DECIMAL_OPTIONS = DECIMAL_OPTIONS;
   exports.DEFAULT_CLAMP_RANGE = DEFAULT_CLAMP_RANGE;
   exports.DEFAULT_ENERGY_GROUP_COLORS = DEFAULT_ENERGY_GROUP_COLORS;
   exports.DEFAULT_GAS_GROUP_COLORS = DEFAULT_GAS_GROUP_COLORS;
+  exports.DEFAULT_MEASUREMENT_SETTINGS = DEFAULT_SETTINGS;
   exports.DEFAULT_SHOPPING_COLORS = DEFAULT_SHOPPING_COLORS;
   exports.DEFAULT_WATER_GROUP_COLORS = DEFAULT_WATER_GROUP_COLORS;
   exports.DEVICE_COUNT_KEYS = DEVICE_COUNT_KEYS;
   exports.DeviceComparisonTooltip = DeviceComparisonTooltip;
   exports.DeviceStatusType = DeviceStatusType;
+  exports.ENERGY_UNITS = ENERGY_UNITS;
   exports.EXPORT_DEFAULT_COLORS = EXPORT_DEFAULT_COLORS;
   exports.EXPORT_DOMAIN_ICONS = EXPORT_DOMAIN_ICONS;
   exports.EXPORT_DOMAIN_LABELS = EXPORT_DOMAIN_LABELS;
@@ -43406,6 +44467,7 @@
   exports.IMPORTANCE_LABELS = IMPORTANCE_LABELS;
   exports.IMPORTANCE_LABELS_EN = IMPORTANCE_LABELS_EN;
   exports.InfoTooltip = InfoTooltip;
+  exports.MEASUREMENT_DOMAIN_CONFIG = DOMAIN_CONFIG5;
   exports.MyIOChartModal = MyIOChartModal;
   exports.MyIODraggableCard = MyIODraggableCard;
   exports.MyIOSelectionStoreClass = MyIOSelectionStoreClass;
@@ -43416,9 +44478,11 @@
   exports.STATUS_COLORS = STATUS_COLORS;
   exports.STATUS_LABELS = STATUS_LABELS;
   exports.STATUS_LABELS_EN = STATUS_LABELS_EN;
+  exports.TEMPERATURE_UNITS = TEMPERATURE_UNITS;
   exports.TempComparisonTooltip = TempComparisonTooltip;
   exports.TempRangeTooltip = TempRangeTooltip;
   exports.TempSensorSummaryTooltip = TempSensorSummaryTooltip;
+  exports.WATER_UNITS = WATER_UNITS;
   exports.WaterSummaryTooltip = WaterSummaryTooltip;
   exports.addDetectionContext = addDetectionContext;
   exports.addNamespace = addNamespace;
@@ -43524,6 +44588,7 @@
   exports.openDashboardPopupWaterTank = openDashboardPopupWaterTank;
   exports.openDemandModal = openDemandModal;
   exports.openGoalsPanel = openGoalsPanel;
+  exports.openMeasurementSetupModal = openMeasurementSetupModal;
   exports.openPowerLimitsSetupModal = openPowerLimitsSetupModal;
   exports.openRealTimeTelemetryModal = openRealTimeTelemetryModal;
   exports.openTemperatureComparisonModal = openTemperatureComparisonModal;