myio-js-library 0.1.486 → 0.1.487

package/dist/index.cjs

@@ -1159,7 +1159,7 @@ module.exports = __toCommonJS(index_exports);
 // package.json
 var package_default = {
   name: "myio-js-library",
-  version: "0.1.486",
+  version: "0.1.487",
   description: "A clean, standalone JS SDK for MYIO projects",
   license: "MIT",
   repository: "github:gh-myio/myio-js-library",
@@ -62014,7 +62014,7 @@ var SettingsModalView = class {
         <div class="customer-name-container">
           <div class="customer-info-row">
             <div class="device-type-icon-wrapper">
-              ${this.getDeviceTypeIcon(deviceType)}
+              ${this.getDeviceTypeIcon(deviceType ?? "")}
             </div>
             <div class="customer-info-content">
               <div class="customer-name-label">Shopping</div>
@@ -62620,7 +62620,7 @@ var SettingsModalView = class {
       not_installed: { text: "N\xE3o instalado", color: "#94a3b8" },
       unknown: { text: "Sem informa\xE7\xE3o", color: "#94a3b8" }
     };
-    const statusInfo = statusMap[mapDeviceStatusToCardStatus(deviceStatus) || ""] || {
+    const statusInfo = statusMap[mapDeviceStatusToCardStatus(deviceStatus ?? "") || ""] || {
       text: "Desconhecido",
       color: "#6b7280"
     };
@@ -62713,6 +62713,13 @@ var SettingsModalView = class {
         }
         
         /* Header handled by ModalHeader (RFC-0121) */
+        .myio-device-settings-modal .myio-modal-header__title {
+          font-size: 14px;
+          font-weight: 600;
+        }
+        .myio-device-settings-modal .myio-modal-header__icon {
+          font-size: 15px;
+        }
 
         .myio-device-settings-modal.is-maximized {
           width: 100vw !important;
@@ -89971,10 +89978,10 @@ var UserDetailTab = class {
     section.style.cssText = "margin-top:20px;border:1px solid var(--um-border);border-radius:10px;overflow:hidden;";
     const sectionHeader = document.createElement("div");
     sectionHeader.style.cssText = "display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--um-accent);border-bottom:1px solid var(--um-btn-2-border);";
-    sectionHeader.innerHTML = `<span style="font-size:13px;font-weight:600;color:#fff;">\u{1F511} Atribui\xE7\xF5es de Fun\xE7\xF5es</span>`;
+    sectionHeader.innerHTML = `<span style="font-size:13px;font-weight:600;color:#fff;">\u{1F511} Fun\xE7\xF5es / Pap\xE9is</span>`;
     const addBtn = document.createElement("button");
     addBtn.className = "um-btn um-btn--secondary um-btn--sm";
-    addBtn.textContent = "+ Atribuir Fun\xE7\xE3o";
+    addBtn.textContent = "+ Adicionar";
     addBtn.addEventListener("click", () => this.showAssignForm());
     sectionHeader.appendChild(addBtn);
     section.appendChild(sectionHeader);
@@ -90044,14 +90051,19 @@ var UserDetailTab = class {
     overlay.style.zIndex = "100001";
     const modal = document.createElement("div");
     modal.className = "um-modal";
-    modal.style.cssText = "padding: 24px; width: min(480px, 92vw); max-height: 80vh; height: auto; aspect-ratio: unset; overflow-y: auto; display: block;";
+    modal.style.cssText = "width: min(820px, 92vw); max-height: 85vh; height: auto; aspect-ratio: unset; overflow: hidden; display: flex; flex-direction: column;";
     const gcdrCid = window.MyIOOrchestrator?.gcdrCustomerId || "";
     const scopeOptions = [
-      { value: "*", label: "* (global)" },
-      ...gcdrCid ? [{ value: `customer:${gcdrCid}`, label: `customer:${gcdrCid}` }] : []
+      { value: "*", label: "* (global \u2014 todos os clientes)" },
+      ...gcdrCid ? [{ value: `customer:${gcdrCid}`, label: `Cliente atual (${gcdrCid.slice(0, 8)}...)` }] : []
     ];
     modal.innerHTML = `
-      <h4 style="margin:0 0 16px;font-size:15px;font-weight:600;color:var(--um-text-primary,#e2e8f0);">Atribuir Fun\xE7\xE3o</h4>
+      <div style="display:flex;align-items:center;gap:10px;padding:14px 20px;background:var(--um-accent);border-bottom:1px solid var(--um-btn-2-border);flex-shrink:0;">
+        <span style="font-size:15px;">\u{1F511}</span>
+        <span style="flex:1;font-size:14px;font-weight:600;color:#fff;">Atribuir Fun\xE7\xE3o / Papel</span>
+        <button type="button" class="assign-close" style="background:none;border:none;color:rgba(255,255,255,0.8);font-size:18px;cursor:pointer;padding:2px 6px;border-radius:4px;line-height:1;">\u2715</button>
+      </div>
+      <div style="padding:20px 24px;overflow-y:auto;flex:1;">
       <div class="um-form" style="max-width:100%;">
         <div class="um-form-group">
           <label class="um-label">Fun\xE7\xE3o <span class="um-req">*</span></label>
@@ -90084,6 +90096,7 @@ var UserDetailTab = class {
           <button class="um-btn um-btn--primary assign-save">Atribuir</button>
         </div>
       </div>
+      </div>
     `;
     overlay.appendChild(modal);
     document.body.appendChild(overlay);
@@ -90114,6 +90127,7 @@ var UserDetailTab = class {
     overlay.addEventListener("click", (e) => {
       if (e.target === overlay) close();
     });
+    modal.querySelector(".assign-close").addEventListener("click", close);
     modal.querySelector(".assign-cancel").addEventListener("click", close);
     modal.querySelector(".assign-save").addEventListener("click", async () => {
       const roleId = modal.querySelector("[name=roleId]").value.trim();
@@ -91146,6 +91160,13 @@ var UserManagementModalView = class {
   }
   // ── Styles ───────────────────────────────────────────────────────────────────
   injectStyles() {
+    if (!document.getElementById("um-font-nunito")) {
+      const link = document.createElement("link");
+      link.id = "um-font-nunito";
+      link.rel = "stylesheet";
+      link.href = "https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700&display=swap";
+      document.head.appendChild(link);
+    }
     if (document.getElementById("um-styles")) return;
     const style = document.createElement("style");
     style.id = "um-styles";
@@ -91269,6 +91290,7 @@ var UserManagementModalView = class {
 /* \u2500\u2500 Component styles (theme-agnostic via variables) \u2500\u2500 */
 .um-modal {
   background: var(--um-modal-bg);
+  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   border-radius: 14px; width: 92vw; max-width: 960px;
   --modal-header-radius: 14px 14px 0 0;
   aspect-ratio: 16/9; display: flex; flex-direction: column;
@@ -91442,7 +91464,7 @@ var UserManagementModalView = class {
 .um-check-label { font-size: 13px; color: var(--um-text-secondary); cursor: pointer; display: flex; align-items: center; gap: 8px; }
 .um-form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
 
-.um-detail-card { max-width: 560px; }
+.um-detail-card { width: 100%; }
 .um-detail-section { border: 1px solid var(--um-border); border-radius: 10px; overflow: hidden; margin-bottom: 20px; }
 .um-detail-row {
   display: flex; align-items: flex-start; gap: 16px;

package/dist/index.js

@@ -546,7 +546,7 @@ var init_template_card = __esm({
 // package.json
 var package_default = {
   name: "myio-js-library",
-  version: "0.1.486",
+  version: "0.1.487",
   description: "A clean, standalone JS SDK for MYIO projects",
   license: "MIT",
   repository: "github:gh-myio/myio-js-library",
@@ -61401,7 +61401,7 @@ var SettingsModalView = class {
         <div class="customer-name-container">
           <div class="customer-info-row">
             <div class="device-type-icon-wrapper">
-              ${this.getDeviceTypeIcon(deviceType)}
+              ${this.getDeviceTypeIcon(deviceType ?? "")}
             </div>
             <div class="customer-info-content">
               <div class="customer-name-label">Shopping</div>
@@ -62007,7 +62007,7 @@ var SettingsModalView = class {
       not_installed: { text: "N\xE3o instalado", color: "#94a3b8" },
       unknown: { text: "Sem informa\xE7\xE3o", color: "#94a3b8" }
     };
-    const statusInfo = statusMap[mapDeviceStatusToCardStatus(deviceStatus) || ""] || {
+    const statusInfo = statusMap[mapDeviceStatusToCardStatus(deviceStatus ?? "") || ""] || {
       text: "Desconhecido",
       color: "#6b7280"
     };
@@ -62100,6 +62100,13 @@ var SettingsModalView = class {
         }
         
         /* Header handled by ModalHeader (RFC-0121) */
+        .myio-device-settings-modal .myio-modal-header__title {
+          font-size: 14px;
+          font-weight: 600;
+        }
+        .myio-device-settings-modal .myio-modal-header__icon {
+          font-size: 15px;
+        }
 
         .myio-device-settings-modal.is-maximized {
           width: 100vw !important;
@@ -89358,10 +89365,10 @@ var UserDetailTab = class {
     section.style.cssText = "margin-top:20px;border:1px solid var(--um-border);border-radius:10px;overflow:hidden;";
     const sectionHeader = document.createElement("div");
     sectionHeader.style.cssText = "display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--um-accent);border-bottom:1px solid var(--um-btn-2-border);";
-    sectionHeader.innerHTML = `<span style="font-size:13px;font-weight:600;color:#fff;">\u{1F511} Atribui\xE7\xF5es de Fun\xE7\xF5es</span>`;
+    sectionHeader.innerHTML = `<span style="font-size:13px;font-weight:600;color:#fff;">\u{1F511} Fun\xE7\xF5es / Pap\xE9is</span>`;
     const addBtn = document.createElement("button");
     addBtn.className = "um-btn um-btn--secondary um-btn--sm";
-    addBtn.textContent = "+ Atribuir Fun\xE7\xE3o";
+    addBtn.textContent = "+ Adicionar";
     addBtn.addEventListener("click", () => this.showAssignForm());
     sectionHeader.appendChild(addBtn);
     section.appendChild(sectionHeader);
@@ -89431,14 +89438,19 @@ var UserDetailTab = class {
     overlay.style.zIndex = "100001";
     const modal = document.createElement("div");
     modal.className = "um-modal";
-    modal.style.cssText = "padding: 24px; width: min(480px, 92vw); max-height: 80vh; height: auto; aspect-ratio: unset; overflow-y: auto; display: block;";
+    modal.style.cssText = "width: min(820px, 92vw); max-height: 85vh; height: auto; aspect-ratio: unset; overflow: hidden; display: flex; flex-direction: column;";
     const gcdrCid = window.MyIOOrchestrator?.gcdrCustomerId || "";
     const scopeOptions = [
-      { value: "*", label: "* (global)" },
-      ...gcdrCid ? [{ value: `customer:${gcdrCid}`, label: `customer:${gcdrCid}` }] : []
+      { value: "*", label: "* (global \u2014 todos os clientes)" },
+      ...gcdrCid ? [{ value: `customer:${gcdrCid}`, label: `Cliente atual (${gcdrCid.slice(0, 8)}...)` }] : []
     ];
     modal.innerHTML = `
-      <h4 style="margin:0 0 16px;font-size:15px;font-weight:600;color:var(--um-text-primary,#e2e8f0);">Atribuir Fun\xE7\xE3o</h4>
+      <div style="display:flex;align-items:center;gap:10px;padding:14px 20px;background:var(--um-accent);border-bottom:1px solid var(--um-btn-2-border);flex-shrink:0;">
+        <span style="font-size:15px;">\u{1F511}</span>
+        <span style="flex:1;font-size:14px;font-weight:600;color:#fff;">Atribuir Fun\xE7\xE3o / Papel</span>
+        <button type="button" class="assign-close" style="background:none;border:none;color:rgba(255,255,255,0.8);font-size:18px;cursor:pointer;padding:2px 6px;border-radius:4px;line-height:1;">\u2715</button>
+      </div>
+      <div style="padding:20px 24px;overflow-y:auto;flex:1;">
       <div class="um-form" style="max-width:100%;">
         <div class="um-form-group">
           <label class="um-label">Fun\xE7\xE3o <span class="um-req">*</span></label>
@@ -89471,6 +89483,7 @@ var UserDetailTab = class {
           <button class="um-btn um-btn--primary assign-save">Atribuir</button>
         </div>
       </div>
+      </div>
     `;
     overlay.appendChild(modal);
     document.body.appendChild(overlay);
@@ -89501,6 +89514,7 @@ var UserDetailTab = class {
     overlay.addEventListener("click", (e) => {
       if (e.target === overlay) close();
     });
+    modal.querySelector(".assign-close").addEventListener("click", close);
     modal.querySelector(".assign-cancel").addEventListener("click", close);
     modal.querySelector(".assign-save").addEventListener("click", async () => {
       const roleId = modal.querySelector("[name=roleId]").value.trim();
@@ -90533,6 +90547,13 @@ var UserManagementModalView = class {
   }
   // ── Styles ───────────────────────────────────────────────────────────────────
   injectStyles() {
+    if (!document.getElementById("um-font-nunito")) {
+      const link = document.createElement("link");
+      link.id = "um-font-nunito";
+      link.rel = "stylesheet";
+      link.href = "https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700&display=swap";
+      document.head.appendChild(link);
+    }
     if (document.getElementById("um-styles")) return;
     const style = document.createElement("style");
     style.id = "um-styles";
@@ -90656,6 +90677,7 @@ var UserManagementModalView = class {
 /* \u2500\u2500 Component styles (theme-agnostic via variables) \u2500\u2500 */
 .um-modal {
   background: var(--um-modal-bg);
+  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   border-radius: 14px; width: 92vw; max-width: 960px;
   --modal-header-radius: 14px 14px 0 0;
   aspect-ratio: 16/9; display: flex; flex-direction: column;
@@ -90829,7 +90851,7 @@ var UserManagementModalView = class {
 .um-check-label { font-size: 13px; color: var(--um-text-secondary); cursor: pointer; display: flex; align-items: center; gap: 8px; }
 .um-form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
 
-.um-detail-card { max-width: 560px; }
+.um-detail-card { width: 100%; }
 .um-detail-section { border: 1px solid var(--um-border); border-radius: 10px; overflow: hidden; margin-bottom: 20px; }
 .um-detail-row {
   display: flex; align-items: flex-start; gap: 16px;

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

@@ -4070,7 +4070,7 @@
 
   // package.json
   var package_default = {
-    version: "0.1.486"};
+    version: "0.1.487"};
 
   // src/format/energy.ts
   function formatPower(value, decimals = 2) {
@@ -64616,7 +64616,7 @@ ${this._formatFileSize(f.size)} \xB7 ${f.type || "arquivo"}`;
         <div class="customer-name-container">
           <div class="customer-info-row">
             <div class="device-type-icon-wrapper">
-              ${this.getDeviceTypeIcon(deviceType)}
+              ${this.getDeviceTypeIcon(deviceType ?? "")}
             </div>
             <div class="customer-info-content">
               <div class="customer-name-label">Shopping</div>
@@ -65222,7 +65222,7 @@ ${this._formatFileSize(f.size)} \xB7 ${f.type || "arquivo"}`;
         not_installed: { text: "N\xE3o instalado", color: "#94a3b8" },
         unknown: { text: "Sem informa\xE7\xE3o", color: "#94a3b8" }
       };
-      const statusInfo = statusMap[mapDeviceStatusToCardStatus(deviceStatus)] || {
+      const statusInfo = statusMap[mapDeviceStatusToCardStatus(deviceStatus ?? "")] || {
         text: "Desconhecido",
         color: "#6b7280"
       };
@@ -65315,6 +65315,13 @@ ${this._formatFileSize(f.size)} \xB7 ${f.type || "arquivo"}`;
         }
         
         /* Header handled by ModalHeader (RFC-0121) */
+        .myio-device-settings-modal .myio-modal-header__title {
+          font-size: 14px;
+          font-weight: 600;
+        }
+        .myio-device-settings-modal .myio-modal-header__icon {
+          font-size: 15px;
+        }
 
         .myio-device-settings-modal.is-maximized {
           width: 100vw !important;
@@ -92565,10 +92572,10 @@ Esta a\xE7\xE3o afeta todos os grupos que utilizam este canal.`
       section.style.cssText = "margin-top:20px;border:1px solid var(--um-border);border-radius:10px;overflow:hidden;";
       const sectionHeader = document.createElement("div");
       sectionHeader.style.cssText = "display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--um-accent);border-bottom:1px solid var(--um-btn-2-border);";
-      sectionHeader.innerHTML = `<span style="font-size:13px;font-weight:600;color:#fff;">\u{1F511} Atribui\xE7\xF5es de Fun\xE7\xF5es</span>`;
+      sectionHeader.innerHTML = `<span style="font-size:13px;font-weight:600;color:#fff;">\u{1F511} Fun\xE7\xF5es / Pap\xE9is</span>`;
       const addBtn = document.createElement("button");
       addBtn.className = "um-btn um-btn--secondary um-btn--sm";
-      addBtn.textContent = "+ Atribuir Fun\xE7\xE3o";
+      addBtn.textContent = "+ Adicionar";
       addBtn.addEventListener("click", () => this.showAssignForm());
       sectionHeader.appendChild(addBtn);
       section.appendChild(sectionHeader);
@@ -92638,14 +92645,19 @@ Esta a\xE7\xE3o afeta todos os grupos que utilizam este canal.`
       overlay.style.zIndex = "100001";
       const modal = document.createElement("div");
       modal.className = "um-modal";
-      modal.style.cssText = "padding: 24px; width: min(480px, 92vw); max-height: 80vh; height: auto; aspect-ratio: unset; overflow-y: auto; display: block;";
+      modal.style.cssText = "width: min(820px, 92vw); max-height: 85vh; height: auto; aspect-ratio: unset; overflow: hidden; display: flex; flex-direction: column;";
       const gcdrCid = window.MyIOOrchestrator?.gcdrCustomerId || "";
       const scopeOptions = [
-        { value: "*", label: "* (global)" },
-        ...gcdrCid ? [{ value: `customer:${gcdrCid}`, label: `customer:${gcdrCid}` }] : []
+        { value: "*", label: "* (global \u2014 todos os clientes)" },
+        ...gcdrCid ? [{ value: `customer:${gcdrCid}`, label: `Cliente atual (${gcdrCid.slice(0, 8)}...)` }] : []
       ];
       modal.innerHTML = `
-      <h4 style="margin:0 0 16px;font-size:15px;font-weight:600;color:var(--um-text-primary,#e2e8f0);">Atribuir Fun\xE7\xE3o</h4>
+      <div style="display:flex;align-items:center;gap:10px;padding:14px 20px;background:var(--um-accent);border-bottom:1px solid var(--um-btn-2-border);flex-shrink:0;">
+        <span style="font-size:15px;">\u{1F511}</span>
+        <span style="flex:1;font-size:14px;font-weight:600;color:#fff;">Atribuir Fun\xE7\xE3o / Papel</span>
+        <button type="button" class="assign-close" style="background:none;border:none;color:rgba(255,255,255,0.8);font-size:18px;cursor:pointer;padding:2px 6px;border-radius:4px;line-height:1;">\u2715</button>
+      </div>
+      <div style="padding:20px 24px;overflow-y:auto;flex:1;">
       <div class="um-form" style="max-width:100%;">
         <div class="um-form-group">
           <label class="um-label">Fun\xE7\xE3o <span class="um-req">*</span></label>
@@ -92678,6 +92690,7 @@ Esta a\xE7\xE3o afeta todos os grupos que utilizam este canal.`
           <button class="um-btn um-btn--primary assign-save">Atribuir</button>
         </div>
       </div>
+      </div>
     `;
       overlay.appendChild(modal);
       document.body.appendChild(overlay);
@@ -92708,6 +92721,7 @@ Esta a\xE7\xE3o afeta todos os grupos que utilizam este canal.`
       overlay.addEventListener("click", (e) => {
         if (e.target === overlay) close();
       });
+      modal.querySelector(".assign-close").addEventListener("click", close);
       modal.querySelector(".assign-cancel").addEventListener("click", close);
       modal.querySelector(".assign-save").addEventListener("click", async () => {
         const roleId = modal.querySelector("[name=roleId]").value.trim();
@@ -93740,6 +93754,13 @@ Esta a\xE7\xE3o afeta todos os grupos que utilizam este canal.`
     }
     // ── Styles ───────────────────────────────────────────────────────────────────
     injectStyles() {
+      if (!document.getElementById("um-font-nunito")) {
+        const link = document.createElement("link");
+        link.id = "um-font-nunito";
+        link.rel = "stylesheet";
+        link.href = "https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700&display=swap";
+        document.head.appendChild(link);
+      }
       if (document.getElementById("um-styles")) return;
       const style = document.createElement("style");
       style.id = "um-styles";
@@ -93863,6 +93884,7 @@ Esta a\xE7\xE3o afeta todos os grupos que utilizam este canal.`
 /* \u2500\u2500 Component styles (theme-agnostic via variables) \u2500\u2500 */
 .um-modal {
   background: var(--um-modal-bg);
+  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   border-radius: 14px; width: 92vw; max-width: 960px;
   --modal-header-radius: 14px 14px 0 0;
   aspect-ratio: 16/9; display: flex; flex-direction: column;
@@ -94036,7 +94058,7 @@ Esta a\xE7\xE3o afeta todos os grupos que utilizam este canal.`
 .um-check-label { font-size: 13px; color: var(--um-text-secondary); cursor: pointer; display: flex; align-items: center; gap: 8px; }
 .um-form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
 
-.um-detail-card { max-width: 560px; }
+.um-detail-card { width: 100%; }
 .um-detail-section { border: 1px solid var(--um-border); border-radius: 10px; overflow: hidden; margin-bottom: 20px; }
 .um-detail-row {
   display: flex; align-items: flex-start; gap: 16px;