tailjng 0.1.6 → 0.1.8

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

@@ -1,64 +1,56 @@
 <div class="w-full">
-    @if (placeholder) {
-        @if (isLabel) {
-            
-        <label [for]="id" class="flex text-[15px] font-bold text-black dark:text-white justify-between mb-1 opacity-80">
-            <span>{{ placeholder }}</span>
-            <span>{{ value | number:'1.0-2' }}{{simbol}}</span>
-        </label>
-
-        } @else {
-            <label [for]="id" class="block text-[15px] font-bold text-black dark:text-white text-center mb-1 opacity-80">{{ placeholder }}</label>
-        }
+  @if (showPlaceholder) {
+    @if (labelMode === 'inline') {
+      <label
+        [attr.for]="id"
+        class="mb-1 flex justify-between text-[15px] font-bold text-black opacity-80 dark:text-white"
+      >
+        <span>{{ placeholder }}</span>
+        <span>{{ innerValue | number: '1.0-2' }}{{ symbol }}</span>
+      </label>
+    } @else if (labelMode === 'centered') {
+      <label
+        [attr.for]="id"
+        class="mb-1 block text-center text-[15px] font-bold text-black opacity-80 dark:text-white"
+      >
+        {{ placeholder }}
+      </label>
     }
+  }
 
-    <div class="relative flex gap-2 w-full items-center justify-center align-center items-center justify-center align-center">
-        @if (min !== null) {
-            <span class="text-[15px] font-bold text-gray-500 mt-1 text-center">{{min}}{{simbol}}</span>
-        }
-        <input
-            type="range"
-            [id]="id"
-            [name]="name ?? ''"
-            [min]="min"
-            [max]="max"
-            [step]="step"
-            [required]="required"
-            [disabled]="isDisabled"
-            [(ngModel)]="value"
-            (blur)="onTouched()"
-            [ngClass]="combinedNgClass"
-            [class]="classes"
-            class="
-                w-full h-5 bg-background dark:bg-dark-background border border-border dark:border-dark-border 
-                rounded-lg appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-primary transition duration-200
-                
-                [&::-webkit-slider-thumb]:appearance-none
-                [&::-webkit-slider-thumb]:h-8
-                [&::-webkit-slider-thumb]:w-8
-                [&::-webkit-slider-thumb]:rounded-full
-                [&::-webkit-slider-thumb]:cursor-pointer
-                [&::-webkit-slider-thumb]:bg-dark-primary
-                dark:[&::-webkit-slider-thumb]:bg-primary
-                [&::-webkit-slider-thumb:hover]:bg-primary
-                dark:[&::-webkit-slider-thumb:hover]:bg-dark-primary
-                
-                [&::-moz-range-thumb]:h-4
-                [&::-moz-range-thumb]:w-4
-                [&::-moz-range-thumb]:rounded-full
-                [&::-moz-range-thumb]:bg-primary
-                [&::-moz-range-thumb]:cursor-pointer
-                [&::-moz-range-thumb:hover]:bg-primary
-                dark:[&::-moz-range-thumb:hover]:bg-dark-primary
-            " 
-        />
+  <div class="relative flex w-full items-center justify-center gap-2">
+    @if (showBounds) {
+      <span class="mt-1 text-center text-[15px] font-bold text-gray-500 dark:text-gray-400">
+        {{ min }}{{ symbol }}
+      </span>
+    }
 
-        @if (max) {
-            <span class="text-[15px] font-bold text-gray-500 mt-1 text-center">{{max}}{{simbol}}</span>
-        }
-    </div>
+    <input
+      type="range"
+      [id]="id"
+      [name]="name ?? ''"
+      [min]="min"
+      [max]="max"
+      [step]="step"
+      [required]="required"
+      [disabled]="isDisabled"
+      [value]="innerValue"
+      (input)="onRangeInput($event)"
+      (blur)="onBlur()"
+      [ngClass]="computedClasses"
+      [class]="classes"
+    />
 
-    @if (!isLabel) {
-        <div class="text-xl font-bold text-gray-500 mt-1 text-center">{{ value }}</div>
+    @if (showBounds) {
+      <span class="mt-1 text-center text-[15px] font-bold text-gray-500 dark:text-gray-400">
+        {{ max }}{{ symbol }}
+      </span>
     }
-</div>
+  </div>
+
+  @if (showValueBelow) {
+    <div class="mt-1 text-center text-xl font-bold text-gray-500 dark:text-gray-400">
+      {{ formattedValue }}
+    </div>
+  }
+</div>

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

@@ -1,109 +1,197 @@
-import { Component, forwardRef, Input } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { CommonModule } from '@angular/common';
-import { LucideAngularModule } from 'lucide-angular';
-
+import { DecimalPipe, NgClass } from '@angular/common';
+import { Component, EventEmitter, Input, Output, forwardRef } from '@angular/core';
+import {
+  ControlValueAccessor,
+  FormsModule,
+  NG_VALUE_ACCESSOR,
+  ReactiveFormsModule,
+} from '@angular/forms';
+import {
+  INPUT_DISABLED_OVERLAY_CLASSES,
+  mergeInputClasses,
+} from '../../.config/input/input.classes';
+import { RangeLabelMode } from './range-input.types';
+
+export type { RangeLabelMode } from './range-input.types';
+
+/**
+ * Range slider input with optional label, min/max hints, and unit suffix.
+ *
+ * Install: `npx tailjng add input-range`
+ */
 @Component({
   selector: 'JRangeInput',
-  imports: [CommonModule, FormsModule, ReactiveFormsModule, LucideAngularModule],
+  imports: [FormsModule, ReactiveFormsModule, NgClass, DecimalPipe],
   templateUrl: './range-input.component.html',
-  styleUrls: ['./range-input.component.css'],
+  styleUrl: './range-input.component.css',
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
       useExisting: forwardRef(() => JRangeInputComponent),
-      multi: true
-    }
-  ]
+      multi: true,
+    },
+  ],
 })
 export class JRangeInputComponent implements ControlValueAccessor {
-
   @Input() id?: string;
   @Input() name?: string;
-  @Input() placeholder: string = '';
-  @Input() isDisabled: boolean = false;
-  @Input() required: boolean = false;
-  @Input() classes: string = '';
-  @Input() ngClass: { [key: string]: boolean } = {};
 
-  @Input() min: number = 0;
-  @Input() max: number = 100;
-  @Input() step: number = 1;
-  @Input() isLabel: boolean = false;
-  @Input() simbol: string = '';
+  // Label text above the slider
+  @Input() placeholder = '';
 
-  innerValue: any = '';
+  @Input() isDisabled = false;
+  @Input() required = false;
 
-  get value(): any {
-    return this.innerValue;
+  @Input() min = 0;
+  @Input() max = 100;
+  @Input() step = 1;
+
+  // Show min/max values beside the slider
+  @Input() showBounds = true;
+
+  /**
+   * Unit suffix next to values (e.g. "%", " pts").
+   * Alias `simbol` kept for backward compatibility.
+   */
+  @Input({ alias: 'simbol' }) symbol = '';
+
+  /**
+   * Label layout mode.
+   * Use `isLabel` input for backward compatibility (`true` → inline).
+   */
+  @Input() labelMode: RangeLabelMode = 'none';
+
+  // Extra Tailwind classes on the range input
+  @Input() classes = '';
+
+  // Extra conditional classes on the range input
+  @Input() ngClasses: Record<string, boolean> = {};
+
+  /** Emits when the slider value changes (supports `(input)` on the host). */
+  @Output() input = new EventEmitter<number>();
+
+  innerValue = 0;
+
+  private onChange: (value: number) => void = () => {};
+  private onTouched: () => void = () => {};
+
+  /**
+   * Backward-compatible alias for `labelMode="inline"`.
+   * @param value When true, uses inline label layout.
+   */
+  @Input()
+  set isLabel(value: boolean) {
+    this.labelMode = value ? 'inline' : 'none';
   }
 
-  set value(val: any) {
-    if (val !== this.innerValue) {
-      this.innerValue = val;
-      this.onChange(val);
-    }
+  /**
+   * Current numeric value of the slider.
+   * @returns The internal value.
+   */
+  get value(): number {
+    return this.innerValue;
   }
 
-  get combinedNgClass() {
-    return {
-      ...(this.ngClass || {}),
-      'opacity-50': this.isDisabled
-    };
+  /**
+   * Whether the placeholder label should render.
+   * @returns `true` when `placeholder` is not empty.
+   */
+  get showPlaceholder(): boolean {
+    return this.placeholder !== '';
   }
 
-  // ControlValueAccessor methods
-  onChange: any = () => { };
-  onTouched: any = () => { };
+  /**
+   * Whether to show the value below the slider.
+   * @returns `true` when `labelMode` is `none`.
+   */
+  get showValueBelow(): boolean {
+    return this.labelMode === 'none';
+  }
 
-  // Writes a value to the component
-  writeValue(value: any): void {
-    if (value !== undefined) {
-      this.innerValue = value;
-    }
+  /**
+   * Formatted value with unit suffix for display.
+   * @returns String such as `42%`.
+   */
+  get formattedValue(): string {
+    return `${this.innerValue}${this.symbol}`;
   }
 
+  /**
+   * Class map for the native range input.
+   * @returns Base slider styles merged with `ngClasses`.
+   */
+  get computedClasses(): Record<string, boolean> {
+    return mergeInputClasses(
+      { 'j-range-input': true },
+      this.ngClasses,
+      this.isDisabled
+        ? mergeInputClasses(INPUT_DISABLED_OVERLAY_CLASSES, { 'cursor-not-allowed': true })
+        : {},
+    );
+  }
 
+  /**
+   * Writes the value from Angular forms into the view.
+   * @param value Numeric value from the form model.
+   */
+  writeValue(value: unknown): void {
+    if (value == null || value === '') {
+      this.innerValue = this.min;
+      return;
+    }
+    this.innerValue = Number(value);
+  }
 
   /**
-   * Registers a function to call when the value changes.
-   * @param fn The function to call when the value changes.
+   * Registers the change callback for Angular forms.
+   * @param fn Callback invoked when the value changes.
    */
-  registerOnChange(fn: any): void {
+  registerOnChange(fn: (value: number) => void): void {
     this.onChange = fn;
   }
 
-
-
   /**
-   * Registers a function to call when the control is touched.
-   * @param fn The function to call when the control is touched.
+   * Registers the touched callback for Angular forms.
+   * @param fn Callback invoked when the control is touched.
    */
-  registerOnTouched(fn: any): void {
+  registerOnTouched(fn: () => void): void {
     this.onTouched = fn;
   }
 
-
+  /**
+   * Syncs disabled state from Angular forms.
+   * @param isDisabled Whether the control is disabled.
+   */
+  setDisabledState(isDisabled: boolean): void {
+    this.isDisabled = isDisabled;
+  }
 
   /**
-   * Handles input changes.
-   * @param event The input event.
+   * Handles native range input events.
+   * @param event Input event from the slider.
    */
-  onInput(event: Event): void {
+  onRangeInput(event: Event): void {
     const target = event.target as HTMLInputElement;
-    this.value = target.value;
-    this.onChange(this.value);
+    this.innerValue = target.valueAsNumber;
+    this.onChange(this.innerValue);
     this.onTouched();
+    this.input.emit(this.innerValue);
   }
 
+  /**
+   * Marks the control as touched on blur.
+   */
+  onBlur(): void {
+    this.onTouched();
+  }
 
-  
   /**
-   * Clears the input
+   * Resets the slider to `min`.
    */
   clearInput(): void {
-    this.value = '';
-    this.onChange('');
+    this.innerValue = this.min;
+    this.onChange(this.innerValue);
     this.onTouched();
+    this.input.emit(this.innerValue);
   }
 }

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

@@ -0,0 +1,7 @@
+/**
+ * Label layout for {@link JRangeInputComponent}.
+ * - `inline` — placeholder and current value on the same row
+ * - `centered` — placeholder centered above the slider
+ * - `none` — value shown below the slider (default)
+ */
+export type RangeLabelMode = 'inline' | 'centered' | 'none';

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

@@ -1,4 +1,4 @@
-<div class="relative w-full flex">
+<div class="relative w-full">
   <textarea
     [id]="id"
     [name]="name ?? ''"
@@ -7,19 +7,28 @@
     (input)="onInput($event)"
     [required]="required"
     [disabled]="isDisabled"
-    (blur)="onTouched()"
-    [ngClass]="combinedNgClass"
+    [readonly]="isReadonly"
+    [rows]="rows"
+    (blur)="onBlur()"
+    [ngClass]="computedClasses"
     [class]="classes"
-    class="input w-full h-[70px] max-[400px]:h-[35px] min-h-[70px] pr-10 bg-background dark:bg-dark-background border border-border dark:border-dark-border text-black dark:text-white placeholder:text-muted-foreground/70 dark:placeholder:text-dark-muted-foreground/70 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"
   ></textarea>
 
-  @if (value && clearButton) {
+  @if (showClearButton) {
     <button
       type="button"
-      class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 text-gray-400 hover:text-gray-500 pr-1 mr-1 text-gray-400 hover:text-gray-600 focus:outline-none cursor-pointer"
+      class="absolute right-2 top-2 flex cursor-pointer items-center justify-center p-0 focus:outline-none"
+      [ngClass]="clearButtonClasses"
       (click)="clearInput()"
+      [disabled]="isDisabled"
+      aria-label="Clear"
     >
-      <lucide-icon [name]="iconsService.icons.close" class="w-4 h-4" />
+      <JIcon
+        [icon]="Icons.X"
+        [size]="16"
+        [inheritParentColor]="true"
+        [ariaHidden]="true"
+      />
     </button>
   }
 </div>

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

@@ -1,100 +1,190 @@
+import { NgClass } from '@angular/common';
 import { Component, Input, forwardRef } 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 { 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_TEXTAREA,
+  INPUT_SURFACE_CLASSES,
+  INPUT_TEXTAREA_HEIGHT_CLASSES,
+  inputActionButtonClasses,
+  mergeInputClasses,
+} from '../../.config/input/input.classes';
+import { JIconComponent } from '../../icon/icon.component';
+import { TextareaResize } from './textarea-input.types';
+
+export type { TextareaResize } from './textarea-input.types';
+
+/**
+ * Multiline text input with ControlValueAccessor, clear button, and theme-aware styling.
+ *
+ * Install: `npx tailjng add input-textarea`
+ */
 @Component({
   selector: 'JTextareaInput',
-  imports: [FormsModule, ReactiveFormsModule, NgClass, LucideAngularModule, CommonModule],
+  imports: [FormsModule, ReactiveFormsModule, NgClass, JIconComponent],
   templateUrl: './textarea-input.component.html',
-  styleUrls: ['./textarea-input.component.css'],
+  styleUrl: './textarea-input.component.css',
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
       useExisting: forwardRef(() => JTextareaInputComponent),
-      multi: true
-    }
-  ]
+      multi: true,
+    },
+  ],
 })
 export class JTextareaInputComponent implements ControlValueAccessor {
+  // Project Icons registry — template usage: Icons.X
+  readonly Icons = Icons;
 
   @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;
+
+  // Native textarea rows attribute
+  @Input() rows?: number;
+
+  // CSS resize behavior
+  @Input() resize: TextareaResize = 'vertical';
 
-  @Input() isDisabled: boolean = false;
-  @Input() required: boolean = false;
-  @Input() classes: string = '';
-  @Input() ngClass: { [key: string]: boolean } = {};
-  @Input() clearButton: boolean = false;
+  // Extra Tailwind classes on the `<textarea>`
+  @Input() classes = '';
 
-  innerValue: any = '';
+  // Extra conditional classes (same role as [ngClass] on the textarea)
+  @Input() ngClasses: Record<string, boolean> = {};
 
-  get value(): any {
+  innerValue = '';
+
+  private onChange: (value: string) => void = () => {};
+  private onTouched: () => void = () => {};
+
+  /**
+   * Current value bound to the native textarea.
+   * @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 = () => { };
+  /**
+   * Class map for the native `<textarea>` element.
+   * @returns Base textarea styles merged with resize, `ngClasses`, and disabled opacity.
+   */
+  get computedClasses(): Record<string, boolean> {
+    return mergeInputClasses(
+      INPUT_SURFACE_CLASSES,
+      INPUT_TEXTAREA_HEIGHT_CLASSES,
+      INPUT_FOCUS_CLASSES,
+      INPUT_PADDING_X_TEXTAREA,
+      this.resizeClasses[this.resize],
+      this.ngClasses,
+      { 'pr-3': !this.clearButton, 'pr-7': this.clearButton },
+      { 'scroll-element': true },
+      this.isDisabled ? INPUT_DISABLED_OVERLAY_CLASSES : {},
+    );
+  }
 
-  constructor(public readonly iconsService: JIconsService) { }
+  /**
+   * Class map for the clear button.
+   * @returns Hover and disabled utilities for the clear control.
+   */
+  get clearButtonClasses(): Record<string, boolean> {
+    return inputActionButtonClasses(this.isDisabled);
+  }
+
+  /** Tailwind resize utilities keyed by {@link TextareaResize}. */
+  private readonly resizeClasses: Record<TextareaResize, Record<string, boolean>> = {
+    none: { 'resize-none': true },
+    vertical: { 'resize-y': true },
+    both: { resize: true },
+    horizontal: { 'resize-x': true },
+  };
 
-  // writeValue - To write a value to the component
-  writeValue(value: any): void {
-    if (value !== undefined) {
-      this.value = value;
-    }
+  /**
+   * Writes the value from the form model into the view.
+   * @param value Value from Angular forms.
+   */
+  writeValue(value: unknown): void {
+    this.innerValue = value != null ? String(value) : '';
   }
 
-  // registerOnChange - To register the change callback function
-  registerOnChange(fn: (value: any) => void): void {
+  /**
+   * Registers the change callback for Angular forms.
+   * @param fn Callback invoked when the value changes.
+   */
+  registerOnChange(fn: (value: string) => void): void {
     this.onChange = fn;
   }
 
-  // registerOnTouched - To register the touched callback function
+  /**
+   * Registers the touched callback for Angular forms.
+   * @param fn Callback invoked when the control is touched.
+   */
   registerOnTouched(fn: () => void): void {
     this.onTouched = fn;
   }
 
-  
+  /**
+   * Syncs disabled state from Angular forms.
+   * @param isDisabled Whether the control is disabled.
+   */
+  setDisabledState(isDisabled: boolean): void {
+    this.isDisabled = isDisabled;
+  }
 
   /**
-   * Writes a value to the component.
-   * @param event 
+   * Handles native input events and propagates the value to forms.
+   * @param event Native input event.
    */
   onInput(event: Event): void {
     const target = event.target as HTMLTextAreaElement;
-    this.value = target.value;
-    this.onChange(this.value);
+    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-textarea/textarea-input.types.ts

@@ -0,0 +1,2 @@
+/** CSS `resize` behavior for {@link JTextareaInputComponent}. */
+export type TextareaResize = 'none' | 'vertical' | 'both' | 'horizontal';