tailjng 0.0.62 → 0.1.0

package/lib/services/static/colors.service.d.ts

@@ -0,0 +1,17 @@
+import * as i0 from "@angular/core";
+export declare class JColorsService {
+    variants: {
+        [key: string]: string;
+    };
+    getVariantClass(type: string, hasShadow?: boolean, hasBorder?: boolean): string;
+    getAlertClass(type: string, monocromatic: boolean): "border-green-500 bg-green-50 dark:bg-[#15241f]" | "border-red-500 bg-red-50 dark:bg-[#21181c]" | "border-yellow-500 bg-yellow-50 dark:bg-[#1f1c1a]" | "border-blue-500 bg-blue-50 dark:bg-[#1a1a24]" | "border-purple-500 bg-purple-50 dark:bg-[#241732]" | "border-gray-500 bg-gray-50 dark:bg-[#15181e]" | "border-gray-500" | "bg-white dark:bg-foreground border-border dark:border-dark-border";
+    getIconClass(type: string, monocromatic: boolean): "text-green-500" | "text-red-500" | "text-yellow-500" | "text-blue-500" | "text-purple-500" | "text-gray-500" | "text-primary";
+    getButtonClass(type: string, monocromatic: boolean): {
+        [key: string]: boolean;
+    };
+    getButtonSecondaryClass(type: string, monocromatic: boolean): {
+        [key: string]: boolean;
+    };
+    static ɵfac: i0.ɵɵFactoryDeclaration<JColorsService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<JColorsService>;
+}

package/lib/services/transformer/transform.service.d.ts

@@ -1,11 +1,11 @@
 import { JCalendarService } from './calendar.service';
