tailjng 0.1.6 → 0.1.7

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

@@ -0,0 +1,25 @@
+import { LucideIconData } from 'lucide-angular';
+import { Icons } from '../../.config/icons/icons.lucide';
+
+export type AlertToastType =
+  | 'success'
+  | 'error'
+  | 'warning'
+  | 'info'
+  | 'question'
+  | 'loading';
+
+export type AlertToastPosition =
+  | 'top-right'
+  | 'top-left'
+  | 'bottom-right'
+  | 'bottom-left';
+
+export const ALERT_TOAST_TYPE_ICONS: Record<AlertToastType, LucideIconData> = {
+  success: Icons.CircleCheck,
+  error: Icons.CircleX,
+  warning: Icons.TriangleAlert,
+  info: Icons.Info,
+  question: Icons.CircleHelp,
+  loading: Icons.Loader2,
+};

package/src/lib/components/badge/badge.component.html

@@ -1,38 +1,51 @@
 <div
   [style]="{
-    'opacity': disabled ? 0.2 : 1,
-    'cursor': hasClickHandler ? 'pointer' : 'default'
+    opacity: disabled ? 0.2 : 1,
+    cursor: hasClickHandler && !disabled && !isLoading ? 'pointer' : 'default'
   }"
   [jTooltip]="tooltip"
   [jTooltipPosition]="tooltipPosition"
+  [attr.role]="hasClickHandler ? 'button' : null"
+  [attr.tabindex]="hasClickHandler && !disabled && !isLoading ? 0 : null"
+  [attr.aria-label]="resolvedAriaLabel"
+  [attr.aria-busy]="isLoading ? true : null"
+  [attr.aria-disabled]="disabled ? true : null"
   (click)="handleClick($event)"
-  >
+>
   <div
-    class="flex justify-center items-center border-2 rounded-full"
+    class="flex justify-center items-center border-2 rounded-full select-none"
     [style]="{
-      'width': size + 'px',
-      'height': size + 'px',
-      'font-size': textSize + 'px',
-      'padding': '0',
-      'position': 'relative'
+      width: size + 'px',
+      height: size + 'px',
+      fontSize: resolvedTextSize + 'px',
+      padding: '0',
+      position: 'relative'
     }"
     [ngClass]="computedClasses"
     [class]="classes"
   >
-    <span class="font-bold"
-          [style]="{
-            'position': 'absolute',
-            'left': '50%',
-            'top': '50%',
-            'transform': 'translate(-50%, -50%)',
-            'transform-origin': 'center',
-            'margin-left': textOffsetX + 'px',
-            'margin-top': textOffsetY + 'px'
-          }">
+    <span
+      class="font-bold inline-flex items-center justify-center"
+      [style]="{
+        position: 'absolute',
+        left: '50%',
+        top: '50%',
+        transform: 'translate(-50%, -50%)',
+        transformOrigin: 'center',
+        marginLeft: textOffsetX + 'px',
+        marginTop: textOffsetY + 'px'
+      }"
+    >
       @if (isLoading) {
-        <lucide-icon [name]="iconsService.icons.loading" [size]="textSize + 'px'" class="animate-spin" />
+        <JIcon
+          [icon]="Icons.Loader2"
+          [size]="resolvedLoaderSize"
+          iconClass="animate-spin shrink-0"
+          [inheritParentColor]="true"
+          [ariaHidden]="true"
+        />
       } @else {
-        {{value}}
+        {{ value }}
       }
     </span>
   </div>

package/src/lib/components/badge/badge.component.ts

@@ -1,64 +1,173 @@
+import { NgClass } from '@angular/common';
 import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { JColorsService } from 'tailjng';
+import { Icons } from '../.config/icons/icons.lucide';
+import { JIconComponent } from '../icon/icon.component';
 import { JTooltipDirective } from '../tooltip/tooltip.directive';
-import { JIconsService, JColorsService } from 'tailjng';
-import { LucideAngularModule } from 'lucide-angular';
-import { NgClass } from '@angular/common';
+import { TooltipPosition } from '../tooltip/tooltip.types';
 
