tailjng 0.0.13 → 0.0.15

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

@@ -0,0 +1,218 @@
+import { Component, Input, forwardRef, ViewChild, ElementRef, OnChanges, SimpleChanges } 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';
+
+@Component({
+  selector: 'JFileInput',
+  imports: [FormsModule, ReactiveFormsModule, NgClass, LucideAngularModule, CommonModule],
+  templateUrl: './file-input.component.html',
+  styleUrl: './file-input.component.css',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => JFileInputComponent),
+      multi: true
+    }
+  ]
+})
+export class JFileInputComponent implements ControlValueAccessor, OnChanges {
+
+  @Input() id?: string;
+  @Input() name?: string;
+
+  @Input() accept: string = '';
+  @Input() multiple: boolean = false;
+
+  @Input() disabled: 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>;
+
+  innerValue: any = '';
+  previewUrl: string | null = null;
+
+  // This variable is used to track if the file input has been cleared
+  public fileInputCleared = false
+
+  get value(): any {
+    return this.innerValue;
+  }
+
+  // ControlValueAccessor
+  onChange: any = () => { };
+  onTouched: any = () => { };
+
+  constructor(public readonly iconsService: JIconsService) { }
+
+  /**
+   * Writes a value to the component.
+   * @param val 
+   */
+  writeValue(val: any): void {
+    this.innerValue = val;
+
+    // If the value is null or empty, clear the preview
+    if (!val) {
+      this.previewUrl = null;
+
+      // If the value is set to null from outside (e.g., from the form)
+      // we need to reset the file input
+      if (this.fileInputRef?.nativeElement) {
+        this.fileInputRef.nativeElement.value = ""
+        this.fileInputCleared = true
+      }
+    }
+  }
+
+
+
+  /**
+   * Registers a callback function that is called when the value changes.
+   * @param fn The callback function.
+   */
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+
+
+  /**
+   * Registers a callback function that is called when the input is touched.
+   * @param fn The callback function.
+   */
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+
+
+  /**
+   * Sets the disabled state of the component.
+   * If disabled, it clears the inner value and preview URL.
+   * @param isDisabled 
+   */
+  setDisabledState(isDisabled: boolean): void {
+    if (isDisabled) {
+      this.innerValue = null;
+      this.previewUrl = null;
+    }
+  }
+
+
+
+  /**
+   * Handles changes to the component's inputs.
+   * If the value changes to null or empty, it clears the preview URL.
+   * @param changes 
+   */
+  ngOnChanges(changes: SimpleChanges): void {
+    // If the value is null or empty, clear the preview
+    if (changes['value'] && !this.value) {
+      this.previewUrl = null;
+    }
+  }
+
+
+
+  /**
+   * Handles the file selection event.
+   * It reads the selected file(s) and updates the inner value and preview URL if applicable
+   * @param event 
+   */
+  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")) {
+        const reader = new FileReader()
+        reader.onload = () => {
+          this.previewUrl = reader.result as string
+        }
+        reader.readAsDataURL(value)
+      } else {
+        this.previewUrl = null
+      }
+    }
+  }
+
+
+
+  /**
+   * Clears the file input and resets the preview URL.
+   * This method also resets the file input field so that it can be re-triggered.
+   */
+  clearFile(): void {
+    this.innerValue = null
+    this.previewUrl = null
+    this.onChange(this.multiple ? [] : null)
+    this.onTouched()
+
+    // Reset the file input field so that it can be re-triggered
+    if (this.fileInputRef?.nativeElement) {
+      this.fileInputRef.nativeElement.value = ""
+      this.fileInputCleared = true
+    }
+  }
+
+
+
+  /**
+   * Resets the file input to its initial state.
+   */
+  resetFileInput(): void {
+    this.clearFile()
+
+    // Create a new input element to replace the current one
+    // This forces the browser to recognize any selected file as "new"
+    if (this.fileInputRef?.nativeElement) {
+      const parent = this.fileInputRef.nativeElement.parentNode
+      if (parent) {
+
+        // We need to create a new input element
+        const oldInput = this.fileInputRef.nativeElement
+        const newInput = document.createElement("input")
+
+        // Copy all important attributes
+        newInput.type = "file"
+        if (this.accept) newInput.accept = this.accept
+        if (this.multiple) newInput.multiple = this.multiple
+        if (this.name) newInput.name = this.name
+        if (this.id) newInput.id = this.id
+        if (this.disabled) newInput.disabled = this.disabled
+        if (this.required) newInput.required = this.required
+
+        // Copy all event listeners
+        newInput.addEventListener("change", (e) => this.onFileSelected(e))
+
+        // Replace the input
+        parent.replaceChild(newInput, oldInput)
+
+        // Update the reference
+        setTimeout(() => {
+          if (this.fileInputRef) {
+            this.fileInputRef.nativeElement = newInput as HTMLInputElement
+          }
+        })
+      }
+    }
+
+
+  }
+
+
+}

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

