tailjng 0.1.6 → 0.1.7

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,97 @@
+.j-checkbox-root {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.j-checkbox-label {
+  display: inline-flex;
+  gap: 0.5rem;
+  cursor: pointer;
+  user-select: none;
+}
+
+.j-checkbox-control {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.j-checkbox-input {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  margin: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.j-checkbox-input:disabled {
+  cursor: not-allowed;
+}
+
+.j-checkbox-input:focus-visible + .j-checkbox-box {
+  outline: 2px solid var(--color-ring);
+  outline-offset: 2px;
+}
+
+.j-checkbox-box {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.375rem;
+  height: 1.375rem;
+  border: 1.5px solid var(--color-border);
+  border-radius: 0.375rem;
+  background-color: var(--color-background);
+  transition:
+    background-color 0.15s ease,
+    border-color 0.15s ease,
+    box-shadow 0.15s ease;
+}
+
+:host-context(.dark) .j-checkbox-box,
+:host-context(html.dark) .j-checkbox-box {
+  border-color: var(--color-dark-border);
+  background-color: var(--color-dark-background);
+}
+
+.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 {
+  font-size: 0.75rem;
+  line-height: 1.25;
+  color: var(--color-foreground);
+  opacity: 0.85;
+}
+
+:host-context(.dark) .j-checkbox-title,
+:host-context(html.dark) .j-checkbox-title {
+  color: var(--color-dark-foreground);
+}
+
+.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,60 @@
-<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="j-checkbox-root"
+  [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" [ngClass]="layoutClasses">
+    @if (showTitleBefore) {
+      <span
+        class="j-checkbox-title"
+        [ngClass]="titleClasses"
+        [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="j-checkbox-control" [class]="classes">
+      <input
+        type="checkbox"
+        class="j-checkbox-input"
+        [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" 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
+        class="j-checkbox-title"
+        [ngClass]="titleClasses"
+        [style.font-size]="titleSize"
+      >
+        {{ title }}
+      </span>
+    }
+  </label>
 </div>