tailjng 0.1.6 → 0.1.8

package/src/lib/components/card/card-complete/complete-card.component.ts

@@ -1,17 +1,18 @@
 import { Component, EventEmitter, Input, OnInit, Output, TemplateRef } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
-import { LucideAngularModule } from 'lucide-angular';
 import { Params } from '@angular/router';
 import { animate, state, style, transition, trigger } from '@angular/animations';
-import { EnableBoolean, FilterButton, FilterSelect, JAlertToastService, JConverterCrudService, JGenericCrudService, JIconsService, LoadingState, LoadingStates, OptionsTable, SortDirection, TableColumn } from 'tailjng';
+import { EnableBoolean, FilterButton, FilterSelect, JAlertToastService, JConverterCrudService, JGenericCrudService, LoadingState, LoadingStates, OptionsTable, SortDirection, TableColumn } from 'tailjng';
 import { JCompletePaginatorComponent } from '../../paginator/paginator-complete/complete-paginator.component';
 import { JCompleteFilterComponent } from '../../filter/filter-complete/complete-filter.component';
+import { Icons } from '../../.config/icons/icons.lucide';
+import { JIconComponent } from '../../icon/icon.component';
 
 @Component({
   selector: 'JCompleteCard',
   standalone: true,
-  imports: [CommonModule, FormsModule, JCompletePaginatorComponent, JCompleteFilterComponent, LucideAngularModule],
+  imports: [CommonModule, FormsModule, JCompletePaginatorComponent, JCompleteFilterComponent, JIconComponent],
   templateUrl: './complete-card.component.html',
   styleUrl: './complete-card.component.scss',
   animations: [
@@ -19,12 +20,10 @@ import { JCompleteFilterComponent } from '../../filter/filter-complete/complete-
       state('collapsed', style({
         height: '0',
         opacity: 0,
-        overflow: 'hidden',
-      })),
+        overflow: 'hidden'})),
       state('expanded', style({
         height: '*',
-        opacity: 1,
-      })),
+        opacity: 1})),
       transition('collapsed <=> expanded', [
         animate('0.3s ease-in-out')
       ])
@@ -32,6 +31,7 @@ import { JCompleteFilterComponent } from '../../filter/filter-complete/complete-
   ]
 })
 export class JCompleteCardComponent implements OnInit {
+  readonly Icons = Icons;
 
   Math = Math;
 
@@ -46,11 +46,11 @@ export class JCompleteCardComponent implements OnInit {
     sort: 'idle',
     aditionalButtons: {},
     checked: 'idle',
-    action: 'idle',
-  };
+    action: 'idle'};
 
   @Input() endpoint!: string;
   mainEndpoint!: string;
+  @Input() staticData: any[] = [];
   @Input() columns: TableColumn<any>[] = [];
   @Input() defaultFilters: { [key: string]: any } = {};
   @Input() isPaginator = true;
@@ -114,7 +114,6 @@ export class JCompleteCardComponent implements OnInit {
   titleChecked!: string;
 
   constructor(
-    public readonly iconsService: JIconsService,
     private readonly genericService: JGenericCrudService,
     private readonly alertToastService: JAlertToastService,
     private readonly converterService: JConverterCrudService,
@@ -169,6 +168,20 @@ export class JCompleteCardComponent implements OnInit {
     // Emit search parameters
     this.loadedParams.emit(params);
 
+    if (this.staticData.length > 0) {
+      this.data = this.staticData.map(item => ({ ...item }));
+      this.totalItems = this.data.length;
+      this.updateDisplayData();
+      this.generatePagination();
+      this.setLoadingState(loadingType, 'success');
+      this.dataLoaded.emit();
+      if (loadingType === 'sort') {
+        this.sortingColumn = null;
+      }
+      onFinally?.();
+      return;
+    }
+
     // Simulating API wait
     // setTimeout(() => {
     this.genericService.findAll<any>({ endpoint: this.endpoint, params }).subscribe({
@@ -244,8 +257,7 @@ export class JCompleteCardComponent implements OnInit {
         this.alertToastService.AlertToast({
           type: "success",
           title: "Registro actualizado!",
-          description: response.message,
-        });
+          description: response.message});
       }
     })
   }
