tailjng 0.1.6 → 0.1.7

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

@@ -0,0 +1,198 @@
+import { NgClass } from '@angular/common';
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnInit,
+  Optional,
+  Output,
+  SimpleChanges,
+  forwardRef,
+} from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { JGenericCrudService } from 'tailjng';
+import { Icons } from '../../.config/icons/icons.lucide';
+import { JIconComponent } from '../../icon/icon.component';
+import { normalizeToggleOptions } from '../shared/toggle-options.util';
+import { ToggleOption, ToggleRadioLayout, ToggleSortOrder } from '../shared/toggle-options.types';
+
+export type { ToggleOption, ToggleRadioLayout, ToggleSortOrder } from './toggle-radio.types';
+
+let radioGroupCounter = 0;
+
+/**
+ * Classic radio group with circular indicators and labels.
+ *
+ * Install: `npx tailjng add toggle-radio`
+ */
+@Component({
+  selector: 'JToggleRadio',
+  imports: [NgClass, JIconComponent],
+  templateUrl: './toggle-radio.component.html',
+  styleUrl: './toggle-radio.component.css',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => JToggleRadioComponent),
+      multi: true,
+    },
+  ],
+})
+export class JToggleRadioComponent implements OnInit, OnChanges, ControlValueAccessor {
+  readonly Icons = Icons;
+
+  @Input() name = `j-toggle-radio-${++radioGroupCounter}`;
+  @Input() endpoint = '';
+  @Input() options: unknown[] = [];
+  @Input() optionLabel = 'label';
+  @Input() optionValue = 'value';
+  @Input() sort: ToggleSortOrder = 'ASC';
+  @Input() defaultFilters: Record<string, unknown> = {};
+  @Input() loadOnInit = false;
+  @Input() selectFirstOnLoad = false;
+  @Input() isDisabled = false;
+  @Input() showClear = false;
+  @Input() layout: ToggleRadioLayout = 'vertical';
+  @Input() classes = '';
+  @Input() ngClasses: Record<string, boolean> = {};
+
+  @Output() selectionChange = new EventEmitter<unknown>();
+
+  internalOptions: ToggleOption[] = [];
+  selectedValue: unknown = null;
+  isLoading = false;
+  isComponentDisabled = false;
+
+  private onChange: (value: unknown) => void = () => {};
+  private onTouched: () => void = () => {};
+
+  constructor(@Optional() private readonly genericService: JGenericCrudService | null) {}
+
+  /**
+   * Whether user interaction is blocked.
+   */
+  get isInteractionDisabled(): boolean {
+    return this.isDisabled || this.isComponentDisabled;
+  }
+
+  /**
+   * Class map for the radio group container.
+   */
+  get groupClasses(): Record<string, boolean> {
+    return {
+      'j-radio-group': true,
+      'j-radio-group--horizontal': this.layout === 'horizontal',
+      'j-radio-group--disabled': this.isInteractionDisabled,
+      ...this.ngClasses,
+      [this.classes]: !!this.classes,
+    };
+  }
+
+  ngOnInit(): void {
+    if (this.endpoint && this.loadOnInit) {
+      this.loadOptionsFromApi();
+      return;
+    }
+
+    this.processOptions();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['options'] && !this.endpoint) {
+      this.processOptions();
+    }
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.isComponentDisabled = isDisabled;
+  }
+
+  loadOptionsFromApi(): void {
+    if (!this.genericService || !this.endpoint) {
+      return;
+    }
+
+    this.isLoading = true;
+
+    const params: Record<string, string> = {
+      sortOrder: this.sort,
+    };
+
+    Object.keys(this.defaultFilters).forEach((key) => {
+      params[`filter[${key}]`] = String(this.defaultFilters[key]);
+    });
+
+    this.genericService.findAll<unknown>({ endpoint: this.endpoint, params }).subscribe({
+      next: (res) => {
+        const data = (res.data as Record<string, unknown[]>)[this.endpoint] ?? [];
+        this.options = data;
+        this.processOptions();
+        this.isLoading = false;
+
+        if (this.selectFirstOnLoad && this.internalOptions.length > 0) {
+          this.select(this.internalOptions[0].value);
+        }
+      },
+      error: () => {
+        this.isLoading = false;
+      },
+    });
+  }
+
+  processOptions(): void {
+    this.internalOptions = normalizeToggleOptions(this.options, this.optionLabel, this.optionValue);
+  }
+
+  select(value: unknown): void {
+    if (this.isInteractionDisabled) {
+      return;
+    }
+
+    this.selectedValue = value;
+    this.onChange(this.selectedValue);
+    this.onTouched();
+    this.selectionChange.emit(this.selectedValue);
+  }
+
+  clear(): void {
+    this.selectedValue = null;
+    this.onChange(null);
+    this.onTouched();
+    this.selectionChange.emit(null);
+  }
+
+  writeValue(value: unknown): void {
+    this.selectedValue = value;
+  }
+
+  registerOnChange(fn: (value: unknown) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  reloadOptions(): void {
+    if (!this.genericService) {
+      return;
+    }
+
+    this.loadOptionsFromApi();
+  }
+
+  /**
+   * Whether an option is currently selected.
+   */
+  isSelected(value: unknown): boolean {
+    return this.selectedValue === value;
+  }
+
+  /**
+   * Stable track id for radio options.
+   */
+  optionId(value: unknown, index: number): string {
+    return `${this.name}-opt-${index}-${String(value)}`;
+  }
+}