+export type { TooltipPosition as JBadgeTooltipPosition } from '../tooltip/tooltip.types';
+
+/**
+ * Circular badge with color variants, optional tooltip, and click support.
+ *
+ * Install: `npx tailjng add badge`
+ */
 @Component({
   selector: 'JBadge',
-  imports: [JTooltipDirective, LucideAngularModule, NgClass],
+  imports: [JTooltipDirective, JIconComponent, NgClass],
   templateUrl: './badge.component.html',
-  styleUrl: './badge.component.css'
+  styleUrl: './badge.component.css',
 })
 export class JBadgeComponent {
-  @Input() value: string = 'J';
-  @Input() size: number = 20;
-  @Input() textSize: number = 12;
-  @Input() tooltipPosition: 'top' | 'right' | 'bottom' | 'left' = 'top';
-  @Input() tooltip: string = '';
-  @Input() textOffsetX: number = 0;
-  @Input() textOffsetY: number = 0;
-  @Input() disabled: boolean = false;
-  @Input() isLoading: boolean = false;
-  @Input() classes: string = "";
-  @Input() ngClasses: { [key: string]: boolean } = {};
+  // Project Icons registry — template usage: Icons.Loader2
+  readonly Icons = Icons;
+
+  // Label shown inside the badge (text or short counter)
+  @Input() value = 'J';
+
+  // Badge diameter in px
+  @Input() size = 20;
+
+  // Label font size in px; 0 = derived from `size`
+  @Input() textSize = 0;
+
+  // Tooltip position (jTooltip)
+  @Input() tooltipPosition: TooltipPosition = 'top';
+
+  // Tooltip text on hover / long-press
+  @Input() tooltip = '';
+
+  // Fine-tune label position inside the circle (px)
+  @Input() textOffsetX = 0;
+  @Input() textOffsetY = 0;
+
+  @Input() disabled = false;
+  @Input() isLoading = false;
+
+  // Color variant (primary, success_soft, …) + extra Tailwind classes
+  @Input() classes = '';
+
+  // Extra conditional classes (same role as [ngClass] on the inner circle)
+  @Input() ngClasses: Record<string, boolean> = {};
+
+  // Optional explicit accessible name when clickable
+  @Input() ariaLabel?: string;
 
   @Output() clicked = new EventEmitter<Event>();
 
+  constructor(private readonly colorsService: JColorsService) {}
+
+  /**
+   * Whether a `(clicked)` listener is attached.
+   * @returns `true` when the badge is interactive.
+   */
   get hasClickHandler(): boolean {
     return this.clicked.observers.length > 0;
   }
 
-  constructor(
-    public readonly iconsService: JIconsService,
-    private readonly colorsService: JColorsService,
-  ) { }
-
+  /**
+   * Tailwind classes for the active color variant without shadow utilities.
+   * @returns Variant string from `JColorsService`.
+   */
   get variantClasses(): string {
-    return this.colorsService.getVariantClass(this.getActiveVariant(), false, true);
+    const base =
+      this.colorsService.variants[this.getActiveVariant()] ??
+      this.colorsService.variants['default'] ??
+      'text-black dark:text-white border border-dark-border dark:border-border';
+
+    return base.replace(/\bshadow-\S+/g, '').replace(/\s{2,}/g, ' ').trim();
   }
 
-  get computedClasses() {
+  /**
+   * Class map for the inner circle `[ngClass]`.
+   * @returns Object ready for `ngClass`.
+   */
+  get computedClasses(): Record<string, boolean> {
     return {
-      "flex flex-col gap-1": true,
       ...this.ngClasses,
       [this.variantClasses]: true,
+    };
+  }
+
+  /**
+   * Final label font size in px.
+   * @returns `textSize` when greater than 0; otherwise derived from `size`.
+   */
+  get resolvedTextSize(): number {
+    if (this.textSize > 0) {
+      return this.textSize;
     }
+    return Math.max(10, Math.round(this.size * 0.55));
   }
 
-  private hasClass(className: string): boolean {
-    const classArray = this.classes.split(" ");
-    return classArray.includes(className) || this.ngClasses[className];
+  /**
+   * Spinner size while loading.
+   * @returns Same as `resolvedTextSize`.
+   */
+  get resolvedLoaderSize(): number {
+    return this.resolvedTextSize;
   }
 
-  private getActiveVariant(): string {
-    const variant = Object.keys(this.colorsService.variants).find((variant) => this.hasClass(variant));
-    return variant ?? "default";
+  /**
+   * Resolves `aria-label` for interactive badges.
+   * Priority: `ariaLabel` → `tooltip` → `value` (when clickable).
+   * @returns Accessible text or `null` when not applicable.
+   */
+  get resolvedAriaLabel(): string | null {
+    if (this.ariaLabel) {
+      return this.ariaLabel;
+    }
+    if (this.tooltip) {
+      return this.tooltip;
+    }
+    if (this.hasClickHandler && this.value) {
+      return this.value;
+    }
+    return null;
   }
 
+  /**
+   * Handles badge click.
+   * @param event Native click event.
+   * @returns Emits `clicked` when not `disabled`, not loading, and a listener exists.
+   */
   handleClick(event: Event) {
-    if (!this.isLoading && this.hasClickHandler) {
+    if (!this.disabled && !this.isLoading && this.hasClickHandler) {
       this.clicked.emit(event);
     }
   }
+
+  /**
+   * Combines tokens from `classes` and active keys from `ngClasses`.
+   * @returns Flat list of class names.
+   */
+  private getClassTokens(): string[] {
+    const fromClasses = this.classes.split(/\s+/).filter(Boolean);
+    const fromNgClasses = Object.entries(this.ngClasses)
+      .filter(([, active]) => active)
+      .map(([className]) => className);
+    return [...fromClasses, ...fromNgClasses];
+  }
+
+  /**
+   * Whether an exact token is present in `classes` or `ngClasses`.
+   * @param className Class name to look for (e.g. `primary_soft`).
+   * @returns `true` when the token exists.
+   */
+  private hasClass(className: string): boolean {
+    return this.getClassTokens().includes(className);
+  }
+
+  /**
+   * Resolves the color variant used by the badge.
+   * Finds the longest matching variant name in `classes`.
+   * @returns Variant key (e.g. `primary`, `success_soft`) or `default`.
+   */
+  private getActiveVariant(): string {
+    const variants = Object.keys(this.colorsService.variants).sort(
+      (a, b) => b.length - a.length,
+    );
+    return variants.find((variant) => this.hasClass(variant)) ?? 'default';
+  }
 }

package/src/lib/components/button/button.component.html

@@ -3,6 +3,8 @@
   [jTooltip]="tooltip"
   [jTooltipPosition]="tooltipPosition"
   [disabled]="disabled || isLoading"
+  [attr.aria-label]="resolvedAriaLabel"
+  [attr.aria-busy]="isLoading ? true : null"
   [ngClass]="computedClasses"
   [class]="classes"
   (click)="handleClick($event)"
@@ -12,22 +14,26 @@
     [ngClass]="innerContentClasses"
   >
     @if (isLoading) {
-      <lucide-icon
-        [name]="iconsService.icons.loading"
+      <JIcon
+        [icon]="Icons.Loader2"
         [size]="resolvedIconSize"
-        class="animate-spin shrink-0"
+        iconClass="animate-spin shrink-0"
+        [inheritParentColor]="true"
+        [ariaHidden]="true"
       />
     }
 
-    @if (!isLoading && icon) {
-      @if (!isChangeIcon) {
-        <lucide-icon [name]="icon" [size]="resolvedIconSize" class="shrink-0" />
-      } @else {
-        <lucide-icon [name]="iconChange" [size]="resolvedIconSize" class="shrink-0" />
-      }
+    @if (!isLoading && displayIcon) {
+      <JIcon
+        [icon]="displayIcon"
+        [size]="resolvedIconSize"
+        iconClass="shrink-0"
+        [inheritParentColor]="true"
+        [ariaHidden]="true"
+      />
     }
 
-    @if (text && (!isLoading || isLoadingText)) {
+    @if (text !== '' && text !== null && text !== undefined && (!isLoading || isLoadingText)) {
       <span>{{ text }}</span>
     }
 

package/src/lib/components/button/button.component.ts

@@ -1,64 +1,144 @@
 import { NgClass } from '@angular/common';
 import { Component, Input, Output, EventEmitter } from '@angular/core';
-import { LucideAngularModule } from 'lucide-angular';
-import { JIconsService, JColorsService } from 'tailjng';
+import { LucideIconData } from 'lucide-angular';
+import { JColorsService } from 'tailjng';
+import { Icons } from '../.config/icons/icons.lucide';
+import { JIconComponent } from '../icon/icon.component';
 import { JTooltipDirective } from '../tooltip/tooltip.directive';
 
 export type JButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'icon';
+export type JButtonIcon = LucideIconData;
 
 @Component({
   selector: 'JButton',
-  imports: [NgClass, LucideAngularModule, JTooltipDirective],
+  imports: [NgClass, JIconComponent, JTooltipDirective],
   templateUrl: './button.component.html',
   styleUrl: './button.component.css',
 })
 export class JButtonComponent {
+  // Project Icons registry — template usage: Icons.Loader2, Icons.Save, …
+  readonly Icons = Icons;
 
+  // button | submit | reset
   @Input() type: 'button' | 'submit' | 'reset' = 'button';
+
+  // Tooltip position (jTooltip)
   @Input() tooltipPosition: 'top' | 'right' | 'bottom' | 'left' = 'top';
 
-  @Input() text!: string | number;
-  @Input() tooltip: string = '';
+  // Visible label; empty = icon-only
+  @Input() text: string | number = '';
+
+  // Tooltip text; on icon-only buttons also used as aria-label fallback
+  @Input() tooltip = '';
+
+  // Primary icon (Icons.* from .config/icons)
+  @Input() icon?: JButtonIcon;
 
-  @Input() icon!: any;
-  @Input() iconSize: number = 0;
-  @Input() iconChange!: any;
-  @Input() isChangeIcon: boolean = false;
+  // Alternate icon when isChangeIcon is true (e.g. copy → check)
+  @Input() iconChange?: JButtonIcon;
 
-  /** xs/sm: alertas y cards · md: formularios · lg: acciones destacadas · icon: solo icono */
+  // true = render iconChange instead of icon
+  @Input() isChangeIcon = false;
+
+  // Icon size in px; 0 = automatic based on size
+  @Input() iconSize = 0;
+
+  // xs/sm: alerts · md: forms · lg: actions · icon: square icon-only
   @Input() size: JButtonSize = 'md';
 
   @Output() clicked = new EventEmitter<Event>();
 
   @Input() disabled = false;
   @Input() isLoading = false;
+
+  // false = hide label while loading (spinner only)
   @Input() isLoadingText = true;
 
-  @Input() classes: string = '';
-  @Input() ngClasses: { [key: string]: boolean } = {};
+  // Color variant (primary, success_soft, …) + extra Tailwind classes
+  @Input() classes = '';
+
+  // Extra conditional classes (same role as [ngClass] on the host)
+  @Input() ngClasses: Record<string, boolean> = {};
+
+  // Icon-only: explicit aria-label; falls back to tooltip when omitted
+  @Input() ariaLabel?: string;
+
+  constructor(private readonly colorsService: JColorsService) {}
+
+  /**
+   * Icon rendered in the template.
+   * Uses `iconChange` when `isChangeIcon` is true; otherwise `icon`.
+   * @returns Active Lucide reference or `undefined` when no icon is set.
+   */
+  get displayIcon(): JButtonIcon | undefined {
+    if (this.isChangeIcon && this.iconChange) {
+      return this.iconChange;
+    }
+    return this.icon;
+  }
+
+  /**
+   * Whether the button shows no visible text.
+   * @returns `true` with `size="icon"` or when `icon` is set and `text` is empty.
+   */
+  get isIconOnly(): boolean {
+    return this.size === 'icon' || (!!this.icon && this.text === '');
+  }
 
-  constructor(
-    public readonly iconsService: JIconsService,
-    private readonly colorsService: JColorsService,
-  ) { }
+  /**
+   * Resolves the `<button>` element `aria-label`.
+   * Priority: `ariaLabel` → `tooltip` (icon-only) → `text` (icon-only).
+   * @returns Accessible text or `null` when not applicable.
+   */
+  get resolvedAriaLabel(): string | null {
+    if (this.ariaLabel) {
+      return this.ariaLabel;
+    }
+    if (this.isIconOnly && this.tooltip) {
+      return this.tooltip;
+    }
+    if (this.isIconOnly && this.text !== '') {
+      return String(this.text);
+    }
+    return null;
+  }
 
+  /**
+   * Tailwind classes for the active color variant (`JColorsService`).
+   * @returns Tailwind utility string for background, text, and border.
+   */
   get variantClasses(): string {
     return this.colorsService.variants[this.getActiveVariant()]
       ?? 'text-black dark:text-white shadow-md border border-border dark:border-dark-border';
   }
 
+  /**
+   * Final icon size in pixels.
+   * @returns `iconSize` when greater than 0; otherwise the default for `size`.
+   */
   get resolvedIconSize(): number {
-    if (this.iconSize > 0) return this.iconSize;
+    if (this.iconSize > 0) {
+      return this.iconSize;
+    }
 
     switch (this.size) {
-      case 'xs': return 14;
-      case 'sm': return 14;
-      case 'icon': return 16;
-      case 'lg': return 18;
-      default: return 15;
+      case 'xs':
+      case 'sm':
+        return 14;
+      case 'icon':
+        return 16;
+      case 'lg':
+        return 18;
+      default:
+        return 15;
     }
   }
 
+  /**
+   * Host class map for `[ngClass]`.
+   * Skips dimensions, padding, radius, and text when already set in `classes` / `ngClasses`.
+   * @returns Class → boolean object ready for `ngClass`.
+   */
   get computedClasses() {
     const result: Record<string, boolean> = {
       'inline-flex items-center justify-center font-semibold border border-border dark:border-dark-border transition duration-300 select-none': true,
@@ -78,6 +158,10 @@ export class JButtonComponent {
     return result;
   }
 
+  /**
+   * Gap between icon and label inside the button.
+   * @returns `gap-*` class map based on `size`.
+   */
   get innerContentClasses(): Record<string, boolean> {
     return {
       'gap-1': this.size === 'xs' || this.size === 'icon',
@@ -86,6 +170,10 @@ export class JButtonComponent {
     };
   }
 
+  /**
+   * Button height and minimum width classes.
+   * @returns Tailwind utilities such as `h-*`, `min-h-*`, `min-w-*`, etc.
+   */
   get dimensionClasses(): string {
     switch (this.size) {
       case 'xs':
@@ -104,6 +192,10 @@ export class JButtonComponent {
     }
   }
 
+  /**
+   * Button padding classes.
+   * @returns Tailwind `px-*`, `py-*`, or `p-0` for `size="icon"`.
+   */
   get paddingClasses(): string {
     switch (this.size) {
       case 'xs':
@@ -120,6 +212,10 @@ export class JButtonComponent {
     }
   }
 
+  /**
+   * Label font-size classes.
+   * @returns `text-*` / `leading-*` utilities; empty string for `size="icon"`.
+   */
   get textSizeClasses(): string {
     switch (this.size) {
       case 'xs':
@@ -136,12 +232,20 @@ export class JButtonComponent {
     }
   }
 
+  /**
+   * Border-radius classes.
+   * @returns `rounded-lg` for xs/sm/icon; `rounded-md` for md/lg.
+   */
   get radiusClasses(): string {
     return this.size === 'icon' || this.size === 'xs' || this.size === 'sm'
       ? 'rounded-lg'
       : 'rounded-md';
   }
 
+  /**
+   * Merges tokens from `classes` and active keys from `ngClasses`.
+   * @returns Flat list of Tailwind class names.
+   */
   private getClassTokens(): string[] {
     const fromClasses = this.classes.split(/\s+/).filter(Boolean);
     const fromNgClasses = Object.entries(this.ngClasses)
@@ -150,35 +254,71 @@ export class JButtonComponent {
     return [...fromClasses, ...fromNgClasses];
   }
 
+  /**
+   * Checks whether any token matches a Tailwind pattern.
+   * @param pattern Regular expression over class names.
+   * @returns `true` when at least one token matches.
+   */
   private matchesTokenPattern(pattern: RegExp): boolean {
     return this.getClassTokens().some((token) => pattern.test(token));
   }
 
+  /**
+   * Whether the consumer already defined dimensions in `classes` / `ngClasses`.
+   * @returns `true` when tokens such as `h-*`, `w-*`, `min-h-*`, `size-*` exist.
+   */
   hasCustomDimensions(): boolean {
     return this.matchesTokenPattern(/^!?((min|max)-)?[wh](-|\[|$)|^!?size-/);
   }
 
+  /**
+   * Whether the consumer already defined padding in `classes` / `ngClasses`.
+   * @returns `true` when tokens such as `p-*`, `px-*`, `py-*` exist.
+   */
   hasCustomPadding(): boolean {
     return this.matchesTokenPattern(/^!?p[xytblr]?(-|\[|$)|^!?p$/);
   }
 
+  /**
+   * Whether the consumer already defined text size in `classes` / `ngClasses`.
+   * @returns `true` when `text-*` tokens exist.
+   */
   hasCustomTextSize(): boolean {
     return this.matchesTokenPattern(/^!?text(-|\[|$)/);
   }
 
+  /**
+   * Whether the consumer already defined border-radius in `classes` / `ngClasses`.
+   * @returns `true` when `rounded-*` tokens exist.
+   */
   hasCustomRadius(): boolean {
     return this.matchesTokenPattern(/^!?rounded(-|\[|$)/);
   }
 
+  /**
+   * Whether an exact token is present in `classes` or `ngClasses`.
+   * @param className Class name to look for (e.g. `primary_soft`).
+   * @returns `true` when the token exists.
+   */
   private hasClass(className: string): boolean {
     return this.getClassTokens().includes(className);
   }
 
+  /**
+   * Resolves the color variant used by the button.
+   * Finds the longest matching variant name in `classes`.
+   * @returns Variant key (e.g. `primary`, `success_soft`) or `default`.
+   */
   private getActiveVariant(): string {
     const variants = Object.keys(this.colorsService.variants).sort((a, b) => b.length - a.length);
     return variants.find((variant) => this.hasClass(variant)) ?? 'default';
   }
 
+  /**
+   * Handles the button click.
+   * @param event Native click event.
+   * @returns Emits `clicked` only when not `disabled` or `isLoading`.
+   */
   handleClick(event: Event) {
     if (!this.disabled && !this.isLoading) {
       this.clicked.emit(event);

package/src/lib/components/card/card-complete/complete-card.component.html

@@ -46,7 +46,7 @@
   @if (isLoading('initialLoad') && displayData.length === 0) {
     <div class="w-full flex justify-center items-center h-100 bg-white dark:bg-foreground rounded-[20px] border border-border dark:border-dark-border">
       <div class="flex flex-col gap-3 items-center justify-center py-4">
-        <lucide-icon [name]="iconsService.icons.loading" size="30" class="text-primary animate-spin"></lucide-icon>
+        <JIcon [icon]="Icons.Loader2" size="30" iconClass="text-primary animate-spin" [ariaHidden]="true" />
         <p>Cargando datos...</p>
       </div>
     </div>
@@ -83,7 +83,7 @@
 
   } @else if (!isLoading('pagination')) {
     <div class="w-full flex flex-col gap-3 justify-center items-center h-100 bg-white dark:bg-foreground rounded-[20px] border border-border dark:border-dark-border hover:border-primary/50 hover:dark:border-primary">
-      <lucide-icon [name]="iconsService.icons.info" size="35" class="text-primary"></lucide-icon>
+      <JIcon [icon]="Icons.Info" size="35" iconClass="text-primary" [ariaHidden]="true" />
       <p class="text-black dark:text-white">No hay datos disponibles</p>
     </div>
   }