tailjng 0.0.55 → 0.0.57

package/src/lib/components/filter/filter-complete/complete-filter.component.html

@@ -1,195 +1,211 @@
-<div class="flex flex-col md:flex-row-reverse justify-between items-center mb-4 gap-3 select-none">
-    <div class="flex items-center gap-3 md:w-auto w-full">
-        
-        <!-- Search -->
-        <div class="relative w-full">
-
-            <input 
-                type="text" 
-                [(ngModel)]="searchQuery" 
-                [placeholder]="searchPlaceholder"
-                class="input w-full h-[40px] bg-background dark:bg-dark-background border border-border dark:border-dark-border text-black dark:text-white rounded px-3 py-2 pr-16 focus:outline-none focus:ring-2 focus:ring-primary" 
-            />
-
-            <div class="absolute right-3 top-1/2 transform -translate-y-1/2 flex items-center gap-2">
-
-                @if (isLoadingSearch) {
-                    <lucide-icon [name]="iconsService.icons.loading" size="18" class="text-gray-400 animate-spin"></lucide-icon>
-                }
-
-                @if (searchQuery && !isLoadingSearch) {
-                    <button 
-                        (click)="clearSearch()"
-                        class="pr-1 mr-1 text-gray-400 hover:text-gray-600 focus:outline-none cursor-pointer"
-                        aria-label="Limpiar búsqueda"
-                    >
-                        <lucide-icon [name]="iconsService.icons.close" size="16"></lucide-icon>
-                    </button>
-                }
-
-                @if (!isLoadingSearch && !searchQuery) {
-                    <lucide-icon [name]="iconsService.icons.search" size="16" class="text-gray-400"></lucide-icon>
-                }
-
-            </div>
+<div
+  class="flex flex-col md:flex-row-reverse justify-between items-center mb-4 gap-3 select-none"
+>
+  <div class="flex items-center gap-3 md:w-auto w-full">
+    <!-- Search -->
+    @if (isSearch) {
+      <div class="relative w-full">
+        <input
+          type="text"
+          [(ngModel)]="searchQuery"
+          [placeholder]="searchPlaceholder"
+          class="input w-full h-[40px] bg-background dark:bg-dark-background border border-border dark:border-dark-border text-black dark:text-white placeholder:text-muted-foreground/70 dark:placeholder:text-dark-muted-foreground/70 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary dark:focus:ring-dark-primary transition duration-200 resize-y disabled:opacity-60 disabled:cursor-not-allowed"
+        />
+
+        <div
+          class="absolute right-3 top-1/2 transform -translate-y-1/2 flex items-center gap-2"
+        >
+          @if (isLoadingSearch) {
+            <lucide-icon
+              [name]="iconsService.icons.loading"
+              size="18"
+              class="text-gray-400 animate-spin"
+            ></lucide-icon>
+          }
+
+          @if (searchQuery && !isLoadingSearch) {
+            <button
+              (click)="clearSearch()"
+              class="pr-1 mr-1 text-gray-400 hover:text-gray-600 focus:outline-none cursor-pointer"
+              aria-label="Limpiar búsqueda"
+            >
+              <lucide-icon
+                [name]="iconsService.icons.close"
+                size="16"
+              ></lucide-icon>
+            </button>
+          }
+
+          @if (!isLoadingSearch && !searchQuery) {
+            <lucide-icon
+              [name]="iconsService.icons.search"
+              size="16"
+              class="text-gray-400"
+            ></lucide-icon>
+          }
         </div>
+      </div>
+    }
+
+    <!-- Elements per page -->
+    @if (isItemsPerPage) {
+      <div class="min-w-[75px]">
+        <JDropdownSelect
+          [isLoading]="isLoadingPerPage"
+          [(ngModel)]="itemsPerPage"
+          (selectionChange)="onItemsPerPageChange()"
+          placeholder="Mostrar"
+          title="Mostrar elementos"
+          [options]="itemsPerPageOptions"
+        />
+      </div>
+    }
+
+    <!-- Show columns -->
+    @if (columns.length > 0 && isShowColumns) {
+      <div>
+        <JMultiTableSelect
+          type="multi-table"
+          title="Seleccionar columnas"
+          [columns]="visibleColumns"
+        />
+      </div>
+    }
+  </div>
 