package/src/lib/components/toggle-radio/toggle-radio/toggle-radio.types.ts

@@ -0,0 +1 @@
+export type { ToggleOption, ToggleRadioLayout, ToggleSortOrder } from '../shared/toggle-options.types';

package/src/lib/components/toggle-radio/toggle-segment/segment-toggle.component.css

@@ -0,0 +1,108 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+.j-segment-track {
+  display: flex;
+  min-height: 2.5rem;
+  overflow: hidden;
+  border: 1px solid var(--color-border);
+  border-radius: 0.5rem;
+  font-size: 0.875rem;
+  user-select: none;
+}
+
+:host-context(.dark) .j-segment-track,
+:host-context(html.dark) .j-segment-track {
+  border-color: var(--color-dark-border);
+}
+
+.j-segment-track--disabled {
+  opacity: 0.5;
+}
+
+.j-segment-item {
+  flex: 1 1 0;
+  padding: 0.5rem 1rem;
+  border: 0;
+  border-right: 1px solid var(--color-border);
+  background-color: var(--color-background);
+  color: var(--color-foreground);
+  font-weight: 500;
+  cursor: pointer;
+  transition:
+    background-color 0.2s ease,
+    color 0.2s ease;
+}
+
+.j-segment-item:last-child {
+  border-right: 0;
+}
+
+.j-segment-item:hover:not(.j-segment-item--selected):not(.j-segment-item--disabled) {
+  background-color: color-mix(in srgb, var(--color-muted) 45%, var(--color-background));
+}
+
+.j-segment-item--selected {
+  background-color: var(--color-primary);
+  color: var(--color-primary-foreground);
+}
+
+:host-context(.dark) .j-segment-item,
+:host-context(html.dark) .j-segment-item {
+  border-right-color: var(--color-dark-border);
+  background-color: var(--color-dark-background);
+  color: var(--color-dark-foreground);
+}
+
+:host-context(.dark) .j-segment-item--selected,
+:host-context(html.dark) .j-segment-item--selected {
+  background-color: var(--color-dark-primary);
+  color: var(--color-dark-primary-foreground);
+}
+
+.j-segment-item--disabled {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.j-segment-item:focus-visible {
+  outline: 2px solid var(--color-ring);
+  outline-offset: -2px;
+  z-index: 1;
+}
+
+.j-segment-state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  min-height: 2.5rem;
+  border: 1px solid var(--color-border);
+  border-radius: 0.5rem;
+  color: var(--color-foreground);
+  font-size: 0.875rem;
+}
+
+:host-context(.dark) .j-segment-state,
+:host-context(html.dark) .j-segment-state {
+  border-color: var(--color-dark-border);
+  color: var(--color-dark-foreground);
+}
+
+.j-segment-clear {
+  margin-top: 0.5rem;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--color-destructive);
+  font-size: 0.75rem;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.j-segment-clear:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}

package/src/lib/components/toggle-radio/toggle-segment/segment-toggle.component.html

@@ -0,0 +1,37 @@
+@if (internalOptions.length > 0) {
+  <div [ngClass]="trackClasses">
+    @for (opt of internalOptions; track $index) {
+      <button
+        type="button"
+        [disabled]="isInteractionDisabled"
+        [ngClass]="segmentClasses(opt.value)"
+        (click)="select(opt.value)"
+      >
+        {{ opt.label }}
+      </button>
+    }
+  </div>
+} @else if (isLoading) {
+  <div class="j-segment-state">
+    <JIcon
+      [icon]="Icons.Loader2"
+      [size]="16"
+      iconClass="animate-spin text-muted-foreground"
+      [ariaHidden]="true"
+    />
+    <span>Cargando...</span>
+  </div>
+} @else {
+  <div class="j-segment-state">No hay opciones</div>
+}
+
+@if (showClear && selectedValue !== null) {
+  <button
+    type="button"
+    class="j-segment-clear"
+    (click)="clear()"
+    [disabled]="isInteractionDisabled"
+  >
+    Limpiar selección
+  </button>
+}

