tailjng 0.0.13 → 0.0.15

package/src/lib/components/checkbox/switch-checkbox/switch-checkbox.component.html

@@ -0,0 +1,26 @@
+<div class="flex flex-col items-center justify-center gap-2">
+    @if (title) {
+        <span class="text-[8px] opacity-80">{{title}}</span>
+    }
+
+    @if (!isLoading) {
+        <div onKeyPress 
+            class="relative inline-block min-w-[40px] w-[40px] h-[20px] cursor-pointer" 
+            (click)="toggleSwitch(isChecked)"
+        >
+            <!-- Slider background -->
+            <div class="absolute inset-0 rounded-full transition-all duration-300"
+                 [ngClass]="isChecked ? 'bg-primary' : 'bg-gray-300 dark:bg-gray-500'">
+            </div>
+
+            <!-- Circle -->
+            <div 
+                class="absolute top-[2px] left-[2px] bg-white rounded-full w-[16px] h-[16px] shadow-md transition-all duration-300"
+                [class]="classes" 
+                [ngStyle]="{'transform': isChecked ? 'translateX(20px)' : 'translateX(0)'}">
+            </div>
+        </div>
+    } @else {
+        <lucide-icon [name]="iconsService.icons.loading" size="20" class="min-w-[40px] w-[40px] text-dark-primary dark:text-white animate-spin"></lucide-icon>
+    }
+</div>

package/src/lib/components/checkbox/switch-checkbox/switch-checkbox.component.ts

@@ -0,0 +1,29 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { LucideAngularModule } from 'lucide-angular';
+import { JIconsService } from 'tailjng';
+
+@Component({
+  selector: 'JSwitchCheckbox',
+  imports: [CommonModule, LucideAngularModule],
+  templateUrl: './switch-checkbox.component.html',
+  styleUrl: './switch-checkbox.component.css'
+})
+export class JSwitchCheckboxComponent {
+
+  @Input() title!: string;
+
+  @Input() disabled?: boolean;
+  @Input() classes: string = '';
+  @Input() isLoading?: boolean;
+
+  @Input() isChecked: boolean = false;
+
+  // Funciones
+  @Input() toggleSwitch: (isChecked: boolean) => void = () => { };
+
+  constructor(
+    public readonly iconsService: JIconsService
+  ) { }
+
+}

package/src/lib/components/color/colors.service.ts

