myio-js-library 0.1.172 → 0.1.174

package/dist/index.cjs

@@ -588,6 +588,9 @@ __export(index_exports, {
   MyIOSelectionStore: () => MyIOSelectionStore,
   MyIOSelectionStoreClass: () => MyIOSelectionStoreClass,
   MyIOToast: () => MyIOToast,
+  POWER_LIMITS_DEVICE_TYPES: () => DEVICE_TYPES,
+  POWER_LIMITS_STATUS_CONFIG: () => STATUS_CONFIG,
+  POWER_LIMITS_TELEMETRY_TYPES: () => TELEMETRY_TYPES2,
   addDetectionContext: () => addDetectionContext,
   addNamespace: () => addNamespace,
   aggregateByDay: () => aggregateByDay,
@@ -685,6 +688,7 @@ __export(index_exports, {
   openDashboardPopupWaterTank: () => openDashboardPopupWaterTank,
   openDemandModal: () => openDemandModal,
   openGoalsPanel: () => openGoalsPanel,
+  openPowerLimitsSetupModal: () => openPowerLimitsSetupModal,
   openRealTimeTelemetryModal: () => openRealTimeTelemetryModal,
   openTemperatureComparisonModal: () => openTemperatureComparisonModal,
   openTemperatureModal: () => openTemperatureModal,
@@ -16780,6 +16784,1002 @@ function validateOptions2(options) {
   }
 }
 
+// src/components/premium-modals/power-limits/types.ts
+var DEVICE_TYPES = [
+  { value: "ELEVADOR", label: "Elevator" },
+  { value: "ESCADA_ROLANTE", label: "Escalator" },
+  { value: "MOTOR", label: "Motor" },
+  { value: "BOMBA", label: "Pump" },
+  { value: "CHILLER", label: "Chiller" },
+  { value: "AR_CONDICIONADO", label: "Air Conditioner" },
+  { value: "HVAC", label: "HVAC" },
+  { value: "FANCOIL", label: "Fancoil" },
+  { value: "3F_MEDIDOR", label: "Three-phase Meter" }
+];
+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: "" }
+];
+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)" }
+};
+
+// src/components/premium-modals/power-limits/PowerLimitsModalView.ts
+var PowerLimitsModalView = class {
+  container = null;
+  overlayEl = null;
+  config;
+  formData;
+  isLoading = false;
+  isSaving = false;
+  constructor(config) {
+    this.config = config;
+    this.formData = {
+      deviceType: config.deviceType,
+      telemetryType: config.telemetryType,
+      standby: { baseValue: null, topValue: null },
+      normal: { baseValue: null, topValue: null },
+      alert: { baseValue: null, topValue: null },
+      failure: { baseValue: null, topValue: null }
+    };
+  }
+  render(targetContainer) {
+    this.overlayEl = document.createElement("div");
+    this.overlayEl.className = "myio-power-limits-overlay";
+    this.overlayEl.innerHTML = `
+      <style>${this.getStyles()}</style>
+      <div class="myio-power-limits-card">
+        ${this.renderHeader()}
+        ${this.renderSelectors()}
+        ${this.renderStatusCards()}
+        ${this.renderLoadingState()}
+        ${this.renderErrorState()}
+        ${this.renderSuccessState()}
+      </div>
+    `;
+    const target = targetContainer || document.body;
+    target.appendChild(this.overlayEl);
+    this.container = this.overlayEl.querySelector(".myio-power-limits-card");
+    this.setupEventListeners();
+    requestAnimationFrame(() => {
+      this.overlayEl?.classList.add("active");
+    });
+    return this.overlayEl;
+  }
+  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">
+          <button class="myio-btn myio-btn-primary" id="plm-save-btn" type="button">
+            <span class="myio-btn-text">Save</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>`
+    ).join("");
+    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}
+          </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>
+        </div>
+      </div>
+    `;
+  }
+  renderStatusCards() {
+    const statuses = ["standby", "normal", "alert", "failure"];
+    const cards = statuses.map((status) => {
+      const config = STATUS_CONFIG[status === "standby" ? "standBy" : status];
+      const formValues = this.formData[status];
+      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-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>
+              <input
+                type="number"
+                id="plm-${status}-base"
+                class="myio-input"
+                min="0"
+                step="0.01"
+                value="${formValues.baseValue ?? ""}"
+                placeholder="0"
+              >
+            </div>
+            <div class="myio-input-group">
+              <label for="plm-${status}-top">Top Value</label>
+              <input
+                type="number"
+                id="plm-${status}-top"
+                class="myio-input"
+                min="0"
+                step="0.01"
+                value="${formValues.topValue ?? ""}"
+                placeholder="0"
+              >
+            </div>
+          </div>
+        </div>
+      `;
+    }).join("");
+    return `
+      <div class="myio-power-limits-grid" id="plm-grid">
+        ${cards}
+      </div>
+    `;
+  }
+  renderLoadingState() {
+    return `
+      <div class="myio-power-limits-loading" id="plm-loading" style="display: none;">
+        <div class="myio-spinner"></div>
+        <span>Loading configuration...</span>
+      </div>
+    `;
+  }
+  renderErrorState() {
+    return `
+      <div class="myio-power-limits-error" id="plm-error" style="display: none;">
+        <span class="myio-error-icon">&#x26A0;</span>
+        <span class="myio-error-message" id="plm-error-msg"></span>
+      </div>
+    `;
+  }
+  renderSuccessState() {
+    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>
+      </div>
+    `;
+  }
+  setupEventListeners() {
+    if (!this.overlayEl) return;
+    const closeBtn = this.overlayEl.querySelector("#plm-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("#plm-save-btn");
+    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 value = e.target.value;
+      this.formData.telemetryType = value;
+      this.config.onTelemetryTypeChange(value);
+    });
+    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) => {
+        const value = e.target.value;
+        this.formData[status].baseValue = value ? parseFloat(value) : null;
+      });
+      topInput?.addEventListener("input", (e) => {
+        const value = e.target.value;
+        this.formData[status].topValue = value ? parseFloat(value) : null;
+      });
+    });
+  }
+  handleKeyDown = (e) => {
+    if (e.key === "Escape") {
+      this.close();
+    }
+  };
+  async handleSave() {
+    if (this.isSaving) return;
+    const validationError = this.validateForm();
+    if (validationError) {
+      this.showError(validationError);
+      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 || "Failed to save configuration");
+    } finally {
+      this.isSaving = false;
+      this.showSaveLoading(false);
+    }
+  }
+  handleReset() {
+    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`);
+      if (baseInput) baseInput.value = "";
+      if (topInput) topInput.value = "";
+      this.formData[status] = { baseValue: null, topValue: null };
+    });
+    this.hideError();
+    this.hideSuccess();
+  }
+  validateForm() {
+    const statuses = ["standby", "normal", "alert", "failure"];
+    for (const status of statuses) {
+      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`;
+      }
+      if (top !== null && top < 0) {
+        return `${STATUS_CONFIG[status === "standby" ? "standBy" : status].label}: Top value cannot be negative`;
+      }
+      if (base !== null && top !== null && base > top) {
+        return `${STATUS_CONFIG[status === "standby" ? "standBy" : status].label}: Base value should not exceed top value`;
+      }
+    }
+    return null;
+  }
+  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("#plm-loading");
+    const gridEl = this.overlayEl?.querySelector("#plm-grid");
+    if (loadingEl) loadingEl.style.display = "flex";
+    if (gridEl) gridEl.style.opacity = "0.5";
+  }
+  hideLoading() {
+    this.isLoading = false;
+    const loadingEl = this.overlayEl?.querySelector("#plm-loading");
+    const gridEl = this.overlayEl?.querySelector("#plm-grid");
+    if (loadingEl) loadingEl.style.display = "none";
+    if (gridEl) gridEl.style.opacity = "1";
+  }
+  showSaveLoading(show) {
+    const saveBtn = this.overlayEl?.querySelector("#plm-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("#plm-error");
+    const errorMsg = this.overlayEl?.querySelector("#plm-error-msg");
+    if (errorEl) errorEl.style.display = "flex";
+    if (errorMsg) errorMsg.textContent = message;
+  }
+  hideError() {
+    const errorEl = this.overlayEl?.querySelector("#plm-error");
+    if (errorEl) errorEl.style.display = "none";
+  }
+  showSuccess() {
+    const successEl = this.overlayEl?.querySelector("#plm-success");
+    if (successEl) successEl.style.display = "flex";
+  }
+  hideSuccess() {
+    const successEl = this.overlayEl?.querySelector("#plm-success");
+    if (successEl) successEl.style.display = "none";
+  }
+  getFormData() {
+    return { ...this.formData };
+  }
+  setFormData(data) {
+    if (data.deviceType) this.formData.deviceType = data.deviceType;
+    if (data.telemetryType) this.formData.telemetryType = data.telemetryType;
+    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();
+  }
+  updateInputValues() {
+    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`);
+      if (baseInput) {
+        baseInput.value = this.formData[status].baseValue?.toString() ?? "";
+      }
+      if (topInput) {
+        topInput.value = this.formData[status].topValue?.toString() ?? "";
+      }
+    });
+    const deviceSelect = this.overlayEl?.querySelector("#plm-device-type");
+    const telemetrySelect = this.overlayEl?.querySelector("#plm-telemetry-type");
+    if (deviceSelect) deviceSelect.value = this.formData.deviceType;
+    if (telemetrySelect) telemetrySelect.value = this.formData.telemetryType;
+  }
+  getStyles() {
+    const styles = this.config.styles || {};
+    const primaryColor = styles.primaryColor || "#4A148C";
+    const successColor = styles.successColor || "#22c55e";
+    const warningColor = styles.warningColor || "#f59e0b";
+    const dangerColor = styles.dangerColor || "#ef4444";
+    const infoColor = styles.infoColor || "#3b82f6";
+    return `
+      .myio-power-limits-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 || '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'};
+      }
+
+      .myio-power-limits-overlay.active {
+        opacity: 1;
+        visibility: visible;
+      }
+
+      .myio-power-limits-card {
+        background: ${styles.backgroundColor || "#ffffff"};
+        border-radius: ${styles.borderRadius || "12px"};
+        width: 90%;
+        max-width: 875px;
+        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-power-limits-overlay.active .myio-power-limits-card {
+        transform: scale(1);
+      }
+
+      .myio-power-limits-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;
+      }
+
+      .myio-power-limits-title-section {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+      }
+
+      .myio-power-limits-icon {
+        font-size: 24px;
+      }
+
+      .myio-power-limits-title {
+        font-size: 1.25rem;
+        font-weight: 600;
+        margin: 0;
+      }
+
+      .myio-power-limits-actions {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      .myio-btn {
+        padding: 8px 16px;
+        border-radius: ${styles.buttonRadius || "6px"};
+        font-size: 14px;
+        font-weight: 500;
+        cursor: pointer;
+        border: none;
+        transition: all 0.2s;
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+      }
+
+      .myio-btn:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+      }
+
+      .myio-btn-primary {
+        background: white;
+        color: ${primaryColor};
+      }
+
+      .myio-btn-primary:hover:not(:disabled) {
+        background: #f3f4f6;
+      }
+
+      .myio-btn-secondary {
+        background: rgba(255, 255, 255, 0.2);
+        color: white;
+      }
+
+      .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);
+      }
+
+      .myio-btn-spinner {
+        width: 16px;
+        height: 16px;
+        border: 2px solid ${primaryColor};
+        border-top-color: transparent;
+        border-radius: 50%;
+        animation: spin 0.8s linear infinite;
+      }
+
+      @keyframes spin {
+        to { transform: rotate(360deg); }
+      }
+
+      .myio-power-limits-selectors {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 16px;
+        padding: 20px 24px;
+        background: #f9fafb;
+        border-bottom: 1px solid #e5e7eb;
+      }
+
+      .myio-form-group {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+      }
+
+      .myio-form-group label {
+        font-size: 13px;
+        font-weight: 500;
+        color: #374151;
+      }
+
+      .myio-select, .myio-input {
+        padding: 10px 12px;
+        border: 1px solid #d1d5db;
+        border-radius: 6px;
+        font-size: 14px;
+        background: white;
+        color: #1f2937;
+        transition: border-color 0.2s, box-shadow 0.2s;
+      }
+
+      .myio-select:focus, .myio-input:focus {
+        outline: none;
+        border-color: ${primaryColor};
+        box-shadow: 0 0 0 3px ${this.hexToRgba(primaryColor, 0.1)};
+      }
+
+      .myio-power-limits-grid {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 16px;
+        padding: 24px;
+        transition: opacity 0.3s;
+      }
+
+      .myio-power-limits-card-item {
+        background: var(--status-bg);
+        border: 1px solid var(--status-color);
+        border-radius: 8px;
+        padding: 16px;
+        transition: transform 0.2s, box-shadow 0.2s;
+      }
+
+      .myio-power-limits-card-item:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+      }
+
+      .myio-card-header {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin-bottom: 12px;
+      }
+
+      .myio-status-indicator {
+        width: 12px;
+        height: 12px;
+        border-radius: 50%;
+        background: var(--status-color);
+      }
+
+      .myio-status-label {
+        font-weight: 600;
+        font-size: 14px;
+        color: #1f2937;
+      }
+
+      .myio-card-inputs {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 12px;
+      }
+
+      .myio-input-group {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+      }
+
+      .myio-input-group label {
+        font-size: 11px;
+        font-weight: 500;
+        color: #6b7280;
+        text-transform: uppercase;
+      }
+
+      .myio-power-limits-loading,
+      .myio-power-limits-error,
+      .myio-power-limits-success {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 12px;
+        padding: 16px 24px;
+        margin: 0 24px 24px;
+        border-radius: 8px;
+      }
+
+      .myio-power-limits-loading {
+        background: #f3f4f6;
+        color: #6b7280;
+      }
+
+      .myio-power-limits-error {
+        background: #fef2f2;
+        color: ${dangerColor};
+        border: 1px solid ${dangerColor};
+      }
+
+      .myio-power-limits-success {
+        background: #f0fdf4;
+        color: ${successColor};
+        border: 1px solid ${successColor};
+      }
+
+      .myio-spinner {
+        width: 24px;
+        height: 24px;
+        border: 3px solid #e5e7eb;
+        border-top-color: ${primaryColor};
+        border-radius: 50%;
+        animation: spin 0.8s linear infinite;
+      }
+
+      .myio-error-icon, .myio-success-icon {
+        font-size: 20px;
+      }
+
+      @media (max-width: 600px) {
+        .myio-power-limits-selectors,
+        .myio-power-limits-grid {
+          grid-template-columns: 1fr;
+        }
+
+        .myio-power-limits-header {
+          flex-direction: column;
+          gap: 12px;
+          text-align: center;
+        }
+
+        .myio-power-limits-actions {
+          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/power-limits/PowerLimitsPersister.ts
+var PowerLimitsPersister = class {
+  jwtToken;
+  tbBaseUrl;
+  constructor(jwtToken, tbBaseUrl) {
+    this.jwtToken = jwtToken;
+    this.tbBaseUrl = tbBaseUrl || window.location.origin;
+  }
+  /**
+   * Load existing mapInstantaneousPower from customer server_scope attributes
+   */
+  async loadCustomerPowerLimits(customerId) {
+    try {
+      const url = `${this.tbBaseUrl}/api/plugins/telemetry/CUSTOMER/${customerId}/values/attributes/SERVER_SCOPE?keys=mapInstantaneousPower`;
+      const response = await fetch(url, {
+        method: "GET",
+        headers: {
+          "X-Authorization": `Bearer ${this.jwtToken}`,
+          "Content-Type": "application/json"
+        }
+      });
+      if (!response.ok) {
+        if (response.status === 404) {
+          console.log("[PowerLimitsPersister] No existing mapInstantaneousPower found");
+          return null;
+        }
+        throw this.createHttpError(response.status, await response.text().catch(() => ""));
+      }
+      const data = await response.json();
+      if (!data || data.length === 0) {
+        console.log("[PowerLimitsPersister] No mapInstantaneousPower attribute found");
+        return null;
+      }
+      const attr = data.find((item) => item.key === "mapInstantaneousPower");
+      if (!attr || !attr.value) {
+        return null;
+      }
+      const parsedValue = typeof attr.value === "string" ? JSON.parse(attr.value) : attr.value;
+      console.log("[PowerLimitsPersister] Loaded mapInstantaneousPower:", parsedValue);
+      return parsedValue;
+    } catch (error) {
+      console.error("[PowerLimitsPersister] Error loading power limits:", error);
+      throw this.mapError(error);
+    }
+  }
+  /**
+   * Save mapInstantaneousPower to customer server_scope attributes
+   */
+  async saveCustomerPowerLimits(customerId, limits) {
+    try {
+      const url = `${this.tbBaseUrl}/api/plugins/telemetry/CUSTOMER/${customerId}/attributes/SERVER_SCOPE`;
+      const payload = {
+        mapInstantaneousPower: limits
+      };
+      console.log("[PowerLimitsPersister] Saving power limits:", payload);
+      const response = await fetch(url, {
+        method: "POST",
+        headers: {
+          "X-Authorization": `Bearer ${this.jwtToken}`,
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify(payload)
+      });
+      if (!response.ok) {
+        throw this.createHttpError(response.status, await response.text().catch(() => ""));
+      }
+      console.log("[PowerLimitsPersister] Successfully saved power limits");
+      return { ok: true };
+    } catch (error) {
+      console.error("[PowerLimitsPersister] Error saving power limits:", error);
+      return { ok: false, error: this.mapError(error) };
+    }
+  }
+  /**
+   * Extract form data for a specific device type and telemetry type
+   */
+  extractFormData(limits, deviceType, telemetryType) {
+    const defaultFormData = {
+      deviceType,
+      telemetryType,
+      standby: { baseValue: null, topValue: null },
+      normal: { baseValue: null, topValue: null },
+      alert: { baseValue: null, topValue: null },
+      failure: { baseValue: null, topValue: null }
+    };
+    if (!limits || !limits.limitsByInstantaneoustPowerType) {
+      return defaultFormData;
+    }
+    const telemetryEntry = limits.limitsByInstantaneoustPowerType.find(
+      (t) => t.telemetryType === telemetryType
+    );
+    if (!telemetryEntry || !telemetryEntry.itemsByDeviceType) {
+      return defaultFormData;
+    }
+    const deviceEntry = telemetryEntry.itemsByDeviceType.find(
+      (d) => d.deviceType === deviceType
+    );
+    if (!deviceEntry || !deviceEntry.limitsByDeviceStatus) {
+      return defaultFormData;
+    }
+    const statusMap = {
+      "standBy": "standby",
+      "normal": "normal",
+      "alert": "alert",
+      "failure": "failure"
+    };
+    deviceEntry.limitsByDeviceStatus.forEach((status) => {
+      const formKey = statusMap[status.deviceStatusName];
+      if (formKey && defaultFormData[formKey]) {
+        defaultFormData[formKey] = {
+          baseValue: status.limitsValues.baseValue,
+          topValue: status.limitsValues.topValue
+        };
+      }
+    });
+    return defaultFormData;
+  }
+  /**
+   * Merge form data into existing limits JSON
+   * Creates new entries if they don't exist
+   */
+  mergeFormDataIntoLimits(existingLimits, formData) {
+    const result = existingLimits ? JSON.parse(JSON.stringify(existingLimits)) : { version: "1.0.0", limitsByInstantaneoustPowerType: [] };
+    const statusLimits = [
+      {
+        deviceStatusName: "standBy",
+        limitsValues: {
+          baseValue: formData.standby.baseValue ?? 0,
+          topValue: formData.standby.topValue ?? 0
+        }
+      },
+      {
+        deviceStatusName: "normal",
+        limitsValues: {
+          baseValue: formData.normal.baseValue ?? 0,
+          topValue: formData.normal.topValue ?? 0
+        }
+      },
+      {
+        deviceStatusName: "alert",
+        limitsValues: {
+          baseValue: formData.alert.baseValue ?? 0,
+          topValue: formData.alert.topValue ?? 0
+        }
+      },
+      {
+        deviceStatusName: "failure",
+        limitsValues: {
+          baseValue: formData.failure.baseValue ?? 0,
+          topValue: formData.failure.topValue ?? 0
+        }
+      }
+    ];
+    let telemetryEntry = result.limitsByInstantaneoustPowerType.find(
+      (t) => t.telemetryType === formData.telemetryType
+    );
+    if (!telemetryEntry) {
+      telemetryEntry = {
+        telemetryType: formData.telemetryType,
+        itemsByDeviceType: []
+      };
+      result.limitsByInstantaneoustPowerType.push(telemetryEntry);
+    }
+    let deviceEntry = telemetryEntry.itemsByDeviceType.find(
+      (d) => d.deviceType === formData.deviceType
+    );
+    if (!deviceEntry) {
+      deviceEntry = {
+        deviceType: formData.deviceType,
+        name: `mapInstantaneousPower${this.formatDeviceTypeName(formData.deviceType)}`,
+        description: `Power limits for ${formData.deviceType}`,
+        limitsByDeviceStatus: []
+      };
+      telemetryEntry.itemsByDeviceType.push(deviceEntry);
+    }
+    deviceEntry.limitsByDeviceStatus = statusLimits;
+    deviceEntry.name = `mapInstantaneousPower${this.formatDeviceTypeName(formData.deviceType)}`;
+    deviceEntry.description = `Power limits for ${formData.deviceType} - ${formData.telemetryType}`;
+    return result;
+  }
+  /**
+   * Format device type name for the JSON name field
+   */
+  formatDeviceTypeName(deviceType) {
+    if (!deviceType) return "";
+    return deviceType.toLowerCase().split("_").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join("");
+  }
+  createHttpError(status, body) {
+    const error = new Error(`HTTP ${status}: ${body}`);
+    error.status = status;
+    error.body = body;
+    return error;
+  }
+  mapError(error) {
+    const status = error.status;
+    if (status === 400) {
+      return {
+        code: "VALIDATION_ERROR",
+        message: "Invalid input data",
+        cause: error
+      };
+    }
+    if (status === 401) {
+      return {
+        code: "TOKEN_EXPIRED",
+        message: "Authentication token has expired",
+        cause: error
+      };
+    }
+    if (status === 403) {
+      return {
+        code: "AUTH_ERROR",
+        message: "Insufficient permissions",
+        cause: error
+      };
+    }
+    if (status === 404) {
+      return {
+        code: "NETWORK_ERROR",
+        message: "Customer not found",
+        cause: error
+      };
+    }
+    if (status >= 500) {
+      return {
+        code: "NETWORK_ERROR",
+        message: "Server error occurred",
+        cause: error
+      };
+    }
+    return {
+      code: "UNKNOWN_ERROR",
+      message: error.message || "Unknown error occurred",
+      cause: error
+    };
+  }
+};
+
+// src/components/premium-modals/power-limits/openPowerLimitsSetupModal.ts
+async function openPowerLimitsSetupModal(params) {
+  if (!params.token) {
+    throw new Error("[PowerLimitsSetupModal] token is required");
+  }
+  if (!params.customerId) {
+    throw new Error("[PowerLimitsSetupModal] customerId is required");
+  }
+  const persister = new PowerLimitsPersister(params.token, params.tbBaseUrl);
+  let currentDeviceType = params.deviceType || "ELEVADOR";
+  let currentTelemetryType = params.telemetryType || "consumption";
+  let existingLimits = params.existingMapPower || null;
+  const view = new PowerLimitsModalView({
+    deviceType: currentDeviceType,
+    telemetryType: currentTelemetryType,
+    styles: params.styles,
+    locale: params.locale,
+    onDeviceTypeChange: async (deviceType) => {
+      currentDeviceType = deviceType;
+      await loadFormData();
+    },
+    onTelemetryTypeChange: async (telemetryType) => {
+      currentTelemetryType = telemetryType;
+      await loadFormData();
+    },
+    onSave: async () => {
+      const formData = view.getFormData();
+      const updatedLimits = persister.mergeFormDataIntoLimits(existingLimits, formData);
+      const result = await persister.saveCustomerPowerLimits(params.customerId, updatedLimits);
+      if (!result.ok) {
+        throw new Error(result.error?.message || "Failed to save configuration");
+      }
+      existingLimits = updatedLimits;
+      if (params.onSave) {
+        params.onSave(updatedLimits);
+      }
+    },
+    onClose: () => {
+      if (params.onClose) {
+        params.onClose();
+      }
+    }
+  });
+  async function loadFormData() {
+    view.showLoading();
+    try {
+      if (!existingLimits) {
+        existingLimits = await persister.loadCustomerPowerLimits(params.customerId);
+      }
+      const formData = persister.extractFormData(existingLimits, currentDeviceType, currentTelemetryType);
+      view.setFormData(formData);
+    } catch (error) {
+      console.error("[PowerLimitsSetupModal] 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)
+  };
+}
+
 // src/components/premium-modals/settings/SettingsModalView.ts
 var SettingsModalView = class {
   container;
@@ -27047,6 +28047,9 @@ function createDistributionChartWidget(config) {
   MyIOSelectionStore,
   MyIOSelectionStoreClass,
   MyIOToast,
+  POWER_LIMITS_DEVICE_TYPES,
+  POWER_LIMITS_STATUS_CONFIG,
+  POWER_LIMITS_TELEMETRY_TYPES,
   addDetectionContext,
   addNamespace,
   aggregateByDay,
@@ -27144,6 +28147,7 @@ function createDistributionChartWidget(config) {
   openDashboardPopupWaterTank,
   openDemandModal,
   openGoalsPanel,
+  openPowerLimitsSetupModal,
   openRealTimeTelemetryModal,
   openTemperatureComparisonModal,
   openTemperatureModal,