-import { CurrencyPipe } from '@angular/common';
 import { TableColumn } from '../../interfaces/crud/crud.interface';
 import * as i0 from "@angular/core";
 export declare class JTransformService {
-    private readonly currencyPipe;
     private readonly calendarService;
-    constructor(currencyPipe: CurrencyPipe, calendarService: JCalendarService);
+    /** Instanciado directamente — no requiere provider de CurrencyPipe en la app */
+    private readonly currencyPipe;
+    constructor(calendarService: JCalendarService);
     /**
      * Verify if the value is a valid JSON string.
      * @param value

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailjng",
-  "version": "0.0.62",
+  "version": "0.1.0",
   "peerDependencies": {
     "@angular/common": "^19.2.0",
     "@angular/core": "^19.2.0",

package/public-api.d.ts

@@ -4,6 +4,7 @@ export * from './lib/interfaces/crud/params.interface';
 export * from './lib/interfaces/crud/filter.interface';
 export * from './lib/interfaces/crud/form.interface';
 export * from './lib/interfaces/theme/theme-generator.interface';
+export * from './lib/interfaces/alert/dialog-alert.interface';
 export * from './lib/shared/form.shared';
 export * from './lib/shared/dialog.shared';
 export * from './lib/services/crud/converter-crud.service';
@@ -15,6 +16,7 @@ export * from './lib/services/transformer/calendar.service';
 export * from './lib/services/transformer/transform.service';
 export * from './lib/services/static/icons.service';
 export * from './lib/services/static/theme.service';
+export * from './lib/services/static/colors.service';
 export * from './lib/services/alert/dialog-alert.service';
 export * from './lib/services/alert/toast-alert.service';
 export * from './lib/services/report/excel.service';

package/registry/components.json

@@ -0,0 +1,164 @@
+{
+  "components": {
+    "mode-toggle": {
+      "path": "src/lib/components/mode-toggle",
+      "dependencies": []
+    },
+    "tooltip": {
+      "path": "src/lib/components/tooltip",
+      "dependencies": []
+    },
+    "coach-mark": {
+      "path": "src/lib/components/coach-mark",
+      "dependencies": []
+    },
+    "badge": {
+      "path": "src/lib/components/badge",
+      "dependencies": ["tooltip"]
+    },
+    "label": {
+      "path": "src/lib/components/label",
+      "dependencies": ["tooltip"]
+    },
+    "toggle-radio": {
+      "path": "src/lib/components/toggle-radio",
+      "dependencies": []
+    },
+    "button": {
+      "path": "src/lib/components/button",
+      "dependencies": ["tooltip"]
+    },
+    "checkbox-input": {
+      "path": "src/lib/components/checkbox/checkbox-input",
+      "dependencies": ["tooltip"]
+    },
+    "checkbox-switch": {
+      "path": "src/lib/components/checkbox/checkbox-switch",
+      "dependencies": []
+    },
+    "alert-dialog": {
+      "path": "src/lib/components/alert/alert-dialog",
+      "dependencies": ["button"]
+    },
+    "alert-toast": {
+      "path": "src/lib/components/alert/alert-toast",
+      "dependencies": ["button"]
+    },
+    "progress-bar": {
+      "path": "src/lib/components/progress-bar",
+      "dependencies": []
+    },
+    "viewer-image": {
+      "path": "src/lib/components/viewer/viewer-image",
+      "dependencies": ["button"]
+    },
+    "viewer-pdf": {
+      "path": "src/lib/components/viewer/viewer-pdf",
+      "dependencies": []
+    },
+    "dialog": {
+      "path": "src/lib/components/dialog",
+      "dependencies": []
+    },
+    "input-file": {
+      "path": "src/lib/components/input/input-file",
+      "dependencies": []
+    },
+    "input-textarea": {
+      "path": "src/lib/components/input/input-textarea",
+      "dependencies": []
+    },
+    "input-range": {
+      "path": "src/lib/components/input/input-range",
+      "dependencies": []
+    },
+    "input": {
+      "path": "src/lib/components/input/input",
+      "dependencies": []
+    },
+    "select-multi-table": {
+      "path": "src/lib/components/select/select-multi-table",
+      "dependencies": ["button"]
+    },
+    "select-multi-dropdown": {
+      "path": "src/lib/components/select/select-multi-dropdown",
+      "dependencies": []
+    },
+    "select-dropdown": {
+      "path": "src/lib/components/select/select-dropdown",
+      "dependencies": []
+    },
+    "sidebar-static": {
+      "path": "src/lib/components/sidebar/sidebar-static",
+      "dependencies": ["checkbox-switch"]
+    },
+    "form-container": {
+      "path": "src/lib/components/form/form-container",
+      "dependencies": []
+    },
+    "form-validation": {
+      "path": "src/lib/components/form/form-validation",
+      "dependencies": []
+    },
+    "form-sidebar": {
+      "path": "src/lib/components/form/form-sidebar",
+      "dependencies": ["tooltip", "button", "checkbox-switch", "coach-mark"]
+    },
+    "paginator-complete": {
+      "path": "src/lib/components/paginator/paginator-complete",
+      "dependencies": ["button"]
+    },
+    "filter-complete": {
+      "path": "src/lib/components/filter/filter-complete",
+      "dependencies": ["select-dropdown", "select-multi-table", "button", "dialog", "checkbox-switch"]
+    },
+    "card-crud-complete": {
+      "path": "src/lib/components/card/card-crud-complete",
+      "dependencies": ["paginator-complete", "filter-complete"]
+    },
+    "card-complete": {
+      "path": "src/lib/components/card/card-complete",
+      "dependencies": ["paginator-complete", "filter-complete"]
+    },
+    "menu-options-table": {
+      "path": "src/lib/components/menu/menu-options-table",
+      "dependencies": ["button"]
+    },
+    "options-coach-menu": {
+      "path": "src/lib/components/menu/options-coach-menu",
+      "dependencies": ["button", "coach-mark"]
+    },
+    "table-crud-complete": {
+      "path": "src/lib/components/table/table-crud-complete",
+      "dependencies": [
+        "button",
+        "paginator-complete",
+        "filter-complete",
+        "checkbox-input",
+        "options-coach-menu",
+        "dialog",
+        "viewer-image",
+        "select-dropdown",
+        "input"
+      ]
+    },
+    "table-complete": {
+      "path": "src/lib/components/table/table-complete",
+      "dependencies": [
+        "button",
+        "paginator-complete",
+        "filter-complete",
+        "checkbox-input",
+        "options-coach-menu",
+        "dialog",
+        "viewer-image",
+        "select-dropdown",
+        "input"
+      ]
+    },
+    "theme-generator": {
+      "path": "src/lib/components/theme-generator",
+      "dependencies": ["input", "input-range", "button", "label", "form-container"]
+    }
+  }
+}

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

@@ -0,0 +1,17 @@
+.j-alert-dialog-card {
+  min-height: 5.5rem;
+}
+
+.j-alert-dialog-watermark--lg {
+  filter: blur(0.15px);
+}
+
+.j-alert-dialog-watermark--sm {
+  filter: blur(0.1px);
+}
+
+@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,101 @@
 @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/50">
-    
-    <div @modalTransition
-      class="relative w-100 border border-border p-4 rounded-lg shadow-5xl overflow-hidden"
-      [ngClass]="getDialogClass(dialog.config.type)"
+  <div
+    class="j-alert-dialog fixed inset-0 z-999999 flex items-center justify-center bg-black/45 backdrop-blur-[2px] p-4"
+    role="dialog"
+    aria-modal="true"
+  >
+    <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)"
     >
-  
-      <!-- Icon big in the bottom left corner -->
-      <div 
-        [ngClass]="{ 'animate-spin': dialog.config.type === 'loading'}"
-        class="absolute -bottom-5 opacity-25 dark:opacity-25 -left-5 text-black dark:text-white pointer-events-none"
+      <div
+        class="absolute left-0 top-0 bottom-0 w-1 z-[1]"
+        [ngClass]="getAccentBarClass(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)" [size]="130" [ngClass]="getIconClass(dialog.config.type)"></lucide-icon>
+        <lucide-icon
+          [name]="getIcon(dialog.config.type)"
+          [size]="104"
+          [ngClass]="getWatermarkIconClass(dialog.config.type)"
+        ></lucide-icon>
       </div>
 
-      <!-- Icon small in the top right corner -->
-      <div 
-        [ngClass]="{ 'animate-spin': dialog.config.type === 'loading'}"
-        class="absolute top-5 opacity-25 dark:opacity-25 right-5 text-black dark:text-white pointer-events-none"
+      <!-- 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)" [size]="30" [ngClass]="getIconClass(dialog.config.type)"></lucide-icon>
+        <lucide-icon
+          [name]="getIcon(dialog.config.type)"
+          [size]="32"
+          [ngClass]="getWatermarkIconClass(dialog.config.type, true)"
+        ></lucide-icon>
+      </div>
+
+      <!-- Texto -->
+      <div
+        class="relative z-10 pl-5 pr-4 pt-4"
+        [class.pb-2]="hasActions(dialog)"
+        [class.pb-4]="!hasActions(dialog)"
+      >
+        <h3 class="m-0 text-sm font-semibold leading-tight text-foreground dark:text-white">
+          {{ 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"
+            [innerHTML]="dialog.config.description"
+          ></p>
+        }
       </div>
-  
-      <h3 class="text-lg font-semibold text-black dark:text-white pb-2">{{ dialog.config.title }}</h3>
-      <p class="text-black/80 dark:text-dark-muted-foreground" [innerHTML]="dialog.config.description"></p>
-  
-      <div class="flex justify-end gap-2 mt-4">
 
-        <!-- Button Retry (Only if type is "error") -->
-        @if (dialog.config.type === 'error' && dialog.config.onRetry) {
-            <JButton 
-                (clicked)="handleAction('retry')" 
-                [disabled]="dialog.isRetryLoading || dialog.isCancelLoading || dialog.isConfirmLoading" 
-                [isLoading]="dialog.isRetryLoading"  
-                [ngClasses]="getButtonSecondaryClass(dialog.config.type)"
+      <!-- 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">
+          @if (showRetryButton(dialog.config)) {
+            <JButton
+              size="sm"
+              (clicked)="handleAction('retry')"
+              [disabled]="dialog.isRetryLoading || dialog.isCancelLoading || dialog.isConfirmLoading"
+              [isLoading]="dialog.isRetryLoading"
+              [ngClasses]="getButtonSecondaryClass(dialog.config.type)"
             >
-                {{ dialog.config.titleBtnRetry || 'Reintentar' }}
+              {{ getRetryLabel(dialog.config) }}
             </JButton>
-        }
+          }
 
-        <!-- Button Cancel (Not shown if type is "success") -->
-        @if (dialog.config.type !== 'success' && dialog.config.onCancel) {
-            <JButton 
-                (clicked)="handleAction('cancel')" 
-                [disabled]="dialog.isRetryLoading || dialog.isCancelLoading || dialog.isConfirmLoading" 
-                [isLoading]="dialog.isCancelLoading" 
-                [ngClasses]="getButtonSecondaryClass(dialog.config.type)"
+          @if (showCancelButton(dialog.config)) {
+            <JButton
+              size="sm"
+              (clicked)="handleAction('cancel')"
+              [disabled]="dialog.isRetryLoading || dialog.isCancelLoading || dialog.isConfirmLoading"
+              [isLoading]="dialog.isCancelLoading"
+              [ngClasses]="getButtonSecondaryClass(dialog.config.type)"
             >
-                {{ dialog.config.titleBtnCancel || 'Cancelar' }}
+              {{ getCancelLabel(dialog.config) }}
             </JButton>
-        }
+          }
 
-        <!-- Button Confirm (Not shown if type is "loading") -->
-        @if (dialog.config.type !== 'loading' && dialog?.config?.onConfirm) {
-            <JButton 
-                (clicked)="handleAction('confirm')" 
-                [disabled]="dialog.isRetryLoading || dialog.isCancelLoading || dialog.isConfirmLoading" 
-                [isLoading]="dialog.isConfirmLoading" 
-                [ngClasses]="getButtonClass(dialog.config.type)"
+          @if (showConfirmButton(dialog.config)) {
+            <JButton
+              size="sm"
+              (clicked)="handleAction('confirm')"
+              [disabled]="dialog.isRetryLoading || dialog.isCancelLoading || dialog.isConfirmLoading"
+              [isLoading]="dialog.isConfirmLoading"
+              [ngClasses]="getButtonClass(dialog.config.type)"
             >
-                {{ dialog.config.titleBtnConfirm || 'Confirmar' }}
+              {{ getConfirmLabel(dialog.config) }}
             </JButton>
-        }
-      </div>
+          }
+        </div>
+      }
     </div>
-    
   </div>
-  }
+}

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

@@ -1,10 +1,9 @@
-import { Component, inject, computed, Input } from "@angular/core";
-import { NgClass } from "@angular/common";
-import { trigger, transition, style, animate } from "@angular/animations";
-import { JIconsService, JAlertDialogService } from "tailjng";
-import { LucideAngularModule } from "lucide-angular";
-import { JButtonComponent } from "../../button/button.component";
-import { JColorsService } from "../../color/colors.service";
+import { Component, inject, computed, 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 { JButtonComponent } from '../../button/button.component';
 
 @Component({
   selector: 'JAlertDialog',
@@ -12,13 +11,13 @@ import { JColorsService } from "../../color/colors.service";
   templateUrl: './dialog-alert.component.html',
   styleUrl: './dialog-alert.component.css',
   animations: [
-    trigger("modalTransition", [
-      transition(":enter", [
-        style({ transform: "translateY(1rem)", opacity: 0 }),
-        animate("300ms ease-out", style({ transform: "translateY(0)", opacity: 1 })),
+    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)' })),
       ]),
-      transition(":leave", [
-        animate("150ms ease-in", style({ transform: "translateY(1rem)", opacity: 0 })),
+      transition(':leave', [
+        animate('180ms cubic-bezier(0.4, 0, 1, 1)', style({ opacity: 0, transform: 'scale(0.98) translateY(0.25rem)' })),
       ]),
     ]),
   ],
@@ -28,76 +27,109 @@ export class JAlertDialogComponent {
   @Input() monocromatic: boolean = false;
   private readonly alertDialogService = inject(JAlertDialogService);
 
-  // Single computed property for dialogs
   dialogs = computed(() => this.alertDialogService.dialogs());
 
   constructor(
     private readonly colorsService: JColorsService,
-    private readonly iconsService: JIconsService
+    private readonly iconsService: JIconsService,
   ) { }
 
-
-  /**
-   * Get the icon for the specified type.
-   * @param type The type of the icon.
-   * @returns The icon for the specified type.
-   */
   getIcon(type: string) {
     return this.iconsService.icons[type as keyof typeof this.iconsService.icons] || this.iconsService.icons.info;
   }
 
-
+  handleAction(action: 'confirm' | 'cancel' | 'retry') {
+    this.alertDialogService.executeAction(action);
+  }
 
   /**
-   * Handle the action based on the button clicked.
-   * @param action The action to execute.
+   * Fondo suave del dialog (mismo criterio que JAlertToast).
    */
-  handleAction(action: "confirm" | "cancel" | "retry") {
-    this.alertDialogService.executeAction(action);
+  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',
+    };
+
+    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',
+    };
 