@@ -0,0 +1,109 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+    providedIn: 'root',
+})
+export class JColorsService {
+
+    // Variants
+    variants: { [key: string]: string } = {
+        primary: 'bg-primary dark:bg-dark-primary text-white dark:text-white hover:bg-dark-primary dark:hover:bg-dark-primary/60 dark:hover:text-white',
+        primary_secondary: 'bg-none text-dark-border dark:text-border border-dark-border dark:border-border hover:bg-dark-border/10 dark:hover:bg-border/10 shadow-md',
+        secondary: 'bg-background dark:bg-dark-background text-black dark:text-white hover:bg-accent dark:hover:bg-dark-accent/50',
+        success: 'bg-green-500 hover:bg-green-600 text-white border border-green-500 dark:border-green-600 shadow-md',
+        success_secondary: 'bg-none text-green-500 border-green-500 dark:border-green-600 hover:bg-green-500/10 dark:hover:bg-green-600/10 shadow-md',
+        info: 'bg-blue-500 hover:bg-blue-600 text-white border border-blue-500 dark:border-blue-600 shadow-md',
+        info_secondary: 'bg-none text-blue-500 border-blue-500 dark:border-blue-600 hover:bg-blue-500/10 dark:hover:bg-blue-600/10 shadow-md',
+        warning: 'bg-yellow-600 hover:bg-yellow-700 text-white border border-yellow-600 dark:border-yellow-700 shadow-md',
+        warning_secondary: 'bg-none text-yellow-600 border-yellow-600 dark:border-yellow-700 hover:bg-yellow-600/10 dark:hover:bg-yellow-700/10 shadow-md',
+        question: 'bg-purple-500 hover:bg-purple-600 text-white border border-purple-500 dark:border-purple-600 shadow-md',
+        question_secondary: 'bg-none text-purple-500 border-purple-500 dark:border-purple-600 hover:bg-purple-500/10 dark:hover:bg-purple-600/10 shadow-md',
+        error: 'bg-red-500 hover:bg-red-600 text-white border border-red-500 dark:border-red-600 shadow-md',
+        error_secondary: 'bg-none text-red-500 border-red-500 dark:border-red-600 hover:bg-red-500/10 dark:hover:bg-red-600/10 shadow-md',
+        loading: 'bg-gray-500 hover:bg-gray-600 text-white border border-gray-500 dark:border-gray-600 shadow-md',
+        loading_secondary: 'bg-none text-gray-500 border-gray-500 dark:border-gray-600 hover:bg-gray-500/10 dark:hover:bg-gray-600/10 shadow-md',
+
+        orange: 'bg-orange-500 hover:bg-orange-600 text-white border border-orange-500 dark:border-orange-600 shadow-md',
+        orange_secondary: 'bg-none text-orange-500 border-orange-500 dark:border-orange-600 hover:bg-orange-500/10 dark:hover:bg-orange-600/10 shadow-md',
+        cyan: 'bg-cyan-500 hover:bg-cyan-600 text-white border border-cyan-500 dark:border-cyan-600 shadow-md',
+        cyan_secondary: 'bg-none text-cyan-500 border-cyan-500 dark:border-cyan-600 hover:bg-cyan-500/10 dark:hover:bg-cyan-600/10 shadow-md',
+        purple: 'bg-purple-500 hover:bg-purple-600 text-white border border-purple-500 dark:border-purple-600 shadow-md',
+        purple_secondary: 'bg-none text-purple-500 border-purple-500 dark:border-purple-600 hover:bg-purple-500/10 dark:hover:bg-purple-600/10 shadow-md',
+        teal: 'bg-teal-500 hover:bg-teal-600 text-white border border-teal-500 dark:border-teal-600 shadow-md',
+        teal_secondary: 'bg-none text-teal-500 border-teal-500 dark:border-teal-600 hover:bg-teal-500/10 dark:hover:bg-teal-600/10 shadow-md',
+        pink: 'bg-pink-500 hover:bg-pink-600 text-white border border-pink-500 dark:border-pink-600 shadow-md',
+        pink_secondary: 'bg-none text-pink-500 border-pink-500 dark:border-pink-600 hover:bg-pink-500/10 dark:hover:bg-pink-600/10 shadow-md',
+        green: 'bg-green-500 hover:bg-green-600 text-white border border-green-500 dark:border-green-600 shadow-md',
+        green_secondary: 'bg-none text-green-500 border-green-500 dark:border-green-600 hover:bg-green-500/10 dark:hover:bg-green-600/10 shadow-md',
+
+        default: ' text-black dark:text-white shadow-md',
+    };
+
+    // Alerts
+    getAlertClass(type: string, monocromatic: boolean) {
+        if (!monocromatic) {
+            switch (type) {
+                case 'success': return 'border-green-500 bg-green-50 dark:bg-[#15241f]';
+                case 'error': return 'border-red-500 bg-red-50 dark:bg-[#21181c]';
+                case 'warning': return 'border-yellow-500 bg-yellow-50 dark:bg-[#1f1c1a]';
+                case 'info': return 'border-blue-500 bg-blue-50 dark:bg-[#1a1a24]';
+                case 'question': return 'border-purple-500 bg-purple-50 dark:bg-[#241732]';
+                case 'loading': return 'border-gray-500 bg-gray-50 dark:bg-[#15181e]';
+                default: return 'border-gray-500';
+            }
+        } else {
+            return 'bg-white dark:bg-foreground border-border dark:border-dark-border';
+        }
+    }
+
+    // Icons
+    getIconClass(type: string, monocromatic: boolean) {
+        if (!monocromatic) {
+            switch (type) {
+                case 'success': return 'text-green-500';
+                case 'error': return 'text-red-500';
+                case 'warning': return 'text-yellow-500';
+                case 'info': return 'text-blue-500';
+                case 'question': return 'text-purple-500';
+                case 'loading': return 'text-gray-500';
+                default: return 'text-primary';
+            }
+        } else {
+            return 'text-primary';
+        }
+    }
+
+    // Buttons primary
+    getButtonClass(type: string, monocromatic: boolean): { [key: string]: boolean } {
+        if (!monocromatic) {
+            switch (type) {
+                case 'success': return { 'success': true };
+                case 'error': return { 'error': true };
+                case 'warning': return { 'warning': true };
+                case 'info': return { 'info': true };
+                case 'question': return { 'question': true };
+                case 'loading': return { 'loading': true };
+                default: return { 'primary': true };
+            }
+        } else {
+            return { 'primary': true };
+        }
+    }
+
+    // Buttons secondary
+    getButtonSecondaryClass(type: string, monocromatic: boolean): { [key: string]: boolean } {
+        if (!monocromatic) {
+            switch (type) {
+                case 'success': return { 'success_secondary': true };
+                case 'error': return { 'error_secondary': true };
+                case 'warning': return { 'warning_secondary': true };
+                case 'info': return { 'info_secondary': true };
+                case 'question': return { 'question_secondary': true };
+                case 'loading': return { 'loading_secondary': true };
+                default: return { 'secondary': true };
+            }
+        } else {
+            return { 'secondary': true };
+        }
+    }
+}