@@ -359,11 +371,9 @@ export class JCompleteCardComponent implements OnInit {
       limit: this.itemsPerPage,
       sort: {
         column: this.sortColumn,
-        direction: this.sortDirection,
-      },
+        direction: this.sortDirection},
       filters: this.filters,
-      defaultFilters: this.defaultFilters,
-    });
+      defaultFilters: this.defaultFilters});
 
     if (this.searchQuery && this.searchQuery.trim() !== '') {
       const baseSearchKeys = this.columns

package/src/lib/components/card/card-crud-complete/complete-crud-card.component.html

@@ -46,7 +46,7 @@
   @if (isLoading('initialLoad') && displayData.length === 0) {
     <div class="w-full flex justify-center items-center h-100 bg-white dark:bg-foreground rounded-[20px] border border-border dark:border-dark-border">
       <div class="flex flex-col gap-3 items-center justify-center py-4">
-        <lucide-icon [name]="iconsService.icons.loading" size="30" class="text-primary animate-spin"></lucide-icon>
+        <JIcon [icon]="Icons.Loader2" size="30" iconClass="text-primary animate-spin" [ariaHidden]="true" />
         <p>Cargando datos...</p>
       </div>
     </div>
@@ -86,7 +86,7 @@
 
   } @else if (!isLoading('pagination')) {
     <div class="j-crud-card w-full flex flex-col gap-3 justify-center items-center h-100 bg-white dark:bg-foreground rounded-[20px] border border-border dark:border-dark-border hover:border-primary/50 hover:dark:border-primary">
-      <lucide-icon [name]="iconsService.icons.info" size="35" class="text-primary"></lucide-icon>
+      <JIcon [icon]="Icons.Info" size="35" iconClass="text-primary" [ariaHidden]="true" />
       <p class="text-black dark:text-white">No hay datos disponibles</p>
     </div>
   }

package/src/lib/components/card/card-crud-complete/complete-crud-card.component.ts

@@ -1,29 +1,28 @@
 import { Component, EventEmitter, Input, OnInit, Output, TemplateRef } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
-import { LucideAngularModule } from 'lucide-angular';
 import { Params } from '@angular/router';
 import { animate, state, style, transition, trigger } from '@angular/animations';
-import { EnableBoolean, FilterButton, FilterSelect, JAlertToastService, JConverterCrudService, JGenericCrudService, JIconsService, LoadingState, LoadingStates, OptionsTable, SortDirection, TableColumn } from 'tailjng';
+import { EnableBoolean, FilterButton, FilterSelect, JAlertToastService, JConverterCrudService, JGenericCrudService, LoadingState, LoadingStates, OptionsTable, SortDirection, TableColumn } from 'tailjng';
 import { JCompletePaginatorComponent } from '../../paginator/paginator-complete/complete-paginator.component';
 import { JCompleteFilterComponent } from '../../filter/filter-complete/complete-filter.component';
+import { Icons } from '../../.config/icons/icons.lucide';
+import { JIconComponent } from '../../icon/icon.component';
 
 @Component({
   selector: 'JCompleteCrudCard',
   standalone: true,
-  imports: [CommonModule, FormsModule, JCompletePaginatorComponent, JCompleteFilterComponent, LucideAngularModule],
+  imports: [CommonModule, FormsModule, JCompletePaginatorComponent, JCompleteFilterComponent, JIconComponent],
   templateUrl: './complete-crud-card.component.html',
   styleUrl: './complete-crud-card.component.scss',
   animations: [
     trigger('slideToggle', [
       state('collapsed', style({
         height: '0',
-        opacity: 0,
-      })),
+        opacity: 0})),
       state('expanded', style({
         height: '*',
-        opacity: 1,
-      })),
+        opacity: 1})),
       transition('collapsed <=> expanded', [
         animate('0.3s ease-in-out')
       ])