package/src/lib/components/toggle-radio/toggle-segment/segment-toggle.component.ts

@@ -0,0 +1,193 @@
+import { NgClass } from '@angular/common';
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnInit,
+  Optional,
+  Output,
+  SimpleChanges,
+  forwardRef,
+} from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { JGenericCrudService } from 'tailjng';
+import { Icons } from '../../.config/icons/icons.lucide';
+import { JIconComponent } from '../../icon/icon.component';
+import { normalizeToggleOptions } from '../shared/toggle-options.util';
+import { ToggleOption, ToggleSortOrder } from '../shared/toggle-options.types';
+
+export type { ToggleOption, ToggleSortOrder } from './segment-toggle.types';
+
+/**
+ * Segmented single-select control (pill/tab style).
+ *
+ * Install: `npx tailjng add toggle-segment`
+ */
+@Component({
+  selector: 'JToggleSegment',
+  imports: [NgClass, JIconComponent],
+  templateUrl: './segment-toggle.component.html',
+  styleUrl: './segment-toggle.component.css',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => JToggleSegmentComponent),
+      multi: true,
+    },
+  ],
+})
+export class JToggleSegmentComponent implements OnInit, OnChanges, ControlValueAccessor {
+  readonly Icons = Icons;
+
+  @Input() endpoint = '';
+  @Input() options: unknown[] = [];
+  @Input() optionLabel = 'label';
+  @Input() optionValue = 'value';
+  @Input() sort: ToggleSortOrder = 'ASC';
+  @Input() defaultFilters: Record<string, unknown> = {};
+  @Input() loadOnInit = false;
+  @Input() selectFirstOnLoad = false;
+  @Input() isDisabled = false;
+  @Input() showClear = false;
+  @Input() classes = '';
+  @Input() classesElement = '';
+  @Input() ngClasses: Record<string, boolean> = {};
+
+  @Output() selectionChange = new EventEmitter<unknown>();
+
+  internalOptions: ToggleOption[] = [];
+  selectedValue: unknown = null;
+  isLoading = false;
+  isComponentDisabled = false;
+
+  private onChange: (value: unknown) => void = () => {};
+  private onTouched: () => void = () => {};
+
+  constructor(@Optional() private readonly genericService: JGenericCrudService | null) {}
+
+  /**
+   * Whether user interaction is blocked.
+   */
+  get isInteractionDisabled(): boolean {
+    return this.isDisabled || this.isComponentDisabled;
+  }
+
+  /**
+   * Class map for the segmented track shell.
+   */
+  get trackClasses(): Record<string, boolean> {
+    return {
+      'j-segment-track': true,
+      'j-segment-track--disabled': this.isInteractionDisabled,
+      ...this.ngClasses,
+      [this.classes]: !!this.classes,
+    };
+  }
+
+  ngOnInit(): void {
+    if (this.endpoint && this.loadOnInit) {
+      this.loadOptionsFromApi();
+      return;
+    }
+
+    this.processOptions();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['options'] && !this.endpoint) {
+      this.processOptions();
+    }
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.isComponentDisabled = isDisabled;
+  }
+
+  loadOptionsFromApi(): void {
+    if (!this.genericService || !this.endpoint) {
+      return;
+    }
+
+    this.isLoading = true;
+
+    const params: Record<string, string> = {
+      sortOrder: this.sort,
+    };
+
+    Object.keys(this.defaultFilters).forEach((key) => {
+      params[`filter[${key}]`] = String(this.defaultFilters[key]);
+    });
+
+    this.genericService.findAll<unknown>({ endpoint: this.endpoint, params }).subscribe({
+      next: (res) => {
+        const data = (res.data as Record<string, unknown[]>)[this.endpoint] ?? [];
+        this.options = data;
+        this.processOptions();
+        this.isLoading = false;
+
+        if (this.selectFirstOnLoad && this.internalOptions.length > 0) {
+          this.select(this.internalOptions[0].value);
+        }
+      },
+      error: () => {
+        this.isLoading = false;
+      },
+    });
+  }
+
+  processOptions(): void {
+    this.internalOptions = normalizeToggleOptions(this.options, this.optionLabel, this.optionValue);
+  }
+
+  select(value: unknown): void {
+    if (this.isInteractionDisabled) {
+      return;
+    }
+
+    this.selectedValue = value;
+    this.onChange(this.selectedValue);
+    this.onTouched();
+    this.selectionChange.emit(this.selectedValue);
+  }
+
+  clear(): void {
+    this.selectedValue = null;
+    this.onChange(null);
+    this.onTouched();
+    this.selectionChange.emit(null);
+  }
+
+  writeValue(value: unknown): void {
+    this.selectedValue = value;
+  }
+
+  registerOnChange(fn: (value: unknown) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  reloadOptions(): void {
+    if (!this.genericService) {
+      return;
+    }
+
+    this.loadOptionsFromApi();
+  }
+
+  /**
+   * Class map for a segment button.
+   */
+  segmentClasses(value: unknown): Record<string, boolean> {
+    const selected = this.selectedValue === value;
+    return {
+      'j-segment-item': true,
+      'j-segment-item--selected': selected,
+      'j-segment-item--disabled': this.isInteractionDisabled,
+      [this.classesElement]: !!this.classesElement,
+    };
+  }
+}