package/src/lib/components/dialog/dialog.component.css

@@ -0,0 +1,8 @@
+:host ::ng-deep .jdialog-full {
+  width: 100vw;
+  height: 100vh;
+  max-width: 100vw;
+  max-height: 100vh;
+  margin: 0 !important;
+  border-radius: 0;
+}

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

@@ -0,0 +1,57 @@
+@if (openModal) {
+    <!-- Overlay -->
+    @if (overlay) {
+      <div class="fixed inset-0 z-[999] bg-black/50"></div>
+    }
+  
+    <!-- Modal -->
+    <div class="fixed inset-0 z-[1000] flex pointer-events-none" [ngClass]="getPositionClass()">
+  
+      <div @modalTransition
+           class="pointer-events-auto bg-white dark:bg-foreground rounded-[12px] shadow-lg border-2 border-border dark:border-dark-border"
+           [ngStyle]="getOffsetStyles()"
+           data-draggable-dialog>
+  
+        <!-- Header draggable -->
+        @if (draggable) {
+          <div class="flex p-1 pl-4 pr-4 justify-between items-center bg-primary dark:bg-dark-primary border-b border-border dark:border-dark-border  rounded-[10px] font-semibold text-2sm cursor-move select-none"
+               (mousedown)="$event.stopPropagation(); startDrag($event)">
+            <h3 class="text-[1em] font-semibold text-white leading-none">{{ title }}</h3>
+
+            <button type="button" (click)="$event.stopPropagation(); onClose()"
+                    class="p-2 rounded-full border border-border dark:border-dark-border text-white hover:bg-dark-background focus:outline-none cursor-pointer">
+              <lucide-icon [name]="iconsService.icons.close" size="16"></lucide-icon>
+            </button>
+
+          </div>
+        }
+  
+        <!-- Header normal -->
+        @if (!draggable) {
+          <div class="flex p-1 pl-4 pr-4 justify-between items-center bg-primary dark:bg-dark-primary border-b border-border dark:border-dark-border  rounded-[10px] font-semibold text-2sm cursor-normal select-none">
+            <h3 class="text-[1em] font-semibold text-white leading-none">{{ title }}</h3>
+            <button type="button" (click)="onClose()"
+                    class="p-2 rounded-full border border-border dark:border-dark-border text-white hover:bg-dark-background focus:outline-none cursor-pointer">
+              <lucide-icon [name]="iconsService.icons.close" size="16"></lucide-icon>
+            </button>
+          </div>
+        }
+
+        <!-- Content -->
+        <div class="m-2"
+             [ngClass]="{ 'jdialog-full': isFullScreen() }"
+             [ngStyle]="{
+                width: getModalWidth(),
+                height: getModalHeight(),
+                'min-width': !isFullScreen() ? '200px' : null,
+                'min-height': !isFullScreen() ? '40px' : null
+             }">
+          @if (dialogTemplate) {
+            <ng-container [ngTemplateOutlet]="dialogTemplate"></ng-container>
+          }
+        </div>
+  
+      </div>
+    </div>
+  }
+  

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

