tailjng 0.1.6 → 0.1.7

package/src/lib/components/alert/alert-dialog/dialog-alert.component.css

@@ -1,15 +1,257 @@
+:host {
+  display: contents;
+}
+
+.j-alert-dialog {
+  position: fixed;
+  inset: 0;
+  z-index: 999999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  background-color: rgb(0 0 0 / 0.45);
+  backdrop-filter: blur(2px);
+}
+
 .j-alert-dialog-card {
+  position: relative;
+  width: 100%;
+  max-width: 28rem;
   min-height: 5.5rem;
+  overflow: hidden;
+  border: 1px solid color-mix(in srgb, var(--color-border) 65%, transparent);
+  border-radius: 0.75rem;
+  background-color: color-mix(in srgb, var(--color-background) 92%, transparent);
+  box-shadow: 0 20px 48px rgb(0 0 0 / 0.14);
+  backdrop-filter: blur(16px);
 }
 
-.j-alert-dialog-watermark--lg {
+:host-context(.dark) .j-alert-dialog-card,
+:host-context(html.dark) .j-alert-dialog-card {
+  border-color: color-mix(in srgb, var(--color-dark-border) 70%, transparent);
+  background-color: color-mix(in srgb, var(--color-dark-background) 92%, transparent);
+  box-shadow: 0 24px 56px rgb(0 0 0 / 0.45);
+}
+
+.j-alert-dialog-card--mono {
+  background-color: color-mix(in srgb, var(--color-background) 95%, transparent);
+}
+
+:host-context(.dark) .j-alert-dialog-card--mono,
+:host-context(html.dark) .j-alert-dialog-card--mono {
+  background-color: color-mix(in srgb, var(--color-dark-background) 95%, transparent);
+}
+
+.j-alert-dialog-card--success {
+  background-color: color-mix(in srgb, #22c55e 9%, var(--color-background));
+}
+
+.j-alert-dialog-card--error {
+  background-color: color-mix(in srgb, #ef4444 9%, var(--color-background));
+}
+
+.j-alert-dialog-card--warning {
+  background-color: color-mix(in srgb, #eab308 10%, var(--color-background));
+}
+
+.j-alert-dialog-card--info {
+  background-color: color-mix(in srgb, #3b82f6 9%, var(--color-background));
+}
+
+.j-alert-dialog-card--question {
+  background-color: color-mix(in srgb, #a855f7 9%, var(--color-background));
+}
+
+.j-alert-dialog-card--loading {
+  background-color: color-mix(in srgb, var(--color-muted) 22%, var(--color-background));
+}
+
+:host-context(.dark) .j-alert-dialog-card--success,
+:host-context(html.dark) .j-alert-dialog-card--success {
+  background-color: color-mix(in srgb, #22c55e 14%, var(--color-dark-background));
+}
+
+:host-context(.dark) .j-alert-dialog-card--error,
+:host-context(html.dark) .j-alert-dialog-card--error {
+  background-color: color-mix(in srgb, #ef4444 14%, var(--color-dark-background));
+}
+
+:host-context(.dark) .j-alert-dialog-card--warning,
+:host-context(html.dark) .j-alert-dialog-card--warning {
+  background-color: color-mix(in srgb, #eab308 14%, var(--color-dark-background));
+}
+
+:host-context(.dark) .j-alert-dialog-card--info,
+:host-context(html.dark) .j-alert-dialog-card--info {
+  background-color: color-mix(in srgb, #3b82f6 14%, var(--color-dark-background));
+}
+
+:host-context(.dark) .j-alert-dialog-card--question,
+:host-context(html.dark) .j-alert-dialog-card--question {
+  background-color: color-mix(in srgb, #a855f7 14%, var(--color-dark-background));
+}
+
+:host-context(.dark) .j-alert-dialog-card--loading,
+:host-context(html.dark) .j-alert-dialog-card--loading {
+  background-color: color-mix(in srgb, var(--color-dark-muted) 28%, var(--color-dark-background));
+}
+
+.j-alert-dialog-accent {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
+  width: 0.25rem;
+}
+
+.j-alert-dialog-accent--mono {
+  background-color: var(--color-primary);
+}
+
+.j-alert-dialog-accent--success {
+  background-color: #22c55e;
+}
+
+.j-alert-dialog-accent--error {
+  background-color: #ef4444;
+}
+
+.j-alert-dialog-accent--warning {
+  background-color: #eab308;
+}
+
+.j-alert-dialog-accent--info {
+  background-color: #3b82f6;
+}
+
+.j-alert-dialog-accent--question {
+  background-color: #a855f7;
+}
+
+.j-alert-dialog-accent--loading {
+  background-color: var(--color-muted-foreground);
+}
+
+.j-alert-dialog-watermark {
+  position: absolute;
+  z-index: 0;
+  pointer-events: none;
+  user-select: none;
+  opacity: 0.22;
   filter: blur(0.15px);
 }
 
-.j-alert-dialog-watermark--sm {
+.j-alert-dialog-watermark--subtle {
+  opacity: 0.12;
   filter: blur(0.1px);
 }
 
+.j-alert-dialog-watermark--lg {
+  bottom: -2rem;
+  left: -1.25rem;
+}
+
+.j-alert-dialog-watermark--sm {
+  top: 0.5rem;
+  right: 0.75rem;
+}
+
+.j-alert-dialog-watermark--mono {
+  color: var(--color-primary);
+}
+
+.j-alert-dialog-watermark--success {
+  color: #22c55e;
+}
+
+.j-alert-dialog-watermark--error {
+  color: #ef4444;
+}
+
+.j-alert-dialog-watermark--warning {
+  color: #eab308;
+}
+
+.j-alert-dialog-watermark--info {
+  color: #3b82f6;
+}
+
+.j-alert-dialog-watermark--question {
+  color: #a855f7;
+}
+
+.j-alert-dialog-watermark--loading {
+  color: var(--color-muted-foreground);
+}
+
+.j-alert-dialog-watermark--spin {
+  animation: j-alert-dialog-spin 1s linear infinite;
+}
+
+@keyframes j-alert-dialog-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.j-alert-dialog-body {
+  position: relative;
+  z-index: 10;
+  padding: 1rem 1rem 1rem 1.25rem;
+}
+
+.j-alert-dialog-body--with-actions {
+  padding-bottom: 0.5rem;
+}
+
+.j-alert-dialog-title {
+  margin: 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1.3;
+  letter-spacing: -0.01em;
+  color: var(--color-foreground);
+}
+
+:host-context(.dark) .j-alert-dialog-title,
+:host-context(html.dark) .j-alert-dialog-title {
+  color: var(--color-dark-foreground);
+}
+
+.j-alert-dialog-description {
+  margin: 0.375rem 0 0;
+  font-size: 0.75rem;
+  line-height: 1.55;
+  color: var(--color-muted-foreground);
+}
+
+.j-alert-dialog-description :is(b, strong) {
+  font-weight: 600;
+  color: var(--color-foreground);
+}
+
+:host-context(.dark) .j-alert-dialog-description,
+:host-context(html.dark) .j-alert-dialog-description {
+  color: var(--color-dark-muted-foreground);
+}
+
+:host-context(.dark) .j-alert-dialog-description :is(b, strong),
+:host-context(html.dark) .j-alert-dialog-description :is(b, strong) {
+  color: var(--color-dark-foreground);
+}
+
+.j-alert-dialog-actions {
+  position: relative;
+  z-index: 10;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 0.375rem;
+  padding: 0 1rem 1rem 1.25rem;
+}
+
 @media (max-width: 450px) {
   .j-alert-dialog-card {
     max-width: 100%;

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

@@ -1,69 +1,56 @@
 @for (dialog of dialogs(); track dialog.config.title) {
   <div
-    class="j-alert-dialog fixed inset-0 z-999999 flex items-center justify-center bg-black/45 backdrop-blur-[2px] p-4"
+    class="j-alert-dialog"
     role="dialog"
     aria-modal="true"
+    [attr.aria-label]="dialog.config.title"
   >
     <div
       @modalTransition
-      class="j-alert-dialog-card relative w-full max-w-md overflow-hidden rounded-xl border border-border/40 dark:border-dark-border/40 backdrop-blur-xl shadow-xl shadow-black/10 dark:shadow-black/40"
-      [ngClass]="getDialogSurfaceClass(dialog.config.type)"
+      class="j-alert-dialog-card"
+      [ngClass]="cardClasses(dialog.config.type)"
     >
-      <div
-        class="absolute left-0 top-0 bottom-0 w-1 z-[1]"
-        [ngClass]="getAccentBarClass(dialog.config.type)"
-      ></div>
+      <div [ngClass]="accentClasses(dialog.config.type)"></div>
 
-      <!-- Icono decorativo grande -->
-      <div
-        class="j-alert-dialog-watermark j-alert-dialog-watermark--lg absolute -bottom-8 -left-5 z-0 pointer-events-none select-none"
-        [ngClass]="{ 'animate-spin': dialog.config.type === 'loading' }"
-      >
-        <lucide-icon
-          [name]="getIcon(dialog.config.type)"
+      <div [ngClass]="watermarkClasses(dialog.config.type)">
+        <JIcon
+          [icon]="typeIcon(dialog.config.type)"
           [size]="104"
-          [ngClass]="getWatermarkIconClass(dialog.config.type)"
-        ></lucide-icon>
+          [inheritParentColor]="true"
+          [ariaHidden]="true"
+        />
       </div>
 
-      <!-- Icono decorativo pequeño -->
-      <div
-        class="j-alert-dialog-watermark j-alert-dialog-watermark--sm absolute top-2 right-3 z-0 pointer-events-none select-none"
-        [ngClass]="{ 'animate-spin': dialog.config.type === 'loading' }"
-      >
-        <lucide-icon
-          [name]="getIcon(dialog.config.type)"
+      <div [ngClass]="watermarkClasses(dialog.config.type, true)">
+        <JIcon
+          [icon]="typeIcon(dialog.config.type)"
           [size]="32"
-          [ngClass]="getWatermarkIconClass(dialog.config.type, true)"
-        ></lucide-icon>
+          [inheritParentColor]="true"
+          [ariaHidden]="true"
+        />
       </div>
 
-      <!-- Texto -->
       <div
-        class="relative z-10 pl-5 pr-4 pt-4"
-        [class.pb-2]="hasActions(dialog)"
-        [class.pb-4]="!hasActions(dialog)"
+        class="j-alert-dialog-body"
+        [class.j-alert-dialog-body--with-actions]="hasActions(dialog)"
       >
-        <h3 class="m-0 text-sm font-semibold leading-tight text-foreground dark:text-white">
-          {{ dialog.config.title }}
-        </h3>
+        <h3 class="j-alert-dialog-title">{{ dialog.config.title }}</h3>
 
         @if (dialog.config.description) {
           <p
-            class="m-0 mt-1.5 text-xs leading-relaxed text-muted-foreground dark:text-dark-muted-foreground [&_b]:font-semibold [&_b]:text-foreground dark:[&_b]:text-white"
+            class="j-alert-dialog-description"
             [innerHTML]="dialog.config.description"
           ></p>
         }
       </div>
 
-      <!-- Acciones alineadas a la card -->
       @if (hasActions(dialog)) {
-        <div class="relative z-10 flex flex-wrap justify-end gap-1.5 pl-5 pr-4 pb-4">
+        <div class="j-alert-dialog-actions">
           @if (showRetryButton(dialog.config)) {
             <JButton
               size="sm"
               (clicked)="handleAction('retry')"
-              [disabled]="dialog.isRetryLoading || dialog.isCancelLoading || dialog.isConfirmLoading"
+              [disabled]="isActionDisabled(dialog)"
               [isLoading]="dialog.isRetryLoading"
               [ngClasses]="getButtonSecondaryClass(dialog.config.type)"
             >
@@ -75,7 +62,7 @@
             <JButton
               size="sm"
               (clicked)="handleAction('cancel')"
-              [disabled]="dialog.isRetryLoading || dialog.isCancelLoading || dialog.isConfirmLoading"
+              [disabled]="isActionDisabled(dialog)"
               [isLoading]="dialog.isCancelLoading"
               [ngClasses]="getButtonSecondaryClass(dialog.config.type)"
             >
@@ -87,7 +74,7 @@
             <JButton
               size="sm"
               (clicked)="handleAction('confirm')"
-              [disabled]="dialog.isRetryLoading || dialog.isCancelLoading || dialog.isConfirmLoading"
+              [disabled]="isActionDisabled(dialog)"
               [isLoading]="dialog.isConfirmLoading"
               [ngClasses]="getButtonClass(dialog.config.type)"
             >

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

@@ -1,90 +1,100 @@
-import { Component, inject, computed, Input } from '@angular/core';
+import { Component, computed, inject, Input } from '@angular/core';
 import { NgClass } from '@angular/common';
 import { trigger, transition, style, animate } from '@angular/animations';
-import { JIconsService, JAlertDialogService, AlertDialogProps, JColorsService } from 'tailjng';
-import { LucideAngularModule } from 'lucide-angular';
+import { JAlertDialogService, AlertDialogProps, JColorsService, Dialog } from 'tailjng';
 import { JButtonComponent } from '../../button/button.component';
+import { JIconComponent } from '../../icon/icon.component';
+import { AlertDialogType, ALERT_DIALOG_TYPE_ICONS } from './dialog-alert.types';
 
+export type { AlertDialogType } from './dialog-alert.types';
+
+/**
+ * Global alert/confirm dialog host — mount once (e.g. app root) and call `JAlertDialogService.AlertDialog()`.
+ *
+ * Install: `npx tailjng add alert-dialog`
+ */
 @Component({
   selector: 'JAlertDialog',
-  imports: [LucideAngularModule, NgClass, JButtonComponent],
+  imports: [NgClass, JButtonComponent, JIconComponent],
   templateUrl: './dialog-alert.component.html',
   styleUrl: './dialog-alert.component.css',
   animations: [
     trigger('modalTransition', [
       transition(':enter', [
         style({ opacity: 0, transform: 'scale(0.96) translateY(0.5rem)' }),
-        animate('320ms cubic-bezier(0.16, 1, 0.3, 1)', style({ opacity: 1, transform: 'scale(1) translateY(0)' })),
+        animate(
+          '320ms cubic-bezier(0.16, 1, 0.3, 1)',
+          style({ opacity: 1, transform: 'scale(1) translateY(0)' }),
+        ),
       ]),
       transition(':leave', [
-        animate('180ms cubic-bezier(0.4, 0, 1, 1)', style({ opacity: 0, transform: 'scale(0.98) translateY(0.25rem)' })),
+        animate(
+          '180ms cubic-bezier(0.4, 0, 1, 1)',
+          style({ opacity: 0, transform: 'scale(0.98) translateY(0.25rem)' }),
+        ),
       ]),
     ]),
   ],
 })
 export class JAlertDialogComponent {
-
-  @Input() monocromatic: boolean = false;
   private readonly alertDialogService = inject(JAlertDialogService);
+  private readonly colorsService = inject(JColorsService);
 
-  dialogs = computed(() => this.alertDialogService.dialogs());
+  @Input() monocromatic = false;
 
-  constructor(
-    private readonly colorsService: JColorsService,
-    private readonly iconsService: JIconsService,
-  ) { }
+  readonly dialogs = computed(() => this.alertDialogService.dialogs());
 
-  getIcon(type: string) {
-    return this.iconsService.icons[type as keyof typeof this.iconsService.icons] || this.iconsService.icons.info;
+  handleAction(action: 'confirm' | 'cancel' | 'retry'): void {
+    this.alertDialogService.executeAction(action);
   }
 
-  handleAction(action: 'confirm' | 'cancel' | 'retry') {
-    this.alertDialogService.executeAction(action);
+  /**
+   * Lucide icon for the dialog semantic type.
+   */
+  typeIcon(type: string) {
+    return ALERT_DIALOG_TYPE_ICONS[type as AlertDialogType] ?? ALERT_DIALOG_TYPE_ICONS.info;
   }
 
   /**
-   * Fondo suave del dialog (mismo criterio que JAlertToast).
+   * Class map for the dialog card shell.
    */
-  getDialogSurfaceClass(type: string): string {
-    if (this.monocromatic) {
-      return 'bg-white/95 dark:bg-foreground/95';
-    }
-
-    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',
+  cardClasses(type: string): Record<string, boolean> {
+    const alertType = type as AlertDialogType;
+    return {
+      [`j-alert-dialog-card--${alertType}`]: !this.monocromatic,
+      'j-alert-dialog-card--mono': this.monocromatic,
     };
-
-    return surfaces[type] ?? 'bg-white/95 dark:bg-foreground/95';
   }
 
-  getAccentBarClass(type: string): string {
-    if (this.monocromatic) return 'bg-primary';
-
-    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',
+  /**
+   * Class map for the left accent bar.
+   */
+  accentClasses(type: string): Record<string, boolean> {
+    const alertType = type as AlertDialogType;
+    return {
+      'j-alert-dialog-accent': true,
+      [`j-alert-dialog-accent--${alertType}`]: !this.monocromatic,
+      'j-alert-dialog-accent--mono': this.monocromatic,
     };
-
-    return accents[type] ?? 'bg-primary';
   }
 
-  getWatermarkIconClass(type: string, subtle = false): string {
-    if (subtle) {
-      return `${this.getIconClass(type)} opacity-[0.12] dark:opacity-[0.2]`;
-    }
-    return `${this.getIconClass(type)} opacity-[0.2] dark:opacity-[0.3]`;
+  /**
+   * Class map for decorative watermark icons.
+   */
+  watermarkClasses(type: string, subtle = false): Record<string, boolean> {
+    const alertType = type as AlertDialogType;
+    return {
+      'j-alert-dialog-watermark': true,
+      'j-alert-dialog-watermark--lg': !subtle,
+      'j-alert-dialog-watermark--sm': subtle,
+      'j-alert-dialog-watermark--subtle': subtle,
+      [`j-alert-dialog-watermark--${alertType}`]: !this.monocromatic,
+      'j-alert-dialog-watermark--mono': this.monocromatic,
+      'j-alert-dialog-watermark--spin': type === 'loading',
+    };
   }
 
-  hasActions(dialog: { config: AlertDialogProps }): boolean {
+  hasActions(dialog: Dialog): boolean {
     const { config } = dialog;
     return (
       this.showConfirmButton(config) ||
@@ -121,15 +131,15 @@ export class JAlertDialogComponent {
       : 'Reintentar';
   }
 
-  getIconClass(type: string) {
-    return this.colorsService.getIconClass(type, this.monocromatic);
-  }
-
-  getButtonClass(type: string): { [key: string]: boolean } {
+  getButtonClass(type: string): Record<string, boolean> {
     return this.colorsService.getButtonClass(type, this.monocromatic);
   }
 
-  getButtonSecondaryClass(type: string): { [key: string]: boolean } {
+  getButtonSecondaryClass(type: string): Record<string, boolean> {
     return this.colorsService.getButtonSecondaryClass(type, this.monocromatic);
   }
+
+  isActionDisabled(dialog: Dialog): boolean {
+    return dialog.isRetryLoading || dialog.isCancelLoading || dialog.isConfirmLoading;
+  }
 }

package/src/lib/components/alert/alert-dialog/dialog-alert.types.ts

@@ -0,0 +1,19 @@
+import { LucideIconData } from 'lucide-angular';
+import { Icons } from '../../.config/icons/icons.lucide';
+
+export type AlertDialogType =
+  | 'success'
+  | 'error'
+  | 'warning'
+  | 'info'
+  | 'question'
+  | 'loading';
+
+export const ALERT_DIALOG_TYPE_ICONS: Record<AlertDialogType, LucideIconData> = {
+  success: Icons.CircleCheck,
+  error: Icons.CircleX,
+  warning: Icons.TriangleAlert,
+  info: Icons.Info,
+  question: Icons.CircleHelp,
+  loading: Icons.Loader2,
+};