@@ -0,0 +1,24 @@
+<div class="relative w-full">
+    <input
+        [type]="type"
+        [id]="id"
+        [name]="name ?? ''"
+        [placeholder]="placeholder"
+        [value]="value"
+        (input)="onInput($event)"
+        [required]="required"
+        [disabled]="disabled"
+        (blur)="onTouched()"
+        [ngClass]="combinedNgClass"
+        [class]="classes"
+        class="input w-full h-[40px] bg-background dark:bg-dark-background border border-border dark:border-dark-border text-black dark:text-white rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary transition duration-200" 
+    />
+
+    @if (value && clearButton) {
+        <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"
+        (click)="clearInput()">
+            <lucide-icon [name]="iconsService.icons.close" class="w-4 h-4" />
+        </button>
+    }
+</div>

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

@@ -0,0 +1,78 @@
+import { Component, Input } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { NgClass, CommonModule } from '@angular/common';
+import { LucideAngularModule } from 'lucide-angular';
+import { JIconsService } from 'tailjng';
+
+@Component({
+  selector: 'JInput',
+  imports: [FormsModule, ReactiveFormsModule, NgClass, LucideAngularModule, CommonModule],
+  templateUrl: './input.component.html',
+  styleUrl: './input.component.css'
+})
+export class JInputComponent {
+
+  @Input() type: 'text' | 'password' | 'number' | 'date' | 'datetime-local' | 'email' = 'text';
+  @Input() id?: string;
+  @Input() name?: string;
+  @Input() placeholder: string = '';
+  
+  @Input() disabled: boolean = false;
+  @Input() required: boolean = false;
+  @Input() classes: string = '';
+  @Input() ngClass: { [key: string]: boolean } = {};
+  
+  @Input() clearButton: boolean = false;
+
+  innerValue: any = '';
+
+  get value(): any {
+    return this.innerValue;
+  }
+
+  set value(val: any) {
+    if (val !== this.innerValue) {
+      this.innerValue = val;
+      this.onChange(val);
+    }
+  }
+
+  get combinedNgClass() {
+    return {
+      ...(this.ngClass || {}),
+      'opacity-50': this.disabled
+    };
+  }
+
+  // ControlValueAccessor
+  onChange: any = () => { };
+  onTouched: any = () => { };
+
+  constructor(public readonly iconsService: JIconsService) { }
+
+
+  /**
+   * Writes a value to the component.
+   * @param event 
+   */
+  onInput(event: Event): void {
+    const target = event.target as HTMLInputElement | HTMLTextAreaElement;
+    this.value = target.value;
+    this.onChange(this.value);
+    this.onTouched();
+  }
+
+
+
+  /**
+   * Clears the input value and resets the component state.
+   * This method is typically used when a clear button is clicked.
+   */
+  clearInput(): void {
+    this.value = '';
+    this.onChange('');
+    this.onTouched();
+  }
+
+
+}

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