@@ -0,0 +1,179 @@
+import { Component, Input, TemplateRef, CUSTOM_ELEMENTS_SCHEMA, Output, EventEmitter, HostListener, OnChanges, SimpleChanges } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { trigger, transition, style, animate } from '@angular/animations';
+import { LucideAngularModule } from 'lucide-angular';
+import { JIconsService } from 'tailjng';
+
+@Component({
+  selector: 'JDialog',
+  imports: [LucideAngularModule, CommonModule],
+  templateUrl: './dialog.component.html',
+  styleUrl: './dialog.component.css',
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  animations: [
+    trigger('modalTransition', [
+      transition(':enter', [
+        style({ transform: 'translateY(1rem)', opacity: 0 }),
+        animate('300ms ease-out', style({ transform: 'translateY(0)', opacity: 1 }))
+      ]),
+      transition(':leave', [
+        animate('150ms ease-in', style({ transform: 'translateY(1rem)', opacity: 0 }))
+      ])
+    ])
+  ]
+})
+export class JDialogComponent implements OnChanges {
+
+  @Input() position:
+    | 'center'
+    | 'leftCenter'
+    | 'rightCenter'
+    | 'topCenter'
+    | 'bottomCenter'
+    | 'leftTop'
+    | 'leftBottom'
+    | 'rightTop'
+    | 'rightBottom' = 'center';
+
+  @Input() offset: { top?: number, bottom?: number, left?: number, right?: number } = {};
+
+  @Input() openModal = false;
+  @Output() closeModal = new EventEmitter<void>();
+
+  @Input() title = 'Dialog Title';
+  @Input() dialogTemplate!: TemplateRef<any>;
+
+  @Input() width: number | 'auto' | 'full' = 500;
+  @Input() height: number | 'auto' | 'full' = 300;
+
+  @Input() overlay: boolean = true;
+  @Input() draggable: boolean = false;
+
+  private isDragging = false;
+  private hasMoved = false;
+  private dragOffset = { x: 0, y: 0 };
+
+  constructor(
+    public readonly iconsService: JIconsService
+  ) { }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['openModal']?.currentValue === true) {
+      this.hasMoved = false;
+    }
+  }
+
+  onOpen() {
+    this.hasMoved = false;
+    this.openModal = true;
+  }
+
+  onClose() {
+    this.closeModal.emit();
+  }
+
+  getModalWidth(): string {
+    if (this.width === 'auto') return 'auto';
+    if (typeof this.width === 'number') return `${this.width}px`;
+    if (this.width === 'full') return '90vw';
+    return `${this.width || 100}px`;
+  }
+
+  getModalHeight(): string {
+    if (this.height === 'auto') return 'auto';
+    if (typeof this.height === 'number') return `${this.height}px`;
+    if (this.height === 'full') return '90vh';
+    return `${this.height || 40}px`;
+  }
+
+
+  isFullScreen(): boolean {
+    return this.width === 'full' || this.height === 'full';
+  }
+
+  @HostListener('document:keydown.escape', ['$event'])
+  handleEscape(event: KeyboardEvent) {
+    if (this.openModal) {
+      this.onClose();
+    }
+  }
+
+  getPositionClass(): string {
+    switch (this.position) {
+      case 'leftCenter': return 'justify-start items-center';
+      case 'rightCenter': return 'justify-end items-center';
+      case 'topCenter': return 'justify-center items-start';
+      case 'bottomCenter': return 'justify-center items-end';
+      case 'leftTop': return 'justify-start items-start';
+      case 'leftBottom': return 'justify-start items-end';
+      case 'rightTop': return 'justify-end items-start';
+      case 'rightBottom': return 'justify-end items-end';
+      case 'center':
+      default: return 'justify-center items-center';
+    }
+  }
+
+  getOffsetStyles(): { [key: string]: string } {
+    return {
+      marginTop: this.offset.top !== undefined ? `${this.offset.top}px` : '',
+      marginBottom: this.offset.bottom !== undefined ? `${this.offset.bottom}px` : '',
+      marginLeft: this.offset.left !== undefined ? `${this.offset.left}px` : '',
+      marginRight: this.offset.right !== undefined ? `${this.offset.right}px` : '',
+    };
+  }
+
+  startDrag(event: MouseEvent) {
+    if (!this.draggable) return;
+
+    this.isDragging = true;
+
+    const dialogElement = (event.currentTarget as HTMLElement).closest('[data-draggable-dialog]') as HTMLElement;
+    if (!dialogElement) return;
+
+    const rect = dialogElement.getBoundingClientRect();
+    this.dragOffset = {
+      x: event.clientX - rect.left,
+      y: event.clientY - rect.top
+    };
+
+    // Only set position if it hasn't been moved before (respects initial offset)
+    if (!this.hasMoved) {
+      const computedTop = this.offset.top ?? rect.top;
+      const computedLeft = rect.left;
+
+      dialogElement.style.position = 'fixed';
+      dialogElement.style.margin = '0';
+      dialogElement.style.transform = 'none';
+      dialogElement.style.zIndex = '1001';
+      dialogElement.style.top = `${computedTop}px`;
+      dialogElement.style.left = `${computedLeft}px`;
+
+      this.hasMoved = true;
+    }
+
+    const mouseMoveHandler = (moveEvent: MouseEvent) => {
+      if (!this.isDragging) return;
+
+      const newLeft = moveEvent.clientX - this.dragOffset.x;
+      const newTop = moveEvent.clientY - this.dragOffset.y;
+
+      const maxLeft = window.innerWidth - dialogElement.offsetWidth;
+      const maxTop = window.innerHeight - dialogElement.offsetHeight;
+
+      dialogElement.style.left = `${Math.min(Math.max(newLeft, 0), maxLeft)}px`;
+      dialogElement.style.top = `${Math.min(Math.max(newTop, 0), maxTop)}px`;
+    };
+
+    const mouseUpHandler = () => {
+      this.isDragging = false;
+      document.removeEventListener('mousemove', mouseMoveHandler);
+      document.removeEventListener('mouseup', mouseUpHandler);
+    };
+
+    document.addEventListener('mousemove', mouseMoveHandler);
+    document.addEventListener('mouseup', mouseUpHandler);
+  }
+
+
+
+}

