tailjng 0.0.13 → 0.0.15

package/lib/services/http/params-http.service.d.ts

@@ -0,0 +1,13 @@
+import { HttpParams } from '@angular/common/http';
+import { Params } from '@angular/router';
+import * as i0 from "@angular/core";
+export declare class JParamsHttpService {
+    /**
+     * Transform Params to HttpParams
+     * @param params
+     * @returns
+     */
+    resParams(params: Params): HttpParams;
+    static ɵfac: i0.ɵɵFactoryDeclaration<JParamsHttpService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<JParamsHttpService>;
+}

package/lib/services/static/icons.service.d.ts

@@ -0,0 +1,31 @@
+import * as i0 from "@angular/core";
+export declare class JIconsService {
+    icons: {
+        info: import("lucide-angular").LucideIconData;
+        success: import("lucide-angular").LucideIconData;
+        error: import("lucide-angular").LucideIconData;
+        warning: import("lucide-angular").LucideIconData;
+        question: import("lucide-angular").LucideIconData;
+        close: import("lucide-angular").LucideIconData;
+        check: import("lucide-angular").LucideIconData;
+        zoomIn: import("lucide-angular").LucideIconData;
+        zoomOut: import("lucide-angular").LucideIconData;
+        rotateRight: import("lucide-angular").LucideIconData;
+        rotateLeft: import("lucide-angular").LucideIconData;
+        reset: import("lucide-angular").LucideIconData;
+        fullscreen: import("lucide-angular").LucideIconData;
+        exitFullscreen: import("lucide-angular").LucideIconData;
+        imageOff: import("lucide-angular").LucideIconData;
+        upload: import("lucide-angular").LucideIconData;
+        view: import("lucide-angular").LucideIconData;
+        chevronDown: import("lucide-angular").LucideIconData;
+        squareDashedMousePointer: import("lucide-angular").LucideIconData;
+        search: import("lucide-angular").LucideIconData;
+        sun: import("lucide-angular").LucideIconData;
+        moon: import("lucide-angular").LucideIconData;
+        loading: import("lucide-angular").LucideIconData;
+    };
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<JIconsService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<JIconsService>;
+}

package/lib/services/transformer/calendar.service.d.ts

@@ -0,0 +1,71 @@
+import * as i0 from "@angular/core";
+export declare class JCalendarService {
+    nameDaysAb: string[];
+    nameDays: string[];
+    nameMontsAb: string[];
+    nameMonts: string[];
+    /**
+     * Get month from date
+     * @param date The date to extract the month from, can be a Date object or a string in 'YYYY-MM-DD' format.
+     * @returns The name of the month in Spanish.
+     */
+    getMonthFromDate(date: Date | string): string;
+    /**
+     * Calculate the age of a person based on their birth date.
+     * @param birth The birth date as a Date object or a string in 'YYYY-MM-DD' format.
+     * @returns The age in years, or null if the birth date is invalid.
+     */
+    calculateAge(birth: Date | string): number | null;
+    /**
+     * Calculate the complete age of a person based on their birth date.
+     * @param birth The birth date as a Date object or a string in 'YYYY-MM-DD' format.
+     * @returns An object containing years, months, and days of age.
+     */
+    calculateAgeComplete(birth: Date | string): {
+        years: number;
+        months: number;
+        days: number;
+    };
+    /**
+     * Format a date string to a more readable format.
+     * @param date The date string in 'YYYY-MM-DD' format.
+     * @param month Optional parameter to add to the month name.
+     * @returns A formatted date string in the format 'DD de MMMM del YYYY'.
+     */
+    formatearFechaString(date: string, month?: number): string;
+    /**
+     * Format a Date object to a string in the format 'DD de MMMM del YYYY'.
+     * @param date The Date object to format.
+     * @param month Optional parameter to add to the month name.
+     * @returns A formatted date string.
+     */
+    formatearFechaDate(date: Date, month?: number): string;
+    /**
+     * Parse a date string in the format "dd de MMMM del yyyy" to "yyyy-MM-dd".
+     * @param fechaStr The date string to parse.
+     * @returns The parsed date string in "yyyy-MM-dd" format or null if invalid.
+     */
+    parseFechaString(fechaStr: string): string | null;
+    /**
+     * Format a date to "MMM YY" format.
+     * @param date The date to format, can be a Date object.
+     * @returns The formatted date string.
+     */
+    formatMonthYear(date: Date): string;
+    /**
+     * Format a date to the Bogotá timezone (UTC-5).
+     * @param date The date to format, can be a Date object.
+     * @returns The formatted date string in 'yyyy-MM-ddTHH:mm:ss' format.
+     */
+    formatDateToBogota(date: Date): string;
+    /**
+     * Format a date to a relative time string.
+     * This method uses date-fns to format the date relative to now.
+     * @param date The date to format, can be a string in 'YYYY-MM-DD' format.
+     * @returns A formatted relative time string.
+     * @example "hace 2 días", "hace 1 hora", etc
+     */
+    formatRelativeDate(date: string): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<JCalendarService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<JCalendarService>;
+}

