tailjng 0.1.6 → 0.1.7

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

@@ -1,25 +1,26 @@
-<label 
-  [for]="for"
-  [ngClass]="ngClass"
+<label
+  [attr.for]="for || null"
+  [ngClass]="computedClasses"
   [class]="classes"
-  class="flex gap-1 items-center text-black dark:text-white"
 >
   <ng-content></ng-content>
 
-  @if (isRequired || isConditioned || isAutomated) {
-    <div class="text-[8px]">
-      <span [ngClass]="{
-          'text-red-600 dark:text-red-300': isRequired,
-          'text-blue-600 dark:text-blue-300': !isRequired && isConditioned,
-          'text-purple-600 dark:text-purple-300': !isRequired && !isConditioned && isAutomated
-      }">✱</span>
-    </div>
+  @if (showIndicator) {
+    <span class="text-[8px]" [ngClass]="indicatorClasses" aria-hidden="true">✱</span>
   }
 
   @if (tooltip) {
-    <span [jTooltip]="tooltip" [jTooltipPosition]="tooltipPosition" >
-      <lucide-icon [name]="iconsService.icons.info" [size]="15" />
+    <span
+      class="inline-flex shrink-0 items-center"
+      [jTooltip]="tooltip"
+      [jTooltipPosition]="tooltipPosition"
+    >
+      <JIcon
+        [icon]="Icons.Info"
+        [size]="15"
+        [inheritParentColor]="true"
+        [ariaHidden]="true"
+      />
     </span>
   }
-
-</label>
+</label>

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

@@ -1,27 +1,81 @@
 import { NgClass } from '@angular/common';
 import { Component, Input } from '@angular/core';
+import { Icons } from '../.config/icons/icons.lucide';
+import { JIconComponent } from '../icon/icon.component';
 import { JTooltipDirective } from '../tooltip/tooltip.directive';
-import { JIconsService } from 'tailjng';
-import { LucideAngularModule } from 'lucide-angular';
+import { TooltipPosition } from '../tooltip/tooltip.types';
+import { LabelIndicator } from './label.types';
 
+export type { LabelIndicator } from './label.types';
+export type { TooltipPosition as JLabelTooltipPosition } from '../tooltip/tooltip.types';
+
+/**
+ * Form field label with optional indicators and info tooltip.
+ *
+ * Install: `npx tailjng add label`
+ *
+ * ```html
+ * <JLabel indicator="required">Nombre</JLabel>
+ * <JLabel indicator="conditioned">Teléfono</JLabel>
+ * <JLabel indicator="automated" tooltip="Generado por el sistema">Código</JLabel>
+ * ```
+ */
 @Component({
   selector: 'JLabel',
-  imports: [NgClass, JTooltipDirective, LucideAngularModule],
+  imports: [NgClass, JTooltipDirective, JIconComponent],
   templateUrl: './label.component.html',
-  styleUrl: './label.component.css'
+  styleUrl: './label.component.css',
 })
 export class JLabelComponent {
+  // Project Icons registry — template usage: Icons.Info
+  readonly Icons = Icons;
+
+  // Tooltip position (jTooltip) on the info icon
+  @Input() tooltipPosition: TooltipPosition = 'top';
+
+  // Tooltip text; when set, shows an info icon
+  @Input() tooltip = '';
+
+  // Associates the label with a control id (`for` attribute)
+  @Input() for = '';
+
+  // Extra Tailwind classes on the `<label>`
+  @Input() classes = '';
+
+  // Extra conditional classes (same role as [ngClass] on the host)
+  @Input() ngClasses: Record<string, boolean> = {};
+
+  // required = red · conditioned = blue · automated = purple · null = none
+  @Input() indicator: LabelIndicator | null = null;
+
+  /**
+   * Whether the indicator asterisk should render.
+   * @returns `true` when `indicator` is set.
+   */
+  get showIndicator(): boolean {
+    return this.indicator != null;
+  }
+
+  /**
+   * Host class map for `[ngClass]`.
+   * @returns Base label layout and theme text colors merged with `ngClasses`.
+   */
+  get computedClasses(): Record<string, boolean> {
+    return {
+      'flex gap-1 items-center text-black dark:text-white': true,
+      ...this.ngClasses,
+    };
+  }
 
-  constructor(public iconsService: JIconsService) { }
-
-  @Input() tooltipPosition: 'top' | 'right' | 'bottom' | 'left' = 'top';
-  @Input() tooltip: string = '';
-  @Input() for: string = '';
-  
-  @Input() classes: string = '';
-  @Input() ngClass: { [key: string]: boolean } = {};
-  
-  @Input() isRequired: boolean = false;
-  @Input() isConditioned: boolean = false;
-  @Input() isAutomated: boolean = false;
+  /**
+   * Color classes for the indicator asterisk based on `indicator`.
+   * @returns Class map for the indicator `<span>`.
+   */
+  get indicatorClasses(): Record<string, boolean> {
+    return {
+      'text-red-600 dark:text-red-300': this.indicator === 'required',
+      'text-blue-600 dark:text-blue-300': this.indicator === 'conditioned',
+      'text-purple-600 dark:text-purple-300': this.indicator === 'automated',
+    };
+  }
 }