@@ -31,6 +30,7 @@ import { JCompleteFilterComponent } from '../../filter/filter-complete/complete-
   ]
 })
 export class JCompleteCrudCardComponent implements OnInit {
+  readonly Icons = Icons;
 
   Math = Math;
 
@@ -44,13 +44,13 @@ export class JCompleteCrudCardComponent implements OnInit {
     sort: 'idle',
     aditionalButtons: {},
     checked: 'idle',
-    action: 'idle',
-  };
+    action: 'idle'};
 
   @Input() endpoint!: string;
   // Clave alternativa de response.data cuando difiere del mainEndpoint (ej. reminders en reminder/mine)
   @Input() responseKey?: string;
   mainEndpoint!: string;
+  @Input() staticData: any[] = [];
   @Input() columns: TableColumn<any>[] = [];
   @Input() defaultFilters: { [key: string]: any } = {};
   @Input() isPaginator = true;
@@ -114,7 +114,6 @@ export class JCompleteCrudCardComponent implements OnInit {
   titleChecked!: string;
 
   constructor(
-    public readonly iconsService: JIconsService,
     private readonly genericService: JGenericCrudService,
     private readonly alertToastService: JAlertToastService,
     private readonly converterService: JConverterCrudService,
@@ -175,6 +174,20 @@ export class JCompleteCrudCardComponent implements OnInit {
 
     const params = this.getQueryParams();
 
+    if (this.staticData.length > 0) {
+      this.data = this.staticData.map(item => ({ ...item }));
+      this.totalItems = this.data.length;
+      this.updateDisplayData();
+      this.generatePagination();
+      this.setLoadingState(loadingType, 'success');
+      this.dataLoaded.emit();
+      if (loadingType === 'sort') {
+        this.sortingColumn = null;
+      }
+      onFinally?.();
+      return;
+    }
+
     // Simulating API wait
     // setTimeout(() => {
     this.genericService.findAll<any>({ endpoint: this.endpoint, params }).subscribe({
@@ -250,8 +263,7 @@ export class JCompleteCrudCardComponent implements OnInit {
         this.alertToastService.AlertToast({
           type: "success",
           title: "Registro actualizado!",
-          description: response.message,
-        });
+          description: response.message});
       }
     })
   }
@@ -365,11 +377,9 @@ export class JCompleteCrudCardComponent implements OnInit {
       limit: this.itemsPerPage,
       sort: {
         column: this.sortColumn,
-        direction: this.sortDirection,
-      },
+        direction: this.sortDirection},
       filters: this.filters,
-      defaultFilters: this.defaultFilters,
-    });
+      defaultFilters: this.defaultFilters});
 
     if (this.searchQuery && this.searchQuery.trim() !== '') {
       const baseSearchKeys = this.columns

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

@@ -0,0 +1,30 @@
+.j-checkbox-input:focus-visible + .j-checkbox-box {
+  outline: 2px solid var(--color-ring);
+  outline-offset: 2px;
+}
+
+.j-checkbox-box--checked {
+  border-color: var(--color-primary);
+  background-color: var(--color-primary);
+  color: var(--color-primary-foreground);
+}
+
+:host-context(.dark) .j-checkbox-box--checked,
+:host-context(html.dark) .j-checkbox-box--checked {
+  border-color: var(--color-dark-primary);
+  background-color: var(--color-dark-primary);
+  color: var(--color-dark-primary-foreground);
+}
+
+.j-checkbox-box--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.j-checkbox-title--disabled {
+  opacity: 0.45;
+}
+
+.j-checkbox-label:has(.j-checkbox-input:disabled) {
+  cursor: not-allowed;
+}

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

@@ -1,52 +1,64 @@
-<div class="flex flex-col items-center justify-center" jTooltip="{{tooltip}}" [jTooltipPosition]="tooltipPosition">
-
-<label class="relative inline-flex items-center justify-center gap-2"
-  [ngClass]="{
-    'flex-col': titlePosition === 'top' || titlePosition === 'bottom',
-    'flex-row align-center': titlePosition === 'left' || titlePosition === 'right'
-  }"
+<div
+  class="inline-flex flex-col items-center justify-center"
+  [jTooltip]="tooltip"
+  [jTooltipPosition]="tooltipPosition"
 >
