tailjng 0.1.6 → 0.1.8

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

@@ -1,107 +1,184 @@
+import { NgClass } from '@angular/common';
 import { Component, Input, forwardRef } from '@angular/core';
-import { FormsModule, ReactiveFormsModule, ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { NgClass, CommonModule } from '@angular/common';
-import { LucideAngularModule } from 'lucide-angular';
-import { JIconsService } from 'tailjng';
-
+import {
+  ControlValueAccessor,
+  FormsModule,
+  NG_VALUE_ACCESSOR,
+  ReactiveFormsModule,
+} from '@angular/forms';
+import { Icons } from '../../.config/icons/icons.lucide';
+import {
+  INPUT_DISABLED_OVERLAY_CLASSES,
+  INPUT_FOCUS_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 { JInputType } from './input.types';
+
+export type { JInputType } from './input.types';
+
+/**
+ * Text input with ControlValueAccessor, clear button, and theme-aware styling.
+ *
+ * Install: `npx tailjng add input`
+ */
 @Component({
   selector: 'JInput',
-  imports: [FormsModule, ReactiveFormsModule, NgClass, LucideAngularModule, CommonModule],
+  imports: [FormsModule, ReactiveFormsModule, NgClass, JIconComponent],
   templateUrl: './input.component.html',
-  styleUrls: ['./input.component.css'],
+  styleUrl: './input.component.css',
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
       useExisting: forwardRef(() => JInputComponent),
-      multi: true
-    }
-  ]
+      multi: true,
+    },
+  ],
 })
 export class JInputComponent implements ControlValueAccessor {
+  // Project Icons registry — template usage: Icons.X
+  readonly Icons = Icons;
 
-  @Input() type: 'text' | 'password' | 'number' | 'date' | 'datetime-local' | 'email' = 'text';
+  // Native input type
+  @Input() type: JInputType = 'text';
 
   @Input() id?: string;
   @Input() name?: string;
-  @Input() placeholder: string = '';
+  @Input() placeholder = '';
+
+  @Input() isDisabled = false;
+  @Input() isReadonly = false;
+  @Input() required = false;
+
+  // Show clear (X) button when the field has a value
+  @Input() clearButton = false;
+
+  // Extra Tailwind classes on the `<input>`
+  @Input() classes = '';
 
-  @Input() isDisabled: boolean = false;
-  @Input() isReadonly: boolean = false;
-  @Input() required: boolean = false;
-  @Input() clearButton: boolean = false;
+  // Extra conditional classes (same role as [ngClass] on the input)
+  @Input() ngClasses: Record<string, boolean> = {};
 
-  @Input() classes: string = '';
-  @Input() ngClass: { [key: string]: boolean } = {};
+  innerValue = '';
 
-  innerValue: any = '';
+  private onChange: (value: string) => void = () => {};
+  private onTouched: () => void = () => {};
 
-  get value(): any {
+  /**
+   * Current value bound to the native input.
+   * @returns The internal string value.
+   */
+  get value(): string {
     return this.innerValue;
   }
 
-  set value(val: any) {
-    if (val !== this.innerValue) {
-      this.innerValue = val;
-      this.onChange(val);
-    }
+  /**
+   * Whether the clear button should be visible.
+   * @returns `true` when `clearButton` is enabled and the field is not empty.
+   */
+  get showClearButton(): boolean {
+    return this.clearButton && this.hasValue;
   }
 
-  get combinedNgClass() {
-    return {
-      ...(this.ngClass || {}),
-      'opacity-50': this.isDisabled
-    };
+  /**
+   * Whether the field has a non-empty value.
+   * @returns `true` when `innerValue` is not an empty string.
+   */
+  get hasValue(): boolean {
+    return this.innerValue !== '';
   }
 
-  // ControlValueAccessor methods
-  onChange: any = () => { };
-  onTouched: any = () => { };
+  /**
+   * Whether to show the fake date placeholder overlay (mobile / coarse pointer).
+   * @returns `true` for date inputs with placeholder and no value yet.
+   */
+  get showDatePlaceholder(): boolean {
+    return this.type === 'date' && !this.hasValue && !!this.placeholder;
+  }
 
-  constructor(public readonly iconsService: JIconsService) { }
+  /**
+   * Class map for the native `<input>` element.
+   * @returns Base input styles merged with `ngClasses` and disabled opacity.
+   */
+  get computedClasses(): Record<string, boolean> {
+    return mergeInputClasses(
+      INPUT_SURFACE_CLASSES,
+      INPUT_SINGLE_LINE_HEIGHT_CLASSES,
+      INPUT_FOCUS_CLASSES,
+      INPUT_PADDING_X_SINGLE,
+      this.ngClasses,
+      { 'pr-3': !this.clearButton, 'pr-7': this.clearButton },
+      this.isDisabled ? INPUT_DISABLED_OVERLAY_CLASSES : {},
+    );
+  }
 
   /**
-   * Writes a value to the component.
-   * @param value - The value to write.
+   * Class map for the clear button.
+   * @returns Hover and disabled utilities for the clear control.
    */
-  writeValue(value: any): void {
-    if (value !== undefined) {
-      this.value = value;
-    }
+  get clearButtonClasses(): Record<string, boolean> {
+    return inputActionButtonClasses(this.isDisabled);
   }
 
   /**
-   * Registers a callback function to be called when the input value changes.
-   * @param fn - The callback function to register.
+   * Writes the value from the form model into the view.
+   * @param value Value from Angular forms.
    */
-  registerOnChange(fn: (value: any) => void): void {
+  writeValue(value: unknown): void {
+    this.innerValue = value != null ? String(value) : '';
+  }
+
+  /**
+   * Registers the change callback for Angular forms.
+   * @param fn Callback invoked when the value changes.
+   */
+  registerOnChange(fn: (value: string) => void): void {
     this.onChange = fn;
   }
 
   /**
-   * Registers a callback function to be called when the input is touched.
-   * @param fn - The callback function to register.
+   * Registers the touched callback for Angular forms.
+   * @param fn Callback invoked when the control is touched.
    */
   registerOnTouched(fn: () => void): void {
     this.onTouched = fn;
   }
 
   /**
-   * Writes a value to the component.
-   * @param event 
+   * Syncs disabled state from Angular forms.
+   * @param isDisabled Whether the control is disabled.
+   */
+  setDisabledState(isDisabled: boolean): void {
+    this.isDisabled = isDisabled;
+  }
+
+  /**
+   * Handles native input events and propagates the value to forms.
+   * @param event Native input event.
    */
   onInput(event: Event): void {
-    const target = event.target as HTMLInputElement | HTMLTextAreaElement;
-    this.value = target.value;
-    this.onChange(this.value);
+    const target = event.target as HTMLInputElement;
+    this.innerValue = target.value;
+    this.onChange(this.innerValue);
+    this.onTouched();
+  }
+
+  /**
+   * Marks the control as touched on blur.
+   */
+  onBlur(): void {
     this.onTouched();
   }
 
   /**
-   * Clears the input value and resets the component state.
-   * This method is typically used when a clear button is clicked.
+   * Clears the field value and notifies Angular forms.
    */
   clearInput(): void {
-    this.value = '';
+    this.innerValue = '';
     this.onChange('');
     this.onTouched();
   }

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

@@ -0,0 +1,8 @@
+/** Supported native input types for {@link JInputComponent}. */
+export type JInputType =
+  | 'text'
+  | 'password'
+  | 'number'
+  | 'date'
+  | 'datetime-local'
+  | 'email';

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

@@ -1,66 +1,75 @@
-<div class="relative w-full select-none">
-  <input    
-    #fileInput    
-    type="file"    
-    [id]="id"    
-    [name]="name ?? ''"    
-    [accept]="accept"    
-    [multiple]="multiple"    
-    (change)="onFileSelected($event)"    
-    [required]="required"    
-    [disabled]="isDisabled"    
-    class="hidden"    
-    (blur)="onTouched()" 
+<div class="relative w-full">
+  <input
+    #fileInput
+    type="file"
+    [id]="id"
+    [name]="name ?? ''"
+    [accept]="accept"
+    [multiple]="multiple"
+    (change)="onFileSelected($event)"
+    [required]="required"
+    [disabled]="isDisabled"
+    class="hidden"
+    (blur)="onBlur()"
   />
-  
-  <label    
-    [for]="id"    
-    class="input block text-sm w-full h-[40px] max-[400px]:h-[35px] text-[12px] pr-1 bg-background dark:bg-dark-background border border-border dark:border-dark-border text-black dark:text-white placeholder:text-muted-foreground dark:placeholder:text-dark-muted-foreground rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary dark:focus:ring-dark-primary transition duration-200 resize-y disabled:opacity-60 disabled:cursor-not-allowed flex items-center justify-between transition duration-200 cursor-pointer"
-  >    
-    <div class="truncate" [ngClass]="{ 'opacity-80' : !innerValue?.name }">    
-      @if (innerValue?.name) {        
-        <span>{{ innerValue?.name }}</span>    
-      } @else {        
-        <span class="flex items-center gap-2 max-[400px]:h-[35px] text-muted-foreground dark:text-dark-muted-foreground">        
-          <lucide-icon [name]="iconsService.icons.upload" [size]="15" />        
-          Seleccionar archivo...        
-        </span>    
-      }    
-    </div>  
 
-    <div class="flex gap-1">
-      @if (value && clearButton) {    
-        <button 
-          type="button" 
-          class="text-gray-400 hover:text-gray-500 pr-1 mr-1 hover:text-gray-600 focus:outline-none cursor-pointer" 
-          (click)="clearFile()"
-        >        
-          <lucide-icon [name]="iconsService.icons.close" class="w-4 h-4" />    
-        </button>    
+  <label [attr.for]="id" [ngClass]="computedClasses" [class]="classes">
+    <div class="min-w-0 flex-1 truncate" [class.opacity-80]="!hasValue">
+      @if (displayFileName) {
+        <span>{{ displayFileName }}</span>
+      } @else {
+        <span class="flex items-center gap-2 text-muted-foreground dark:text-dark-muted-foreground">
+          <JIcon [icon]="Icons.Upload" [size]="15" [inheritParentColor]="true" [ariaHidden]="true" />
+          {{ placeholder }}
+        </span>
       }
-  
-      <button 
-        type="button" 
-        class="text-gray-400 hover:text-gray-500 pr-1 mr-1 hover:text-gray-600 focus:outline-none cursor-pointer" 
-        (click)="getImageFromClipboard()"
-      >        
-        <lucide-icon [name]="iconsService.icons.clipboard" class="w-4 h-4" />    
-      </button>    
     </div>
 
+    <div class="flex shrink-0 items-center gap-1">
+      @if (showClearButton) {
+        <button
+          type="button"
+          class="inline-flex cursor-pointer items-center justify-center p-0 focus:outline-none"
+          [ngClass]="actionButtonClasses"
+          (click)="onClearClick($event)"
+          [disabled]="isDisabled"
+          aria-label="Clear"
+        >
+          <JIcon
+            [icon]="Icons.X"
+            [size]="16"
+            [inheritParentColor]="true"
+            [ariaHidden]="true"
+          />
+        </button>
+      }
+
+      <button
+        type="button"
+        class="inline-flex cursor-pointer items-center justify-center p-0 focus:outline-none"
+        [ngClass]="actionButtonClasses"
+        (click)="onClipboardClick($event)"
+        [disabled]="isDisabled"
+        aria-label="Paste from clipboard"
+      >
+        <JIcon
+          [icon]="Icons.Clipboard"
+          [size]="16"
+          [inheritParentColor]="true"
+          [ariaHidden]="true"
+        />
+      </button>
+    </div>
   </label>
 
-  @if (previewUrl && showImage) {    
-    <div class="mt-2 w-full align-center justify-center flex">    
-      <img 
-        [src]="previewUrl" 
-        alt="Vista previa"        
-        [ngStyle]="{        
-          width: widthImgFile ? widthImgFile + 'px' : '100%',        
-          height: heightImgFile ? heightImgFile + 'px' : 'auto'        
-        }"        
-        class="rounded border border-border dark:border-dark-border shadow-sm object-cover"     
-      />    
+  @if (showPreview) {
+    <div class="mt-2 flex w-full items-center justify-center">
+      <img
+        [src]="previewImageUrl"
+        alt="Preview"
+        [ngStyle]="previewStyles"
+        class="rounded border border-border object-cover shadow-sm dark:border-dark-border"
+      />
     </div>
   }
 </div>