tailjng 0.1.5 → 0.1.7

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

@@ -1,201 +1,558 @@
-import { Component, computed, inject, Input } from '@angular/core';
-import { trigger, transition, style, animate } from "@angular/animations";
-import { NgClass } from '@angular/common';
-import { LucideAngularModule } from 'lucide-angular';
+import {
+  Component,
+  computed,
+  effect,
+  ElementRef,
+  inject,
+  Input,
+  ChangeDetectorRef,
+  ViewChild,
+} from '@angular/core';
+import { trigger, transition, style, animate } from '@angular/animations';
+import { NgClass, NgStyle } from '@angular/common';
+import { JAlertToastService, JColorsService, Toast } from 'tailjng';
 import { JButtonComponent } from '../../button/button.component';
-import { JIconsService, JAlertToastService, JColorsService } from 'tailjng';
-
+import { JIconComponent } from '../../icon/icon.component';
+import { Icons } from '../../.config/icons/icons.lucide';
+import {
+  AlertToastPosition,
+  AlertToastType,
+  ALERT_TOAST_TYPE_ICONS,
+} from './toast-alert.types';
+
+export type { AlertToastPosition, AlertToastType } from './toast-alert.types';
+
+/**
+ * Global toast notification host — mount once (e.g. app root) and call `JAlertToastService.AlertToast()`.
+ *
+ * Install: `npx tailjng add alert-toast`
+ */
 @Component({
   selector: 'JAlertToast',
-  imports: [LucideAngularModule, NgClass, JButtonComponent],
+  imports: [NgClass, NgStyle, JButtonComponent, JIconComponent],
   templateUrl: './toast-alert.component.html',
   styleUrl: './toast-alert.component.css',
   animations: [
     trigger('toastTransition', [
       transition(':enter', [
         style({ opacity: 0, transform: 'translateX(1.25rem) scale(0.98)' }),
-        animate('320ms cubic-bezier(0.16, 1, 0.3, 1)', style({ opacity: 1, transform: 'translateX(0) scale(1)' })),
+        animate(
+          '320ms cubic-bezier(0.16, 1, 0.3, 1)',
+          style({ opacity: 1, transform: 'translateX(0) scale(1)' }),
+        ),
       ]),
       transition(':leave', [
-        animate('180ms cubic-bezier(0.4, 0, 1, 1)', style({ opacity: 0, transform: 'translateX(0.75rem) scale(0.98)' })),
+        animate(
+          '180ms cubic-bezier(0.4, 0, 1, 1)',
+          style({ opacity: 0, transform: 'translateX(0.75rem) scale(0.98)' }),
+        ),
       ]),
     ]),
   ],
 })
 export class JAlertToastComponent {
-  
-  @Input() monocromatic: boolean = false;
-  @Input() position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' = 'bottom-right';
+  readonly Icons = Icons;
+
+  @ViewChild('stackInner') stackInner?: ElementRef<HTMLElement>;
 
   private readonly alertToastService = inject(JAlertToastService);
+  private readonly colorsService = inject(JColorsService);
+  private readonly cdr = inject(ChangeDetectorRef);
+  private readonly defaultScrollGutterPx = 2;
+
+  @Input() monocromatic = false;
+  @Input() position: AlertToastPosition = 'bottom-right';
+  /** Collapse multiple toasts into a peeking stack; hover expands with scroll. */
+  @Input() stackable = true;
+  /** How many recent toasts peek in the collapsed pile (rest hidden until expand). */
+  @Input() collapsedStackLimit = 4;
+
+  expanded = false;
+  scrollReady = false;
+  scrollActive = false;
+  hasScrollOverflow = false;
+  scrollGutterPx = 0;
+  scrollEdgeFade = { top: false, bottom: false };
+  private progressLayoutKey = 0;
+  private readonly progressStyleCache = new Map<string, Record<string, string>>();
+  private expandMeasureTimer?: ReturnType<typeof setTimeout>;
+  private scrollActiveTimer?: ReturnType<typeof setTimeout>;
+  private scrollRefreshTimer?: ReturnType<typeof setTimeout>;
+  private scrollGutterRafId?: number;
+
+  readonly toasts = computed(() => this.alertToastService.toasts());
+
+  constructor() {
+    effect(() => {
+      this.toasts();
+      if (this.expanded && this.scrollReady) {
+        this.scheduleScrollStateRefresh();
+      }
+    });
+  }
 
-  constructor(
-    private readonly colorsService: JColorsService,
-    public readonly iconsService: JIconsService
-  ) { }
+  handleAction(toastId: string, action: 'action' | 'cancel'): void {
+    this.alertToastService.executeToastAction(toastId, action);
+  }
 
-  toasts = computed(() => this.alertToastService.toasts());
+  closeToast(toastId: string): void {
+    this.alertToastService.closeToastById(toastId);
+  }
 
+  onStackEnter(): void {
+    if (!this.stackable || this.toasts().length <= 1) {
+      return;
+    }
 
-  /**
-   * Get the icon for a specific toast type.
-   * @param type The type of the toast.
-   * @returns The icon name for the toast type.
-   */
-  getIcon(type: string) {
-    return this.iconsService.icons[type as keyof typeof this.iconsService.icons] || this.iconsService.icons.info;
+    this.expanded = true;
+    this.scrollReady = false;
+    this.scrollActive = false;
+    this.hasScrollOverflow = false;
+    this.scrollGutterPx = 0;
+    this.clearScrollActiveTimer();
+    this.scrollEdgeFade = { top: false, bottom: false };
+    this.syncProgressStyles();
+    this.scheduleExpandMeasure();
   }
 
+  onStackLeave(): void {
+    this.clearExpandMeasureTimer();
+    this.clearScrollRefreshTimer();
+    this.cancelScrollGutterMeasure();
+    this.expanded = false;
+    this.scrollReady = false;
+    this.scrollActive = false;
+    this.hasScrollOverflow = false;
+    this.scrollGutterPx = 0;
+    this.clearScrollActiveTimer();
+    this.scrollEdgeFade = { top: false, bottom: false };
+    this.syncProgressStyles();
+  }
 
+  onStackScroll(): void {
+    if (!this.scrollReady) {
+      return;
+    }
 
-  /**
-   * Handle toast actions.
-   * @param toastId The ID of the toast.
-   * @param action The action to perform.
-   */
-  handleAction(toastId: string, action: "action" | "cancel") {
-    this.alertToastService.executeToastAction(toastId, action);
+    this.scrollActive = true;
+    this.clearScrollActiveTimer();
+    this.scrollActiveTimer = setTimeout(() => {
+      this.scrollActive = false;
+      this.scrollActiveTimer = undefined;
+    }, 900);
+    this.updateScrollState();
   }
 
+  onInnerTransitionEnd(event: TransitionEvent): void {
+    if (!this.expanded || event.propertyName !== 'max-height') {
+      return;
+    }
 
+    this.markExpandReady();
+  }
 
-  /**
-   * Close a toast by its ID.
-   * @param toastId The ID of the toast.
-   */
-  closeToast(toastId: string) {
-    this.alertToastService.closeToastById(toastId);
+  typeIcon(type: string) {
+    return ALERT_TOAST_TYPE_ICONS[type as AlertToastType] ?? ALERT_TOAST_TYPE_ICONS.info;
   }
 
+  stackClasses(): Record<string, boolean> {
+    const count = this.toasts().length;
+    const isStackable = this.stackable && count > 1;
+
+    return {
+      'j-alert-toast-stack': true,
+      [`j-alert-toast-stack--${this.position}`]: true,
+      'j-alert-toast-stack--stackable': isStackable,
+      'j-alert-toast-stack--expanded': isStackable && this.expanded,
+      'j-alert-toast-stack--has-scroll':
+        isStackable && this.expanded && this.scrollReady && this.hasScrollOverflow,
+      'j-alert-toast-stack--single': count <= 1,
+    };
+  }
 
+  stackStyle(): Record<string, string> {
+    const style: Record<string, string> = {
+      '--j-toast-stack-visible': String(this.collapsedStackLimit),
+    };
 
-  /**
-   * Fondo suave del toast según el tipo (tinte del diseño anterior + glass actual).
-   */
-  getToastSurfaceClass(type: string): string {
-    if (this.monocromatic) {
-      return 'bg-white/95 dark:bg-foreground/95';
+    if (this.hasScrollOverflow && this.expanded && this.scrollReady) {
+      style['--j-toast-stack-scrollbar-gutter'] = `${this.scrollGutterPx}px`;
     }
 
-    const surfaces: Record<string, string> = {
-      success: 'bg-green-50/95 dark:bg-[#15241f]/95',
-      error: 'bg-red-50/95 dark:bg-[#21181c]/95',
-      warning: 'bg-yellow-50/95 dark:bg-[#1f1c1a]/95',
-      info: 'bg-blue-50/95 dark:bg-[#1a1a24]/95',
-      question: 'bg-purple-50/95 dark:bg-[#241732]/95',
-      loading: 'bg-gray-50/95 dark:bg-[#15181e]/95',
+    return style;
+  }
+
+  innerClasses(): Record<string, boolean> {
+    const count = this.toasts().length;
+    const isStackable = this.stackable && count > 1;
+
+    return {
+      'j-alert-toast-stack-inner': true,
+      'j-alert-toast-stack-inner--stackable': isStackable,
+      'j-alert-toast-stack-inner--expanded': isStackable && this.expanded,
+      'j-alert-toast-stack-inner--scroll-ready': isStackable && this.expanded && this.scrollReady,
+      'j-alert-toast-stack-inner--scrollable': isStackable && this.expanded && this.scrollReady && this.hasScrollOverflow,
+      'j-alert-toast-stack-inner--scroll-active': isStackable && this.expanded && this.scrollReady && this.scrollActive,
     };
+  }
+
+  scrollFadeStyle(): Record<string, string> {
+    if (!this.expanded || !this.scrollReady || !this.hasScrollOverflow) {
+      return {};
+    }
+
+    const fade = 'var(--j-toast-stack-fade)';
+    const { top, bottom } = this.scrollEdgeFade;
+
+    if (top && bottom) {
+      const gradient = `linear-gradient(to bottom, transparent 0, #000 ${fade}, #000 calc(100% - ${fade}), transparent 100%)`;
+      return {
+        '-webkit-mask-image': gradient,
+        'mask-image': gradient,
+      };
+    }
 
-    return surfaces[type] ?? 'bg-white/95 dark:bg-foreground/95';
+    if (top) {
+      const gradient = `linear-gradient(to bottom, transparent 0, #000 ${fade}, #000 100%)`;
+      return {
+        '-webkit-mask-image': gradient,
+        'mask-image': gradient,
+      };
+    }
+
+    if (bottom) {
+      const gradient = `linear-gradient(to bottom, #000 0, #000 calc(100% - ${fade}), transparent 100%)`;
+      return {
+        '-webkit-mask-image': gradient,
+        'mask-image': gradient,
+      };
+    }
+
+    return {};
   }
 
-  /**
-   * Opacidad del icono decorativo de fondo.
-   */
-  getWatermarkIconClass(type: string, subtle = false): string {
-    if (subtle) {
-      return `${this.getIconClass(type)} opacity-[0.12] dark:opacity-[0.2]`;
+  cardAnchorStyle(index: number, total: number): Record<string, string> {
+    if (!this.stackable || total <= 1 || this.expanded) {
+      return {};
     }
-    return `${this.getIconClass(type)} opacity-[0.2] dark:opacity-[0.3]`;
+
+    const pile = this.getPileMeta(index, total);
+    if (!pile.inPile) {
+      return {};
+    }
+
+    const offset = `${(pile.pileCount - 1 - pile.pileIndex) * 10}px`;
+
+    if (this.isBottomAnchor()) {
+      return { bottom: offset, top: 'auto' };
+    }
+
+    return { top: offset, bottom: 'auto' };
+  }
+
+  cardZIndex(index: number, total: number): number {
+    if (this.expanded) {
+      return index + 1;
+    }
+
+    const pile = this.getPileMeta(index, total);
+    if (!pile.inPile) {
+      return 0;
+    }
+
+    return pile.pileIndex + 1;
   }
 
-  /**
-   * Barra lateral de acento según el tipo de toast.
-   */
-  getAccentBarClass(type: string): string {
-    if (this.monocromatic) return 'bg-primary';
+  cardShellClasses(index: number, total: number): Record<string, boolean> {
+    if (!this.stackable || total <= 1 || this.expanded) {
+      return {};
+    }
+
+    const pile = this.getPileMeta(index, total);
+    return {
+      'j-alert-toast-card--in-pile': pile.inPile,
+      'j-alert-toast-card--pile-hidden': !pile.inPile,
+      'j-alert-toast-card--pile-top': pile.inPile && pile.pileIndex === pile.pileCount - 1,
+    };
+  }
 
-    const accents: Record<string, string> = {
-      success: 'bg-green-500',
-      error: 'bg-red-500',
-      warning: 'bg-yellow-500',
-      info: 'bg-blue-500',
-      question: 'bg-purple-500',
-      loading: 'bg-gray-500',
+  private getPileMeta(index: number, total: number): {
+    inPile: boolean;
+    pileIndex: number;
+    pileCount: number;
+  } {
+    const pileCount = Math.min(total, this.collapsedStackLimit);
+    const startIndex = total - pileCount;
+    const inPile = index >= startIndex;
+
+    return {
+      inPile,
+      pileIndex: inPile ? index - startIndex : -1,
+      pileCount,
     };
+  }
+
+  displayToasts(): Toast[] {
+    const list = this.toasts();
+    if (this.expanded && !this.isBottomAnchor()) {
+      return [...list].reverse();
+    }
+    return list;
+  }
+
+  toastIndex(toast: Toast): number {
+    return this.toasts().findIndex((item) => item.id === toast.id);
+  }
+
+  private scheduleExpandMeasure(): void {
+    this.clearExpandMeasureTimer();
+    this.expandMeasureTimer = setTimeout(() => this.markExpandReady(), 340);
+  }
+
+  private markExpandReady(): void {
+    if (!this.expanded || this.scrollReady) {
+      return;
+    }
+
+    this.clearExpandMeasureTimer();
+    this.scrollReady = true;
+    this.updateScrollState();
+    this.cdr.detectChanges();
+    this.scrollToLatest();
+    this.scheduleScrollGutterMeasure();
+  }
+
+  private clearExpandMeasureTimer(): void {
+    if (this.expandMeasureTimer) {
+      clearTimeout(this.expandMeasureTimer);
+      this.expandMeasureTimer = undefined;
+    }
+  }
+
+  private clearScrollActiveTimer(): void {
+    if (this.scrollActiveTimer) {
+      clearTimeout(this.scrollActiveTimer);
+      this.scrollActiveTimer = undefined;
+    }
+  }
+
+  private readLiveScrollGutter(el: HTMLElement): number {
+    return Math.max(0, el.offsetWidth - el.clientWidth);
+  }
 
-    return accents[type] ?? 'bg-primary';
+  private scheduleScrollGutterMeasure(): void {
+    this.cancelScrollGutterMeasure();
+    this.scrollGutterRafId = requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        this.scrollGutterRafId = undefined;
+        this.applyMeasuredScrollGutter();
+      });
+    });
   }
 
-  /**
-   * Indica si el toast muestra botones de acción o cancelar.
-   */
-  hasActions(toast: {
-    config: { type?: string };
-    onCancelCallback?: unknown;
-    onActionCallback?: unknown;
-  }): boolean {
+  private cancelScrollGutterMeasure(): void {
+    if (this.scrollGutterRafId !== undefined) {
+      cancelAnimationFrame(this.scrollGutterRafId);
+      this.scrollGutterRafId = undefined;
+    }
+  }
+
+  private scheduleScrollStateRefresh(): void {
+    queueMicrotask(() => this.refreshScrollState());
+    requestAnimationFrame(() => this.refreshScrollState());
+
+    this.clearScrollRefreshTimer();
+    this.scrollRefreshTimer = setTimeout(() => this.refreshScrollState(), 220);
+  }
+
+  private refreshScrollState(): void {
+    this.updateScrollState();
+    this.cdr.detectChanges();
+  }
+
+  private clearScrollRefreshTimer(): void {
+    if (this.scrollRefreshTimer) {
+      clearTimeout(this.scrollRefreshTimer);
+      this.scrollRefreshTimer = undefined;
+    }
+  }
+
+  private applyMeasuredScrollGutter(): void {
+    const el = this.stackInner?.nativeElement;
+    if (!el || !this.expanded || !this.hasScrollOverflow) {
+      return;
+    }
+
+    const gutter = this.readLiveScrollGutter(el);
+    const next = gutter > 0 ? gutter : this.defaultScrollGutterPx;
+    if (next === this.scrollGutterPx) {
+      return;
+    }
+
+    this.scrollGutterPx = next;
+    this.cdr.detectChanges();
+  }
+
+  private updateScrollState(): void {
+    const el = this.stackInner?.nativeElement;
+    if (!el || !this.expanded) {
+      this.hasScrollOverflow = false;
+      this.scrollGutterPx = 0;
+      this.scrollEdgeFade = { top: false, bottom: false };
+      return;
+    }
+
+    const threshold = 4;
+    const hasOverflow = el.scrollHeight > el.clientHeight + 1;
+    this.hasScrollOverflow = hasOverflow;
+    this.scrollGutterPx = hasOverflow
+      ? Math.max(this.readLiveScrollGutter(el), this.defaultScrollGutterPx)
+      : 0;
+
+    if (!hasOverflow) {
+      this.cancelScrollGutterMeasure();
+      this.scrollEdgeFade = { top: false, bottom: false };
+      return;
+    }
+
+    this.scheduleScrollGutterMeasure();
+
+    this.scrollEdgeFade = {
+      top: el.scrollTop > threshold,
+      bottom: el.scrollTop + el.clientHeight < el.scrollHeight - threshold,
+    };
+  }
+
+  private scrollToLatest(): void {
+    const el = this.stackInner?.nativeElement;
+    if (!el) {
+      return;
+    }
+
+    if (this.isBottomAnchor()) {
+      el.scrollTop = el.scrollHeight;
+    } else {
+      el.scrollTop = 0;
+    }
+  }
+
+  private isBottomAnchor(): boolean {
+    return this.position === 'bottom-left' || this.position === 'bottom-right';
+  }
+
+  cardClasses(type: string, index: number, total: number): Record<string, boolean> {
+    const toastType = type as AlertToastType;
+    return {
+      [`j-alert-toast-card--${toastType}`]: !this.monocromatic,
+      'j-alert-toast-card--mono': this.monocromatic,
+      ...this.cardShellClasses(index, total),
+    };
+  }
+
+  accentClasses(type: string): Record<string, boolean> {
+    const toastType = type as AlertToastType;
+    return {
+      'j-alert-toast-accent': true,
+      [`j-alert-toast-accent--${toastType}`]: !this.monocromatic,
+      'j-alert-toast-accent--mono': this.monocromatic,
+    };
+  }
+
+  watermarkClasses(type: string, subtle = false): Record<string, boolean> {
+    const toastType = type as AlertToastType;
+    return {
+      'j-alert-toast-watermark': true,
+      'j-alert-toast-watermark--lg': !subtle,
+      'j-alert-toast-watermark--sm': subtle,
+      'j-alert-toast-watermark--subtle': subtle,
+      [`j-alert-toast-watermark--${toastType}`]: !this.monocromatic,
+      'j-alert-toast-watermark--mono': this.monocromatic,
+      'j-alert-toast-watermark--spin': type === 'loading',
+    };
+  }
+
+  bodyClasses(toast: Toast): Record<string, boolean> {
+    return {
+      'j-alert-toast-body': true,
+      'j-alert-toast-body--closable': toast.btnClose,
+      'j-alert-toast-body--with-actions': this.hasActions(toast),
+      'j-alert-toast-body--with-timeline': this.hasAutoClose(toast) && !this.hasActions(toast),
+      'j-alert-toast-body--with-actions-timeline':
+        this.hasAutoClose(toast) && this.hasActions(toast),
+    };
+  }
+
+  accentBarClasses(toast: Toast): Record<string, boolean> {
+    return {
+      ...this.accentClasses(toast.config.type),
+      'j-alert-toast-accent--with-timeline': this.hasAutoClose(toast),
+    };
+  }
+
+  watermarkSmClasses(toast: Toast): Record<string, boolean> {
+    return {
+      ...this.watermarkClasses(toast.config.type, true),
+      'j-alert-toast-watermark--with-close': toast.btnClose,
+    };
+  }
+
+  progressClasses(type: string): Record<string, boolean> {
+    const toastType = type as AlertToastType;
+    return {
+      [`j-alert-toast-progress--${toastType}`]: !this.monocromatic,
+      'j-alert-toast-progress--mono': this.monocromatic,
+    };
+  }
+
+  hasActions(toast: Toast): boolean {
     return (
       (toast.config.type !== 'success' && Boolean(toast.onCancelCallback)) ||
       (toast.config.type !== 'loading' && Boolean(toast.onActionCallback))
     );
   }
 
-  /**
-   * Indica si el toast se cierra automáticamente.
-   */
-  hasAutoClose(toast: { config: { type?: string; autoClose?: boolean } }): boolean {
+  hasAutoClose(toast: Toast): boolean {
     const { config } = toast;
     return config.autoClose === true || (config.type === 'success' && config.autoClose !== false);
   }
 
-  /**
-   * Duración del auto-cierre en milisegundos.
-   */
-  getAutoCloseDelay(toast: { config: { autoCloseDelay?: number } }): number {
+  getAutoCloseDelay(toast: Toast): number {
     return toast.config.autoCloseDelay ?? 5000;
   }
 
-  /**
-   * Get the class of the icon.
-   * @param type The type of the toast.
-   * @returns The class of the icon.
-   */
-  getIconClass(type: string) {
-    return this.colorsService.getIconClass(type, this.monocromatic);
-  }
+  progressStyle(toast: Toast): Record<string, string> {
+    void this.progressLayoutKey;
 
+    const cached = this.progressStyleCache.get(toast.id);
+    if (cached) {
+      return cached;
+    }
 
+    const duration = this.getAutoCloseDelay(toast);
+    const elapsed = Math.min(Math.max(0, Date.now() - toast.createdAt), duration);
+    const style = {
+      'animation-duration': `${duration}ms`,
+      'animation-delay': `-${elapsed}ms`,
+    };
 
-  /**
-   * Get the class of the button.
-   * @param type The type of the toast.
-   * @returns The class of the button.
-   */
-  getButtonClass(type: string): { [key: string]: boolean } {
-    return this.colorsService.getButtonClass(type, this.monocromatic);
+    this.progressStyleCache.set(toast.id, style);
+    return style;
   }
 
+  private syncProgressStyles(): void {
+    this.progressLayoutKey++;
+    this.progressStyleCache.clear();
+  }
 
+  getButtonClass(type: string): Record<string, boolean> {
+    return this.colorsService.getButtonClass(type, this.monocromatic);
+  }
 
-  /**
-   * Get the class of the secondary button.
-   * @param type The type of the toast.
-   * @returns The class of the secondary button.
-   */
-  getButtonSecondaryClass(type: string): { [key: string]: boolean } {
+  getButtonSecondaryClass(type: string): Record<string, boolean> {
     return this.colorsService.getButtonSecondaryClass(type, this.monocromatic);
   }
 
-
-
-  /**
-   * Get the class of the toast.
-   * @returns The class of the toast.
-   */
-  getPositionClass(): string {
-    const base = 'w-full fixed z-1000 flex flex-col gap-3 max-w-[22rem] pointer-events-none p-1';
-    switch (this.position) {
-      case 'top-left':
-        return `${base} top-18 left-3`;
-      case 'top-right':
-        return `${base} top-18 right-3`;
-      case 'bottom-left':
-        return `${base} bottom-4 left-4`;
-      case 'bottom-right':
-      default:
-        return `${base} bottom-4 right-4`;
-    }
+  isActionDisabled(toast: Toast): boolean {
+    return toast.isCancelLoading || toast.isActionLoading;
   }
-
 }