-        @if (title && (titlePosition === 'top' || titlePosition === 'left')) {
-            <span [class]="classesTitle + ' text-[' + titleSize + '] opacity-80 user-none'" 
-                [ngClass]="{ 'opacity-50!': disabled }"
-            >
-                {{ title }}
-            </span>
-        }
+  <label class="j-checkbox-label inline-flex gap-2 cursor-pointer select-none" [ngClass]="layoutClasses">
+    @if (showTitleBefore) {
+      <span
+        [ngClass]="titleClasses"
+        class="text-xs leading-tight text-foreground/85 dark:text-dark-foreground"
+        [style.font-size]="titleSize"
+      >
+        {{ title }}
+      </span>
+    }
 
-        <input 
-            type="checkbox" 
-            class="absolute opacity-0 cursor-pointer peer" 
-            [checked]="innerValue"
-            (change)="onCheckboxChangeHandler($event)"
-            [disabled]="disabled"
-        >
-        
-        <span
-            class="inline-flex items-center justify-center w-[25px] h-[25px] border rounded transition-all duration-200 ease-in-out relative"
-            [class]="classes"
-            [ngClass]="{
-                'bg-primary border-primary dark:bg-dark-primary dark:border-dark-primary': innerValue,
-                'bg-white border-primary dark:border-dark-border': !innerValue,
-                'opacity-50 cursor-not-allowed': disabled, 
-                'cursor-pointer': !disabled
-            }"
-        >
-            <lucide-icon 
-                [name]="icon" 
-                [size]="iconSize" 
-                class="text-white"
-                [ngClass]="{'opacity-0': !innerValue, 'opacity-100': innerValue}"
-            ></lucide-icon>
-        </span>
+    <span class="relative inline-flex items-center justify-center" [class]="classes">
+      <input
+        type="checkbox"
+        class="j-checkbox-input absolute inset-0 z-[1] m-0 opacity-0 cursor-pointer disabled:cursor-not-allowed"
+        [checked]="checked"
+        [disabled]="isDisabled"
+        (change)="onCheckboxChangeHandler($event)"
+      />
 
-        @if (title && (titlePosition === 'bottom' || titlePosition === 'right')) {
-            <span [class]="classesTitle + ' text-[' + titleSize + '] opacity-80 select-none'" 
-                [ngClass]="{ 'opacity-50!': disabled }"
-            >
-                {{ title }}
-            </span>
+      <span
+        [ngClass]="boxClasses"
+        class="inline-flex items-center justify-center w-[1.375rem] h-[1.375rem] border-[1.5px] border-border dark:border-dark-border rounded-md bg-background dark:bg-dark-background transition-[background-color,border-color,box-shadow] duration-150 ease-in-out"
+        aria-hidden="true"
+      >
+        @if (isLoading) {
+          <JIcon
+            [icon]="Icons.Loader2"
+            [size]="iconSize"
+            iconClass="animate-spin text-primary dark:text-dark-primary"
+            [ariaHidden]="true"
+          />
+        } @else {
+          <JIcon
+            [icon]="icon"
+            [size]="iconSize"
+            [inheritParentColor]="true"
+            [ngClasses]="{
+              'opacity-0 scale-75': !checked,
+              'opacity-100 scale-100': checked,
+            }"
+            iconClass="transition-all duration-150"
+            [ariaHidden]="true"
+          />
         }
-    </label>
+      </span>
+    </span>
 
+    @if (showTitleAfter) {
+      <span
+        [ngClass]="titleClasses"
+        class="text-xs leading-tight text-foreground/85 dark:text-dark-foreground"
+        [style.font-size]="titleSize"
+      >
+        {{ title }}
+      </span>
+    }
+  </label>
 </div>

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

