myio-js-library 0.1.32 → 0.1.34

package/dist/index.cjs

@@ -617,6 +617,7 @@ __export(index_exports, {
   openDashboardPopupAllReport: () => openDashboardPopupAllReport,
   openDashboardPopupEnergy: () => openDashboardPopupEnergy,
   openDashboardPopupReport: () => openDashboardPopupReport,
+  openDashboardPopupSettings: () => openDashboardPopupSettings,
   openDemandModal: () => openDemandModal,
   parseInputDateToDate: () => parseInputDateToDate,
   renderCardCompenteHeadOffice: () => renderCardCompenteHeadOffice,
@@ -4778,9 +4779,9 @@ function openDashboardPopupEnergy(params) {
 var CSS_TOKENS = `
 :root {
   /* Brand Colors */
-  --myio-brand-700: #4A148C;
-  --myio-brand-600: #5c307d;
-  --myio-accent: #5c307d;
+  --myio-brand-700: #3e1a7d;
+  --myio-brand-600: #2d1458;
+  --myio-accent: #2d1458;
   --myio-danger: #d32f2f;
   --myio-success: #388E3C;
   --myio-warning: #f57c00;
@@ -4895,7 +4896,7 @@ var MODAL_STYLES = `
   display: flex;
   align-items: center;
   justify-content: space-between;
-  background: #4A148C;
+  background: var(--myio-brand-700);
   color: white;
   border-radius: var(--myio-radius) var(--myio-radius) 0 0;
 }
@@ -6952,7 +6953,7 @@ var AllReportModal = class {
             <button id="export-btn" class="myio-btn myio-btn-secondary" disabled>
               Exportar CSV
             </button>
-            <button id="filter-btn" class="myio-btn myio-btn-secondary" style="background: #4A148C; color: white;">
+            <button id="filter-btn" class="myio-btn myio-btn-secondary" style="background: var(--myio-brand-700); color: white;">
               \u{1F50D} Filtros & Ordena\xE7\xE3o
             </button>
             <div class="myio-form-group" style="margin-bottom: 0; margin-left: auto;">
@@ -7317,10 +7318,10 @@ var AllReportModal = class {
     const filterBtn = document.getElementById("filter-btn");
     if (filterBtn && selectedIds.length > 0 && selectedIds.length < this.data.length) {
       filterBtn.innerHTML = `\u{1F50D} Filtros & Ordena\xE7\xE3o (${selectedIds.length})`;
-      filterBtn.style.background = "#3A0E5C";
+      filterBtn.style.background = "var(--myio-brand-600)";
     } else {
       filterBtn.innerHTML = "\u{1F50D} Filtros & Ordena\xE7\xE3o";
-      filterBtn.style.background = "#4A148C";
+      filterBtn.style.background = "var(--myio-brand-700)";
     }
   }
   exportCSV() {
@@ -7497,6 +7498,1086 @@ function openDashboardPopup(params) {
   };
 }
 
+// src/components/premium-modals/settings/SettingsModalView.ts
+var SettingsModalView = class {
+  container;
+  modal;
+  form;
+  config;
+  focusTrapElements = [];
+  originalActiveElement = null;
+  constructor(config) {
+    this.config = config;
+    this.createModal();
+    this.attachEventListeners();
+  }
+  render(initialData) {
+    this.originalActiveElement = document.activeElement;
+    document.body.appendChild(this.container);
+    this.populateForm(initialData);
+    this.setupAccessibility();
+    this.setupFocusTrap();
+    this.applyTheme();
+  }
+  close() {
+    this.teardownFocusTrap();
+    if (this.originalActiveElement && "focus" in this.originalActiveElement) {
+      this.originalActiveElement.focus();
+    }
+    if (this.container.parentNode) {
+      this.container.parentNode.removeChild(this.container);
+    }
+  }
+  showError(message) {
+    const errorEl = this.modal.querySelector(".error-message");
+    if (errorEl) {
+      errorEl.textContent = message;
+      errorEl.style.display = "block";
+      errorEl.setAttribute("role", "alert");
+      errorEl.setAttribute("aria-live", "polite");
+    }
+  }
+  hideError() {
+    const errorEl = this.modal.querySelector(".error-message");
+    if (errorEl) {
+      errorEl.style.display = "none";
+      errorEl.removeAttribute("role");
+      errorEl.removeAttribute("aria-live");
+    }
+  }
+  showLoadingState(isLoading) {
+    const saveBtn = this.modal.querySelector(".btn-save");
+    const cancelBtn = this.modal.querySelector(".btn-cancel");
+    const formInputs = this.modal.querySelectorAll("input, select, textarea");
+    if (saveBtn) {
+      saveBtn.disabled = isLoading;
+      saveBtn.textContent = isLoading ? "Salvando..." : "Salvar";
+    }
+    if (cancelBtn) {
+      cancelBtn.disabled = isLoading;
+    }
+    formInputs.forEach((input) => {
+      input.disabled = isLoading;
+    });
+  }
+  getFormData() {
+    const formData = new FormData(this.form);
+    const data = {};
+    for (const [key, value] of formData.entries()) {
+      if (typeof value === "string") {
+        if (["maxDailyKwh", "maxNightKwh", "maxBusinessKwh"].includes(key)) {
+          const num = parseFloat(value);
+          if (!isNaN(num) && num >= 0) {
+            data[key] = num;
+          }
+        } else if (value.trim()) {
+          data[key] = value.trim();
+        }
+      }
+    }
+    return data;
+  }
+  createModal() {
+    this.container = document.createElement("div");
+    this.container.className = "myio-settings-modal-overlay";
+    this.container.innerHTML = this.getModalHTML();
+    this.modal = this.container.querySelector(".myio-settings-modal");
+    this.form = this.modal.querySelector("form");
+  }
+  getModalHTML() {
+    const width = typeof this.config.width === "number" ? `${this.config.width}px` : this.config.width;
+    return `
+      <div class="myio-settings-modal-overlay" role="dialog" aria-modal="true" aria-labelledby="modal-title">
+        <div class="myio-settings-modal" style="width: ${width}">
+          <div class="modal-header">
+            <h3 id="modal-title">Configura\xE7\xF5es</h3>
+            <button type="button" class="close-btn" aria-label="Fechar">&times;</button>
+          </div>
+          <div class="modal-body">
+            <div class="error-message" style="display: none;" role="alert" aria-live="polite"></div>
+            <form novalidate>
+              ${this.getFormHTML()}
+            </form>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn-cancel">Fechar</button>
+            <button type="submit" class="btn-save btn-primary">Salvar</button>
+          </div>
+        </div>
+      </div>
+      ${this.getModalCSS()}
+    `;
+  }
+  getFormHTML() {
+    return `
+      <div class="form-columns">
+        <!-- Left Column: Outback -->
+        <div class="form-column">
+          <div class="form-card">
+            <h4 class="section-title">${this.config.deviceLabel || "Outback"}</h4>
+            
+            <div class="form-group">
+              <label for="label">Etiqueta</label>
+              <input type="text" id="label" name="label" required maxlength="255">
+            </div>
+            
+            <div class="form-group">
+              <label for="floor">Andar</label>
+              <input type="text" id="floor" name="floor" maxlength="50">
+            </div>
+            
+            <div class="form-group">
+              <label for="identifier">N\xFAmero da Loja</label>
+              <input type="text" id="identifier" name="identifier" maxlength="20" readonly>
+            </div>
+          </div>
+        </div>
+
+        <!-- Right Column: Energy Alarms -->
+        <div class="form-column">
+          <div class="form-card">
+            <h4 class="section-title">Alarmes Energia - ${this.config.deviceLabel || "Outback"}</h4>
+            
+            <div class="form-group">
+              <label for="maxDailyKwh">Consumo M\xE1ximo Di\xE1rio (kWh)</label>
+              <input type="number" id="maxDailyKwh" name="maxDailyKwh" min="0" step="0.1">
+            </div>
+            
+            <div class="form-group">
+              <label for="maxNightKwh">Consumo M\xE1ximo na Madrugada (0h\u201306h)</label>
+              <input type="number" id="maxNightKwh" name="maxNightKwh" min="0" step="0.1">
+            </div>
+            
+            <div class="form-group">
+              <label for="maxBusinessKwh">Consumo M\xE1ximo Hor\xE1rio Comercial (09h\u201322h)</label>
+              <input type="number" id="maxBusinessKwh" name="maxBusinessKwh" min="0" step="0.1">
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+  getModalCSS() {
+    return `
+      <style>
+        .myio-settings-modal-overlay {
+          position: fixed;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          background: rgba(0, 0, 0, 0.5);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          z-index: 10000;
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        }
+        
+        .myio-settings-modal {
+          background: white;
+          border-radius: 8px;
+          box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+          max-width: 95vw;
+          max-height: 90vh;
+          width: 1000px;
+          overflow: hidden;
+          display: flex;
+          flex-direction: column;
+        }
+        
+        .modal-header {
+          background: #3e1a7d;
+          color: white;
+          padding: 20px 24px;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+        
+        .modal-header h3 {
+          margin: 0;
+          font-size: 18px;
+          font-weight: 600;
+          color: white;
+        }
+        
+        .close-btn {
+          background: none;
+          border: none;
+          font-size: 24px;
+          cursor: pointer;
+          color: white;
+          padding: 0;
+          width: 32px;
+          height: 32px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-radius: 4px;
+        }
+        
+        .close-btn:hover {
+          background: rgba(255, 255, 255, 0.1);
+        }
+        
+        .modal-body {
+          padding: 24px;
+          overflow-y: auto;
+          flex: 1;
+          background: #f8f9fa;
+        }
+        
+        .error-message {
+          background: #fee;
+          border: 1px solid #fcc;
+          color: #c33;
+          padding: 12px;
+          border-radius: 4px;
+          margin-bottom: 16px;
+          font-size: 14px;
+        }
+        
+        .form-columns {
+          display: grid;
+          grid-template-columns: 1fr 1fr;
+          gap: 20px;
+        }
+        
+        .form-column {
+          display: flex;
+          flex-direction: column;
+        }
+        
+        .form-card {
+          background: white;
+          border-radius: 8px;
+          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+          padding: 20px;
+          height: fit-content;
+        }
+        
+        .section-title {
+          margin: 0 0 20px 0;
+          font-size: 16px;
+          font-weight: 600;
+          color: #3e1a7d;
+        }
+        
+        .form-group {
+          display: flex;
+          flex-direction: column;
+          margin-bottom: 16px;
+        }
+        
+        .form-group:last-child {
+          margin-bottom: 0;
+        }
+        
+        .form-group label {
+          font-weight: 500;
+          margin-bottom: 6px;
+          color: #333;
+          font-size: 14px;
+        }
+        
+        .form-group input {
+          width: 100%;
+          padding: 10px 12px;
+          border: 1px solid #ddd;
+          border-radius: 6px;
+          font-size: 14px;
+          transition: border-color 0.2s, box-shadow 0.2s;
+          box-sizing: border-box;
+        }
+        
+        .form-group input:focus {
+          outline: none;
+          border-color: #3e1a7d;
+          box-shadow: 0 0 0 2px rgba(62, 26, 125, 0.25);
+        }
+        
+        .form-group input:invalid {
+          border-color: #dc3545;
+        }
+        
+        .form-group input[readonly] {
+          background-color: #f8f9fa;
+          color: #6c757d;
+          cursor: not-allowed;
+        }
+        
+        .modal-footer {
+          padding: 16px 24px;
+          border-top: 1px solid #e0e0e0;
+          display: flex;
+          justify-content: flex-end;
+          gap: 12px;
+          background: white;
+        }
+        
+        .modal-footer button {
+          padding: 10px 20px;
+          border: none;
+          border-radius: 6px;
+          font-size: 14px;
+          font-weight: 500;
+          cursor: pointer;
+          transition: all 0.2s;
+        }
+        
+        .btn-cancel {
+          background: #6c757d;
+          color: white;
+        }
+        
+        .btn-cancel:hover:not(:disabled) {
+          background: #545b62;
+        }
+        
+        .btn-primary {
+          background: #3e1a7d;
+          color: white;
+        }
+        
+        .btn-primary:hover:not(:disabled) {
+          background: #2d1458;
+        }
+        
+        .modal-footer button:disabled {
+          opacity: 0.6;
+          cursor: not-allowed;
+        }
+        
+        /* Responsive design */
+        @media (max-width: 1700px) {
+          .myio-settings-modal {
+            width: 95vw !important;
+          }
+        }
+        
+        @media (max-width: 1024px) {
+          .myio-settings-modal {
+            width: 90vw !important;
+          }
+          
+          .form-columns {
+            gap: 16px;
+          }
+          
+          .form-card {
+            padding: 16px;
+          }
+        }
+        
+        @media (max-width: 768px) {
+          .myio-settings-modal {
+            width: 95vw !important;
+            margin: 10px;
+          }
+          
+          .form-columns {
+            grid-template-columns: 1fr;
+            gap: 16px;
+          }
+          
+          .modal-header, .modal-body, .modal-footer {
+            padding-left: 16px;
+            padding-right: 16px;
+          }
+          
+          .form-card {
+            padding: 16px;
+          }
+        }
+        
+        /* Scrollbar styling for modal body */
+        .modal-body::-webkit-scrollbar {
+          width: 6px;
+        }
+        
+        .modal-body::-webkit-scrollbar-track {
+          background: #f1f1f1;
+          border-radius: 3px;
+        }
+        
+        .modal-body::-webkit-scrollbar-thumb {
+          background: #c1c1c1;
+          border-radius: 3px;
+        }
+        
+        .modal-body::-webkit-scrollbar-thumb:hover {
+          background: #a8a8a8;
+        }
+      </style>
+    `;
+  }
+  populateForm(data) {
+    for (const [key, value] of Object.entries(data)) {
+      const input = this.form.querySelector(`[name="${key}"]`);
+      if (input && value !== void 0 && value !== null) {
+        input.value = String(value);
+      }
+    }
+  }
+  setupAccessibility() {
+    const firstInput = this.modal.querySelector("input");
+    if (firstInput) {
+      setTimeout(() => firstInput.focus(), 100);
+    }
+    this.modal.setAttribute("aria-labelledby", "modal-title");
+  }
+  setupFocusTrap() {
+    this.focusTrapElements = Array.from(
+      this.modal.querySelectorAll(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      )
+    );
+    this.modal.addEventListener("keydown", this.handleKeyDown.bind(this));
+  }
+  teardownFocusTrap() {
+    this.modal.removeEventListener("keydown", this.handleKeyDown.bind(this));
+  }
+  handleKeyDown(event) {
+    if (event.key === "Escape" && this.config.closeOnBackdrop !== false) {
+      event.preventDefault();
+      this.config.onClose();
+      return;
+    }
+    if (event.key === "Tab") {
+      const firstElement = this.focusTrapElements[0];
+      const lastElement = this.focusTrapElements[this.focusTrapElements.length - 1];
+      if (event.shiftKey) {
+        if (document.activeElement === firstElement) {
+          event.preventDefault();
+          lastElement.focus();
+        }
+      } else {
+        if (document.activeElement === lastElement) {
+          event.preventDefault();
+          firstElement.focus();
+        }
+      }
+    }
+  }
+  attachEventListeners() {
+    this.form.addEventListener("submit", (event) => {
+      event.preventDefault();
+      this.hideError();
+      const formData = this.getFormData();
+      this.config.onSave(formData);
+    });
+    const closeBtn = this.modal.querySelector(".close-btn");
+    if (closeBtn) {
+      closeBtn.addEventListener("click", (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        this.config.onClose();
+      });
+    }
+    const cancelBtn = this.modal.querySelector(".btn-cancel");
+    if (cancelBtn) {
+      cancelBtn.addEventListener("click", (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        this.config.onClose();
+      });
+    }
+    this.container.addEventListener("click", (event) => {
+      const target = event.target;
+      if (target.classList.contains("myio-settings-modal-overlay") && this.config.closeOnBackdrop !== false) {
+        this.config.onClose();
+      }
+    });
+    this.form.addEventListener("input", this.handleInputValidation.bind(this));
+  }
+  handleInputValidation(event) {
+    const input = event.target;
+    input.classList.remove("is-invalid");
+    if (input.name === "guid" && input.value) {
+      const guidPattern = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+      if (!guidPattern.test(input.value)) {
+        input.classList.add("is-invalid");
+        input.setCustomValidity("Invalid GUID format");
+      } else {
+        input.setCustomValidity("");
+      }
+    }
+    if (input.type === "number" && input.value) {
+      const num = parseFloat(input.value);
+      if (isNaN(num) || num < 0) {
+        input.classList.add("is-invalid");
+        input.setCustomValidity("Must be a positive number");
+      } else {
+        input.setCustomValidity("");
+      }
+    }
+  }
+  applyTheme() {
+    if (this.config.themeTokens) {
+      const style = document.createElement("style");
+      let css = "";
+      for (const [property, value] of Object.entries(this.config.themeTokens)) {
+        css += `--myio-${property}: ${value};
+`;
+      }
+      style.textContent = `.myio-settings-modal { ${css} }`;
+      this.container.appendChild(style);
+    }
+  }
+  getI18nText(key, defaultText) {
+    return this.config.i18n?.t(key, defaultText) || defaultText;
+  }
+};
+
+// src/components/premium-modals/settings/SettingsPersister.ts
+var DefaultSettingsPersister = class {
+  jwtToken;
+  tbBaseUrl;
+  constructor(jwtToken, apiConfig) {
+    this.jwtToken = jwtToken;
+    this.tbBaseUrl = apiConfig?.tbBaseUrl || window.location.origin;
+  }
+  async saveEntityLabel(deviceId, label) {
+    try {
+      const getRes = await fetch(`${this.tbBaseUrl}/api/device/${deviceId}`, {
+        headers: { "X-Authorization": `Bearer ${this.jwtToken}` }
+      });
+      if (!getRes.ok) {
+        throw this.createHttpError(getRes.status, await getRes.text().catch(() => ""));
+      }
+      const device = await getRes.json();
+      const putRes = await fetch(`${this.tbBaseUrl}/api/device`, {
+        method: "PUT",
+        headers: {
+          "X-Authorization": `Bearer ${this.jwtToken}`,
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({ ...device, label: this.sanitizeLabel(label) })
+      });
+      if (!putRes.ok) {
+        throw this.createHttpError(putRes.status, await putRes.text().catch(() => ""));
+      }
+      return { ok: true };
+    } catch (error) {
+      console.error("[SettingsPersister] Entity label save failed:", error);
+      return { ok: false, error: this.mapError(error) };
+    }
+  }
+  async saveServerScopeAttributes(deviceId, attributes) {
+    try {
+      const namespacedAttrs = this.addNamespaceAndVersion(attributes);
+      const res = await fetch(
+        `${this.tbBaseUrl}/api/plugins/telemetry/DEVICE/${deviceId}/attributes/SERVER_SCOPE`,
+        {
+          method: "POST",
+          headers: {
+            "X-Authorization": `Bearer ${this.jwtToken}`,
+            "Content-Type": "application/json"
+          },
+          body: JSON.stringify(namespacedAttrs)
+        }
+      );
+      if (!res.ok) {
+        throw this.createHttpError(res.status, await res.text().catch(() => ""));
+      }
+      return {
+        ok: true,
+        updatedKeys: Object.keys(namespacedAttrs)
+      };
+    } catch (error) {
+      console.error("[SettingsPersister] Attributes save failed:", error);
+      return { ok: false, error: this.mapError(error) };
+    }
+  }
+  addNamespaceAndVersion(attributes) {
+    const namespaced = {
+      "myio.settings.energy.__version": 1
+    };
+    for (const [key, value] of Object.entries(attributes)) {
+      if (key !== "label") {
+        namespaced[`myio.settings.energy.${key}`] = value;
+      }
+    }
+    return namespaced;
+  }
+  sanitizeLabel(label) {
+    return label.trim().slice(0, 255).replace(/[\x00-\x1F\x7F]/g, "");
+  }
+  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",
+        userAction: "FIX_INPUT",
+        cause: error
+      };
+    }
+    if (status === 401) {
+      return {
+        code: "TOKEN_EXPIRED",
+        message: "Authentication token has expired",
+        userAction: "RE_AUTH",
+        cause: error
+      };
+    }
+    if (status === 403) {
+      return {
+        code: "AUTH_ERROR",
+        message: "Insufficient permissions",
+        userAction: "RE_AUTH",
+        cause: error
+      };
+    }
+    if (status === 404) {
+      return {
+        code: "NETWORK_ERROR",
+        message: "Device not found",
+        userAction: "CONTACT_ADMIN",
+        cause: error
+      };
+    }
+    if (status === 409) {
+      return {
+        code: "VALIDATION_ERROR",
+        message: "Concurrent modification detected",
+        userAction: "RETRY",
+        cause: error
+      };
+    }
+    if (status >= 500) {
+      return {
+        code: "NETWORK_ERROR",
+        message: "Server error occurred",
+        userAction: "RETRY",
+        cause: error
+      };
+    }
+    return {
+      code: "UNKNOWN_ERROR",
+      message: error.message || "Unknown error occurred",
+      userAction: "CONTACT_ADMIN",
+      cause: error
+    };
+  }
+};
+
+// src/components/premium-modals/settings/SettingsFetcher.ts
+var DefaultSettingsFetcher = class {
+  jwtToken;
+  tbBaseUrl;
+  constructor(jwtToken, apiConfig) {
+    this.jwtToken = jwtToken;
+    this.tbBaseUrl = apiConfig?.tbBaseUrl || window.location.origin;
+  }
+  async fetchCurrentSettings(deviceId, jwtToken, scope = "SERVER_SCOPE") {
+    try {
+      const [entityResult, attributesResult] = await Promise.allSettled([
+        this.fetchDeviceEntity(deviceId),
+        this.fetchDeviceAttributes(deviceId, scope)
+      ]);
+      const result = {};
+      if (entityResult.status === "fulfilled") {
+        result.entity = entityResult.value;
+      } else {
+        console.warn("[SettingsFetcher] Failed to fetch device entity:", entityResult.reason);
+      }
+      if (attributesResult.status === "fulfilled") {
+        result.attributes = attributesResult.value;
+      } else {
+        console.warn("[SettingsFetcher] Failed to fetch device attributes:", attributesResult.reason);
+      }
+      return result;
+    } catch (error) {
+      console.error("[SettingsFetcher] Failed to fetch current settings:", error);
+      return {};
+    }
+  }
+  async fetchDeviceEntity(deviceId) {
+    const response = await fetch(`${this.tbBaseUrl}/api/device/${deviceId}`, {
+      headers: { "X-Authorization": `Bearer ${this.jwtToken}` }
+    });
+    if (!response.ok) {
+      throw new Error(`Failed to fetch device entity: ${response.status} ${response.statusText}`);
+    }
+    const device = await response.json();
+    return {
+      label: device.label || device.name || ""
+    };
+  }
+  async fetchDeviceAttributes(deviceId, scope) {
+    const response = await fetch(
+      `${this.tbBaseUrl}/api/plugins/telemetry/DEVICE/${deviceId}/values/attributes/${scope}`,
+      {
+        headers: { "X-Authorization": `Bearer ${this.jwtToken}` }
+      }
+    );
+    if (!response.ok) {
+      throw new Error(`Failed to fetch device attributes: ${response.status} ${response.statusText}`);
+    }
+    const attributesArray = await response.json();
+    const attributes = {};
+    const settingsNamespace = "myio.settings.energy.";
+    for (const attr of attributesArray) {
+      if (attr.key && attr.value !== void 0 && attr.value !== null && attr.value !== "") {
+        if (attr.key.startsWith(settingsNamespace)) {
+          const key = attr.key.replace(settingsNamespace, "");
+          if (key !== "__version") {
+            attributes[key] = attr.value;
+          }
+        } else if (attr.key === "floor") {
+          attributes.floor = attr.value;
+        } else if (attr.key === "identifier") {
+          attributes.identifier = attr.value;
+        }
+      }
+    }
+    return attributes;
+  }
+  /**
+   * Utility method to merge fetched settings with seed data
+   */
+  static mergeWithSeed(fetchedData, seedData) {
+    const merged = {};
+    if (seedData) {
+      Object.assign(merged, seedData);
+    }
+    if (fetchedData.entity?.label) {
+      merged.label = fetchedData.entity.label;
+    }
+    if (fetchedData.attributes) {
+      Object.assign(merged, fetchedData.attributes);
+    }
+    return merged;
+  }
+  /**
+   * Utility method to validate and sanitize fetched data
+   */
+  static sanitizeFetchedData(data) {
+    const sanitized = {};
+    const stringFields = ["label", "floor", "identifier"];
+    for (const field of stringFields) {
+      if (data[field] && typeof data[field] === "string") {
+        sanitized[field] = data[field].trim();
+      }
+    }
+    const numericFields = ["maxDailyKwh", "maxNightKwh", "maxBusinessKwh"];
+    for (const field of numericFields) {
+      if (data[field] !== void 0 && data[field] !== null) {
+        const num = Number(data[field]);
+        if (!isNaN(num) && num >= 0) {
+          sanitized[field] = num;
+        }
+      }
+    }
+    return sanitized;
+  }
+};
+
+// src/components/premium-modals/settings/SettingsController.ts
+var SettingsController = class {
+  view;
+  persister;
+  fetcher;
+  params;
+  constructor(params) {
+    this.params = params;
+    this.validateParams();
+    this.persister = params.persister || new DefaultSettingsPersister(params.jwtToken, params.api);
+    this.fetcher = params.fetcher || new DefaultSettingsFetcher(params.jwtToken, params.api);
+    this.view = new SettingsModalView({
+      title: params.ui?.title || `Settings - ${params.label || params.deviceId}`,
+      width: params.ui?.width || 600,
+      theme: "light",
+      // Default theme
+      closeOnBackdrop: params.ui?.closeOnBackdrop !== false,
+      themeTokens: params.ui?.themeTokens,
+      i18n: params.ui?.i18n,
+      deviceLabel: params.label,
+      // Pass the device label for dynamic section titles
+      onSave: this.handleSave.bind(this),
+      onClose: this.handleClose.bind(this)
+    });
+  }
+  async show() {
+    console.info("[SettingsModal] Opening modal", {
+      deviceId: this.params.deviceId,
+      ingestionId: this.params.ingestionId
+    });
+    this.emitEvent("modal_opened");
+    let initialData = this.params.seed || {};
+    if (!this.params.seed) {
+      try {
+        const fetchedData = await this.fetcher.fetchCurrentSettings(
+          this.params.deviceId,
+          this.params.jwtToken,
+          this.params.scope || "SERVER_SCOPE"
+        );
+        initialData = DefaultSettingsFetcher.mergeWithSeed(fetchedData, this.params.seed);
+        initialData = DefaultSettingsFetcher.sanitizeFetchedData(initialData);
+      } catch (error) {
+        console.warn("[SettingsModal] Failed to fetch current settings:", error);
+        if (this.params.onError) {
+          this.params.onError({
+            code: "NETWORK_ERROR",
+            message: "Failed to load current settings",
+            cause: error
+          });
+        }
+      }
+    }
+    this.view.render(initialData);
+  }
+  validateParams() {
+    if (!this.params.jwtToken) {
+      throw new Error("jwtToken is required for settings persistence");
+    }
+    if (!this.params.deviceId) {
+      throw new Error("deviceId is required");
+    }
+    if (!this.params.ingestionId) {
+      console.warn("[SettingsModal] ingestionId not provided - using deviceId for display");
+    }
+  }
+  async handleSave(formData) {
+    console.info("[SettingsModal] Save initiated", { deviceId: this.params.deviceId, formData });
+    this.emitEvent("save_started", { formData });
+    this.view.showLoadingState(true);
+    try {
+      const result = await this.saveSettings(formData);
+      if (result.ok) {
+        console.info("[SettingsModal] Settings saved successfully", result);
+        this.emitEvent("save_completed", { result });
+        if (this.params.onSaved) {
+          this.params.onSaved(result);
+        }
+        setTimeout(() => {
+          this.view.close();
+        }, 500);
+      } else {
+        console.error("[SettingsModal] Save failed:", result);
+        this.emitEvent("save_failed", { result });
+        const errorMessage = this.getErrorMessage(result);
+        this.view.showError(errorMessage);
+        if (this.params.onError) {
+          this.params.onError({
+            code: "VALIDATION_ERROR",
+            message: errorMessage,
+            cause: result
+          });
+        }
+      }
+    } catch (error) {
+      console.error("[SettingsModal] Save error:", error);
+      this.emitEvent("save_failed", { error: error.message });
+      const errorMessage = "Network error occurred while saving settings";
+      this.view.showError(errorMessage);
+      if (this.params.onError) {
+        this.params.onError({
+          code: "NETWORK_ERROR",
+          message: errorMessage,
+          cause: error
+        });
+      }
+    } finally {
+      this.view.showLoadingState(false);
+    }
+  }
+  async saveSettings(formData) {
+    const result = {
+      ok: true,
+      timestamp: (/* @__PURE__ */ new Date()).toISOString()
+    };
+    if (formData.label) {
+      try {
+        const labelResult = await this.persister.saveEntityLabel(
+          this.params.deviceId,
+          formData.label
+        );
+        result.entity = {
+          ok: labelResult.ok,
+          updated: labelResult.ok ? ["label"] : void 0,
+          error: labelResult.error ? {
+            code: labelResult.error.code,
+            message: labelResult.error.message,
+            cause: labelResult.error.cause
+          } : void 0
+        };
+        if (!labelResult.ok) {
+          result.ok = false;
+        }
+      } catch (error) {
+        result.entity = {
+          ok: false,
+          error: {
+            code: "UNKNOWN_ERROR",
+            message: error.message || "Failed to save device label",
+            cause: error
+          }
+        };
+        result.ok = false;
+      }
+    }
+    const attributes = this.extractAttributes(formData);
+    if (Object.keys(attributes).length > 0) {
+      try {
+        const attributesResult = await this.persister.saveServerScopeAttributes(
+          this.params.deviceId,
+          attributes
+        );
+        result.serverScope = {
+          ok: attributesResult.ok,
+          updatedKeys: attributesResult.updatedKeys,
+          error: attributesResult.error ? {
+            code: attributesResult.error.code,
+            message: attributesResult.error.message,
+            cause: attributesResult.error.cause
+          } : void 0
+        };
+        if (!attributesResult.ok) {
+          result.ok = false;
+        }
+      } catch (error) {
+        result.serverScope = {
+          ok: false,
+          error: {
+            code: "UNKNOWN_ERROR",
+            message: error.message || "Failed to save device attributes",
+            cause: error
+          }
+        };
+        result.ok = false;
+      }
+    }
+    return result;
+  }
+  extractAttributes(formData) {
+    const attributes = {};
+    for (const [key, value] of Object.entries(formData)) {
+      if (key !== "label" && value !== void 0 && value !== null && value !== "") {
+        attributes[key] = value;
+      }
+    }
+    return attributes;
+  }
+  getErrorMessage(result) {
+    const errors = [];
+    if (result.entity?.error) {
+      errors.push(`Device label: ${result.entity.error.message}`);
+    }
+    if (result.serverScope?.error) {
+      errors.push(`Settings: ${result.serverScope.error.message}`);
+    }
+    return errors.length > 0 ? errors.join("; ") : "Failed to save settings";
+  }
+  handleClose() {
+    console.info("[SettingsModal] Modal closed");
+    this.emitEvent("modal_closed");
+    if (this.params.onClose) {
+      this.params.onClose();
+    }
+  }
+  emitEvent(type, data) {
+    if (this.params.onEvent) {
+      const event = {
+        type,
+        deviceId: this.params.deviceId,
+        timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+        data
+      };
+      try {
+        this.params.onEvent(event);
+      } catch (error) {
+        console.warn("[SettingsModal] Event handler error:", error);
+      }
+    }
+  }
+  /**
+   * Utility method to validate form data before save
+   */
+  validateFormData(formData) {
+    const errors = [];
+    if (formData.guid) {
+      const guidPattern = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+      if (!guidPattern.test(formData.guid)) {
+        errors.push("GUID must be in valid UUID format");
+      }
+    }
+    const numericFields = ["maxDailyKwh", "maxNightKwh", "maxBusinessKwh"];
+    for (const field of numericFields) {
+      if (formData[field] !== void 0) {
+        const num = Number(formData[field]);
+        if (isNaN(num) || num < 0) {
+          errors.push(`${field} must be a positive number`);
+        }
+      }
+    }
+    if (formData.label && formData.label.length > 255) {
+      errors.push("Device label must be 255 characters or less");
+    }
+    if (formData.floor && formData.floor.length > 50) {
+      errors.push("Floor must be 50 characters or less");
+    }
+    if (formData.storeNumber && formData.storeNumber.length > 20) {
+      errors.push("Store number must be 20 characters or less");
+    }
+    return {
+      valid: errors.length === 0,
+      errors
+    };
+  }
+  /**
+   * Public method to programmatically close the modal
+   */
+  closeModal() {
+    this.view.close();
+  }
+  /**
+   * Public method to get current form data
+   */
+  getCurrentFormData() {
+    return this.view.getFormData();
+  }
+};
+
+// src/components/premium-modals/settings/openDashboardPopupSettings.ts
+async function openDashboardPopupSettings(params) {
+  if (!params.jwtToken) {
+    throw new Error("jwtToken is required for settings persistence");
+  }
+  if (!params.deviceId) {
+    throw new Error("deviceId is required");
+  }
+  console.info("[openDashboardPopupSettings] Initializing settings modal", {
+    deviceId: params.deviceId,
+    ingestionId: params.ingestionId,
+    hasJwtToken: !!params.jwtToken,
+    hasSeedData: !!params.seed,
+    apiConfig: params.api ? Object.keys(params.api) : void 0
+  });
+  const controller = new SettingsController(params);
+  try {
+    await controller.show();
+  } catch (error) {
+    console.error("[openDashboardPopupSettings] Error:", error);
+    if (params.onError) {
+      params.onError({
+        code: "UNKNOWN_ERROR",
+        message: error.message || "Unknown error occurred while opening settings modal",
+        cause: error
+      });
+    }
+    throw error;
+  }
+}
+
 // src/components/createDateRangePicker.ts
 async function createDateRangePicker2(input, options = {}) {
   const defaultOptions = {
@@ -8722,6 +9803,7 @@ async function openDemandModal(params) {
   openDashboardPopupAllReport,
   openDashboardPopupEnergy,
   openDashboardPopupReport,
+  openDashboardPopupSettings,
   openDemandModal,
   parseInputDateToDate,
   renderCardCompenteHeadOffice,