tailjng 0.1.6 → 0.1.7

package/src/lib/components/menu/options-coach-menu/options-coach-menu.component.html

@@ -1,56 +1,53 @@
-<div class="relative isolate">
-  <JButton
-    onKeyPress
-    jCoachMark
-    [contentTemplate]="customTemplateActions"
-    [isDescriptionFormatted]="true"
-    coachPosition="bottom-left"
-    coachTrigger="click"
-    [coachMaxWidth]="'170px'"
-    [coachWidth]="'170px'"
-    [coachSpotlight]="false"
-    [icon]="iconsService.icons.ellipsisVertical"
-    [iconSize]="20"
-    classes="secondary w-[35px] h-[35px] rounded-full"
-    (clicked)="handleClickGeneral()"
-  />
+<JButton
+  jCoachMark
+  [contentTemplate]="actionsTemplate"
+  [isDescriptionFormatted]="true"
+  coachPosition="bottom-left"
+  coachTrigger="click"
+  coachMaxWidth="170px"
+  coachWidth="170px"
+  [coachSpotlight]="false"
+  size="icon"
+  [icon]="Icons.EllipsisVertical"
+  [iconSize]="18"
+  [ariaLabel]="'Acciones de fila'"
+  classes="secondary rounded-full"
+  (clicked)="closeCoachOverlay()"
+/>
 