@@ -1,114 +1,185 @@
-import { Component, EventEmitter, forwardRef, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { LucideAngularModule } from 'lucide-angular';
-import { JIconsService } from 'tailjng';
-import { FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule, ControlValueAccessor } from '@angular/forms';
+import { NgClass } from '@angular/common';
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  Output,
+  SimpleChanges,
+  forwardRef,
+} from '@angular/core';
+import {
+  ControlValueAccessor,
+  FormsModule,
+  NG_VALUE_ACCESSOR,
+  ReactiveFormsModule,
+} from '@angular/forms';
+import { LucideIconData } from 'lucide-angular';
+import { Icons } from '../../.config/icons/icons.lucide';
+import { JIconComponent } from '../../icon/icon.component';
 import { JTooltipDirective } from '../../tooltip/tooltip.directive';
+import { CheckboxTitlePosition, CheckboxTooltipPosition } from './input-checkbox.types';
 
+export type { CheckboxTitlePosition, CheckboxTooltipPosition } from './input-checkbox.types';
+
+/**
+ * Checkbox with optional label, tooltip, and table-row integration via `item` / `column`.
+ *
+ * Install: `npx tailjng add checkbox-input`
+ */
 @Component({
   selector: 'JInputCheckbox',
-  standalone: true,
-  imports: [CommonModule, LucideAngularModule, FormsModule, ReactiveFormsModule, JTooltipDirective],
+  imports: [NgClass, FormsModule, ReactiveFormsModule, JTooltipDirective, JIconComponent],
   templateUrl: './input-checkbox.component.html',
-  styleUrls: ['./input-checkbox.component.css'],
+  styleUrl: './input-checkbox.component.css',
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
       useExisting: forwardRef(() => JInputCheckboxComponent),
-      multi: true
-    }
-  ]
+      multi: true,
+    },
+  ],
 })
 export class JInputCheckboxComponent implements OnChanges, ControlValueAccessor {
-
-  @Input() title!: string;
-  @Input() titlePosition: "top" | "right" | "bottom" | "left" = "top";
-  @Input() titleSize: string = '8px';
-  @Input() tooltip!: string;
-  @Input() tooltipPosition: "top" | "right" | "bottom" | "left" = "top";
-  @Input() icon: any;
-  @Input() iconSize: number = 15;
-  @Input() disabled?: boolean;
-  @Input() isLoading?: boolean;
-  @Input() classes: string = '';
-  @Input() classesTitle: string = '';
+  readonly Icons = Icons;
+
+  @Input() title = '';
+  @Input() titlePosition: CheckboxTitlePosition = 'top';
+  @Input() titleSize = '0.75rem';
+  @Input() tooltip = '';
+  @Input() tooltipPosition: CheckboxTooltipPosition = 'top';
+  @Input() icon: LucideIconData = Icons.Check;
+  @Input() iconSize = 16;
+  @Input() disabled: boolean | undefined = false;
+  @Input() isLoading = false;
+  @Input() classes = '';
+  @Input() classesTitle = '';
   @Input() item: any;
   @Input() column: any;
 
   @Input() getValue: (item: any, column: any) => boolean = () => false;
-  @Input() onCheckboxChange: (item: any, column: any, value: boolean) => void = () => { };
+  @Input() onCheckboxChange: (item: any, column: any, value?: boolean) => void = () => {};
 
-  @Output() onCheckboxChangeOutput: EventEmitter<any> = new EventEmitter();
+  @Input() ngClasses: Record<string, boolean> = {};
 
-  innerValue: boolean = false;
-  onChange: any = () => { };
-  onTouched: any = () => { };
+  @Output() onCheckboxChangeOutput = new EventEmitter<{
+    item: any;
+    column: any;
+    newValue: boolean;
+  }>();
 
-  constructor(public readonly iconsService: JIconsService) {
-    this.icon = this.iconsService.icons.check;
-  }
+  innerValue = false;
 
-  ngOnChanges(changes: SimpleChanges): void {
-    if ((changes['item'] || changes['column']) && this.item && this.column) {
-      this.innerValue = this.getValue(this.item, this.column);
-      this.onChange(this.innerValue);
-    }
-  }
+  private onChange: (value: boolean) => void = () => {};
+  private onTouched: () => void = () => {};
 
+  /**
+   * Whether the checkbox is checked.
+   */
+  get checked(): boolean {
+    return this.innerValue;
+  }
 
   /**
-   * writeValue - To write a value to the component
-   * @param value 
+   * Whether interaction is blocked.
    */
-  writeValue(value: any): void {
-    if (value !== undefined) {
-      this.innerValue = !!value;
-    } else if (this.item && this.column) {
-      this.innerValue = this.getValue(this.item, this.column);
-    }
+  get isDisabled(): boolean {
+    return this.disabled || this.isLoading;
   }
 
+  /**
+   * Layout direction for label + control.
+   */
+  get layoutClasses(): Record<string, boolean> {
+    const vertical = this.titlePosition === 'top' || this.titlePosition === 'bottom';
+    return {
+      'flex-col': vertical,
+      'flex-row': !vertical,
+      'items-center': true,
+    };
+  }
 
   /**
-   * registerOnChange - To register the change callback function
-   * @param fn 
+   * Whether the title renders before the control.
    */
-  registerOnChange(fn: any): void {
-    this.onChange = fn;
+  get showTitleBefore(): boolean {
+    return !!this.title && (this.titlePosition === 'top' || this.titlePosition === 'left');
   }
 
+  /**
+   * Whether the title renders after the control.
+   */
+  get showTitleAfter(): boolean {
+    return !!this.title && (this.titlePosition === 'bottom' || this.titlePosition === 'right');
+  }
 
+  /**
+   * Class map for the visible checkbox box.
+   */
+  get boxClasses(): Record<string, boolean> {
+    return {
+      'j-checkbox-box': true,
+      'j-checkbox-box--checked': this.checked,
+      'j-checkbox-box--disabled': this.isDisabled,
+      ...this.ngClasses,
+    };
+  }
 
   /**
-   * registerOnTouched - To register the touched callback function
-   * @param fn 
+   * Class map for the optional label text.
    */
-  registerOnTouched(fn: any): void {
+  get titleClasses(): Record<string, boolean> {
+    return {
+      'j-checkbox-title': true,
+      'j-checkbox-title--disabled': this.isDisabled,
+      [this.classesTitle]: !!this.classesTitle,
+    };
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if ((changes['item'] || changes['column']) && this.item && this.column) {
+      this.innerValue = this.getValue(this.item, this.column);
+    }
+  }
+
+  writeValue(value: unknown): void {
+    if (value !== undefined && value !== null) {
+      this.innerValue = !!value;
+      return;
+    }
+
+    if (this.item && this.column) {
+      this.innerValue = this.getValue(this.item, this.column);
+    }
+  }
+
+  registerOnChange(fn: (value: boolean) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
     this.onTouched = fn;
   }
 
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
 
+  onCheckboxChangeHandler(event: Event): void {
+    if (this.isDisabled) {
+      return;
+    }
 
-  /**
-   * onCheckboxChangeHandler - To handle the checkbox change event
-   * @param event 
-   */
-  onCheckboxChangeHandler(event: Event) {
     const target = event.target as HTMLInputElement;
     const newValue = target.checked;
 
     this.innerValue = newValue;
-
-    if (this.onCheckboxChange) {
-      this.onCheckboxChange(this.item, this.column, newValue);
-    }
-
+    this.onCheckboxChange(this.item, this.column, newValue);
     this.onCheckboxChangeOutput.emit({
       item: this.item,
       column: this.column,
-      newValue: newValue
+      newValue,
     });
-
     this.onChange(newValue);
     this.onTouched();
   }

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

@@ -0,0 +1,3 @@
+export type CheckboxTitlePosition = 'top' | 'right' | 'bottom' | 'left';
+
+export type CheckboxTooltipPosition = 'top' | 'right' | 'bottom' | 'left';