@uxland/primary-shell 7.35.1 → 7.35.3

package/dist/primary/shell/src/api/notification-service/notification.service-impl.d.ts

@@ -1,5 +1,7 @@
 import { PrimariaNotificationService } from './notification-service';
 export declare class PrimariaNotificationServiceImpl extends PrimariaNotificationService {
+    private getOrCreateContainer;
+    private removeContainerIfEmpty;
     private notify;
     info(message: string, duration?: number): void;
     warning(message: string, duration?: number): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxland/primary-shell",
-  "version": "7.35.1",
+  "version": "7.35.3",
   "description": "Primaria Shell",
   "author": "UXLand <dev@uxland.es>",
   "homepage": "https://github.com/uxland/harmonix/tree/app#readme",

package/src/api/notification-service/notification-service-impl.test.ts

@@ -37,6 +37,13 @@ describe("PrimariaNotificationServiceImpl", () => {
     assertToast(state, message);
   });
 
+  it("should create a container for toasts", () => {
+    service.info("Test");
+    const container = document.getElementById("primaria-toast-container");
+    expect(container).not.toBeNull();
+    expect(container?.style.position).toBe("fixed");
+  });
+
   it("should remove the toast after the duration", () => {
     service.info("Temporary toast", 2000);
 
@@ -53,4 +60,24 @@ describe("PrimariaNotificationServiceImpl", () => {
     toast = document.querySelector("dss-toast") as HTMLElement;
     expect(toast).toBeNull();
   });
+
+  it("should remove the container when all toasts are dismissed", () => {
+    service.info("Toast 1", 1000);
+
+    vi.advanceTimersByTime(1000);
+    vi.advanceTimersByTime(300);
+
+    const container = document.getElementById("primaria-toast-container");
+    expect(container).toBeNull();
+  });
+
+  it("should stack multiple toasts in the same container", () => {
+    service.info("Toast 1");
+    service.warning("Toast 2");
+    service.error("Toast 3");
+
+    const container = document.getElementById("primaria-toast-container");
+    const toasts = container?.querySelectorAll("dss-toast");
+    expect(toasts?.length).toBe(3);
+  });
 });

package/src/api/notification-service/notification.service-impl.ts

@@ -1,12 +1,33 @@
 import { PrimariaNotificationService } from "./notification-service";
 
+const CONTAINER_ID = "primaria-toast-container";
+
 export class PrimariaNotificationServiceImpl extends PrimariaNotificationService {
+  private getOrCreateContainer(): HTMLElement {
+    let container = document.getElementById(CONTAINER_ID);
+    if (!container) {
+      container = document.createElement("div");
+      container.id = CONTAINER_ID;
+      container.style.cssText =
+        "position:fixed;bottom:var(--dss-spacing-xxs,8px);left:var(--dss-spacing-xxs,8px);display:flex;flex-direction:column-reverse;gap:var(--dss-spacing-xs,4px);z-index:999;pointer-events:none;";
+      document.body.appendChild(container);
+    }
+    return container;
+  }
+
+  private removeContainerIfEmpty(container: HTMLElement): void {
+    if (container.childElementCount === 0) {
+      container.remove();
+    }
+  }
+
   private notify(
     message: string,
     state: "info" | "warning" | "error" | "success",
     duration = 3000,
   ): void {
-    // Crear el Web Component
+    const container = this.getOrCreateContainer();
+
     const toast = document.createElement("dss-toast");
     toast.setAttribute("isshow", "true");
     toast.setAttribute("state", state);
@@ -14,16 +35,19 @@ export class PrimariaNotificationServiceImpl extends PrimariaNotificationService
     toast.setAttribute("text", message);
     toast.setAttribute("hasicon", "true");
     toast.setAttribute("duration", duration.toString());
+    toast.style.position = "relative";
+    toast.style.bottom = "auto";
+    toast.style.left = "auto";
+    toast.style.pointerEvents = "auto";
 
-    // Agregar al body
-    document.body.appendChild(toast);
+    container.appendChild(toast);
 
-    // Remover después del tiempo de duración
     setTimeout(() => {
       toast.setAttribute("isshow", "false");
       setTimeout(() => {
         toast.remove();
-      }, 300); // Espera un poco para animación de salida (ajustable)
+        this.removeContainerIfEmpty(container);
+      }, 300);
     }, duration);
   }