-        <!-- Elements per page -->
-        @if (isItemsPerPage) {
-        <div class="min-w-[75px]">
-            <JDropdownSelect 
-                [isLoading]="isLoadingPerPage"
-                [(ngModel)]="itemsPerPage" 
-                (selectionChange)="onItemsPerPageChange()" 
-                placeholder="Mostrar"
-                title="Mostrar elementos" [options]="itemsPerPageOptions" 
+  <div
+    class="flex gap-3 text-sm w-full md:w-auto md:justify-center justify-between"
+  >
+    <div class="flex flex-row flex-wrap gap-2">
+      @for (button of filtersButton; track $index) {
+        @if (getIsVisible(button)) {
+          <JButton
+            [icon]="button.icon"
+            [iconSize]="22"
+            [iconChange]="button.iconChange"
+            [isChangeIcon]="getIsChangeIcon(button)"
+            [isLoading]="getIsLoading(button)"
+            [disabled]="getDisabled(button)"
+            [tooltip]="getTooltip(button)"
+            [tooltipPosition]="button.tooltipPosition ?? 'top'"
+            (clicked)="filterBottomClick(button)"
+            [classes]="button.classes ?? ''"
+            [ngClasses]="{ 'min-w-auto p-1! pl-2! pr-2!': true }"
+          />
+
+          @if (button.type === "upload") {
+            <input
+              #hiddenFileInput
+              type="file"
+              accept=".xlsx,.xls"
+              (change)="onCustomFileSelected($event, button)"
+              style="display: none"
             />
-        </div>
+          }
         }
-
-        <!-- Show columns -->
-        @if (columns.length > 0 && isShowColumns) {
-            <div>
-                <JMultiTableSelect 
-                    type="multi-table" 
-                    title="Seleccionar columnas" 
-                    [columns]="visibleColumns" 
-                />
-            </div>
-        }
-
-    </div>
-
-    <div class="flex gap-3 text-sm w-full md:w-auto md:justify-center justify-between "  >
-
-        <div class="flex flex-row  flex-wrap gap-2">
-            @for (button of filtersButton; track $index) {
-                @if (getIsVisible(button)) {
-                    <JButton 
-                        [icon]="button.icon" 
-                        [iconSize]="22"
-                        [iconChange]="button.iconChange" 
-                        [isChangeIcon]="getIsChangeIcon(button)"
-                        [isLoading]="isButtonLoading(button)"
-                        [disabled]="getDisabled(button)"
-                        [tooltip]="getTooltip(button)"
-                        [tooltipPosition]="button.tooltipPosition ?? 'top'"
-                        (clicked)="filterBottomClick(button)" 
-                        [classes]="button.classes ?? ''" 
-                        [ngClasses]="{'min-w-auto p-1! pl-2! pr-2!' : true}"
-                    />
-
-                    @if (button.type === 'upload') {
-                        <input
-                            #hiddenFileInput
-                            type="file"
-                            accept=".xlsx,.xls"
-                            (change)="onCustomFileSelected($event, button)"
-                            style="display: none" 
-                        />
-                    }
-                }
-            }
-
-            @if (checked) {
-                <JSwitchCheckbox onKeyPress
-                    [title]="titleChecked"
-                    [isChecked]="isChecked"
-                    (click)="checkActiveInactive.emit(isChecked)"
-                    [isLoading]="isLoadingChecked"
-                />
-            }
-        </div>
-        
+      }
+
+      @if (checked) {
+        <JSwitchCheckbox
+          onKeyPress
+          [title]="titleChecked"
+          [isChecked]="isChecked"
+          (click)="checkActiveInactive.emit(isChecked)"
+          [isLoading]="isLoadingChecked"
+        />
+      }
     </div>
+  </div>
 </div>
 
-
 <!-- Content Filters -->
- <div class="select-none">
-    <JDialog
-        [openModal]="dialogOpen"
-        (closeModal)="dialogOpen = false"
-        [dialogTemplate]="templateDialog" 
-        position="leftCenter"
-        title="Filtros"
-        [width]="220"
-        height="auto"
-        [overlay]="false"
-        [draggable]="true"
-    />
+<div class="select-none">
+  <JDialog
+    [openModal]="dialogOpen"
+    (closeModal)="dialogOpen = false"
+    [dialogTemplate]="templateDialog"
+    position="leftCenter"
+    title="Filtros"
+    [width]="220"
+    height="auto"
+    [overlay]="false"
+    [draggable]="true"
+  />
 </div>
 
 <ng-template #templateDialog>
-    <div class="m-0 pt-1">
-        @if (filtersSelect.length > 0) {
-            <div class="flex flex-col gap-2">
-            @for (filter of filtersSelect; track $index) {
-                @if (filter.isVisible ?? true) {
+  <div class="m-0 pt-1">
+    @if (filtersSelect.length > 0) {
+      <div class="flex flex-col gap-2">
+        @for (filter of filtersSelect; track $index) {
+          @if (filter.isVisible ?? true) {
+            @if (filter.type === "dropdown") {
+              <div>
+                <JDropdownSelect
+                  [type]="'dropdown'"
+                  [(ngModel)]="filter.selected"
+                  (selectionChange)="
+                    filter.onSelected ? filter.onSelected($event) : null
+                  "
+                  [optionLabel]="filter.optionLabel ?? ''"
+                  [optionValue]="filter.optionValue ?? ''"
+                  [labelSeparator]="filter.labelSeparator ?? ''"
+                  [placeholder]="filter.placeholder ?? ''"
+                  [showClear]="filter.showClear ?? false"
+                  [options]="filter.options"
+                  [sort]="filter.sort ?? 'ASC'"
+                  [showAllOption]="filter.showAllOption ?? false"
+                />
+              </div>
+            }
 
-                    @if (filter.type === 'dropdown') {
-                        <div>
-                            <JDropdownSelect
-                                [type]="'dropdown'"
-                                [(ngModel)]="filter.selected"
-                                (selectionChange)="filter.onSelected ? filter.onSelected($event) : null"
-                                [optionLabel]="filter.optionLabel ?? ''"
-                                [optionValue]="filter.optionValue ?? ''"
-                                [placeholder]="filter.placeholder ?? ''"
-                                [showClear]="filter.showClear ?? false"
-                                [options]="filter.options"
-                                [sort]="filter.sort ?? 'ASC'"
-                                [showAllOption]="filter.showAllOption ?? false"
-                            />
-                        </div>
-                    }
-              
-                    <!-- Searchable -->
-                    @if (filter.type === 'searchable') {
-                        <div>
-                            <JDropdownSelect
-                                [type]="'searchable'"
-                                [(ngModel)]="filter.selected"
-                                (selectionChange)="filter.onSelected?.($event)"
-                                [endpoint]="filter.endpoint"
-                                [optionLabel]="filter.optionLabel"
-                                [optionValue]="filter.optionValue"
-                                [placeholder]="filter.placeholder ?? ''"
-                                [showClear]="filter.showClear ?? false"
-                                [loadOnInit]="filter.loadOnInit ?? false"
-                                [isSearch]="filter.isSearch ?? true"
-                                [searchFields]="filter.searchFields || []"
-                                [defaultFilters]="filter.defaultFilters || []"
-                                [sort]="filter.sort ?? 'ASC'"
-                                [showAllOption]="filter.showAllOption ?? false"
-                            />
-                        </div>
-                    }
-              
-                    @if (filter.type === 'multi-table') {
-                        <div>
-                            <JMultiTableSelect
-                                [(ngModel)]="filter.selected"
-                                (selectionChange)="filter.onSelected ? filter.onSelected($event) : null"
-                                [columns]="filter.columns"
-                                [btnText]="filter.btnText ?? ''"
-                                [isFilterSelect]="true"
-                            />
-                        </div>
-                    }
-                  }
-                }
-            </div>
-            
-        } @else {
-            <div class="text-center text-sm text-black dark:text-white pt-5 pb-5">
-                <p>No hay filtros disponibles</p>
-            </div>
+            <!-- Searchable -->
+            @if (filter.type === "searchable") {
+              <div>
+                <JDropdownSelect
+                  [type]="'searchable'"
+                  [(ngModel)]="filter.selected"
+                  (selectionChange)="filter.onSelected?.($event)"
+                  [endpoint]="filter.endpoint"
+                  [optionLabel]="filter.optionLabel"
+                  [optionValue]="filter.optionValue"
+                  [labelSeparator]="filter.labelSeparator ?? ''"
+                  [placeholder]="filter.placeholder ?? ''"
+                  [showClear]="filter.showClear ?? false"
+                  [loadOnInit]="filter.loadOnInit ?? false"
+                  [isSearch]="filter.isSearch ?? true"
+                  [searchFields]="filter.searchFields || []"
+                  [defaultFilters]="filter.defaultFilters || []"
+                  [sort]="filter.sort ?? 'ASC'"
+                  [showAllOption]="filter.showAllOption ?? false"
+                />
+              </div>
+            }
+
+            @if (filter.type === "multi-table") {
+              <div>
+                <JMultiTableSelect
+                  [(ngModel)]="filter.selected"
+                  (selectionChange)="
+                    filter.onSelected ? filter.onSelected($event) : null
+                  "
+                  [columns]="filter.columns"
+                  [btnText]="filter.btnText ?? ''"
+                  [isFilterSelect]="true"
+                />
+              </div>
+            }
+          }
         }
-    </div>
+      </div>
+    } @else {
+      <div class="text-center text-sm text-black dark:text-white pt-5 pb-5">
+        <p>No hay filtros disponibles</p>
+      </div>
+    }
+  </div>
 </ng-template>
 
-
 <!-- Content load data -->
 <!-- <JDialog 
   [openModal]="dialogOpenCharge"
@@ -224,4 +240,4 @@
 
     </div>
   </div>
-</ng-template> -->
+</ng-template> -->

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

@@ -1,4 +1,3 @@
-
 import { Component, EventEmitter, Input, Output, OnDestroy, OnInit, ViewChild, ElementRef } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { LucideAngularModule } from 'lucide-angular';
@@ -29,6 +28,7 @@ export class JCompleteFilterComponent implements OnInit, OnDestroy {
   @Input() searchPlaceholder: string = 'Buscar...';
 
   // Inputs
+  @Input() isSearch: boolean = true;
   @Input() params: any;
   @Input() columns: TableColumn<any>[] = [];
   @Input() endpoint!: string;
@@ -490,4 +490,14 @@ export class JCompleteFilterComponent implements OnInit, OnDestroy {
     // Si no se define, por defecto es visible
     return button.isVisible !== false;
   }
+
+  getIsLoading(button: FilterButton): boolean {
+    if (button.isLoading === undefined) {
+      return false;
+    }
+    if (typeof button.isLoading === 'function') {
+      return button.isLoading();
+    }
+    return button.isLoading;
+  }
 }

package/src/lib/components/form/form-validation/validation-form.component.html

@@ -1,5 +1,5 @@
 @if (hasErrors) {
-  <div class="flex flex-col text-red-600 dark:text-red-300 text-sm">
+  <div class="flex flex-col text-red-600 dark:text-red-300 text-[12px]">
       @for (message of errors; track $index) {
         <span [class]="classes">{{ message }}</span>
       }

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

@@ -11,7 +11,7 @@
         (blur)="onTouched()"
         [ngClass]="combinedNgClass"
         [class]="classes"
-        class="input w-full h-[40px] bg-background dark:bg-dark-background border border-border dark:border-dark-border text-black dark:text-white rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary transition duration-200" 
+        class="input w-full h-[40px] bg-background dark:bg-dark-background border border-border dark:border-dark-border text-black dark:text-white placeholder:text-muted-foreground/70 dark:placeholder:text-dark-muted-foreground/70 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary dark:focus:ring-dark-primary transition duration-200 resize-y disabled:opacity-60 disabled:cursor-not-allowed" 
     />
 
     @if (value && clearButton) {

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

@@ -15,13 +15,13 @@
   
   <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"
+    class="input block text-sm w-full h-[40px] pr-1 bg-background dark:bg-dark-background border border-border dark:border-dark-border text-black dark:text-white placeholder:text-muted-foreground dark:placeholder:text-dark-muted-foreground rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary dark:focus:ring-dark-primary transition duration-200 resize-y disabled:opacity-60 disabled:cursor-not-allowed flex items-center justify-between transition duration-200 cursor-pointer"
   >    
-    <div class="truncate" [ngClass]="{ 'opacity-50' : !innerValue?.name }">    
+    <div class="truncate" [ngClass]="{ 'opacity-80' : !innerValue?.name }">    
       @if (innerValue?.name) {        
         <span>{{ innerValue?.name }}</span>    
       } @else {        
-        <span class="flex items-center gap-2">        
+        <span class="flex items-center gap-2 text-muted-foreground dark:text-dark-muted-foreground">        
           <lucide-icon [name]="iconsService.icons.upload" [size]="15" />        
           Seleccionar archivo...        
         </span>    

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

@@ -1,21 +1,25 @@
 <div class="relative w-full flex">
-    <textarea
-        [id]="id"
-        [name]="name ?? ''"
-        [placeholder]="placeholder"
-        [value]="value"
-        (input)="onInput($event)"
-        [required]="required"
-        [disabled]="disabled"
-        (blur)="onTouched()"
-        [ngClass]="combinedNgClass"
-        [class]="classes"
-        class="input w-full h-[70px] min-h-[70px] pr-10 bg-background dark:bg-dark-background border border-border dark:border-dark-border text-black dark:text-white rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary transition duration-200"
-    ></textarea>
+  <textarea
+    [id]="id"
+    [name]="name ?? ''"
+    [placeholder]="placeholder"
+    [value]="value"
+    (input)="onInput($event)"
+    [required]="required"
+    [disabled]="disabled"
+    (blur)="onTouched()"
+    [ngClass]="combinedNgClass"
+    [class]="classes"
+    class="input w-full h-[70px] min-h-[70px] pr-10 bg-background dark:bg-dark-background border border-border dark:border-dark-border text-black dark:text-white placeholder:text-muted-foreground/70 dark:placeholder:text-dark-muted-foreground/70 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary dark:focus:ring-dark-primary transition duration-200 resize-y disabled:opacity-60 disabled:cursor-not-allowed"
+  ></textarea>
 
-    @if (value && clearButton) {
-        <button type="button" class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 text-gray-400 hover:text-gray-500 pr-1 mr-1 text-gray-400 hover:text-gray-600 focus:outline-none cursor-pointer" (click)="clearInput()">
-            <lucide-icon [name]="iconsService.icons.close" class="w-4 h-4" />
-        </button>
-    }
-</div>
+  @if (value && clearButton) {
+    <button
+      type="button"
+      class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 text-gray-400 hover:text-gray-500 pr-1 mr-1 text-gray-400 hover:text-gray-600 focus:outline-none cursor-pointer"
+      (click)="clearInput()"
+    >
+      <lucide-icon [name]="iconsService.icons.close" class="w-4 h-4" />
+    </button>
+  }
+</div>

package/src/lib/components/select/select-dropdown/dropdown-select.component.html

@@ -4,12 +4,13 @@
             type="button" 
             [disabled]="disabled || isLoading" 
             (click)="toggleColumnSelector()"
-            class="flex w-full h-[40px] items-center justify-between px-3 py-2 text-sm bg-background dark:bg-dark-background border border-border dark:border-dark-border rounded focus:outline-none focus:ring-2 focus:ring-primary select-none" 
+            [class]="'flex w-full h-[40px] items-center justify-between px-3 py-2 text-sm bg-background dark:bg-dark-background border border-border dark:border-dark-border rounded focus:outline-none focus:ring-2 focus:ring-primary select-none' + ' ' + classes" 
             [ngClass]="{
-                'opacity-50 cursor-not-allowed pointer-events-none': disabled || isLoading
+                'opacity-50 cursor-not-allowed pointer-events-none': disabled || isLoading,
+                ngClass: true
             }"
         >
-            <span class="truncate text-black dark:text-white" [ngClass]="{'opacity-50' : selectedValue === null}">{{selectedLabel}}</span>
+            <span class="truncate text-black dark:text-white" [ngClass]="{'opacity-70 text-muted-foreground dark:text-dark-muted-foreground' : selectedValue === null}">{{selectedLabel}}</span>
             
             <div class="flex items-center">
                 @if (showClear && selectedValue !== null) {
@@ -32,7 +33,7 @@
 <!-- Dropdown positioned outside the flow -->
 @if (isColumnSelectorOpen) {
     <div @modalTransition
-        class="absolute z-[100] min-w-[250px] mt-1 bg-background dark:bg-dark-background rounded-lg shadow-lg border border-border border-dark-border"
+        [class]="'absolute z-[100] min-w-[250px] mt-1 bg-background dark:bg-dark-background rounded-lg shadow-lg border border-border border-dark-border' + ' ' + classes"
         [style.width.px]="dropdownWidth"
         [style.top.px]="dropdownTop" 
         [style.left.px]="dropdownLeft"

package/src/lib/components/select/select-dropdown/dropdown-select.component.ts

@@ -55,6 +55,9 @@ export class JDropdownSelectComponent implements ControlValueAccessor, AfterView
 
   @Input() isSearch = true;
   @Input() isFilterSelect = false;
+  
+  @Input() classes: string = '';
+  @Input() ngClass: { [key: string]: boolean } = {};
 
   @Output() selectionChange = new EventEmitter<any>();
   @Output() fullData = new EventEmitter<any[]>();

package/src/lib/components/select/select-multi-dropdown/multi-dropdown-select.component.html

@@ -1,3 +1,4 @@
+
 <div class="relative w-full h-full">
   <div class="w-auto" #selectButton>
     <button
@@ -7,7 +8,7 @@
       class="flex w-full h-[40px] items-center justify-between px-3 py-2 text-sm bg-background dark:bg-dark-background border border-border dark:border-dark-border rounded focus:outline-none focus:ring-2 focus:ring-primary select-none"
       [ngClass]="{ 'opacity-50 cursor-not-allowed pointer-events-none': disabled || isLoading }"
     >
-      <span class="truncate text-black dark:text-white" [ngClass]="{ 'opacity-50': selectedValues.length === 0 }">
+      <span class="truncate text-black dark:text-white" [ngClass]="{ 'opacity-70 text-muted-foreground dark:text-dark-muted-foreground': selectedValues.length === 0 }">
         {{ displayLabel }}
       </span>
 

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

@@ -1,6 +1,6 @@
 <div class="w-full mb-3">
 
-  @if (isSearch) {
+  @if (isFilter) {
     <JFilter
       [params]="params"
       [columns]="columns"
@@ -8,6 +8,8 @@
       [mainEndpoint]="mainEndpoint"
       [data]="data"
       [(searchQuery)]="searchQuery"
+      [isSearch]="isSearch"
+      [isShowColumns]="isEyeColumn"
       (search)="onSearch()"
       [searchPlaceholder]="searchPlaceholder"
       [isItemsPerPage]="isItemsPerPage"

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

@@ -65,7 +65,9 @@ export class JCompleteCrudTableComponent implements OnInit {
   @Input() isNumbering: boolean = true;
   @Input() defaultFilters: { [key: string]: any } = {};
   @Input() isPaginator = true;
+  @Input() isFilter = true;
   @Input() isSearch = true;
+  @Input() isEyeColumn = true;
   @Input() hideRowCondition?: (row: any) => boolean
 
   data: any[] = [];
@@ -1049,6 +1051,7 @@ export class JCompleteCrudTableComponent implements OnInit {
   };
 
   getRowNgClass(row: any): any {
+
     const base: any = {
       'cursor-pointer': this.hasExpandable(),
     };
@@ -1062,7 +1065,10 @@ export class JCompleteCrudTableComponent implements OnInit {
       value = value?.[key];
     }
 
-    const normalizedValue = String(value)?.toUpperCase?.() || '';
+    const normalizedValue =
+      value === null || value === undefined
+        ? 'null'
+        : String(value).toUpperCase();
     const semanticClass = columnWithColor.rowColorCondition?.[normalizedValue];
 
     if (semanticClass && this.rowColorMap[semanticClass]) {