package/src/lib/components/label/label.types.ts

@@ -0,0 +1,2 @@
+/** Field indicator shown as a colored asterisk next to the label text. */
+export type LabelIndicator = 'required' | 'conditioned' | 'automated';

package/src/lib/components/menu/menu-options-table/menu-options-defaults.ts

@@ -0,0 +1,34 @@
+import { LucideIconData } from 'lucide-angular';
+import {
+  OptionsTableMenuClassesResolver,
+  OptionsTableMenuIconResolver,
+} from './options-table-menu.types';
+
+export const defaultMenuIconResolver: OptionsTableMenuIconResolver = (icon, group) => {
+  if (typeof icon === 'function') {
+    return icon(group) as LucideIconData | undefined;
+  }
+
+  return icon as LucideIconData | undefined;
+};
+
+export const defaultMenuNgClassesResolver: OptionsTableMenuClassesResolver = (
+  ngClass,
+  group,
+) => {
+  let resolved: unknown = ngClass;
+
+  if (typeof ngClass === 'function') {
+    resolved = ngClass(group);
+  }
+
+  if (typeof resolved === 'string' && resolved.length > 0) {
+    return { [resolved]: true };
+  }
+
+  if (typeof resolved === 'object' && resolved) {
+    return resolved as Record<string, boolean>;
+  }
+
+  return {};
+};

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

@@ -1,37 +1,51 @@
-
-<div class="relative isolate">
-  <JButton 
-    [icon]="iconsService.icons.ellipsisVertical"
-    [iconSize]="20"
+<div class="inline-flex relative">
+  <JButton
+    size="icon"
+    [icon]="Icons.EllipsisVertical"
+    [iconSize]="18"
+    [ariaLabel]="'Acciones de fila'"
+    classes="secondary rounded-full"
+    [ngClasses]="triggerClasses()"
     (clicked)="onClickMenuOption($event)"
-    classes="secondary w-[35px] h-[35px] rounded-full"
-    [ngClasses]="{ 'bg-primary dark:bg-dark-primary/70 text-white hover:text-black dark:hover:text-white' : isActiveMenuOption}"
   />
-  
+
   @if (isActiveMenuOption) {
-    <div #menuContainer class="absolute right-0 top-full mt-1 flex flex-col border border-border dark:border-dark-border w-[150px] bg-white dark:bg-dark-background rounded-lg shadow-lg overflow-hidden p-2 gap-2">
+    <div
+      #menuContainer
+      class="absolute right-0 top-[calc(100%+0.375rem)] z-[10000] flex flex-col gap-2 w-[10.625rem] p-1.5 overflow-hidden rounded-[0.625rem] border border-border dark:border-dark-border bg-background dark:bg-dark-background shadow-[0_10px_24px_rgb(0_0_0/0.12),0_2px_6px_rgb(0_0_0/0.06)] dark:shadow-[0_12px_28px_rgb(0_0_0/0.35),0_2px_8px_rgb(0_0_0/0.2)]"
+      [class.fixed]="isMenuPortaled"
+      role="menu"
+      [attr.aria-label]="'Acciones'"
+    >
       @if (optionsTable.length > 0) {
-        @for (option of optionsTable; track $index) {
+        @for (option of optionsTable; track option.type ?? $index) {
           @if (getIsVisible(option, group)) {
-            <div class="w-full hover:bg-primary/10 dark:hover:bg-dark-primary/10 text-[10px]">
-              <JButton onKeyPress
+            <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]="20"
-                (clicked)="$event.stopPropagation(); handleClick(option, group)"
+                [iconSize]="14"
                 [tooltip]="getTooltip(option.tooltip ?? '', group)"
                 [tooltipPosition]="option.tooltipPosition ?? 'top'"
                 [disabled]="getDisabled(option, group)"
-                [isLoading]="false"
-                [classes]="'w-full text-left justify-start ' + (option.classes ?? '')"
-                [ngClasses]="mergeNgClasses(option.ngClass, group)"
+                [isLoading]="isOptionLoading(option)"
+                [classes]="optionButtonClasses(option)"
+                [ngClasses]="optionColorClasses(option, group)"
+                (clicked)="handleClick(option, group, $event)"
               >
-                {{ getTooltip(option.text ?? '', group) }}
+                {{ resolveOptionText(option, group) }}
               </JButton>
             </div>
           }
         }
-      }@else {
-        <div class="text-center text-gray-500 dark:text-dark-text-secondary text-xs">
+      } @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>
       }

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

