tailjng 0.1.6 → 0.1.7

package/src/lib/components/input/input-file/file-input.component.ts

@@ -1,130 +1,249 @@
-import { Component, Input, forwardRef, ViewChild, ElementRef, OnChanges, SimpleChanges, OnDestroy } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { NgClass, CommonModule } from '@angular/common';
-import { LucideAngularModule } from 'lucide-angular';
-import { JAlertToastService, JIconsService } from 'tailjng';
-
+import { NgClass, NgStyle } from '@angular/common';
+import {
+  Component,
+  ElementRef,
+  Input,
+  OnDestroy,
+  OnInit,
+  ViewChild,
+  forwardRef,
+} from '@angular/core';
+import {
+  ControlValueAccessor,
+  FormsModule,
+  NG_VALUE_ACCESSOR,
+  ReactiveFormsModule,
+} from '@angular/forms';
+import { JAlertToastService } from 'tailjng';
+import { Icons } from '../../.config/icons/icons.lucide';
+import {
+  INPUT_DISABLED_OVERLAY_CLASSES,
+  INPUT_FILE_LABEL_LAYOUT_CLASSES,
+  INPUT_FOCUS_WITHIN_CLASSES,
+  INPUT_PADDING_X_SINGLE,
+  INPUT_SINGLE_LINE_HEIGHT_CLASSES,
+  INPUT_SURFACE_CLASSES,
+  inputActionButtonClasses,
+  mergeInputClasses,
+} from '../../.config/input/input.classes';
+import { JIconComponent } from '../../icon/icon.component';
+import { FileInputValue } from './file-input.types';
+
+export type { FileInputValue } from './file-input.types';
+
+/**
+ * File input with image preview, clipboard paste, and optional clear button.
+ *
+ * Install: `npx tailjng add input-file`
+ */
 @Component({
   selector: 'JFileInput',
-  imports: [FormsModule, ReactiveFormsModule, NgClass, LucideAngularModule, CommonModule],
+  imports: [FormsModule, ReactiveFormsModule, NgClass, NgStyle, JIconComponent],
   templateUrl: './file-input.component.html',
   styleUrl: './file-input.component.css',
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
       useExisting: forwardRef(() => JFileInputComponent),
-      multi: true
-    }
-  ]
+      multi: true,
+    },
+  ],
 })