-  <ng-template #customTemplateActions>
-    <div class="menu-options-list flex flex-col gap-2 w-full min-w-full">
-      @if (optionsTable.length > 0) {
-        @for (option of optionsTable; track $index) {
-          @if (getIsVisible(option, group)) {
-            <div
-              class="menu-option-item w-full hover:bg-primary/10 dark:hover:bg-dark-primary/10 text-[10px]"
+<ng-template #actionsTemplate>
+  <div class="flex w-full min-w-0 flex-col gap-2">
+    @if (optionsTable.length > 0) {
+      @for (option of optionsTable; track option.type ?? $index) {
+        @if (getIsVisible(option, group)) {
+          <div
+            class="flex w-full min-w-0 rounded-lg transition-colors hover:bg-primary/10 dark:hover:bg-dark-primary/10"
+            role="none"
+          >
+            <JButton
+              size="sm"
+              [icon]="getIcon(option.icon, group)"
+              [iconSize]="14"
+              (clicked)="handleClick(option, group)"
+              [tooltip]="getTooltip(option.tooltip ?? '', group)"
+              [tooltipPosition]="option.tooltipPosition ?? 'top'"
+              [disabled]="getDisabled(option, group)"
+              [isLoading]="isOptionLoading(option)"
+              [classes]="optionButtonClasses(option)"
+              [ngClasses]="optionColorClasses(option, group)"
             >
-              <JButton
-                onKeyPress
-                size="sm"
-                [icon]="getIcon(option.icon, group)"
-                [iconSize]="16"
-                (clicked)="handleClick(option, group)"
-                [tooltip]="getTooltip(option.tooltip ?? '', group)"
-                [tooltipPosition]="option.tooltipPosition ?? 'top'"
-                [disabled]="getDisabled(option, group)"
-                [isLoading]="false"
-                [classes]="
-                  'w-full min-w-full text-left justify-start h-[30px] ' +
-                  (option.classes ?? '')
-                "
-                [ngClasses]="mergeNgClasses(option.ngClass, group)"
-              >
-                {{ getTooltip(option.text ?? '', group) }}
-              </JButton>
-            </div>
-          }
+              {{ resolveOptionText(option, group) }}
+            </JButton>
+          </div>
         }
-      } @else {
-        <div
-          class="text-center text-gray-500 dark:text-dark-text-secondary text-xs"
-        >
-          No hay opciones disponibles
-        </div>
       }
-    </div>
-  </ng-template>
-</div>
+    } @else {
+      <div
+        class="py-2 px-1.5 text-center text-xs leading-5 text-muted-foreground dark:text-dark-muted-foreground"
+        role="status"
+      >
+        No hay opciones disponibles
+      </div>
+    }
+  </div>
+</ng-template>

package/src/lib/components/menu/options-coach-menu/options-coach-menu.component.ts

@@ -1,41 +1,129 @@
-import { Component, Input, Output, EventEmitter, ElementRef, OnDestroy, ViewChild, AfterViewInit, Renderer2 } from '@angular/core';
-import { LucideAngularModule } from 'lucide-angular';
-import { JButtonComponent } from '../../button/button.component';
-import { JIconsService } from 'tailjng';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { OptionsTable } from 'tailjng';
+import { Icons } from '../../.config/icons/icons.lucide';
 import { JCoachMarkDirective } from '../../coach-mark/coach-mark.directive';
+import { JButtonComponent } from '../../button/button.component';
+import {
+  defaultMenuIconResolver,
+  defaultMenuNgClassesResolver} from '../menu-options-table/menu-options-defaults';
+import {
+  OptionsCoachMenuClassesResolver,
+  OptionsCoachMenuClickEvent,
+  OptionsCoachMenuDisabledResolver,
+  OptionsCoachMenuIconResolver,
+  OptionsCoachMenuLoadingResolver,
+  OptionsCoachMenuTextResolver,
+  OptionsCoachMenuVisibleResolver} from './options-coach-menu.types';
+
+export type { OptionsCoachMenuClickEvent } from './options-coach-menu.types';
 
+/**
+ * Row actions menu rendered inside a coach-mark popover (guided UX).
+ *
+ * Install: `npx tailjng add options-coach-menu`
+ */
 @Component({
   selector: 'JOptionsCoachMenu',
-  imports: [LucideAngularModule, JButtonComponent, JCoachMarkDirective],
+  standalone: true,
+  imports: [JButtonComponent, JCoachMarkDirective],
   templateUrl: './options-coach-menu.component.html',
-  styleUrl: './options-coach-menu.component.scss'
-})
+  host: { class: 'inline-flex relative isolate' }})
 export class JOptionsCoachMenuComponent {
+  readonly Icons = Icons;
 
-  @Input() optionsTable: any[] = [];
-  @Input() group: any;
+  private static readonly BLOCKED_NG_CLASSES = new Set([
+    'min-w-auto',
+    'p-[1px]!',
+    'pl-[5px]!',
+    'pr-[5px]!',
+  ]);
+
+  @Input() optionsTable: OptionsTable[] = [];
+  @Input() group: unknown;
   @Input() rowId: string | number | null = null;
 
-  @Input() getIcon: (icon: any, group: any) => any = () => null;
-  @Input() getTooltip: (tooltip: string, group: any) => string = () => '';
-  @Input() getDisabled: (option: any, group: any) => boolean = () => false;
-  @Input() getIsVisible: (option: any, group: any) => boolean = () => true;
-  @Input() mergeNgClasses: (ngClass: any, group: any) => any = () => '';
-  @Input() isAditionalButtonLoading: (type: string, id: any) => boolean = () => false;
+  @Input() getIcon: OptionsCoachMenuIconResolver = defaultMenuIconResolver;
+  @Input() getTooltip: OptionsCoachMenuTextResolver = () => '';
+  @Input() getDisabled: OptionsCoachMenuDisabledResolver = () => false;
+  @Input() getIsVisible: OptionsCoachMenuVisibleResolver = () => true;
+  @Input() mergeNgClasses: OptionsCoachMenuClassesResolver = defaultMenuNgClassesResolver;
+  @Input() isAditionalButtonLoading: OptionsCoachMenuLoadingResolver = () => false;
+
+  @Output() clicked = new EventEmitter<OptionsCoachMenuClickEvent>();
+
+  constructor() {}
+
+  optionButtonClasses(option: OptionsTable): string {
+    return [
+      'w-full',
+      'min-w-0',
+      'h-[30px]',
+      'min-h-[30px]',
+      'text-left',
+      'justify-start',
+      'text-[14px]',
+      'leading-tight',
+      'font-medium',
+      option.classes ?? '',
+    ]
+      .filter(Boolean)
+      .join(' ');
+  }
+
+  optionColorClasses(option: OptionsTable, group: unknown): Record<string, boolean> {
+    const merged = this.mergeNgClasses(option.ngClass, group);
+    const normalized: Record<string, boolean> = {
+      'w-full': true,
+      'min-w-0': true};
+
+    for (const [className, active] of Object.entries(merged)) {
+      if (
+        !active ||
+        className === 'text-destructive' ||
+        JOptionsCoachMenuComponent.BLOCKED_NG_CLASSES.has(className)
+      ) {
+        continue;
+      }
+      normalized[className] = true;
+    }
 
-  @Output() clicked = new EventEmitter<{ option: any; group: any }>();
+    if (merged['text-destructive']) {
+      normalized['text-red-600'] = true;
+      normalized['dark:text-red-300'] = true;
+    }
 
-  
-  constructor(
-    public readonly iconsService: JIconsService,
-  ) { }
+    return normalized;
+  }
+
+  resolveOptionText(option: OptionsTable, group: unknown): string {
+    const { text, tooltip } = option;
+
+    if (typeof text === 'function') {
+      return text(group);
+    }
+
+    if (typeof text === 'string' && text.length > 0) {
+      return text;
+    }
+
+    return this.getTooltip(tooltip ?? '', group);
+  }
+
+  isOptionLoading(option: OptionsTable): boolean {
+    if (this.rowId == null) {
+      return this.isAditionalButtonLoading(String(option.type ?? ''));
+    }
 
-  handleClick(option: any, group: any): void {
+    return this.isAditionalButtonLoading(String(option.type ?? ''), this.rowId);
+  }
+
+  handleClick(option: OptionsTable, group: unknown): void {
     this.clicked.emit({ option, group });
-    this.handleClickGeneral();
+    this.closeCoachOverlay();
   }
-  
-  handleClickGeneral(): void {
+
+  /** Simulates an outside click so the coach-mark directive closes the popover. */
+  closeCoachOverlay(): void {
     document.body.click();
   }
 }

package/src/lib/components/menu/options-coach-menu/options-coach-menu.types.ts

@@ -0,0 +1,9 @@
+export type {
+  OptionsTableMenuClassesResolver as OptionsCoachMenuClassesResolver,
+  OptionsTableMenuClickEvent as OptionsCoachMenuClickEvent,
+  OptionsTableMenuDisabledResolver as OptionsCoachMenuDisabledResolver,
+  OptionsTableMenuIconResolver as OptionsCoachMenuIconResolver,
+  OptionsTableMenuLoadingResolver as OptionsCoachMenuLoadingResolver,
+  OptionsTableMenuTextResolver as OptionsCoachMenuTextResolver,
+  OptionsTableMenuVisibleResolver as OptionsCoachMenuVisibleResolver,
+} from '../menu-options-table/options-table-menu.types';

package/src/lib/components/mode-toggle/mode-toggle.component.html

@@ -3,20 +3,15 @@
   (click)="toggleDarkMode()"
   [style.width.px]="size"
   [style.height.px]="size"
-  [class]="
-    'inline-flex items-center justify-center shrink-0 rounded-full cursor-pointer bg-gray-300 dark:bg-gray-700 text-black dark:text-white leading-none p-0 border border-border/50 dark:border-dark-border/50 ' +
-    classes
-  "
+  [attr.aria-pressed]="themeService.themeSignal() === 'dark'"
+  [attr.aria-label]="resolvedAriaLabel"
+  [ngClass]="computedClasses"
+  [class]="classes"
 >
-  @if (theme === "dark") {
-    <lucide-icon
-      [name]="iconsService.icons.moon"
-      [size]="iconSize"
-    ></lucide-icon>
-  } @else {
-    <lucide-icon
-      [name]="iconsService.icons.sun"
-      [size]="iconSize"
-    ></lucide-icon>
-  }
-</button>
+  <JIcon
+    [icon]="themeService.themeSignal() === 'dark' ? Icons.Moon : Icons.Sun"
+    [size]="resolvedIconSize"
+    [inheritParentColor]="true"
+    [ariaHidden]="true"
+  />
+</button>

package/src/lib/components/mode-toggle/mode-toggle.component.ts

@@ -1,48 +1,84 @@
-import { Component, Inject, Input, PLATFORM_ID } from '@angular/core';
-import { isPlatformBrowser } from '@angular/common';
-import { LucideAngularModule } from 'lucide-angular';
-import { JIconsService } from 'tailjng';
+import { NgClass } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { JThemeService, ThemeMode } from 'tailjng';
+import { Icons } from '../.config/icons/icons.lucide';
+import { JIconComponent } from '../icon/icon.component';
 
+export type { ThemeMode } from 'tailjng';
+
+/**
+ * Light / dark mode toggle for Tailwind `dark` class on `document.documentElement`.
+ *
+ * Uses {@link JThemeService} (localStorage + `prefers-color-scheme`).
+ *
+ * Install: `npx tailjng add mode-toggle`
+ */
 @Component({
   selector: 'JModeToggle',
-  imports: [LucideAngularModule],
+  imports: [JIconComponent, NgClass],
   templateUrl: './mode-toggle.component.html',
-  styleUrl: './mode-toggle.component.css'
+  styleUrl: './mode-toggle.component.css',
 })
 export class JModeToggleComponent {
-  title = 'frontend';
-  theme: string = 'light';
-
-  @Input() size: number = 40;
-  @Input() iconSize: number = 20;
-  @Input() classes: string = '';
-
-  constructor(
-    @Inject(PLATFORM_ID) private readonly platformId: object,
-    public readonly iconsService: JIconsService
-  ) {
-    this.loadTheme();
-  }
+  // Project Icons registry — template usage: Icons.Sun, Icons.Moon
+  readonly Icons = Icons;
+
+  // Button diameter in px
+  @Input() size = 40;
+
+  // Icon size in px; 0 = derived from `size`
+  @Input() iconSize = 0;
+
+  // Extra Tailwind classes on the button
+  @Input() classes = '';
 
-  setTheme(theme: 'light' | 'dark') {
-    if (isPlatformBrowser(this.platformId)) {
-      localStorage.setItem('theme', theme);
+  // Extra conditional classes (same role as [ngClass] on the host)
+  @Input() ngClasses: Record<string, boolean> = {};
+
+  // Override default toggle aria-label
+  @Input() ariaLabel?: string;
+
+  constructor(readonly themeService: JThemeService) {}
+
+  /**
+   * Final icon size in px.
+   * @returns `iconSize` when greater than 0; otherwise derived from `size`.
+   */
+  get resolvedIconSize(): number {
+    if (this.iconSize > 0) {
+      return this.iconSize;
     }
+    return Math.max(14, Math.round(this.size * 0.5));
+  }
 
-    this.theme = theme;
-    document.documentElement.classList.toggle('dark', theme === 'dark');
+  /**
+   * Host class map for `[ngClass]`.
+   * @returns Base toggle styles merged with `ngClasses`.
+   */
+  get computedClasses(): Record<string, boolean> {
+    return {
+      'inline-flex items-center justify-center shrink-0 rounded-full cursor-pointer bg-gray-300 dark:bg-gray-700 text-black dark:text-white leading-none p-0 border border-border/50 dark:border-dark-border/50 transition-colors duration-300 select-none': true,
+      ...this.ngClasses,
+    };
   }
 
-  loadTheme() {
-    if (isPlatformBrowser(this.platformId)) {
-      const storedTheme = localStorage.getItem('theme');
-      this.theme = storedTheme ?? 'light';
-      document.documentElement.classList.toggle('dark', this.theme === 'dark');
+  /**
+   * Accessible label describing the action on click.
+   * @returns Custom `ariaLabel` or a default switch label.
+   */
+  get resolvedAriaLabel(): string {
+    if (this.ariaLabel) {
+      return this.ariaLabel;
     }
+    return this.themeService.themeSignal() === 'dark'
+      ? 'Switch to light mode'
+      : 'Switch to dark mode';
   }
 
-  toggleDarkMode() {
-    const newTheme = this.theme === 'dark' ? 'light' : 'dark';
-    this.setTheme(newTheme);
+  /**
+   * Toggles between light and dark mode via {@link JThemeService}.
+   */
+  toggleDarkMode(): void {
+    this.themeService.toggleTheme();
   }
-}
+}

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

@@ -9,7 +9,7 @@
 
       <!-- First page -->
       <JButton onKeyPress 
-        [icon]="iconsService.icons.firstPage"
+        [icon]="Icons.ChevronsLeft"
         [iconSize]="16"
         (click)="goToFirstPage()" 
         [disabled]="currentPage === 1 || isLoading"
@@ -22,7 +22,7 @@
 
       <!-- Previous page -->
       <JButton onKeyPress 
-        [icon]="iconsService.icons.prevPage"
+        [icon]="Icons.ChevronLeft"
         [iconSize]="16"
         (click)="goToPreviousPage()" 
         [disabled]="currentPage === 1 || isLoading"
@@ -52,7 +52,7 @@
 
       <!-- Next page -->
       <JButton onKeyPress 
-        [icon]="iconsService.icons.nextPage"
+        [icon]="Icons.ChevronRight"
         [iconSize]="16"
         (click)="goToNextPage()" 
         [disabled]="currentPage === totalPages || isLoading" 
@@ -65,7 +65,7 @@
 
       <!-- Last page -->
       <JButton onKeyPress 
-        [icon]="iconsService.icons.lastPage"
+        [icon]="Icons.ChevronsRight"
         [iconSize]="16"
         (click)="goToLastPage()" 
         [disabled]="currentPage === totalPages || isLoading" 

package/src/lib/components/paginator/paginator-complete/complete-paginator.component.ts

@@ -1,19 +1,43 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
-import { LucideAngularModule } from 'lucide-angular';
 import { JButtonComponent } from '../../button/button.component';
-import { JIconsService } from 'tailjng';
-
+import type { CompletePaginatorLoadingButton, CompletePaginatorNavButton } from './complete-paginator.types';
+
+import { Icons } from '../../.config/icons/icons.lucide';
+
+export type {
+  CompletePaginatorLoadingButton,
+  CompletePaginatorNavButton,
+  GeneratePaginationPagesOptions} from './complete-paginator.types';
+export { generatePaginationPages, generatePaginationPagesFromOptions } from './complete-paginator.util';
+
+/**
+ * Paginator with record range, first/prev/next/last controls and a page-number window.
+ *
+ * Install: `npx tailjng add paginator-complete`
+ *
+ * ```html
+ * <JCompletePaginator
+ *   [currentPage]="currentPage"
+ *   [itemsPerPage]="itemsPerPage"
+ *   [totalItems]="totalItems"
+ *   [pages]="pages"
+ *   [isLoading]="isLoading('pagination')"
+ *   (pageChange)="handlePageChange($event)"
+ * />
+ * ```
+ */
 @Component({
   selector: 'JCompletePaginator',
-  imports: [LucideAngularModule, JButtonComponent],
+  imports: [ JButtonComponent],
   templateUrl: './complete-paginator.component.html',
   styleUrl: './complete-paginator.component.scss'
 })
 export class JCompletePaginatorComponent {
+  readonly Icons = Icons;
 
   Math = Math;
 
-  loadingButton: 'first' | 'prev' | 'next' | 'last' | number | null = null;
+  loadingButton: CompletePaginatorLoadingButton = null;
 
   @Input() pages: number[] = [];
   @Output() pageChange = new EventEmitter<number>();
@@ -40,7 +64,7 @@ export class JCompletePaginatorComponent {
     return Math.ceil(this.totalItems / this.itemsPerPage);
   }
 
-  constructor(public readonly iconsService: JIconsService) { }
+  constructor() {}
 
 
   /**
@@ -110,7 +134,7 @@ export class JCompletePaginatorComponent {
    * @param button The button to check
    * @returns True if the button is loading, false otherwise
    */
-  isButtonLoading(button: 'first' | 'prev' | 'next' | 'last' | number): boolean {
+  isButtonLoading(button: CompletePaginatorNavButton | number): boolean {
     return this.isLoading && this.loadingButton === button;
   }
 

package/src/lib/components/paginator/paginator-complete/complete-paginator.types.ts

@@ -0,0 +1,12 @@
+/** Navigation control that can show a loading spinner while data is fetched. */
+export type CompletePaginatorNavButton = 'first' | 'prev' | 'next' | 'last';
+
+/** Active loading target while {@link JCompletePaginatorComponent.isLoading} is true. */
+export type CompletePaginatorLoadingButton = CompletePaginatorNavButton | number | null;
+
+export type GeneratePaginationPagesOptions = {
+  currentPage: number;
+  totalPages: number;
+  /** Number of page buttons visible at once. Default: 3 (same as table/card CRUD). */
+  maxPagesToShow?: number;
+};

package/src/lib/components/paginator/paginator-complete/complete-paginator.util.ts

@@ -0,0 +1,36 @@
+import type { GeneratePaginationPagesOptions } from './complete-paginator.types';
+
+/**
+ * Builds the sliding window of page numbers shown by {@link JCompletePaginatorComponent}.
+ * Same algorithm used by complete table/card components.
+ */
+export function generatePaginationPages(
+  currentPage: number,
+  totalPages: number,
+  maxPagesToShow = 3,
+): number[] {
+  if (totalPages <= 0) {
+    return [];
+  }
+
+  const safeCurrentPage = Math.min(Math.max(currentPage, 1), totalPages);
+  let startPage = Math.max(1, safeCurrentPage - Math.floor(maxPagesToShow / 2));
+  let endPage = Math.min(totalPages, startPage + maxPagesToShow - 1);
+
+  if (endPage - startPage + 1 < maxPagesToShow) {
+    startPage = Math.max(1, endPage - maxPagesToShow + 1);
+  }
+
+  return Array.from({ length: endPage - startPage + 1 }, (_, index) => startPage + index);
+}
+
+/** Object-style overload for callers that prefer a single options bag. */
+export function generatePaginationPagesFromOptions(
+  options: GeneratePaginationPagesOptions,
+): number[] {
+  return generatePaginationPages(
+    options.currentPage,
+    options.totalPages,
+    options.maxPagesToShow,
+  );
+}

package/src/lib/components/progress-bar/progress-bar.component.css

@@ -0,0 +1,11 @@
+.j-progress-bar__label {
+  z-index: 1;
+}
+
+.j-progress-bar__label--fill {
+  z-index: 2;
+}
+
+.j-progress-bar__fill {
+  min-width: 0;
+}