myio-js-library 0.1.261 → 0.1.263

package/dist/index.cjs

@@ -26378,9 +26378,43 @@ var WelcomeModalView = class {
       userEmailEl.textContent = this.params.userInfo.email;
       return;
     }
+    const getToken = () => {
+      const tokenKeys = ["jwt_token", "access_token", "authToken", "tb_token"];
+      for (const key of tokenKeys) {
+        const token = localStorage.getItem(key);
+        if (token) return token;
+      }
+      for (const key of tokenKeys) {
+        const token = sessionStorage.getItem(key);
+        if (token) return token;
+      }
+      const win = window;
+      if (win.AuthService?.jwtToken) return win.AuthService.jwtToken;
+      const cookies = document.cookie.split(";");
+      for (const cookie of cookies) {
+        const [name, value] = cookie.trim().split("=");
+        if (tokenKeys.includes(name)) return value;
+      }
+      return null;
+    };
     try {
-      const token = localStorage.getItem("jwt_token");
+      const token = getToken();
       if (!token) {
+        const ctx = this.params.ctx;
+        if (ctx?.currentUser) {
+          const user = ctx.currentUser;
+          const fullName = [user.firstName, user.lastName].filter(Boolean).join(" ") || user.name || "Usu\xE1rio";
+          userNameEl.textContent = fullName;
+          userEmailEl.textContent = user.email || "";
+          return;
+        }
+        const tbUser = window.tb_user;
+        if (tbUser) {
+          const fullName = [tbUser.firstName, tbUser.lastName].filter(Boolean).join(" ") || tbUser.name || "Usu\xE1rio";
+          userNameEl.textContent = fullName;
+          userEmailEl.textContent = tbUser.email || "";
+          return;
+        }
         userNameEl.textContent = "Usu\xE1rio";
         userEmailEl.textContent = "";
         return;
@@ -26414,6 +26448,124 @@ var WelcomeModalView = class {
     if (userNameEl) userNameEl.textContent = info.fullName;
     if (userEmailEl) userEmailEl.textContent = info.email;
   }
+  /**
+   * Update shopping cards after data loads (RFC-0111: loading state support)
+   */
+  updateShoppingCards(cards) {
+    this.params.shoppingCards = cards;
+    let shortcutsSection = this.container.querySelector(".myio-welcome-shortcuts");
+    const modalContainer = this.container.querySelector(".myio-welcome-modal-container");
+    if (cards.length === 0) {
+      if (shortcutsSection) {
+        shortcutsSection.remove();
+      }
+      return;
+    }
+    const shortcutsTitle = this.params.shortcutsTitle ?? this.config.defaultShortcutsTitle ?? "Acesso R\xE1pido aos Shoppings";
+    const themeConfig = this.getThemeConfig();
+    const shortcutsTitleColor = themeConfig.shortcutsTitleColor ?? themeConfig.mutedTextColor;
+    if (!shortcutsSection && modalContainer) {
+      shortcutsSection = document.createElement("div");
+      shortcutsSection.className = "myio-welcome-shortcuts";
+      modalContainer.appendChild(shortcutsSection);
+    }
+    if (shortcutsSection) {
+      shortcutsSection.innerHTML = `
+        <h2 class="myio-welcome-shortcuts-title"${shortcutsTitleColor ? ` style="color: ${shortcutsTitleColor}"` : ""}>${shortcutsTitle}</h2>
+        <div class="myio-welcome-cards-grid" id="welcomeCardsGrid">
+          ${cards.map((card, index) => this.buildCardHTML(card, index)).join("")}
+        </div>
+      `;
+      this.bindCardEvents();
+      this.setupLazyLoading();
+    }
+    if (this.config.enableDebugMode) {
+      console.log("[WelcomeModal] Shopping cards updated:", cards.length);
+    }
+  }
+  /**
+   * Bind events for shopping cards (used after dynamic update)
+   */
+  bindCardEvents() {
+    const cards = this.container.querySelectorAll(".myio-welcome-card");
+    cards.forEach((card, index) => {
+      const shoppingCard = this.params.shoppingCards?.[index];
+      if (!shoppingCard) return;
+      card.addEventListener("click", (e) => {
+        const target = e.target;
+        if (target.closest(".myio-welcome-card-device-count")) {
+          return;
+        }
+        this.emit("card-click", shoppingCard);
+      });
+      card.addEventListener("keydown", (e) => {
+        const keyEvent = e;
+        if (keyEvent.key === "Enter" || keyEvent.key === " ") {
+          e.preventDefault();
+          this.emit("card-click", shoppingCard);
+        }
+      });
+    });
+    this.bindTooltipEvents();
+  }
+  /**
+   * Set CTA button label
+   */
+  setCtaLabel(label) {
+    const ctaBtn = this.container.querySelector("#welcomeCtaBtn");
+    if (ctaBtn) {
+      const svgIcon = ctaBtn.querySelector("svg");
+      ctaBtn.textContent = "";
+      ctaBtn.appendChild(document.createTextNode(label + " "));
+      if (svgIcon) {
+        ctaBtn.appendChild(svgIcon);
+      } else {
+        const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+        svg.setAttribute("viewBox", "0 0 24 24");
+        svg.setAttribute("fill", "none");
+        svg.setAttribute("stroke", "currentColor");
+        svg.setAttribute("stroke-width", "2");
+        svg.setAttribute("stroke-linecap", "round");
+        svg.setAttribute("stroke-linejoin", "round");
+        svg.innerHTML = '<line x1="5" y1="12" x2="19" y2="12" /><polyline points="12 5 19 12 12 19" />';
+        ctaBtn.appendChild(svg);
+      }
+    }
+  }
+  /**
+   * Set CTA button disabled state
+   */
+  setCtaDisabled(disabled) {
+    const ctaBtn = this.container.querySelector("#welcomeCtaBtn");
+    if (ctaBtn) {
+      ctaBtn.disabled = disabled;
+      ctaBtn.style.opacity = disabled ? "0.5" : "1";
+      ctaBtn.style.cursor = disabled ? "not-allowed" : "pointer";
+    }
+  }
+  /**
+   * Show the modal (after it was hidden)
+   */
+  show() {
+    this.container.style.display = "flex";
+    this.container.style.opacity = "0";
+    requestAnimationFrame(() => {
+      this.container.style.opacity = "1";
+      this.container.style.transition = "opacity 0.3s ease";
+    });
+    document.body.style.overflow = "hidden";
+  }
+  /**
+   * Hide the modal (without destroying it)
+   */
+  hide() {
+    this.container.style.opacity = "0";
+    this.container.style.transition = "opacity 0.3s ease";
+    setTimeout(() => {
+      this.container.style.display = "none";
+      document.body.style.overflow = "";
+    }, 300);
+  }
   /**
    * Cleanup resources
    */
@@ -26534,8 +26686,15 @@ function openWelcomeModal(params) {
     element.style.opacity = "1";
     element.style.transition = "opacity 0.3s ease";
   });
+  function open() {
+    if (!element.parentNode) {
+      document.body.appendChild(element);
+    }
+    view.show();
+  }
   return {
     close,
+    open,
     element,
     on: (event, handler) => {
       if (event === "close") {
@@ -26545,7 +26704,15 @@ function openWelcomeModal(params) {
     /** Set the theme mode from outside (e.g., from MAIN component) */
     setThemeMode: (mode) => view.setThemeMode(mode),
     /** Get the current theme mode */
-    getThemeMode: () => view.getThemeMode()
+    getThemeMode: () => view.getThemeMode(),
+    /** Update shopping cards after data loads (RFC-0111: loading state) */
+    updateShoppingCards: (cards) => view.updateShoppingCards(cards),
+    /** Update user info display */
+    updateUserInfo: (info) => view.updateUserInfo(info),
+    /** Set CTA button label */
+    setCtaLabel: (label) => view.setCtaLabel(label),
+    /** Set CTA button disabled state */
+    setCtaDisabled: (disabled) => view.setCtaDisabled(disabled)
   };
 }
 

package/dist/index.d.cts

@@ -2788,6 +2788,8 @@ interface WelcomeModalParams {
 interface WelcomeModalInstance {
     /** Close the modal programmatically */
     close: () => void;
+    /** Open/show the modal again after it was closed */
+    open: () => void;
     /** The modal's root DOM element */
     element: HTMLElement;
     /** Register event handlers */
@@ -2796,6 +2798,14 @@ interface WelcomeModalInstance {
     setThemeMode: (mode: WelcomeThemeMode) => void;
     /** Get the current theme mode */
     getThemeMode: () => WelcomeThemeMode;
+    /** Update shopping cards after data loads (RFC-0111: loading state) */
+    updateShoppingCards: (cards: ShoppingCard[]) => void;
+    /** Update user info display */
+    updateUserInfo: (info: UserInfo$1) => void;
+    /** Set CTA button label */
+    setCtaLabel: (label: string) => void;
+    /** Set CTA button disabled state */
+    setCtaDisabled: (disabled: boolean) => void;
 }
 /**
  * Default palette values

package/dist/index.js

@@ -26161,9 +26161,43 @@ var WelcomeModalView = class {
       userEmailEl.textContent = this.params.userInfo.email;
       return;
     }
+    const getToken = () => {
+      const tokenKeys = ["jwt_token", "access_token", "authToken", "tb_token"];
+      for (const key of tokenKeys) {
+        const token = localStorage.getItem(key);
+        if (token) return token;
+      }
+      for (const key of tokenKeys) {
+        const token = sessionStorage.getItem(key);
+        if (token) return token;
+      }
+      const win = window;
+      if (win.AuthService?.jwtToken) return win.AuthService.jwtToken;
+      const cookies = document.cookie.split(";");
+      for (const cookie of cookies) {
+        const [name, value] = cookie.trim().split("=");
+        if (tokenKeys.includes(name)) return value;
+      }
+      return null;
+    };
     try {
-      const token = localStorage.getItem("jwt_token");
+      const token = getToken();
       if (!token) {
+        const ctx = this.params.ctx;
+        if (ctx?.currentUser) {
+          const user = ctx.currentUser;
+          const fullName = [user.firstName, user.lastName].filter(Boolean).join(" ") || user.name || "Usu\xE1rio";
+          userNameEl.textContent = fullName;
+          userEmailEl.textContent = user.email || "";
+          return;
+        }
+        const tbUser = window.tb_user;
+        if (tbUser) {
+          const fullName = [tbUser.firstName, tbUser.lastName].filter(Boolean).join(" ") || tbUser.name || "Usu\xE1rio";
+          userNameEl.textContent = fullName;
+          userEmailEl.textContent = tbUser.email || "";
+          return;
+        }
         userNameEl.textContent = "Usu\xE1rio";
         userEmailEl.textContent = "";
         return;
@@ -26197,6 +26231,124 @@ var WelcomeModalView = class {
     if (userNameEl) userNameEl.textContent = info.fullName;
     if (userEmailEl) userEmailEl.textContent = info.email;
   }
+  /**
+   * Update shopping cards after data loads (RFC-0111: loading state support)
+   */
+  updateShoppingCards(cards) {
+    this.params.shoppingCards = cards;
+    let shortcutsSection = this.container.querySelector(".myio-welcome-shortcuts");
+    const modalContainer = this.container.querySelector(".myio-welcome-modal-container");
+    if (cards.length === 0) {
+      if (shortcutsSection) {
+        shortcutsSection.remove();
+      }
+      return;
+    }
+    const shortcutsTitle = this.params.shortcutsTitle ?? this.config.defaultShortcutsTitle ?? "Acesso R\xE1pido aos Shoppings";
+    const themeConfig = this.getThemeConfig();
+    const shortcutsTitleColor = themeConfig.shortcutsTitleColor ?? themeConfig.mutedTextColor;
+    if (!shortcutsSection && modalContainer) {
+      shortcutsSection = document.createElement("div");
+      shortcutsSection.className = "myio-welcome-shortcuts";
+      modalContainer.appendChild(shortcutsSection);
+    }
+    if (shortcutsSection) {
+      shortcutsSection.innerHTML = `
+        <h2 class="myio-welcome-shortcuts-title"${shortcutsTitleColor ? ` style="color: ${shortcutsTitleColor}"` : ""}>${shortcutsTitle}</h2>
+        <div class="myio-welcome-cards-grid" id="welcomeCardsGrid">
+          ${cards.map((card, index) => this.buildCardHTML(card, index)).join("")}
+        </div>
+      `;
+      this.bindCardEvents();
+      this.setupLazyLoading();
+    }
+    if (this.config.enableDebugMode) {
+      console.log("[WelcomeModal] Shopping cards updated:", cards.length);
+    }
+  }
+  /**
+   * Bind events for shopping cards (used after dynamic update)
+   */
+  bindCardEvents() {
+    const cards = this.container.querySelectorAll(".myio-welcome-card");
+    cards.forEach((card, index) => {
+      const shoppingCard = this.params.shoppingCards?.[index];
+      if (!shoppingCard) return;
+      card.addEventListener("click", (e) => {
+        const target = e.target;
+        if (target.closest(".myio-welcome-card-device-count")) {
+          return;
+        }
+        this.emit("card-click", shoppingCard);
+      });
+      card.addEventListener("keydown", (e) => {
+        const keyEvent = e;
+        if (keyEvent.key === "Enter" || keyEvent.key === " ") {
+          e.preventDefault();
+          this.emit("card-click", shoppingCard);
+        }
+      });
+    });
+    this.bindTooltipEvents();
+  }
+  /**
+   * Set CTA button label
+   */
+  setCtaLabel(label) {
+    const ctaBtn = this.container.querySelector("#welcomeCtaBtn");
+    if (ctaBtn) {
+      const svgIcon = ctaBtn.querySelector("svg");
+      ctaBtn.textContent = "";
+      ctaBtn.appendChild(document.createTextNode(label + " "));
+      if (svgIcon) {
+        ctaBtn.appendChild(svgIcon);
+      } else {
+        const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+        svg.setAttribute("viewBox", "0 0 24 24");
+        svg.setAttribute("fill", "none");
+        svg.setAttribute("stroke", "currentColor");
+        svg.setAttribute("stroke-width", "2");
+        svg.setAttribute("stroke-linecap", "round");
+        svg.setAttribute("stroke-linejoin", "round");
+        svg.innerHTML = '<line x1="5" y1="12" x2="19" y2="12" /><polyline points="12 5 19 12 12 19" />';
+        ctaBtn.appendChild(svg);
+      }
+    }
+  }
+  /**
+   * Set CTA button disabled state
+   */
+  setCtaDisabled(disabled) {
+    const ctaBtn = this.container.querySelector("#welcomeCtaBtn");
+    if (ctaBtn) {
+      ctaBtn.disabled = disabled;
+      ctaBtn.style.opacity = disabled ? "0.5" : "1";
+      ctaBtn.style.cursor = disabled ? "not-allowed" : "pointer";
+    }
+  }
+  /**
+   * Show the modal (after it was hidden)
+   */
+  show() {
+    this.container.style.display = "flex";
+    this.container.style.opacity = "0";
+    requestAnimationFrame(() => {
+      this.container.style.opacity = "1";
+      this.container.style.transition = "opacity 0.3s ease";
+    });
+    document.body.style.overflow = "hidden";
+  }
+  /**
+   * Hide the modal (without destroying it)
+   */
+  hide() {
+    this.container.style.opacity = "0";
+    this.container.style.transition = "opacity 0.3s ease";
+    setTimeout(() => {
+      this.container.style.display = "none";
+      document.body.style.overflow = "";
+    }, 300);
+  }
   /**
    * Cleanup resources
    */
@@ -26317,8 +26469,15 @@ function openWelcomeModal(params) {
     element.style.opacity = "1";
     element.style.transition = "opacity 0.3s ease";
   });
+  function open() {
+    if (!element.parentNode) {
+      document.body.appendChild(element);
+    }
+    view.show();
+  }
   return {
     close,
+    open,
     element,
     on: (event, handler) => {
       if (event === "close") {
@@ -26328,7 +26487,15 @@ function openWelcomeModal(params) {
     /** Set the theme mode from outside (e.g., from MAIN component) */
     setThemeMode: (mode) => view.setThemeMode(mode),
     /** Get the current theme mode */
-    getThemeMode: () => view.getThemeMode()
+    getThemeMode: () => view.getThemeMode(),
+    /** Update shopping cards after data loads (RFC-0111: loading state) */
+    updateShoppingCards: (cards) => view.updateShoppingCards(cards),
+    /** Update user info display */
+    updateUserInfo: (info) => view.updateUserInfo(info),
+    /** Set CTA button label */
+    setCtaLabel: (label) => view.setCtaLabel(label),
+    /** Set CTA button disabled state */
+    setCtaDisabled: (disabled) => view.setCtaDisabled(disabled)
   };
 }
 

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

@@ -25974,9 +25974,43 @@
         userEmailEl.textContent = this.params.userInfo.email;
         return;
       }
+      const getToken = () => {
+        const tokenKeys = ["jwt_token", "access_token", "authToken", "tb_token"];
+        for (const key of tokenKeys) {
+          const token = localStorage.getItem(key);
+          if (token) return token;
+        }
+        for (const key of tokenKeys) {
+          const token = sessionStorage.getItem(key);
+          if (token) return token;
+        }
+        const win = window;
+        if (win.AuthService?.jwtToken) return win.AuthService.jwtToken;
+        const cookies = document.cookie.split(";");
+        for (const cookie of cookies) {
+          const [name, value] = cookie.trim().split("=");
+          if (tokenKeys.includes(name)) return value;
+        }
+        return null;
+      };
       try {
-        const token = localStorage.getItem("jwt_token");
+        const token = getToken();
         if (!token) {
+          const ctx = this.params.ctx;
+          if (ctx?.currentUser) {
+            const user = ctx.currentUser;
+            const fullName = [user.firstName, user.lastName].filter(Boolean).join(" ") || user.name || "Usu\xE1rio";
+            userNameEl.textContent = fullName;
+            userEmailEl.textContent = user.email || "";
+            return;
+          }
+          const tbUser = window.tb_user;
+          if (tbUser) {
+            const fullName = [tbUser.firstName, tbUser.lastName].filter(Boolean).join(" ") || tbUser.name || "Usu\xE1rio";
+            userNameEl.textContent = fullName;
+            userEmailEl.textContent = tbUser.email || "";
+            return;
+          }
           userNameEl.textContent = "Usu\xE1rio";
           userEmailEl.textContent = "";
           return;
@@ -26010,6 +26044,124 @@
       if (userNameEl) userNameEl.textContent = info.fullName;
       if (userEmailEl) userEmailEl.textContent = info.email;
     }
+    /**
+     * Update shopping cards after data loads (RFC-0111: loading state support)
+     */
+    updateShoppingCards(cards) {
+      this.params.shoppingCards = cards;
+      let shortcutsSection = this.container.querySelector(".myio-welcome-shortcuts");
+      const modalContainer = this.container.querySelector(".myio-welcome-modal-container");
+      if (cards.length === 0) {
+        if (shortcutsSection) {
+          shortcutsSection.remove();
+        }
+        return;
+      }
+      const shortcutsTitle = this.params.shortcutsTitle ?? this.config.defaultShortcutsTitle ?? "Acesso R\xE1pido aos Shoppings";
+      const themeConfig = this.getThemeConfig();
+      const shortcutsTitleColor = themeConfig.shortcutsTitleColor ?? themeConfig.mutedTextColor;
+      if (!shortcutsSection && modalContainer) {
+        shortcutsSection = document.createElement("div");
+        shortcutsSection.className = "myio-welcome-shortcuts";
+        modalContainer.appendChild(shortcutsSection);
+      }
+      if (shortcutsSection) {
+        shortcutsSection.innerHTML = `
+        <h2 class="myio-welcome-shortcuts-title"${shortcutsTitleColor ? ` style="color: ${shortcutsTitleColor}"` : ""}>${shortcutsTitle}</h2>
+        <div class="myio-welcome-cards-grid" id="welcomeCardsGrid">
+          ${cards.map((card, index) => this.buildCardHTML(card, index)).join("")}
+        </div>
+      `;
+        this.bindCardEvents();
+        this.setupLazyLoading();
+      }
+      if (this.config.enableDebugMode) {
+        console.log("[WelcomeModal] Shopping cards updated:", cards.length);
+      }
+    }
+    /**
+     * Bind events for shopping cards (used after dynamic update)
+     */
+    bindCardEvents() {
+      const cards = this.container.querySelectorAll(".myio-welcome-card");
+      cards.forEach((card, index) => {
+        const shoppingCard = this.params.shoppingCards?.[index];
+        if (!shoppingCard) return;
+        card.addEventListener("click", (e) => {
+          const target = e.target;
+          if (target.closest(".myio-welcome-card-device-count")) {
+            return;
+          }
+          this.emit("card-click", shoppingCard);
+        });
+        card.addEventListener("keydown", (e) => {
+          const keyEvent = e;
+          if (keyEvent.key === "Enter" || keyEvent.key === " ") {
+            e.preventDefault();
+            this.emit("card-click", shoppingCard);
+          }
+        });
+      });
+      this.bindTooltipEvents();
+    }
+    /**
+     * Set CTA button label
+     */
+    setCtaLabel(label) {
+      const ctaBtn = this.container.querySelector("#welcomeCtaBtn");
+      if (ctaBtn) {
+        const svgIcon = ctaBtn.querySelector("svg");
+        ctaBtn.textContent = "";
+        ctaBtn.appendChild(document.createTextNode(label + " "));
+        if (svgIcon) {
+          ctaBtn.appendChild(svgIcon);
+        } else {
+          const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+          svg.setAttribute("viewBox", "0 0 24 24");
+          svg.setAttribute("fill", "none");
+          svg.setAttribute("stroke", "currentColor");
+          svg.setAttribute("stroke-width", "2");
+          svg.setAttribute("stroke-linecap", "round");
+          svg.setAttribute("stroke-linejoin", "round");
+          svg.innerHTML = '<line x1="5" y1="12" x2="19" y2="12" /><polyline points="12 5 19 12 12 19" />';
+          ctaBtn.appendChild(svg);
+        }
+      }
+    }
+    /**
+     * Set CTA button disabled state
+     */
+    setCtaDisabled(disabled) {
+      const ctaBtn = this.container.querySelector("#welcomeCtaBtn");
+      if (ctaBtn) {
+        ctaBtn.disabled = disabled;
+        ctaBtn.style.opacity = disabled ? "0.5" : "1";
+        ctaBtn.style.cursor = disabled ? "not-allowed" : "pointer";
+      }
+    }
+    /**
+     * Show the modal (after it was hidden)
+     */
+    show() {
+      this.container.style.display = "flex";
+      this.container.style.opacity = "0";
+      requestAnimationFrame(() => {
+        this.container.style.opacity = "1";
+        this.container.style.transition = "opacity 0.3s ease";
+      });
+      document.body.style.overflow = "hidden";
+    }
+    /**
+     * Hide the modal (without destroying it)
+     */
+    hide() {
+      this.container.style.opacity = "0";
+      this.container.style.transition = "opacity 0.3s ease";
+      setTimeout(() => {
+        this.container.style.display = "none";
+        document.body.style.overflow = "";
+      }, 300);
+    }
     /**
      * Cleanup resources
      */
@@ -26130,8 +26282,15 @@
       element.style.opacity = "1";
       element.style.transition = "opacity 0.3s ease";
     });
+    function open() {
+      if (!element.parentNode) {
+        document.body.appendChild(element);
+      }
+      view.show();
+    }
     return {
       close,
+      open,
       element,
       on: (event, handler) => {
         if (event === "close") {
@@ -26141,7 +26300,15 @@
       /** Set the theme mode from outside (e.g., from MAIN component) */
       setThemeMode: (mode) => view.setThemeMode(mode),
       /** Get the current theme mode */
-      getThemeMode: () => view.getThemeMode()
+      getThemeMode: () => view.getThemeMode(),
+      /** Update shopping cards after data loads (RFC-0111: loading state) */
+      updateShoppingCards: (cards) => view.updateShoppingCards(cards),
+      /** Update user info display */
+      updateUserInfo: (info) => view.updateUserInfo(info),
+      /** Set CTA button label */
+      setCtaLabel: (label) => view.setCtaLabel(label),
+      /** Set CTA button disabled state */
+      setCtaDisabled: (disabled) => view.setCtaDisabled(disabled)
     };
   }