-export class JFileInputComponent implements ControlValueAccessor, OnChanges, OnDestroy {
+export class JFileInputComponent implements ControlValueAccessor, OnInit, OnDestroy {
+  // Project Icons registry — template usage: Icons.Upload, Icons.X, Icons.Clipboard
+  readonly Icons = Icons;
 
   @Input() id?: string;
   @Input() name?: string;
-  @Input() accept: string = '';
-  @Input() multiple: boolean = false;
-  @Input() isDisabled: boolean = false;
-  @Input() required: boolean = false;
-  @Input() clearButton: boolean = false;
-  @Input() showImage: boolean = false;
-  @Input() widthImgFile: number = 0;
-  @Input() heightImgFile: number = 0;
 
-  @ViewChild('fileInput') fileInputRef!: ElementRef<HTMLInputElement>;
+  // Native accept attribute (e.g. "image/*", ".pdf")
+  @Input() accept = '';
 
-  private _innerValue: any = null;
-  private _previewUrl: string | null = null;
-  private _fileInputCleared = false;
+  // Allow selecting multiple files
+  @Input() multiple = false;
 
-  private readonly _uniqueId: string;
+  @Input() isDisabled = false;
+  @Input() required = false;
 
-  // Public Getters
-  get innerValue(): any {
-    return this._innerValue;
-  }
+  // Show clear (X) button when a file is selected
+  @Input() clearButton = false;
 
-  get previewUrl(): string | null {
-    return this._previewUrl;
-  }
+  // Show image preview below the field when value is an image
+  @Input() showImage = false;
 
-  get fileInputCleared(): boolean {
-    return this._fileInputCleared;
-  }
+  // Preview dimensions in px; 0 = width 100% / height auto
+  @Input() widthImgFile = 0;
+  @Input() heightImgFile = 0;
 
-  get value(): any {
-    return this._innerValue;
-  }
+  // Placeholder when no file is selected
+  @Input() placeholder = 'Select file...';
 
-  // ControlValueAccessor callbacks
-  private _onChange: (value: any) => void = () => { };
-  private _onTouched: () => void = () => { };
+  // Extra Tailwind classes on the visible label
+  @Input() classes = '';
 
-  constructor(
-    public readonly iconsService: JIconsService,
-    private readonly alertToastService: JAlertToastService,
-  ) {
-    // ID unique
-    this._uniqueId = this.generateUniqueId();
+  // Extra conditional classes on the visible label
+  @Input() ngClasses: Record<string, boolean> = {};
+
+  @ViewChild('fileInput') fileInputRef!: ElementRef<HTMLInputElement>;
+
+  private innerValue: FileInputValue = null;
+  private previewUrl: string | null = null;
+  private fileInputCleared = false;
+  private readonly uniqueId: string;
+
+  private onChange: (value: FileInputValue) => void = () => {};
+  private onTouched: () => void = () => {};
+
+  constructor(private readonly alertToastService: JAlertToastService) {
+    this.uniqueId = this.generateUniqueId();
   }
 
-  ngOnDestroy(): void {
-    if (this._previewUrl && this._previewUrl.startsWith('blob:')) {
-      URL.revokeObjectURL(this._previewUrl);
+  ngOnInit(): void {
+    if (!this.id) {
+      this.id = this.uniqueId;
     }
   }
 
-  private generateUniqueId(): string {
-    return 'file-input-' + Math.random().toString(36).substr(2, 9) + '-' + Date.now();
+  ngOnDestroy(): void {
+    this.revokePreviewUrl();
   }
 
+  /**
+   * Whether a file (or files) is currently selected.
+   * @returns `true` when `innerValue` is set.
+   */
+  get hasValue(): boolean {
+    if (this.innerValue == null) {
+      return false;
+    }
+    if (Array.isArray(this.innerValue)) {
+      return this.innerValue.length > 0;
+    }
+    return true;
+  }
 
+  /**
+   * Whether the clear button should be visible.
+   * @returns `true` when `clearButton` is enabled and a file is selected.
+   */
+  get showClearButton(): boolean {
+    return this.clearButton && this.hasValue;
+  }
 
   /**
-   * Writes a value to the component.
+   * Blob URL for the current image preview.
+   * @returns Preview URL or `null`.
    */
-  writeValue(val: any): void {
-    this._innerValue = val;
+  get previewImageUrl(): string | null {
+    return this.previewUrl;
+  }
 
-    // Clean previous preview if exists
-    if (this._previewUrl && this._previewUrl.startsWith('blob:')) {
-      URL.revokeObjectURL(this._previewUrl);
+  /**
+   * Whether the image preview block should render.
+   * @returns `true` when preview URL exists and `showImage` is enabled.
+   */
+  get showPreview(): boolean {
+    return !!this.previewUrl && this.showImage;
+  }
+
+  /**
+   * Label text for the selected file(s).
+   * @returns File name, count summary, or `null` when empty.
+   */
+  get displayFileName(): string | null {
+    if (!this.hasValue || this.innerValue == null) {
+      return null;
     }
 
-    // If the value is null or empty, clear the preview
-    if (!val) {
-      this._previewUrl = null;
-      if (this.fileInputRef?.nativeElement) {
-        this.fileInputRef.nativeElement.value = "";
-        this._fileInputCleared = true;
+    if (Array.isArray(this.innerValue)) {
+      if (this.innerValue.length === 1) {
+        return this.innerValue[0].name;
       }
-    } else if (val instanceof File && val.type?.startsWith("image")) {
-      this.createPreview(val);
+      return `${this.innerValue.length} files selected`;
     }
+
+    return this.innerValue.name;
   }
 
+  /**
+   * Inline styles for the preview image.
+   * @returns Width/height based on `widthImgFile` and `heightImgFile`.
+   */
+  get previewStyles(): Record<string, string> {
+    return {
+      width: this.widthImgFile ? `${this.widthImgFile}px` : '100%',
+      height: this.heightImgFile ? `${this.heightImgFile}px` : 'auto',
+    };
+  }
 
+  /**
+   * Class map for the visible file picker label.
+   * @returns Base styles merged with `ngClasses` and disabled state.
+   */
+  get computedClasses(): Record<string, boolean> {
+    return mergeInputClasses(
+      INPUT_SURFACE_CLASSES,
+      INPUT_SINGLE_LINE_HEIGHT_CLASSES,
+      INPUT_FOCUS_WITHIN_CLASSES,
+      INPUT_PADDING_X_SINGLE,
+      INPUT_FILE_LABEL_LAYOUT_CLASSES,
+      this.ngClasses,
+      this.isDisabled
+        ? mergeInputClasses(INPUT_DISABLED_OVERLAY_CLASSES, { 'pointer-events-none': true })
+        : {},
+    );
+  }
 
   /**
-   * Registers a callback function that is called when the value changes.
+   * Class map for icon action buttons (clear, clipboard).
+   * @returns Theme-aware hover utilities.
    */
-  registerOnChange(fn: (value: any) => void): void {
-    this._onChange = fn;
+  get actionButtonClasses(): Record<string, boolean> {
+    return inputActionButtonClasses(this.isDisabled);
   }
 
+  /**
+   * Writes the value from Angular forms into the view.
+   * @param value File, array of files, or null.
+   */
+  writeValue(value: FileInputValue): void {
+    this.innerValue = value;
+    this.revokePreviewUrl();
+
+    if (!value) {
+      this.previewUrl = null;
+      if (this.fileInputRef?.nativeElement) {
+        this.fileInputRef.nativeElement.value = '';
+        this.fileInputCleared = true;
+      }
+      return;
+    }
 
+    const file = Array.isArray(value) ? value[0] : value;
+    if (file?.type?.startsWith('image/')) {
+      this.createPreview(file);
+    }
+  }
 
+  /**
+   * Registers the change callback for Angular forms.
+   * @param fn Callback invoked when the value changes.
+   */
+  registerOnChange(fn: (value: FileInputValue) => void): void {
+    this.onChange = fn;
+  }
 
   /**
-   * Registers a callback function that is called when the input is touched.
+   * Registers the touched callback for Angular forms.
+   * @param fn Callback invoked when the control is touched.
    */
   registerOnTouched(fn: () => void): void {
-    this._onTouched = fn;
+    this.onTouched = fn;
   }
 
-
-
   /**
-   * Sets the isDisabled state of the component.
+   * Syncs disabled state from Angular forms.
+   * @param isDisabled Whether the control is disabled.
    */
   setDisabledState(isDisabled: boolean): void {
     this.isDisabled = isDisabled;
@@ -133,122 +252,102 @@ export class JFileInputComponent implements ControlValueAccessor, OnChanges, OnD
     }
   }
 
-
-
   /**
-   * Handles changes to the component's inputs.
-   */
-  ngOnChanges(changes: SimpleChanges): void {
-    // Si no hay ID proporcionado, usar el único generado
-    if (!this.id) {
-      this.id = this._uniqueId;
-    }
-  }
-
-
-
-  /**
-   * Handles the file selection event.
+   * Handles native file selection.
+   * @param event Change event from the hidden file input.
    */
   onFileSelected(event: Event): void {
     const input = event.target as HTMLInputElement;
     const files = input.files;
 
-    if (files && files.length > 0) {
-      const value = this.multiple ? Array.from(files) : files[0];
-      this._innerValue = value;
-      this._onChange(value);
-      this._onTouched();
-      this._fileInputCleared = false;
-
-      if (!this.multiple && value instanceof File && value.type?.startsWith("image")) {
-        this.createPreview(value);
-      } else {
-        if (this._previewUrl && this._previewUrl.startsWith('blob:')) {
-          URL.revokeObjectURL(this._previewUrl);
-        }
-        this._previewUrl = null;
-      }
+    if (!files?.length) {
+      return;
     }
-  }
-
 
+    const value: FileInputValue = this.multiple ? Array.from(files) : files[0];
+    this.innerValue = value;
+    this.onChange(value);
+    this.onTouched();
+    this.fileInputCleared = false;
+
+    const previewFile = Array.isArray(value) ? value[0] : value;
+    if (!this.multiple && previewFile?.type?.startsWith('image/')) {
+      this.createPreview(previewFile);
+    } else {
+      this.revokePreviewUrl();
+      this.previewUrl = null;
+    }
+  }
 
   /**
-   * Creates a preview URL for an image file
+   * Marks the control as touched on blur.
    */
-  private createPreview(file: File): void {
-    if (this._previewUrl && this._previewUrl.startsWith('blob:')) {
-      URL.revokeObjectURL(this._previewUrl);
-    }
-
-    this._previewUrl = URL.createObjectURL(file);
+  onBlur(): void {
+    this.onTouched();
   }
 
-
-
   /**
-   * Clears the file input and resets the preview URL.
+   * Clears the selected file(s) and resets the native input.
+   * @param event Click event to avoid triggering the file dialog.
    */
-  clearFile(): void {
-    if (this._previewUrl && this._previewUrl.startsWith('blob:')) {
-      URL.revokeObjectURL(this._previewUrl);
-    }
-
-    this._innerValue = null;
-    this._previewUrl = null;
-    this._onChange(this.multiple ? [] : null);
-    this._onTouched();
-
-    // Reset the file input field
-    if (this.fileInputRef?.nativeElement) {
-      this.fileInputRef.nativeElement.value = "";
-      this._fileInputCleared = true;
-    }
+  onClearClick(event: MouseEvent): void {
+    event.preventDefault();
+    event.stopPropagation();
+    this.clearFile();
   }
 
-
-
   /**
-   * Method called when input is touched (for template)
+   * Pastes an image from the clipboard into the field.
+   * @param event Click event — stopped so the label does not open the file dialog.
    */
-  onTouched(): void {
-    this._onTouched();
+  onClipboardClick(event: MouseEvent): void {
+    event.preventDefault();
+    event.stopPropagation();
+    void this.getImageFromClipboard();
   }
 
-
-
   /**
-   * Resets the file input to its initial state.
+   * Clears the selected file(s) and notifies Angular forms.
    */
+  clearFile(): void {
+    this.revokePreviewUrl();
+    this.innerValue = null;
+    this.previewUrl = null;
+    this.onChange(this.multiple ? [] : null);
+    this.onTouched();
+
+    if (this.fileInputRef?.nativeElement) {
+      this.fileInputRef.nativeElement.value = '';
+      this.fileInputCleared = true;
+    }
+  }
+
+  /** Alias for {@link clearFile}. */
   resetFileInput(): void {
     this.clearFile();
   }
 
-
-
   /**
-   * Obtains an image from the clipboard and sets it as the input value.
-   * @returns 
+   * Reads an image from the clipboard and sets it as the field value.
    */
   async getImageFromClipboard(): Promise<void> {
-    try {
+    if (this.isDisabled) {
+      return;
+    }
 
-      // Verify support
+    try {
       if (!('clipboard' in navigator) || typeof navigator.clipboard.read !== 'function') {
         this.alertToastService.AlertToast({
           type: 'warning',
           title: 'No soportado',
           description: 'Tu navegador no soporta leer imágenes del portapapeles.',
-        })
+        });
         return;
       }
 
       const clipboardItems = await navigator.clipboard.read();
-
-      // Search for the first item that has an image type
-      const imageItem = clipboardItems.find(item =>
-        item.types.some(t => t.startsWith('image/'))
+      const imageItem = clipboardItems.find((item) =>
+        item.types.some((type) => type.startsWith('image/')),
       );
 
       if (!imageItem) {
@@ -256,42 +355,30 @@ export class JFileInputComponent implements ControlValueAccessor, OnChanges, OnD
           type: 'info',
           title: 'Imagen no encontrada',
           description: 'No se encontró una imagen en el portapapeles.',
-        })
+        });
         return;
       }
 
-      // Get the first image type available
-      const imageType = imageItem.types.find(t => t.startsWith('image/')) || 'image/png';
+      const imageType = imageItem.types.find((type) => type.startsWith('image/')) ?? 'image/png';
       const blob = await imageItem.getType(imageType);
-
-      // Create a File from the Blob so the form has a real file
       const extension = imageType.split('/')[1] || 'png';
       const fileFromClipboard = new File(
         [blob],
         `clipboard-${Date.now()}.${extension}`,
-        { type: imageType }
+        { type: imageType },
       );
 
-      // Update the internal value just like in onFileSelected
-      const value = this.multiple ? [fileFromClipboard] : fileFromClipboard;
-      this._innerValue = value;
-      this._fileInputCleared = false;
-
-      // Notify the reactive form
-      this._onChange(value);
-      this._onTouched();
-
-      // Update the preview reusing existing logic
-      if (!this.multiple && fileFromClipboard.type?.startsWith('image')) {
-        if (this._previewUrl && this._previewUrl.startsWith('blob:')) {
-          URL.revokeObjectURL(this._previewUrl);
-        }
-        this._previewUrl = URL.createObjectURL(fileFromClipboard);
-        // this.showImage = true;
-      }
+      const value: FileInputValue = this.multiple ? [fileFromClipboard] : fileFromClipboard;
+      this.innerValue = value;
+      this.fileInputCleared = false;
+      this.onChange(value);
+      this.onTouched();
 
+      if (!this.multiple && fileFromClipboard.type.startsWith('image/')) {
+        this.createPreview(fileFromClipboard);
+      }
     } catch (err) {
-      console.error('Error al obtener la imagen del portapapeles:', err);
+      console.error('Error reading image from clipboard:', err);
       this.alertToastService.AlertToast({
         type: 'error',
         title: 'Error',
@@ -300,5 +387,21 @@ export class JFileInputComponent implements ControlValueAccessor, OnChanges, OnD
     }
   }
 
+  /** Creates an object URL preview for an image file. */
+  private createPreview(file: File): void {
+    this.revokePreviewUrl();
+    this.previewUrl = URL.createObjectURL(file);
+  }
+
+  /** Revokes a blob preview URL when present. */
+  private revokePreviewUrl(): void {
+    if (this.previewUrl?.startsWith('blob:')) {
+      URL.revokeObjectURL(this.previewUrl);
+    }
+  }
 
+  /** Generates a stable fallback id when `[id]` is omitted. */
+  private generateUniqueId(): string {
+    return `file-input-${Math.random().toString(36).slice(2, 11)}-${Date.now()}`;
+  }
 }

package/src/lib/components/input/input-file/file-input.types.ts

@@ -0,0 +1,2 @@
+/** Value held by {@link JFileInputComponent} (single or multiple files). */
+export type FileInputValue = File | File[] | null;

package/src/lib/components/input/input-range/range-input.component.css

@@ -0,0 +1,67 @@
+.j-range-input {
+  width: 100%;
+  height: 1.25rem;
+  appearance: none;
+  cursor: pointer;
+  border-radius: 0.5rem;
+  border: 1px solid var(--color-border);
+  background-color: var(--color-background);
+  transition: box-shadow 200ms;
+}
+
+.dark .j-range-input {
+  border-color: var(--color-dark-border);
+  background-color: var(--color-dark-background);
+}
+
+.j-range-input:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--color-primary);
+}
+
+.dark .j-range-input:focus {
+  box-shadow: 0 0 0 2px var(--color-dark-primary);
+}
+
+.j-range-input:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.j-range-input::-webkit-slider-thumb {
+  appearance: none;
+  height: 2rem;
+  width: 2rem;
+  border-radius: 9999px;
+  cursor: pointer;
+  background-color: var(--color-dark-primary);
+}
+
+.dark .j-range-input::-webkit-slider-thumb {
+  background-color: var(--color-primary);
+}
+
+.j-range-input::-webkit-slider-thumb:hover {
+  background-color: var(--color-primary);
+}
+
+.dark .j-range-input::-webkit-slider-thumb:hover {
+  background-color: var(--color-dark-primary);
+}
+
+.j-range-input::-moz-range-thumb {
+  height: 1rem;
+  width: 1rem;
+  border: none;
+  border-radius: 9999px;
+  cursor: pointer;
+  background-color: var(--color-primary);
+}
+
+.j-range-input::-moz-range-thumb:hover {
+  background-color: var(--color-primary);
+}
+
+.dark .j-range-input::-moz-range-thumb:hover {
+  background-color: var(--color-dark-primary);
+}