@@ -1,44 +1,96 @@
-import { Component, Input, Output, EventEmitter, ElementRef, OnDestroy, ViewChild, AfterViewInit, Renderer2 } from '@angular/core';
-import { LucideAngularModule } from 'lucide-angular';
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  EventEmitter,
+  HostBinding,
+  HostListener,
+  Input,
+  OnDestroy,
+  Output,
+  Renderer2,
+  ViewChild} from '@angular/core';
+import { OptionsTable } from 'tailjng';
+import { Icons } from '../../.config/icons/icons.lucide';
 import { JButtonComponent } from '../../button/button.component';
-import { JIconsService } from 'tailjng';
+import {
+  defaultMenuIconResolver,
+  defaultMenuNgClassesResolver} from './menu-options-defaults';
+import {
+  OptionsTableMenuAlign,
+  OptionsTableMenuClassesResolver,
+  OptionsTableMenuClickEvent,
+  OptionsTableMenuDisabledResolver,
+  OptionsTableMenuIconResolver,
+  OptionsTableMenuLoadingResolver,
+  OptionsTableMenuTextResolver,
+  OptionsTableMenuVisibleResolver} from './options-table-menu.types';
 
+export type {
+  OptionsTableMenuAlign,
+  OptionsTableMenuClickEvent} from './options-table-menu.types';
+
+/**
+ * Row actions dropdown for tables. Portals the menu to `document.body` to avoid
+ * clipping inside scrollable table cells.
+ *
+ * Install: `npx tailjng add menu-options-table`
+ */
 @Component({
   selector: 'JOptionsTableMenu',
   standalone: true,
-  imports: [LucideAngularModule, JButtonComponent],
+  imports: [JButtonComponent],
   templateUrl: './options-table-menu.component.html',
-  styleUrls: ['./options-table-menu.component.scss']
-})
+  host: { class: 'inline-flex relative' }})
 export class JOptionsTableMenuComponent implements OnDestroy, AfterViewInit {
+  readonly Icons = Icons;
+
+  private static readonly MENU_Z_INDEX = 9999;
+  private static readonly BLOCKED_NG_CLASSES = new Set([
+    'min-w-auto',
+    'p-[1px]!',
+    'pl-[5px]!',
+    'pr-[5px]!',
+  ]);
 
-  @Input() optionsTable: any[] = [];
-  @Input() group: any;
+  @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: OptionsTableMenuIconResolver = defaultMenuIconResolver;
+  @Input() getTooltip: OptionsTableMenuTextResolver = () => '';
+  @Input() getDisabled: OptionsTableMenuDisabledResolver = () => false;
+  @Input() getIsVisible: OptionsTableMenuVisibleResolver = () => true;
+  @Input() mergeNgClasses: OptionsTableMenuClassesResolver = defaultMenuNgClassesResolver;
+  @Input() isAditionalButtonLoading: OptionsTableMenuLoadingResolver = () => false;
+
+  /** Horizontal alignment of the panel relative to the trigger. */
+  @Input() align: OptionsTableMenuAlign = 'end';
 
-  @Output() clicked = new EventEmitter<{ option: any; group: any }>();
+  @Input() closeOnEscape = true;
 
-  @ViewChild('menuContainer', { static: false }) menuContainer!: ElementRef;
+  @Output() clicked = new EventEmitter<OptionsTableMenuClickEvent>();
+
+  @ViewChild('menuContainer', { static: false }) menuContainer?: ElementRef<HTMLElement>;
 
   isActiveMenuOption = false;
-  menuPosition = { top: 0, left: 0 };
-  buttonElement: HTMLElement | null = null;
 
-  private static activeInstance: JOptionsTableMenuComponent | null = null;
+  @HostBinding('class.z-[10000]')
+  get hostElevated(): boolean {
+    return this.isActiveMenuOption;
+  }
+
+  get isMenuPortaled(): boolean {
+    return this.movedToBody;
+  }
 
+  private buttonElement: HTMLElement | null = null;
+  private static activeInstance: JOptionsTableMenuComponent | null = null;
   private movedToBody = false;
   private originalParent: Node | null = null;
 
   constructor(
-    public readonly iconsService: JIconsService,
-    private readonly elementRef: ElementRef,
+    private readonly elementRef: ElementRef<HTMLElement>,
     private readonly renderer: Renderer2,
   ) {
     this.handleDocumentClick = this.handleDocumentClick.bind(this);
@@ -57,56 +109,133 @@ export class JOptionsTableMenuComponent implements OnDestroy, AfterViewInit {
     }
   }
 
-  private handleDocumentClick(event: Event): void {
-    const target = event.target as HTMLElement;
-    if (
-      !this.elementRef.nativeElement.contains(target) &&
-      this.menuContainer &&
-      !this.menuContainer.nativeElement.contains(target) &&
-      this.isActiveMenuOption
-    ) {
-      this.closeDropdown();
+  triggerClasses(): Record<string, boolean> {
+    return {
+      'bg-primary': this.isActiveMenuOption,
+      'dark:bg-dark-primary/70': this.isActiveMenuOption,
+      'text-white': this.isActiveMenuOption,
+      'hover:text-black': this.isActiveMenuOption,
+      'dark:hover:text-white': this.isActiveMenuOption};
+  }
+
+  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' ||
+        JOptionsTableMenuComponent.BLOCKED_NG_CLASSES.has(className)
+      ) {
+        continue;
+      }
+      normalized[className] = true;
+    }
+
+    if (merged['text-destructive']) {
+      normalized['text-red-600'] = true;
+      normalized['dark:text-red-300'] = true;
     }
+
+    return normalized;
   }
 