package/src/lib/components/image/viewer-image/viewer-image.component.css

@@ -0,0 +1,4 @@
+img {
+    -webkit-user-drag: none; /* Safari y Chrome */
+    user-select: none;       /* Evita selección de texto */
+}

package/src/lib/components/image/viewer-image/viewer-image.component.html

@@ -0,0 +1,75 @@
+<div class="relative w-full h-full" #container>
+
+    <!-- Control buttons -->
+    <div class="absolute flex gap-1 z-2" [ngClass]="{ 'top-3 right-3': isFullscreen, 'top-0 right-0': !isFullscreen }">
+      <JButton (clicked)="rotateLeftImg()" classes="secondary w-[35px] h-[35px]">
+        <lucide-icon [name]="iconsService.icons.rotateLeft" size="20" />
+      </JButton>
+
+      <JButton (clicked)="rotateRightImg()" classes="secondary w-[35px] h-[35px]">
+        <lucide-icon [name]="iconsService.icons.rotateRight" size="20" />
+      </JButton>
+
+      <JButton (clicked)="toggleFullscreen(container)" classes="secondary w-[35px] h-[35px]">
+        @if (isFullscreen) {
+          <lucide-icon [name]="iconsService.icons.exitFullscreen" size="20" />
+        } @else {
+          <lucide-icon [name]="iconsService.icons.fullscreen" size="20" />
+        }
+      </JButton>
+    </div>
+
+    <div class="absolute flex gap-1 z-2" [ngClass]="{ 'top-13 right-3': isFullscreen, 'top-10 right-0': !isFullscreen }">
+      <JButton (clicked)="reset()" classes="secondary w-[35px] h-[35px]">
+        <lucide-icon [name]="iconsService.icons.reset" size="20" />
+      </JButton>
+      
+      <JButton [disabled]="zoom === 3" (clicked)="zoomIn()" classes="secondary w-[35px] h-[35px]">
+        <lucide-icon [name]="iconsService.icons.zoomIn" size="20" />
+      </JButton>
+    </div>
+
+    <div class="absolute flex gap-1 z-2" [ngClass]="{ 'top-23 right-3': isFullscreen, 'top-20 right-0': !isFullscreen }">
+      <JButton [disabled]="zoom === 0.5" (clicked)="zoomOut()" classes="secondary w-[35px] h-[35px]">
+        <lucide-icon [name]="iconsService.icons.zoomOut" size="20" />
+      </JButton>
+    </div>
+  
+    <!-- Container image -->
+    <div class="flex justify-center items-center w-full h-full select-none" [class.fullscreen]="isFullscreen">
+      <div class="relative w-full h-full overflow-hidden">
+        @if (!hasError) {
+          <img
+            [src]="src"
+            [alt]="alt"
+            (load)="handleLoad()"
+            (error)="handleError()"
+            (mousedown)="startDrag($event)"
+            [style.transform]="'scale(' + zoom + ') rotate(' + rotate + 'deg) translate(' + posX + 'px,' + posY + 'px)'"
+            [style.objectFit]="objectFit"
+            [style.cursor]="zoom > 1 ? 'grab' : 'default'"
+            [class.invisible]="loading"
+            [class.transition-transform]="animateTransform"
+            [class.duration-200]="animateTransform"
+            [class.ease-in-out]="animateTransform"
+            class="w-full h-full object-contain pointer-events-auto select-none"
+          />
+        }
+  
+        @if (loading && !hasError) {
+          <div class="absolute flex flex-col gap-3 inset-0 items-center justify-center bg-white/70 dark:bg-black/40">
+            <lucide-icon [name]="iconsService.icons.loading" size="30" class="text-primary animate-spin"></lucide-icon>
+            <span class="text-sm text-gray-500">Cargando imagen...</span>
+          </div>
+        }
+
+        @if (hasError) {
+          <div class="absolute flex flex-col gap-3 inset-0 items-center justify-center">
+            <lucide-icon [name]="iconsService.icons.imageOff" size="70" class="text-red-500" />
+            <span class="text-sm text-red-500">No se pudo cargar la imagen</span>
+          </div>
+        }
+      </div>
+    </div>
+  </div>
+  