package/package.json

@@ -1,15 +1,17 @@
 {
   "name": "tailjng",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "peerDependencies": {
     "@angular/common": "^19.2.0",
     "@angular/core": "^19.2.0",
+    "@angular/animations": "^19.2.0",
     "@ng-icons/lucide": ">=29.0.0",
     "lucide-angular": ">=0.477.0",
-    "tailwindcss": ">=4.0.9"
+    "tailwindcss": ">=4.0.9",
+    "date-fns": "^4.1.0"
   },
   "bin": {
-    "tailjng": "./cli/tailjng.js"
+    "tailjng": "./cli/index.js"
   },
   "dependencies": {
     "tslib": "^2.3.0"

package/public-api.d.ts

@@ -1,3 +1,10 @@
-export * from './lib/tailjng.service';
-export * from './lib/tailjng.component';
-export * from './lib/services/icons.service';
+export * from './lib/config/tailjng-config.token';
+export * from './lib/services/crud/converter-crud.service';
+export * from './lib/services/crud/generic-crud.service';
+export * from './lib/services/http/params-http.service';
+export * from './lib/services/http/error-handler-http.service';
+export * from './lib/services/transformer/calendar.service';
+export * from './lib/services/static/icons.service';
+export * from './lib/services/alert/dialog-alert.service';
+export * from './lib/services/alert/toast-alert.service';
+export * from './lib/interfaces/crud/crud.interface';

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

@@ -0,0 +1,72 @@
+@for (dialog of dialogs(); track dialog.config.title) {
+  <div class="fixed inset-0 z-1001 flex items-center justify-center bg-black/50">
+    <div @modalTransition
+      class="relative w-100 border border-border p-4 rounded-lg shadow-5xl overflow-hidden"
+      [ngClass]="getDialogClass(dialog.config.type)">
+  
+      <!-- Icon big in the bottom left corner -->
+      <div [ngClass]="{ 'animate-spin': dialog.config.type === 'loading'}"
+        class="absolute -bottom-5 opacity-25 dark:opacity-25 -left-5 text-black dark:text-white pointer-events-none">
+        <lucide-icon 
+          [name]="getIcon(dialog.config.type)" 
+          [size]="130"
+          [ngClass]="getIconClass(dialog.config.type)"
+        >
+      </lucide-icon>
+      </div>
+
+      <!-- Icon small in the top right corner -->
+      <div [ngClass]="{ 'animate-spin': dialog.config.type === 'loading'}"
+        class="absolute top-5 opacity-25 dark:opacity-25 right-5 text-black dark:text-white pointer-events-none">
+        <lucide-icon 
+          [name]="getIcon(dialog.config.type)" 
+          [size]="30"
+          [ngClass]="getIconClass(dialog.config.type)"
+        >
+      </lucide-icon>
+      </div>
+  
+      <h3 class="text-lg font-semibold text-black dark:text-white pb-2">{{ dialog.config.title }}</h3>
+      <p class="text-black/80 dark:text-dark-muted-foreground" [innerHTML]="dialog.config.description"></p>
+  
+      <div class="flex justify-end gap-2 mt-4">
+
+        <!-- Button Retry (Only if type is "error") -->
+        @if (dialog.config.type === 'error' && dialog.config.onRetry) {
+            <JButton 
+                (clicked)="handleAction('retry')" 
+                [disabled]="dialog.isRetryLoading || dialog.isCancelLoading || dialog.isConfirmLoading" 
+                [isLoading]="dialog.isRetryLoading"  
+                [ngClasses]="getButtonSecondaryClass(dialog.config.type)"
+            >
+                {{ dialog.config.titleBtnRetry || 'Reintentar' }}
+            </JButton>
+        }
+
+        <!-- Button Cancel (Not shown if type is "success") -->
+        @if (dialog.config.type !== 'success' && dialog.config.onCancel) {
+            <JButton 
+                (clicked)="handleAction('cancel')" 
+                [disabled]="dialog.isRetryLoading || dialog.isCancelLoading || dialog.isConfirmLoading" 
+                [isLoading]="dialog.isCancelLoading" 
+                [ngClasses]="getButtonSecondaryClass(dialog.config.type)"
+            >
+                {{ dialog.config.titleBtnCancel || 'Cancelar' }}
+            </JButton>
+        }
+
+        <!-- Button Confirm (Not shown if type is "loading") -->
+        @if (dialog.config.type !== 'loading' && dialog?.config?.onConfirm) {
+            <JButton 
+                (clicked)="handleAction('confirm')" 
+                [disabled]="dialog.isRetryLoading || dialog.isCancelLoading || dialog.isConfirmLoading" 
+                [isLoading]="dialog.isConfirmLoading" 
+                [ngClasses]="getButtonClass(dialog.config.type)"
+            >
+                {{ dialog.config.titleBtnConfirm || 'Confirmar' }}
+            </JButton>
+        }
+      </div>
+    </div>
+  </div>
+  }

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

@@ -0,0 +1,66 @@
+import { Component, inject, computed, Input } from "@angular/core";
+import { NgClass } from "@angular/common";
+import { trigger, transition, style, animate } from "@angular/animations";
+import { JIconsService, JAlertDialogService } from "tailjng";
+import { LucideAngularModule } from "lucide-angular";
+import { JButtonComponent } from "../../button/button.component";
+import { JColorsService } from "../../color/colors.service";
+
+@Component({
+  selector: 'JAlertDialog',
+  imports: [LucideAngularModule, NgClass, JButtonComponent],
+  templateUrl: './dialog-alert.component.html',
+  styleUrl: './dialog-alert.component.css',
+  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 JAlertDialogComponent {
+  @Input() monocromatic: boolean = false;
+  private readonly alertDialogService = inject(JAlertDialogService);
+
+  constructor(
+    private readonly colorsService: JColorsService,
+    private readonly iconsService: JIconsService
+  ) { }
+
+  // Single computed property for dialogs
+  dialogs = computed(() => this.alertDialogService.dialogs());
+
+  getIcon(type: string) {
+    return this.iconsService.icons[type as keyof typeof this.iconsService.icons] || this.iconsService.icons.info;
+  }
+
+  // Method to execute the action based on the button clicked
+  handleAction(action: "confirm" | "cancel" | "retry") {
+    this.alertDialogService.executeAction(action);
+  }
+
+  // Get the class for the toast
+  getDialogClass(type: string) {
+    return this.colorsService.getAlertClass(type, this.monocromatic);
+  }
+
+  // Get the class for the icon
+  getIconClass(type: string) {
+    return this.colorsService.getIconClass(type, this.monocromatic);
+  }
+
+  // Get the class for the button
+  getButtonClass(type: string): { [key: string]: boolean } {
+    return this.colorsService.getButtonClass(type, this.monocromatic);
+  }
+
+  // Get the class for the secondary button
+  getButtonSecondaryClass(type: string): { [key: string]: boolean } {
+    return this.colorsService.getButtonSecondaryClass(type, this.monocromatic);
+  }
+}

package/src/lib/components/alert/toast-alert/toast-alert.component.css

@@ -0,0 +1,5 @@
+@media (max-width: 450px) {
+    .j-dialog-toas {
+        width: 90% !important;
+    }
+}

package/src/lib/components/alert/toast-alert/toast-alert.component.html

@@ -0,0 +1,76 @@
+<div [ngClass]="getPositionClass()">
+    @for (toast of toasts(); track toast.id) {
+    <div @toastTransition
+        class="j-dialog-toas relative ml-auto w-100 border border-border border-l-4 p-4 rounded-lg shadow-lg overflow-hidden flex gap-3"
+        [ngClass]="getToastClass(toast.config.type)">
+
+        <!-- Close button -->
+        <button
+          class="absolute p-1 top-2 right-2 cursor-pointer rounded transition duration-300 hover:bg-background dark:hover:bg-dark-background"
+          [ngClass]="getIconClass(toast.config.type)" 
+          (click)="closeToast(toast.id)"
+            >
+            <lucide-icon [name]="iconsService.icons.close" [size]="16"></lucide-icon>
+        </button>
+
+        <!-- Big icon in the bottom left corner -->
+        <div [ngClass]="{ 'animate-spin': toast.config.type === 'loading'}"
+            class="absolute -bottom-5 opacity-15 dark:opacity-25 -left-5 text-black dark:text-white z-2 pointer-events-none">
+            <lucide-icon 
+                [name]="getIcon(toast.config.type)" 
+                [size]="100"
+                [ngClass]="getIconClass(toast.config.type)"
+            >
+            </lucide-icon>
+        </div>
+
+        <!-- Small icon in the top right corner -->
+        <div [ngClass]="{ 'animate-spin': toast.config.type === 'loading'}"
+            class="absolute top-5 opacity-15 dark:opacity-25 right-5 text-black dark:text-white z-2 pointer-events-none">
+            <lucide-icon 
+                [name]="getIcon(toast.config.type)" 
+                [size]="30"
+                [ngClass]="getIconClass(toast.config.type)"
+            >
+            </lucide-icon>
+        </div>
+
+        <!-- Content -->
+        <div class="flex-1">
+            <h3 class="text-sm font-semibold text-black dark:text-white pb-2">{{ toast.config.title }}</h3>
+            <p class="text-sm text-black/80 dark:text-dark-muted-foreground" [innerHTML]="toast.config.description"></p>
+
+            <!-- Action buttons -->
+            <div class="flex justify-end gap-2 mt-2">
+
+                <!-- Button Cancel -->
+                @if (toast.config.type !== 'success' && toast.onCancelCallback) {
+                  <JButton 
+                    (clicked)="handleAction(toast.id, 'cancel')"
+                    [disabled]="toast.isCancelLoading || toast.isActionLoading" 
+                    [isLoading]="toast.isCancelLoading"
+                    classes="text-[10px] min-w-auto"
+                    [ngClasses]="getButtonSecondaryClass(toast.config.type)"
+                  >
+                    {{toast.config.titleBtnCancel || 'Cancelar'}}
+                  </JButton>
+                }
+
+                <!-- Button Action -->
+                @if (toast.config.type !== 'loading' && toast.onActionCallback) {
+                  <JButton 
+                    (clicked)="handleAction(toast.id, 'action')"
+                    [disabled]="toast.isCancelLoading || toast.isActionLoading" 
+                    [isLoading]="toast.isActionLoading"
+                    classes="text-[10px] min-w-auto" 
+                    [ngClasses]="getButtonClass(toast.config.type)"
+                  >
+                    {{toast.actionNameButton}}
+                  </JButton>
+                }
+            </div>
+        </div>
+
+    </div>
+    }
+</div>

package/src/lib/components/alert/toast-alert/toast-alert.component.ts

@@ -0,0 +1,87 @@
+import { Component, computed, inject, Input } from '@angular/core';
+import { trigger, transition, style, animate } from "@angular/animations";
+import { NgClass } from '@angular/common';
+import { LucideAngularModule } from 'lucide-angular';
+import { JButtonComponent } from '../../button/button.component';
+import { JColorsService } from '../../color/colors.service';
+import { JIconsService, JAlertToastService } from 'tailjng';
+
+@Component({
+  selector: 'JAlertToast',
+  imports: [LucideAngularModule, NgClass, JButtonComponent],
+  templateUrl: './toast-alert.component.html',
+  styleUrl: './toast-alert.component.css',
+  animations: [
+    trigger("toastTransition", [
+      transition(":enter", [
+        style({ opacity: 0, transform: "translateY(10px)" }),
+        animate("300ms ease-out", style({ opacity: 1, transform: "translateY(0)" }))
+      ]),
+      transition(":leave", [
+        animate("150ms ease-in", style({ opacity: 0, transform: "translateY(10px)" }))
+      ])
+    ])
+  ]
+})
+export class JAlertToastComponent {
+  @Input() monocromatic: boolean = false;
+  @Input() position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' = 'bottom-right';
+
+  private readonly alertToastService = inject(JAlertToastService);
+
+  constructor(
+    private readonly colorsService: JColorsService,
+    public readonly iconsService: JIconsService
+  ) { }
+
+  toasts = computed(() => this.alertToastService.toasts());
+
+  getIcon(type: string) {
+    return this.iconsService.icons[type as keyof typeof this.iconsService.icons] || this.iconsService.icons.info;
+  }
+
+  handleAction(toastId: string, action: "action" | "cancel") {
+    this.alertToastService.executeToastAction(toastId, action);
+  }
+
+  closeToast(toastId: string) {
+    this.alertToastService.closeToastById(toastId);
+  }
+
+  // Get the class of the toast
+  getToastClass(type: string) {
+    return this.colorsService.getAlertClass(type, this.monocromatic);
+  }
+
+  // Get the class of the icon
+  getIconClass(type: string) {
+    return this.colorsService.getIconClass(type, this.monocromatic);
+  }
+
+  // Get the class of the button
+  getButtonClass(type: string): { [key: string]: boolean } {
+    return this.colorsService.getButtonClass(type, this.monocromatic);
+  }
+
+  // Get the class of the secondary button
+  getButtonSecondaryClass(type: string): { [key: string]: boolean } {
+    return this.colorsService.getButtonSecondaryClass(type, this.monocromatic);
+  }
+
+  // Assign toast position
+  getPositionClass(): string {
+    const base = 'w-full fixed z-1000 flex flex-col gap-2 max-w-md';
+    switch (this.position) {
+      case 'top-left':
+        return `${base} top-4 left-4`;
+      case 'top-right':
+        return `${base} top-20 right-4`;
+      case 'bottom-left':
+        return `${base} bottom-4 left-4`;
+      case 'bottom-right':
+      default:
+        return `${base} bottom-4 right-4`;
+    }
+  }
+
+}

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

@@ -0,0 +1,36 @@
+<button
+  [attr.type]="type"
+  [jTooltip]="tooltip"
+  [jTooltipPosition]="tooltipPosition"
+  [disabled]="disabled || isLoading"
+  [ngClass]="computedClasses"
+  [class]="classes"
+  (click)="handleClick($event)"
+>
+  <div class="flex items-center justify-center gap-2">
+
+    @if (isLoading) {
+      <div [ngClass]="{ 'pt-1 pb-1': icon }">
+        <lucide-icon [name]="iconsService.icons.loading" [size]="iconSize || 15" class="animate-spin" />
+      </div>
+    }
+
+    @if (!isLoading && icon) {
+      <div class="pt-1 pb-1">
+
+        @if (!isChangeIcon) {
+          <lucide-icon [name]="icon" [size]="iconSize" />
+        } @else {
+          <lucide-icon [name]="iconChange" [size]="iconSize" />
+        }
+        
+      </div>
+    }
+
+    @if (!isLoading && text) {
+      <span>{{ text }}</span>
+    }
+
+    <ng-content></ng-content>
+  </div>
+</button>

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

@@ -0,0 +1,95 @@
+import { NgClass } from "@angular/common"
+import { Component, Input, Output, EventEmitter } from "@angular/core"
+import { LucideAngularModule } from "lucide-angular"
+import { JIconsService } from "tailjng";
+import { JColorsService } from '../color/colors.service';
+import { JTooltipDirective } from "../tooltip/tooltip.directive"
+
+@Component({
+  selector: 'JButton',
+  imports: [NgClass, LucideAngularModule, JTooltipDirective],
+  templateUrl: './button.component.html',
+  styleUrl: './button.component.css'
+})
+export class JButtonComponent {
+
+  @Input() type: "button" | "submit" | "reset" = "button";
+  @Input() tooltipPosition: "top" | "right" | "bottom" | "left" = "top";
+
+  @Input() text!: string | number;
+  @Input() tooltip: string = "";
+
+  @Input() icon!: any;
+  @Input() iconSize: number = 15;
+  @Input() iconChange!: any;
+  @Input() isChangeIcon: boolean = false;
+
+  @Output() clicked = new EventEmitter<Event>();
+
+  @Input() disabled = false;
+  @Input() isLoading = false;
+
+  @Input() classes: string = "";
+  @Input() ngClasses: { [key: string]: boolean } = {};
+
+
+  // Define classes based on button type (switch)
+  get variantClasses(): string {
+    return this.colorsService.variants[this.getActiveVariant()] || "min-w-[100px] text-black dark:text-white shadow-md"
+  }
+
+  // Combine base classes with variants
+  get computedClasses() {
+    return {
+      "flex gap-3 items-center justify-center font-semibold border border-border dark:border-dark-border px-3 py-2 rounded transition duration-300 select-none": true,
+      [this.variantClasses]: true, // Apply variant classes based on switch
+      "cursor-pointer": !this.disabled && !this.isLoading, // Default cursor when active
+      "cursor-default opacity-50 pointer-events-none": this.disabled || this.isLoading, // Disabled cursor
+      ...this.ngClasses, // Allows using dynamic validations with [ngClass]
+    }
+  }
+
+
+  constructor(
+    public readonly iconsService: JIconsService,
+    private readonly colorsService: JColorsService,
+  ) { }
+
+
+  /**
+   * Verify if a class is present in `classes` or `ngClasses`
+   * Split the class string by spaces to check each class individually
+   * @param className Name of the class to check
+   * @returns True if the class is present, false otherwise
+   */
+  private hasClass(className: string): boolean {
+    const classArray = this.classes.split(" ")
+    return classArray.includes(className) || this.ngClasses[className]
+  }
+
+
+
+  /**
+   * Get the active variant based on the provided classes.
+   * It checks if the class exists in the `variants` object of `JColorsService
+   * @returns The active variant based on the provided classes.
+   */
+  private getActiveVariant(): string {
+    const variant = Object.keys(this.colorsService.variants).find((variant) => this.hasClass(variant))
+    return variant ?? "default"
+  }
+
+
+
+  /**
+   * Handle click event on the button.
+   * Emits the clicked event if the button is not disabled and not loading.
+   * @param event The click event
+   */
+  handleClick(event: Event) {
+    if (!this.disabled && !this.isLoading) {
+      this.clicked.emit(event)
+    }
+  }
+
+}

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

@@ -0,0 +1,23 @@
+<div class="flex flex-col items-center justify-center gap-2">
+    @if (title) {
+        <span class="text-[8px] opacity-80">{{title}}</span>
+    }
+
+    <label class="relative inline-flex items-center justify-center">
+        <input 
+            type="checkbox" 
+            class="absolute opacity-0 cursor-pointer peer" 
+            [checked]="getValue(item, column)"
+            (change)="onCheckboxChange(item, column)" 
+            [disabled]="disabled"
+        >
+        <span
+            class="inline-flex items-center justify-center w-[25px] h-[25px] bg-white border border-primary dark:border-dark-border rounded transition-all duration-200 ease-in-out relative peer  peer-checked:bg-primary peer-checked:border-primary dark:peer-checked:bg-dark-primary dark:peer-checked:border-dark-primary"
+            [class]="classes"
+            [ngClass]="{'opacity-50' : disabled, 'cursor-not-allowed': disabled, 'cursor-pointer': !disabled}"
+        >
+            <lucide-icon [name]="icon" [size]="iconSize" class="text-white"></lucide-icon>
+        </span>
+    </label>
+    
+</div>

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

@@ -0,0 +1,44 @@
+import { Component, forwardRef, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { LucideAngularModule } from 'lucide-angular';
+import { JIconsService } from 'tailjng';
+import { FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'JInputCheckbox',
+  imports: [CommonModule, LucideAngularModule, FormsModule, ReactiveFormsModule],
+  templateUrl: './input-checkbox.component.html',
+  styleUrl: './input-checkbox.component.css',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => JInputCheckboxComponent),
+      multi: true
+    }
+  ]
+})
+export class JInputCheckboxComponent {
+
+  @Input() title!: string;
+
+  @Input() icon: any;
+  @Input() iconSize: number = 15;
+
+  @Input() disabled?: boolean;
+  @Input() isLoading?: boolean;
+  @Input() classes: string = '';
+
+  @Input() item: any;
+  @Input() column: any;
+
+  // Funciones
+  @Input() getValue: (item: any, column: any) => boolean = () => false;
+  @Input() onCheckboxChange: (item: any, column: any) => void = () => { };
+
+  constructor(
+    public readonly iconsService: JIconsService
+  ) {
+    this.icon = this.iconsService.icons.check;
+  }
+
+}