tailjng 0.1.6 → 0.1.8

package/src/lib/components/alert/alert-toast/toast-alert.component.html

@@ -1,119 +1,123 @@
-<div [ngClass]="getPositionClass()">
-  @for (toast of toasts(); track toast.id) {
-    <div
-      @toastTransition
-      class="j-toast group relative ml-auto w-full overflow-hidden rounded-xl border border-border/40 dark:border-dark-border/40 backdrop-blur-xl shadow-lg shadow-black/5 dark:shadow-black/40 pointer-events-auto"
-      [ngClass]="getToastSurfaceClass(toast.config.type)"
-      role="alert"
-      aria-live="polite"
+<div
+  [ngClass]="stackClasses()"
+  [ngStyle]="stackStyle()"
+  (mouseenter)="onStackEnter()"
+  (mouseleave)="onStackLeave()"
+>
+  @if (stackable && toasts().length > 1 && !expanded) {
+    <span
+      class="j-alert-toast-stack-hint absolute -top-[0.35rem] -right-[0.35rem] z-50 inline-flex items-center justify-center min-w-5 h-5 px-[0.3rem] rounded-full bg-primary text-primary-foreground text-[0.625rem] font-bold leading-none shadow-[0_2px_8px_rgb(0_0_0/0.18)] pointer-events-none opacity-0 scale-[0.85] transition-[opacity,transform] duration-200 ease-in-out"
+      aria-hidden="true"
     >
-      <div
-        class="absolute left-0 top-0 w-1 z-[1]"
-        [ngClass]="getAccentBarClass(toast.config.type)"
-        [class.bottom-0]="!hasAutoClose(toast)"
-        [class.bottom-1]="hasAutoClose(toast)"
-      ></div>
-
-      <!-- Icono decorativo grande -->
-      <div
-        class="j-toast-watermark j-toast-watermark--lg absolute -bottom-8 -left-5 z-0 pointer-events-none select-none"
-        [ngClass]="{ 'animate-spin': toast.config.type === 'loading' }"
-      >
-        <lucide-icon
-          [name]="getIcon(toast.config.type)"
-          [size]="104"
-          [ngClass]="getWatermarkIconClass(toast.config.type)"
-        ></lucide-icon>
-      </div>
+      {{ toasts().length }}
+    </span>
+  }
 
-      <!-- Icono decorativo pequeño -->
+  <div
+    class="j-alert-toast-scroll-shell relative w-full transition-[max-height] duration-[320ms] ease-[cubic-bezier(0.16,1,0.3,1)]"
+    [class.j-alert-toast-scroll-shell--expanded]="stackable && toasts().length > 1 && expanded"
+  >
+    <div
+      #stackInner
+      [ngClass]="innerClasses()"
+      [ngStyle]="scrollFadeStyle()"
+      (scroll)="onStackScroll()"
+      (transitionend)="onInnerTransitionEnd($event)"
+    >
+    @for (toast of displayToasts(); track toast.id) {
       <div
-        class="j-toast-watermark j-toast-watermark--sm absolute top-2 z-0 pointer-events-none select-none"
-        [class.right-9]="toast.btnClose"
-        [class.right-3]="!toast.btnClose"
-        [ngClass]="{ 'animate-spin': toast.config.type === 'loading' }"
+        @toastTransition
+        class="j-alert-toast-card relative w-full min-h-[4.5rem] ml-auto overflow-hidden rounded-xl backdrop-blur-[16px] pointer-events-auto"
+        [ngClass]="cardClasses(toast.config.type, toastIndex(toast), toasts().length)"
+        [ngStyle]="cardAnchorStyle(toastIndex(toast), toasts().length)"
+        [style.z-index]="cardZIndex(toastIndex(toast), toasts().length)"
+        role="alert"
+        aria-live="polite"
       >
-        <lucide-icon
-          [name]="getIcon(toast.config.type)"
-          [size]="32"
-          [ngClass]="getWatermarkIconClass(toast.config.type, true)"
-        ></lucide-icon>
-      </div>
+        <div [ngClass]="accentBarClasses(toast)"></div>
 
-      <!-- Texto -->
-      <div
-        class="relative z-10 pl-5 pr-4 pt-3.5"
-        [class.pr-10]="toast.btnClose"
-        [class.pb-2]="hasActions(toast)"
-        [class.pb-3.5]="!hasActions(toast) && !hasAutoClose(toast)"
-        [class.pb-4]="!hasActions(toast) && hasAutoClose(toast)"
-      >
-        <h3 class="m-0 text-sm font-semibold leading-tight text-foreground dark:text-white">
-          {{ toast.config.title }}
-        </h3>
+        <div [ngClass]="watermarkClasses(toast.config.type)">
+          <JIcon
+            [icon]="typeIcon(toast.config.type)"
+            [size]="104"
+            [inheritParentColor]="true"
+            [ariaHidden]="true"
+          />
+        </div>
 
-        @if (toast.config.description) {
-          <p
-            class="m-0 mt-1 text-xs leading-relaxed text-muted-foreground dark:text-dark-muted-foreground [&_b]:font-semibold [&_b]:text-foreground dark:[&_b]:text-white"
-            [innerHTML]="toast.config.description"
-          ></p>
-        }
+        <div [ngClass]="watermarkSmClasses(toast)">
+          <JIcon
+            [icon]="typeIcon(toast.config.type)"
+            [size]="32"
+            [inheritParentColor]="true"
+            [ariaHidden]="true"
+          />
+        </div>
 
-        @if (toast.btnClose) {
-          <button
-            type="button"
-            class="absolute top-2.5 right-2.5 z-20 flex h-7 w-7 items-center justify-center rounded-lg transition-all duration-200 hover:bg-black/5 dark:hover:bg-white/10 cursor-pointer"
-            [ngClass]="getIconClass(toast.config.type)"
-            [attr.aria-label]="'Cerrar notificación'"
-            (click)="closeToast(toast.id)"
-          >
-            <lucide-icon [name]="iconsService.icons.close" [size]="15"></lucide-icon>
-          </button>
-        }
-      </div>
+        <div [ngClass]="bodyClasses(toast)">
+          <h3 class="m-0 text-sm font-semibold leading-[1.3] tracking-[-0.01em] text-foreground dark:text-dark-foreground">{{ toast.config.title }}</h3>
 
-      <!-- Acciones: alineadas a la card, no al bloque de texto -->
-      @if (hasActions(toast)) {
-        <div
-          class="relative z-10 flex flex-wrap justify-end gap-1.5 pl-5 pr-4"
-          [class.pb-3.5]="!hasAutoClose(toast)"
-          [class.pb-4]="hasAutoClose(toast)"
-        >
-          @if (toast.config.type !== 'success' && toast.onCancelCallback) {
-            <JButton
-              size="xs"
-              (clicked)="handleAction(toast.id, 'cancel')"
-              [disabled]="toast.isCancelLoading || toast.isActionLoading"
-              [isLoading]="toast.isCancelLoading"
-              [ngClasses]="getButtonSecondaryClass(toast.config.type)"
-            >
-              {{ toast.config.titleBtnCancel || 'Cancelar' }}
-            </JButton>
+          @if (toast.config.description) {
+            <p
+              class="j-alert-toast-description mt-1 mb-0 text-xs leading-[1.55] text-muted-foreground dark:text-dark-muted-foreground"
+              [innerHTML]="toast.config.description"
+            ></p>
           }
 
-          @if (toast.config.type !== 'loading' && toast.onActionCallback) {
-            <JButton
-              size="xs"
-              (clicked)="handleAction(toast.id, 'action')"
-              [disabled]="toast.isCancelLoading || toast.isActionLoading"
-              [isLoading]="toast.isActionLoading"
-              [ngClasses]="getButtonClass(toast.config.type)"
+          @if (toast.btnClose) {
+            <button
+              type="button"
+              class="absolute top-2.5 right-2.5 z-20 inline-flex items-center justify-center w-7 h-7 m-0 p-0 border-0 rounded-lg bg-transparent text-muted-foreground dark:text-dark-muted-foreground leading-none cursor-pointer transition-[color,background-color,transform] duration-150 ease-in-out hover:text-foreground hover:bg-muted/45 dark:hover:text-dark-foreground dark:hover:bg-dark-muted/45 active:scale-[0.94] focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-2"
+              aria-label="Cerrar notificación"
+              (click)="closeToast(toast.id)"
             >
-              {{ toast.actionNameButton }}
-            </JButton>
+              <JIcon [icon]="Icons.X" [size]="15" [inheritParentColor]="true" [ariaHidden]="true" />
+            </button>
           }
         </div>
-      }
 
-      @if (hasAutoClose(toast)) {
-        <div class="j-toast-timeline absolute inset-x-0 bottom-0 z-20 h-1 bg-black/5 dark:bg-white/10">
+        @if (hasActions(toast)) {
           <div
-            class="j-toast-progress h-full origin-left"
-            [ngClass]="getAccentBarClass(toast.config.type)"
-            [style.animation-duration.ms]="getAutoCloseDelay(toast)"
-          ></div>
-        </div>
-      }
+            class="j-alert-toast-actions relative z-10 flex flex-wrap justify-end gap-1.5 py-0 pr-4 pb-3.5 pl-5"
+            [class.j-alert-toast-actions--with-timeline]="hasAutoClose(toast)"
+          >
+            @if (toast.config.type !== 'success' && toast.onCancelCallback) {
+              <JButton
+                size="xs"
+                (clicked)="handleAction(toast.id, 'cancel')"
+                [disabled]="isActionDisabled(toast)"
+                [isLoading]="toast.isCancelLoading"
+                [ngClasses]="getButtonSecondaryClass(toast.config.type)"
+              >
+                {{ toast.config.titleBtnCancel || 'Cancelar' }}
+              </JButton>
+            }
+
+            @if (toast.config.type !== 'loading' && toast.onActionCallback) {
+              <JButton
+                size="xs"
+                (clicked)="handleAction(toast.id, 'action')"
+                [disabled]="isActionDisabled(toast)"
+                [isLoading]="toast.isActionLoading"
+                [ngClasses]="getButtonClass(toast.config.type)"
+              >
+                {{ toast.actionNameButton }}
+              </JButton>
+            }
+          </div>
+        }
+
+        @if (hasAutoClose(toast)) {
+          <div class="j-alert-toast-timeline absolute inset-x-0 bottom-0 z-30 h-[var(--j-toast-timeline-height)] m-0 overflow-hidden rounded-b-[inherit]">
+            <div
+              class="j-alert-toast-progress w-full h-full origin-left"
+              [ngClass]="progressClasses(toast.config.type)"
+              [ngStyle]="progressStyle(toast)"
+            ></div>
+          </div>
+        }
+      </div>
+    }
     </div>
-  }
+  </div>
 </div>