@@ -0,0 +1,64 @@
+<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>
+        }
+    }
+
+    <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]="disabled"
+            [(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
+            " 
+        />
+
+        @if (max) {
+            <span class="text-[15px] font-bold text-gray-500 mt-1 text-center">{{max}}{{simbol}}</span>
+        }
+    </div>
+
+    @if (!isLabel) {
+        <div class="text-xl font-bold text-gray-500 mt-1 text-center">{{ value }}</div>
+    }
+</div>

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

@@ -0,0 +1,78 @@
+import { Component, Input } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { NgClass, CommonModule } from '@angular/common';
+import { LucideAngularModule } from 'lucide-angular';
+
+@Component({
+  selector: 'JRangeInput',
+  imports: [FormsModule, ReactiveFormsModule, NgClass, LucideAngularModule, CommonModule],
+  templateUrl: './range-input.component.html',
+  styleUrl: './range-input.component.css'
+})
+export class JRangeInputComponent {
+
+  @Input() id?: string;
+  @Input() name?: string;
+  @Input() placeholder: string = '';
+
+  @Input() disabled: 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 = '';
+  
+  innerValue: any = '';
+
+  get value(): any {
+    return this.innerValue;
+  }
+
+  set value(val: any) {
+    if (val !== this.innerValue) {
+      this.innerValue = val;
+      this.onChange(val);
+    }
+  }
+
+  get combinedNgClass() {
+    return {
+      ...(this.ngClass || {}),
+      'opacity-50': this.disabled
+    };
+  }
+
+  // ControlValueAccessor
+  onChange: any = () => { };
+  onTouched: any = () => { };
+
+  /**
+   * Writes a value to the component.
+   * @param event 
+   */
+  onInput(event: Event): void {
+    const target = event.target as HTMLInputElement | HTMLTextAreaElement;
+    this.value = target.value;
+    this.onChange(this.value);
+    this.onTouched();
+  }
+
+
+
+  /**
+   * Clears the input value and resets the component state.
+   * This method is typically used when a clear button is clicked.
+   */
+  clearInput(): void {
+    this.value = '';
+    this.onChange('');
+    this.onTouched();
+  }
+
+
+}

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

@@ -0,0 +1,21 @@
+<div class="relative w-full">
+    <textarea
+        [id]="id"
+        [name]="name ?? ''"
+        [placeholder]="placeholder"
+        [value]="value"
+        (input)="onInput($event)"
+        [required]="required"
+        [disabled]="disabled"
+        (blur)="onTouched()"
+        [ngClass]="combinedNgClass"
+        [class]="classes"
+        class="input w-full h-[70px] min-h-[70px] pr-10 bg-background dark:bg-dark-background border border-border dark:border-dark-border text-black dark:text-white rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary transition duration-200"
+    ></textarea>
+
+    @if (value && clearButton) {
+        <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" (click)="clearInput()">
+            <lucide-icon [name]="iconsService.icons.close" class="w-4 h-4" />
+        </button>
+    }
+</div>

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

@@ -0,0 +1,75 @@
+import { Component, Input } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { NgClass, CommonModule } from '@angular/common';
+import { LucideAngularModule } from 'lucide-angular';
+import { JIconsService } from 'tailjng';
+
+@Component({
+  selector: 'JTextareaInput',
+  imports: [FormsModule, ReactiveFormsModule, NgClass, LucideAngularModule, CommonModule],
+  templateUrl: './textarea-input.component.html',
+  styleUrl: './textarea-input.component.css'
+})
+export class JTextareaInputComponent {
+
+  @Input() id?: string;
+  @Input() name?: string;
+  @Input() placeholder: string = '';
+
+  @Input() disabled: boolean = false;
+  @Input() required: boolean = false;
+  @Input() classes: string = '';
+  @Input() ngClass: { [key: string]: boolean } = {};
+  @Input() clearButton: boolean = false;
+
+  innerValue: any = '';
+
+  get value(): any {
+    return this.innerValue;
+  }
+
+  set value(val: any) {
+    if (val !== this.innerValue) {
+      this.innerValue = val;
+      this.onChange(val);
+    }
+  }
+
+  get combinedNgClass() {
+    return {
+      ...(this.ngClass || {}),
+      'opacity-50': this.disabled
+    };
+  }
+
+  // ControlValueAccessor
+  onChange: any = () => { };
+  onTouched: any = () => { };
+
+  constructor(public readonly iconsService: JIconsService) { }
+
+  /**
+   * Writes a value to the component.
+   * @param event 
+   */
+  onInput(event: Event): void {
+    const target = event.target as HTMLInputElement | HTMLTextAreaElement;
+    this.value = target.value;
+    this.onChange(this.value);
+    this.onTouched();
+  }
+
+
+
+  /**
+   * Clears the input value and resets the component state.
+   * This method is typically used when a clear button is clicked.
+   */
+  clearInput(): void {
+    this.value = '';
+    this.onChange('');
+    this.onTouched();
+  }
+
+
+}

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

@@ -18,7 +18,7 @@
 
   @if (tooltip) {
   <span [jTooltip]="tooltip" [jTooltipPosition]="tooltipPosition" >
-    <lucide-icon [name]="iconsService.icons.Info" [size]="15" />
+    <lucide-icon [name]="iconsService.icons.info" [size]="15" />
   </span>
   }
 

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

@@ -1,7 +1,7 @@
 import { NgClass } from '@angular/common';
 import { Component, Input } from '@angular/core';
 import { JTooltipDirective } from '../tooltip/tooltip.directive';
-import { JIconsService } from '../../services/icons.service';
+import { JIconsService } from 'tailjng';
 import { LucideAngularModule } from 'lucide-angular';
 
 @Component({

package/src/lib/components/mode-toggle/mode-toggle.component.html

@@ -0,0 +1,8 @@
+<button (click)="toggleDarkMode()"
+    class="p-2 bg-gray-300 dark:bg-gray-700 text-black dark:text-white rounded-full cursor-pointer">
+    @if (theme === 'dark') {
+    <lucide-icon [name]="iconsService.icons.moon"></lucide-icon>
+    } @else {
+    <lucide-icon [name]="iconsService.icons.sun"></lucide-icon>
+    }
+</button>

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

@@ -0,0 +1,61 @@
+import { Component, Inject, PLATFORM_ID } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import { LucideAngularModule } from 'lucide-angular';
+import { JIconsService } from 'tailjng';
+
+@Component({
+  selector: 'JModeToggle',
+  imports: [LucideAngularModule],
+  templateUrl: './mode-toggle.component.html',
+  styleUrl: './mode-toggle.component.css'
+})
+export class JModeToggleComponent {
+
+  title = 'frontend';
+  theme: string = 'light';
+
+  constructor(
+    @Inject(PLATFORM_ID) private readonly platformId: object,
+    public readonly iconsService: JIconsService
+  ) {
+    this.loadTheme();
+  }
+
+  
+  /**
+   * Set the theme for the application.
+   * @param theme - The theme to set, either 'light' or 'dark'.
+   */
+  setTheme(theme: 'light' | 'dark') {
+    if (isPlatformBrowser(this.platformId)) {
+      localStorage.setItem('theme', theme);
+    }
+    this.theme = theme; // Actualizar la variable theme
+    document.documentElement.classList.toggle('dark', theme === 'dark');
+  }
+
+
+
+  /**
+   * Load the theme from localStorage and apply it to the document.
+   */
+  loadTheme() {
+    if (isPlatformBrowser(this.platformId)) {
+      const storedTheme = localStorage.getItem('theme');
+      this.theme = storedTheme ?? 'light';
+      document.documentElement.classList.toggle('dark', this.theme === 'dark');
+    }
+  }
+
+
+
+  /**
+   * Toggle between light and dark mode.
+   */
+  toggleDarkMode() {
+    const newTheme = this.theme === 'dark' ? 'light' : 'dark';
+    this.setTheme(newTheme);
+  }
+
+
+}

package/src/lib/components/progress-bar/progress-bar.component.html

@@ -0,0 +1,22 @@
+<div class="relative w-full flex items-center mb-2">
+    <progress
+        class="relative w-full overflow-hidden bg-slate-200 border border-border dark:border-dark-border
+            [&::-webkit-progress-bar]:bg-background
+            dark:[&::-webkit-progress-bar]:bg-dark-background
+            [&::-webkit-progress-value]:bg-primary
+            [&::-moz-progress-bar]:bg-primary
+            dark:[&::-webkit-progress-value]:bg-dark-primary
+            dark:[&::-moz-progress-bar]:bg-dark-primary
+            [&:disabled]:opacity-50 transition-all duration-300 ease-in-out"
+        [value]="value"
+        [max]="max"
+        [ngClass]="ngClasses"
+        [style.height.px]="height"
+        [style.border-radius.px]="borderRadius"
+    >
+    </progress>
+
+    <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-sm font-bold text-gray-500 dark:text-gray-400">
+        {{ value }}{{ simbol }}
+    </div>
+</div>