package/src/lib/components/toggle-radio/toggle-segment/segment-toggle.types.ts

@@ -0,0 +1 @@
+export type { ToggleOption, ToggleSortOrder } from '../shared/toggle-options.types';

package/src/lib/components/tooltip/tooltip.directive.ts

@@ -1,5 +1,6 @@
 import { Directive, ElementRef, Input, OnDestroy, HostListener, NgZone, TemplateRef, ViewContainerRef, } from "@angular/core"
 import { JTooltipService } from "./tooltip.service"
+import { TooltipPosition } from "./tooltip.types"
 
 @Directive({
   selector: '[jTooltip]'
@@ -8,8 +9,12 @@ export class JTooltipDirective implements OnDestroy {
 
   @Input("jTooltip") content!: string | TemplateRef<any>;
 
-  @Input() jTooltipPosition: "top" | "right" | "bottom" | "left" = "top";
+  // Preferred position relative to the host (may flip when space is limited).
+  @Input() jTooltipPosition: TooltipPosition = "top";
+  // Show the arrow pointing at the anchor element.
   @Input() jTooltipShowArrow = true;
+  // Automatically flip position when the tooltip does not fit in the viewport.
+  @Input() jTooltipAutoFlip = true;
 
   @Input() jTooltipOffsetX = 0;
   @Input() jTooltipOffsetY = 0;
@@ -31,7 +36,7 @@ export class JTooltipDirective implements OnDestroy {
     private readonly zone: NgZone,
     private readonly viewContainerRef: ViewContainerRef,
   ) {
-    // Detected tactile devices
+    // Detect touch devices
     this.isTouchDevice = "ontouchstart" in window || navigator.maxTouchPoints > 0
   }
 
@@ -238,6 +243,7 @@ export class JTooltipDirective implements OnDestroy {
         this.jTooltipShowArrow,
         this.jTooltipOffsetX,
         this.jTooltipOffsetY,
+        this.jTooltipAutoFlip,
       )
     })
   }
@@ -245,8 +251,7 @@ export class JTooltipDirective implements OnDestroy {
 
 
   /**
-   * Start mouse tracking to update tooltip position.
-   * This method sets an interval to update the tooltip position based on mouse movements.
+   * Hides the tooltip and stops mouse tracking.
    */
   private hide() {
     this.isTooltipVisible = false
@@ -259,9 +264,7 @@ export class JTooltipDirective implements OnDestroy {
 
 
   /**
-   * Stop mouse tracking by clearing the interval and removing global event listeners.
-   * This method ensures that no multiple intervals are running and cleans up the event listeners.
-   * @return
+   * Starts mouse tracking to hide the tooltip when the pointer leaves the host.
    */
   private startMouseTracking() {
     this.stopMouseTracking();
@@ -270,11 +273,11 @@ export class JTooltipDirective implements OnDestroy {
       this.mouseTrackingInterval = setInterval(() => {
         if (!this.isTooltipVisible) return
 
-        // Obtener la posición actual del mouse
+        // Get the current mouse position
         const mouseEvent = this.getLastMousePosition()
         if (!mouseEvent) return
 
-        // Verificar si el mouse sigue sobre el elemento
+        // Check whether the mouse is still over the element
         const elementUnderMouse = document.elementFromPoint(mouseEvent.clientX, mouseEvent.clientY)
         const isMouseOverElement =
           this.el.nativeElement.contains(elementUnderMouse) || this.el.nativeElement === elementUnderMouse