-  onClickMenuOption(event?: Event): void {
-    if (event) {
-      event.stopPropagation();
+  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 ?? ''));
+    }
+
+    return this.isAditionalButtonLoading(String(option.type ?? ''), this.rowId);
+  }
+
+  onClickMenuOption(event?: Event): void {
+    event?.stopPropagation();
+
     if (this.isActiveMenuOption) {
       this.closeDropdown();
       return;
     }
 
-    if (JOptionsTableMenuComponent.activeInstance && JOptionsTableMenuComponent.activeInstance !== this) {
+    if (
+      JOptionsTableMenuComponent.activeInstance &&
+      JOptionsTableMenuComponent.activeInstance !== this
+    ) {
       JOptionsTableMenuComponent.activeInstance.closeDropdown();
     }
 
-    this.calculateMenuPosition();
-
     this.isActiveMenuOption = true;
     JOptionsTableMenuComponent.activeInstance = this;
 
-    setTimeout(() => {
+    queueMicrotask(() => {
       this.moveMenuToBody();
       this.applyMenuPosition();
-    }, 0);
+    });
+  }
+
+  handleClick(option: OptionsTable, group: unknown, event?: Event): void {
+    event?.stopPropagation();
+    this.clicked.emit({ option, group });
+    this.closeDropdown();
   }
 
-  private calculateMenuPosition(): void {
-    if (!this.buttonElement) return;
-    const rect = this.buttonElement.getBoundingClientRect();
+  @HostListener('document:keydown.escape')
+  handleEscape(): void {
+    if (this.isActiveMenuOption && this.closeOnEscape) {
+      this.closeDropdown();
+    }
+  }
 
-    this.menuPosition = {
-      top: rect.bottom + window.scrollY + 5,
-      left: rect.right - 150 + window.scrollX,
-    };
+  private handleDocumentClick(event: Event): void {
+    const target = event.target as Node;
+
+    if (
+      !this.elementRef.nativeElement.contains(target) &&
+      this.menuContainer &&
+      !this.menuContainer.nativeElement.contains(target) &&
+      this.isActiveMenuOption
+    ) {
+      this.closeDropdown();
+    }
   }
 
   private moveMenuToBody(): void {
-    if (this.movedToBody) return;
-    if (!this.menuContainer) return;
+    if (this.movedToBody || !this.menuContainer) {
+      return;
+    }
 
     const menuEl = this.menuContainer.nativeElement;
     this.originalParent = menuEl.parentNode;
@@ -115,7 +244,9 @@ export class JOptionsTableMenuComponent implements OnDestroy, AfterViewInit {
   }
 
   private restoreMenuToOriginalParent(): void {
-    if (!this.movedToBody || !this.menuContainer || !this.originalParent) return;
+    if (!this.movedToBody || !this.menuContainer || !this.originalParent) {
+      return;
+    }
 
     const menuEl = this.menuContainer.nativeElement;
     this.originalParent.appendChild(menuEl);
@@ -123,25 +254,47 @@ export class JOptionsTableMenuComponent implements OnDestroy, AfterViewInit {
   }
 
   private applyMenuPosition(): void {
-    if (!this.menuContainer) return;
+    if (!this.menuContainer || !this.buttonElement) {
+      return;
+    }
 
     const menuEl = this.menuContainer.nativeElement;
-    this.renderer.setStyle(menuEl, 'position', 'absolute');
-    this.renderer.setStyle(menuEl, 'top', `${this.menuPosition.top}px`);
-    this.renderer.setStyle(menuEl, 'left', `${this.menuPosition.left}px`);
-    this.renderer.setStyle(menuEl, 'z-index', '500');
+    const triggerRect = this.buttonElement.getBoundingClientRect();
+    const menuWidth = menuEl.offsetWidth || menuEl.getBoundingClientRect().width || 170;
+    const menuHeight = menuEl.offsetHeight || menuEl.getBoundingClientRect().height || 120;
+    const gap = 6;
+    const viewportPadding = 8;
+
+    let left =
+      this.align === 'end'
+        ? triggerRect.right - menuWidth
+        : triggerRect.left;
+
+    let top = triggerRect.bottom + gap;
+
+    left = Math.max(
+      viewportPadding,
+      Math.min(left, window.innerWidth - menuWidth - viewportPadding),
+    );
+
+    if (top + menuHeight > window.innerHeight - viewportPadding) {
+      top = triggerRect.top - menuHeight - gap;
+    }
+
+    top = Math.max(viewportPadding, top);
+
+    this.renderer.setStyle(menuEl, 'position', 'fixed');
+    this.renderer.setStyle(menuEl, 'top', `${top}px`);
+    this.renderer.setStyle(menuEl, 'left', `${left}px`);
+    this.renderer.setStyle(menuEl, 'z-index', `${JOptionsTableMenuComponent.MENU_Z_INDEX}`);
   }
 
   private closeDropdown(): void {
     this.isActiveMenuOption = false;
     this.restoreMenuToOriginalParent();
+
     if (JOptionsTableMenuComponent.activeInstance === this) {
       JOptionsTableMenuComponent.activeInstance = null;
     }
   }
-
-  handleClick(option: any, group: any): void {
-    this.clicked.emit({ option, group });
-    this.closeDropdown();
-  }
 }

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

@@ -0,0 +1,38 @@
+import { LucideIconData } from 'lucide-angular';
+import { OptionsTable } from 'tailjng';
+export type OptionsTableMenuClickEvent = {
+  option: OptionsTable;
+  group: unknown;
+};
+
+export type OptionsTableMenuIconResolver = (
+  icon: OptionsTable['icon'],
+  group: unknown,
+) => LucideIconData | undefined;
+
+export type OptionsTableMenuTextResolver = (
+  value: string | ((data?: unknown) => string),
+  group: unknown,
+) => string;
+
+export type OptionsTableMenuDisabledResolver = (
+  option: OptionsTable,
+  group: unknown,
+) => boolean;
+
+export type OptionsTableMenuVisibleResolver = (
+  option: OptionsTable,
+  group: unknown,
+) => boolean;
+
+export type OptionsTableMenuClassesResolver = (
+  ngClass: OptionsTable['ngClass'],
+  group: unknown,
+) => Record<string, boolean>;
+
+export type OptionsTableMenuLoadingResolver = (
+  type: string,
+  rowId?: string | number,
+) => boolean;
+
+export type OptionsTableMenuAlign = 'start' | 'end';