package/src/lib/components/image/viewer-image/viewer-image.component.ts

@@ -0,0 +1,131 @@
+import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SafeUrl } from '@angular/platform-browser';
+import { LucideAngularModule } from 'lucide-angular';
+import { JIconsService } from 'tailjng';
+import { JButtonComponent } from '../../button/button.component';
+
+@Component({
+  selector: 'JViewerImage',
+  imports: [CommonModule, LucideAngularModule, JButtonComponent],
+  templateUrl: './viewer-image.component.html',
+  styleUrl: './viewer-image.component.css'
+})
+export class JViewerImageComponent implements OnChanges {
+
+  @Input() src!: string | SafeUrl;
+  @Input() alt: string = 'Imagen';
+
+  @Input() width?: number;
+  @Input() height?: number;
+
+  @Input() objectFit: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down' = 'contain';
+
+  posX = 0;
+  posY = 0;
+
+  zoom = 1;
+  rotate = 0;
+
+  isFullscreen = false;
+  internalLoading = true;
+  animateTransform = true;
+  hasError = false;
+
+  private dragging = false;
+  private dragStart = { x: 0, y: 0 };
+
+  constructor(public readonly iconsService: JIconsService) { }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['src'] && changes['src'].currentValue !== changes['src'].previousValue) {
+      this.internalLoading = true;
+    }
+  }
+
+  handleLoad() {
+    this.internalLoading = false;
+    this.hasError = false;
+  }
+
+  handleError() {
+    this.internalLoading = false;
+    this.hasError = true;
+  }
+
+  get loading(): boolean {
+    return this.internalLoading;
+  }
+
+  toggleFullscreen(container: HTMLElement) {
+    if (!document.fullscreenElement) {
+      container.requestFullscreen();
+      this.isFullscreen = true;
+    } else {
+      document.exitFullscreen();
+      this.isFullscreen = false;
+    }
+  }
+
+  zoomIn() {
+    this.zoom = Math.min(this.zoom + 0.1, 3);
+  }
+
+  zoomOut() {
+    this.zoom = Math.max(this.zoom - 0.1, 0.5);
+  }
+
+  rotateRightImg() {
+    this.rotate += 90;
+  }
+
+  rotateLeftImg() {
+    this.rotate -= 90;
+  }
+
+  reset() {
+    this.zoom = 1;
+    this.rotate = 0;
+    this.posX = 0;
+    this.posY = 0;
+  }
+
+  startDrag(event: MouseEvent) {
+    if (this.zoom <= 1) return;
+    this.dragging = true;
+    this.animateTransform = false;
+
+    this.dragStart = {
+      x: event.clientX,
+      y: event.clientY
+    };
+
+    document.addEventListener('mousemove', this.onDrag);
+    document.addEventListener('mouseup', this.endDrag);
+  }
+
+  onDrag = (event: MouseEvent) => {
+    if (!this.dragging) return;
+
+    const deltaX = event.clientX - this.dragStart.x;
+    const deltaY = event.clientY - this.dragStart.y;
+
+    const angleRad = (this.rotate % 360) * (Math.PI / 180);
+
+    const rotatedX = deltaX * Math.cos(angleRad) + deltaY * Math.sin(angleRad);
+    const rotatedY = deltaY * Math.cos(angleRad) - deltaX * Math.sin(angleRad);
+
+    this.posX += rotatedX;
+    this.posY += rotatedY;
+
+    this.dragStart.x = event.clientX;
+    this.dragStart.y = event.clientY;
+  };
+
+  endDrag = () => {
+    this.dragging = false;
+    this.animateTransform = true;
+    document.removeEventListener('mousemove', this.onDrag);
+    document.removeEventListener('mouseup', this.endDrag);
+  };
+}

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

@@ -0,0 +1,49 @@
+<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]="disabled"
+    class="hidden"
+    (blur)="onTouched()" 
+/>
+
+<label
+    [for]="id"
+    class="input block text-sm dark:text-gray-400 w-full h-[40px] pr-1 bg-background dark:bg-dark-background border border-border dark:border-dark-border flex items-center justify-between text-black dark:text-white rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary transition duration-200 cursor-pointer">
+
+    <div class="truncate" [ngClass]="{ 'opacity-50' : !innerValue?.name }">
+    @if (innerValue?.name) {
+        <span>{{ innerValue?.name }}</span>
+    } @else {
+        <span class="flex items-center gap-2">
+        <lucide-icon [name]="iconsService.icons.upload" [size]="15" />
+        Seleccionar archivo...
+        </span>
+    }
+    </div>
+
+    @if (value && clearButton) {
+    <button type="button" class="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)="clearFile()">
+        <lucide-icon [name]="iconsService.icons.close" class="w-4 h-4" />
+    </button>
+    }
+</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" 
+    />
+    </div>
+}
+</div>