-  /**
-   * Get the class for the toast
-   * @param type The type of the toast.
-   * @returns The class for the toast.
-   */
-  getDialogClass(type: string) {
-    return this.colorsService.getAlertClass(type, 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]`;
+  }
 
+  hasActions(dialog: { config: AlertDialogProps }): boolean {
+    const { config } = dialog;
+    return (
+      this.showConfirmButton(config) ||
+      this.showCancelButton(config) ||
+      this.showRetryButton(config)
+    );
+  }
 
-  /**
-   * Get the class for the icon
-   * @param type The type of the icon.
-   * @returns The class for the icon.
-   */
-  getIconClass(type: string) {
-    return this.colorsService.getIconClass(type, this.monocromatic);
+  showConfirmButton(config: AlertDialogProps): boolean {
+    return config.type !== 'loading';
   }
 
+  showCancelButton(config: AlertDialogProps): boolean {
+    if (config.type === 'success') return false;
+    if (config.type === 'question' || config.type === 'loading') return true;
+    return 'onCancel' in config;
+  }
 
+  showRetryButton(config: AlertDialogProps): boolean {
+    return config.type === 'error' && 'onRetry' in config;
+  }
 
-  /**
-   * Get the class for the button
-   * @param type The type of the button.
-   * @returns The class for the button.
-   */
-  getButtonClass(type: string): { [key: string]: boolean } {
-    return this.colorsService.getButtonClass(type, this.monocromatic);
+  getConfirmLabel(config: AlertDialogProps): string {
+    return 'titleBtnConfirm' in config ? (config.titleBtnConfirm ?? 'Confirmar') : 'Confirmar';
   }
 
+  getCancelLabel(config: AlertDialogProps): string {
+    return 'titleBtnCancel' in config ? (config.titleBtnCancel ?? 'Cancelar') : 'Cancelar';
+  }
 
+  getRetryLabel(config: AlertDialogProps): string {
+    return config.type === 'error' && 'titleBtnRetry' in config
+      ? (config.titleBtnRetry ?? 'Reintentar')
+      : 'Reintentar';
+  }
+
+  getIconClass(type: string) {
+    return this.colorsService.getIconClass(type, this.monocromatic);
+  }
+
+  getButtonClass(type: string): { [key: string]: boolean } {
+    return this.colorsService.getButtonClass(type, this.monocromatic);
+  }
 
-  /**
-   * Get the class for the secondary button
-   * @param type The type of the button.
-   * @returns The class for the secondary button.
-   */
   getButtonSecondaryClass(type: string): { [key: string]: boolean } {
     return this.colorsService.getButtonSecondaryClass(type, this.monocromatic);
   }
-  
 }

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

@@ -1,5 +1,39 @@
 @media (max-width: 450px) {
-    .j-dialog-toas {
-        width: 90% !important;
-    }
-}
+  .j-toast {
+    width: calc(100vw - 2rem) !important;
+  }
+}
+
+.j-toast {
+  min-height: 4.5rem;
+}
+
+.j-toast-watermark--lg {
+  filter: blur(0.15px);
+}
+
+.j-toast-watermark--sm {
+  filter: blur(0.1px);
+}
+
+.j-toast-timeline {
+  border-bottom-left-radius: 0.75rem;
+  border-bottom-right-radius: 0.75rem;
+  overflow: hidden;
+}
+
+.j-toast-progress {
+  animation-name: j-toast-progress-shrink;
+  animation-timing-function: linear;
+  animation-fill-mode: forwards;
+}
+
+@keyframes j-toast-progress-shrink {
+  from {
+    transform: scaleX(1);
+  }
+
+  to {
+    transform: scaleX(0);
+  }
+}