tailjng 0.1.6 → 0.1.7

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

@@ -126,32 +126,24 @@
                           @if (
                             isLoading("sort") && column.key === sortingColumn
                           ) {
-                            <lucide-icon
-                              [name]="iconsService.icons.loading"
+                            <JIcon [icon]="Icons.Loader2"
                               size="16"
-                              class="text-white animate-spin"
-                            ></lucide-icon>
+                              iconClass="text-white animate-spin" [ariaHidden]="true" />
                           } @else if (
                             getSortKey(sortColumn) !== column.key ||
                             sortDirection === "none"
                           ) {
-                            <lucide-icon
-                              [name]="iconsService.icons.chevronsUpDown"
+                            <JIcon [icon]="Icons.ChevronsUpDown"
                               size="16"
-                              class="text-white"
-                            ></lucide-icon>
+                              iconClass="text-white" [ariaHidden]="true" />
                           } @else if (sortDirection === "asc") {
-                            <lucide-icon
-                              [name]="iconsService.icons.chevronUp"
+                            <JIcon [icon]="Icons.ChevronUp"
                               size="16"
-                              class="text-white"
-                            ></lucide-icon>
+                              iconClass="text-white" [ariaHidden]="true" />
                           } @else {
-                            <lucide-icon
-                              [name]="iconsService.icons.chevronDown"
+                            <JIcon [icon]="Icons.ChevronDown"
                               size="16"
-                              class="text-white"
-                            ></lucide-icon>
+                              iconClass="text-white" [ariaHidden]="true" />
                           }
                         </div>
                       }
@@ -200,11 +192,9 @@
                 <div
                   class="flex flex-col gap-3 items-center justify-center py-4"
                 >
-                  <lucide-icon
-                    [name]="iconsService.icons.loading"
+                  <JIcon [icon]="Icons.Loader2"
                     size="30"
-                    class="text-primary animate-spin"
-                  ></lucide-icon>
+                    iconClass="text-primary animate-spin" [ariaHidden]="true" />
                   <p>Cargando datos...</p>
                 </div>
               </td>
@@ -226,10 +216,9 @@
                       <td
                         class="px-4 py-2 h-[50px] text-center text-xs border-b border-border dark:border-dark-border text-black dark:text-white"
                       >
-                        <lucide-icon
-                          [name]="iconsService.icons.nextPage"
+                        <JIcon [icon]="Icons.ChevronRight"
                           size="16"
-                          class="transition-transform duration-300"
+                          iconClass="transition-transform duration-300"
                           [class]="expandedRows.has(item) ? 'rotate-90' : ''"
                         />
                       </td>
@@ -349,10 +338,8 @@
                                     <div
                                       class="flex gap-2 text-dark-primary dark:text-primary underline block"
                                     >
-                                      <lucide-icon
-                                        [name]="iconsService.icons.linkOff"
-                                        size="25"
-                                      ></lucide-icon>
+                                      <JIcon [icon]="Icons.Link2Off"
+                                        size="25" [ariaHidden]="true" />
                                     </div>
                                   } @else {
                                     <a
@@ -361,10 +348,8 @@
                                       target="_blank"
                                       rel="noopener noreferrer"
                                     >
-                                      <lucide-icon
-                                        [name]="iconsService.icons.link"
-                                        size="25"
-                                      ></lucide-icon>
+                                      <JIcon [icon]="Icons.Link"
+                                        size="25" [ariaHidden]="true" />
                                     </a>
                                   }
                                 </div>
@@ -378,10 +363,10 @@
                                   <JButton
                                     [icon]="
                                       column.valueData?.(item)
-                                        ? iconsService.icons.img
-                                        : iconsService.icons.imageOff
+                                        ? Icons.Image
+                                        : Icons.ImageOff
                                     "
-                                    [iconChange]="iconsService.icons.imgs"
+                                    [iconChange]="Icons.Images"
                                     [isChangeIcon]="
                                       keyDialog ===
                                         getValue(item, column).split(',')[0] &&
@@ -416,21 +401,17 @@
                                   class="flex items-center gap-3 text-[14px]"
                                 >
                                   <div class="flex items-center gap-1">
-                                    <lucide-icon
-                                      [name]="iconsService.icons.calendar"
+                                    <JIcon [icon]="Icons.Calendar"
                                       size="15"
-                                      class="text-gray-500 dark:text-gray-400"
-                                    ></lucide-icon>
+                                      iconClass="text-gray-500 dark:text-gray-400" [ariaHidden]="true" />
                                     <span>{{
                                       getValue(item, column).split(",")[0]
                                     }}</span>
                                   </div>
                                   <div class="flex items-center gap-1">
-                                    <lucide-icon
-                                      [name]="iconsService.icons.clock"
+                                    <JIcon [icon]="Icons.Clock"
                                       size="15"
-                                      class="text-gray-500 dark:text-gray-400"
-                                    ></lucide-icon>
+                                      iconClass="text-gray-500 dark:text-gray-400" [ariaHidden]="true" />
                                     <span>{{
                                       getValue(item, column)
                                         .split(",")[1]
@@ -588,10 +569,9 @@
                     <td
                       class="j-group-number-col h-[50px] border-b border-border px-2 py-2 text-center text-xs text-black dark:border-dark-border dark:text-white bg-primary/10 dark:bg-primary/20"
                     >
-                      <lucide-icon
-                        [name]="iconsService.icons.nextPage"
+                      <JIcon [icon]="Icons.ChevronRight"
                         size="22"
-                        class="text-dark-primary dark:text-white transition-transform duration-300"
+                        iconClass="text-dark-primary dark:text-white transition-transform duration-300"
                         [class]="expandedRows.has(item) ? 'rotate-90' : ''"
                       />
                     </td>
@@ -610,11 +590,9 @@
                         <div class="flex items-center max-[768px]:gap-[20px]">
                           <div class="flex items-center max-[768px]:flex-col">
                             {{ item.title }}
-                            <lucide-icon
-                              [name]="iconsService.icons.arrowBigRight"
+                            <JIcon [icon]="Icons.ArrowBigRight"
                               [size]="25"
-                              class="px-1"
-                            />
+                              iconClass="px-1" [ariaHidden]="true" />
                           </div>
                           {{ item.description }}
                         </div>
@@ -640,7 +618,7 @@
 
                           <div class="flex items-center justify-center gap-1">
                             <JButton
-                              [icon]="iconsService.icons.prevPage"
+                              [icon]="Icons.ChevronLeft"
                               (clicked)="
                                 groupTable['changePage'](item.title, 'prev')
                               "
@@ -652,7 +630,7 @@
                             />
 
                             <JButton
-                              [icon]="iconsService.icons.nextPage"
+                              [icon]="Icons.ChevronRight"
                               (clicked)="
                                 groupTable['changePage'](item.title, 'next')
                               "
@@ -798,21 +776,17 @@
                                     class="flex items-center gap-3 text-[14px]"
                                   >
                                     <div class="flex items-center gap-1">
-                                      <lucide-icon
-                                        [name]="iconsService.icons.calendar"
+                                      <JIcon [icon]="Icons.Calendar"
                                         size="15"
-                                        class="text-gray-500 dark:text-gray-400"
-                                      ></lucide-icon>
+                                        iconClass="text-gray-500 dark:text-gray-400" [ariaHidden]="true" />
                                       <span>{{
                                         getValue(group, column).split(",")[0]
                                       }}</span>
                                     </div>
                                     <div class="flex items-center gap-1">
-                                      <lucide-icon
-                                        [name]="iconsService.icons.clock"
+                                      <JIcon [icon]="Icons.Clock"
                                         size="15"
-                                        class="text-gray-500 dark:text-gray-400"
-                                      ></lucide-icon>
+                                        iconClass="text-gray-500 dark:text-gray-400" [ariaHidden]="true" />
                                       <span>{{
                                         getValue(group, column)
                                           .split(",")[1]
@@ -956,11 +930,9 @@
                 <div
                   class="flex flex-col gap-3 items-center justify-center py-4"
                 >
-                  <lucide-icon
-                    [name]="iconsService.icons.info"
+                  <JIcon [icon]="Icons.Info"
                     size="30"
-                    class="text-primary"
-                  ></lucide-icon>
+                    iconClass="text-primary" [ariaHidden]="true" />
                   <p>No hay datos disponibles</p>
                 </div>
               </td>
@@ -975,11 +947,9 @@
       <div
         class="absolute inset-0 flex flex-col gap-3 items-center justify-center py-4 bg-white/80 dark:bg-foreground/80 backdrop-blur-sm z-501 select-none"
       >
-        <lucide-icon
-          [name]="iconsService.icons.loading"
+        <JIcon [icon]="Icons.Loader2"
           size="35"
-          class="text-primary animate-spin"
-        ></lucide-icon>
+          iconClass="text-primary animate-spin" [ariaHidden]="true" />
         <p class="text-black dark:text-white">Cargando datos...</p>
       </div>
     }
@@ -989,11 +959,9 @@
       <div
         class="absolute inset-0 flex flex-col gap-3 items-center justify-center py-4 bg-white/80 dark:bg-foreground/80 backdrop-blur-sm z-501 select-none rounded"
       >
-        <lucide-icon
-          [name]="iconsService.icons.info"
+        <JIcon [icon]="Icons.Info"
           size="35"
-          class="text-primary"
-        ></lucide-icon>
+          iconClass="text-primary" [ariaHidden]="true" />
         <p class="text-black dark:text-white">No hay datos disponibles</p>
       </div>
     }
@@ -1006,11 +974,9 @@
         <div
           class="flex flex-col gap-3 items-center justify-center py-10 bg-white dark:bg-foreground rounded border border-border dark:border-dark-border"
         >
-          <lucide-icon
-            [name]="iconsService.icons.loading"
+          <JIcon [icon]="Icons.Loader2"
             size="30"
-            class="text-primary animate-spin"
-          ></lucide-icon>
+            iconClass="text-primary animate-spin" [ariaHidden]="true" />
           <p class="text-black dark:text-white">Cargando datos...</p>
         </div>
       } @else if (displayData.length > 0) {
@@ -1034,10 +1000,9 @@
                   <div class="min-w-0 flex-1 overflow-hidden">
                     <div class="flex items-center gap-1 text-[12px] font-bold">
                       <span class="truncate">{{ item.title }}</span>
-                      <lucide-icon
-                        [name]="iconsService.icons.arrowBigRight"
+                      <JIcon [icon]="Icons.ArrowBigRight"
                         [size]="16"
-                        class="shrink-0"
+                        iconClass="shrink-0"
                       />
                     </div>
                     <div class="truncate text-[11px] opacity-80">
@@ -1045,12 +1010,10 @@
                     </div>
                   </div>
 
-                  <lucide-icon
-                    [name]="iconsService.icons.chevronDown"
+                  <JIcon [icon]="Icons.ChevronDown"
                     size="18"
-                    class="shrink-0 transition-transform duration-300"
-                    [class]="expandedRows.has(item) ? 'rotate-180' : ''"
-                  />
+                    iconClass="shrink-0 transition-transform duration-300"
+                    [class]="expandedRows.has(item) ? 'rotate-180' : ''" [ariaHidden]="true" />
                 </div>
 
                 <div
@@ -1067,7 +1030,7 @@
 
                   <div class="flex items-center gap-1">
                     <JButton
-                      [icon]="iconsService.icons.prevPage"
+                      [icon]="Icons.ChevronLeft"
                       (clicked)="groupTable['changePage'](item.title, 'prev')"
                       [disabled]="(item.meta?.page?.currentPage ?? 1) <= 1"
                       [isLoading]="
@@ -1077,7 +1040,7 @@
                     />
 
                     <JButton
-                      [icon]="iconsService.icons.nextPage"
+                      [icon]="Icons.ChevronRight"
                       (clicked)="groupTable['changePage'](item.title, 'next')"
                       [disabled]="
                         (item.meta?.page?.currentPage ?? 1) >=
@@ -1162,16 +1125,14 @@
                             }
                           </div>
 
-                          <lucide-icon
-                            [name]="iconsService.icons.chevronDown"
+                          <JIcon [icon]="Icons.ChevronDown"
                             size="16"
-                            class="shrink-0 transition-transform duration-300"
+                            iconClass="shrink-0 transition-transform duration-300"
                             [class]="
                               mobileInnerExpandedRows.has(group)
                                 ? 'rotate-180'
                                 : ''
-                            "
-                          />
+                            " [ariaHidden]="true" />
                         </div>
 
                         <div
@@ -1191,10 +1152,8 @@
                               <div
                                 class="flex items-center gap-2 bg-primary/5 px-3 py-2 text-[12px] font-bold dark:bg-dark-primary/10"
                               >
-                                <lucide-icon
-                                  [name]="iconsService.icons.table"
-                                  size="15"
-                                ></lucide-icon>
+                                <JIcon [icon]="Icons.Table"
+                                  size="15" [ariaHidden]="true" />
                                 Detalles del estudiante
                               </div>
 
@@ -1370,10 +1329,9 @@
                   }
                 </div>
 
-                <lucide-icon
-                  [name]="iconsService.icons.chevronDown"
+                <JIcon [icon]="Icons.ChevronDown"
                   size="18"
-                  class="shrink-0 transition-transform duration-300"
+                  iconClass="shrink-0 transition-transform duration-300"
                   [class]="expandedRows.has(item) ? 'rotate-180' : ''"
                 />
               </div>
@@ -1396,10 +1354,8 @@
                       <div
                         class="flex items-center gap-2 text-[12px] font-bold"
                       >
-                        <lucide-icon
-                          [name]="iconsService.icons.table"
-                          size="15"
-                        ></lucide-icon>
+                        <JIcon [icon]="Icons.Table"
+                          size="15" [ariaHidden]="true" />
                         Detalles del registro
                       </div>
                     </div>
@@ -1448,17 +1404,14 @@
                         <div
                           class="flex items-center gap-2 text-[12px] font-bold"
                         >
-                          <lucide-icon
-                            [name]="iconsService.icons.filterList"
-                            size="15"
-                          ></lucide-icon>
+                          <JIcon [icon]="Icons.ArrowDownWideNarrow"
+                            size="15" [ariaHidden]="true" />
                           Cambios en los datos
                         </div>
 
-                        <lucide-icon
-                          [name]="iconsService.icons.chevronDown"
+                        <JIcon [icon]="Icons.ChevronDown"
                           size="16"
-                          class="transition-transform duration-300"
+                          iconClass="transition-transform duration-300"
                           [class]="
                             mobileInnerExpandedRows.has(item)
                               ? 'rotate-180'
@@ -1542,11 +1495,9 @@
         <div
           class="flex flex-col gap-3 items-center justify-center py-10 bg-white dark:bg-foreground rounded border border-border dark:border-dark-border"
         >
-          <lucide-icon
-            [name]="iconsService.icons.info"
+          <JIcon [icon]="Icons.Info"
             size="30"
-            class="text-primary"
-          ></lucide-icon>
+            iconClass="text-primary" [ariaHidden]="true" />
           <p class="text-black dark:text-white">No hay datos disponibles</p>
         </div>
       }
@@ -1596,11 +1547,9 @@
         getValue(item, column) === null ||
         getValue(item, column) === undefined
       ) {
-        <lucide-icon
-          [name]="iconsService.icons.linkOff"
+        <JIcon [icon]="Icons.Link2Off"
           size="20"
-          class="text-dark-primary dark:text-primary"
-        ></lucide-icon>
+          iconClass="text-dark-primary dark:text-primary" [ariaHidden]="true" />
       } @else {
         <a
           href="{{ getValue(item, column) }}"
@@ -1609,7 +1558,7 @@
           rel="noopener noreferrer"
           (click)="$event.stopPropagation()"
         >
-          <lucide-icon [name]="iconsService.icons.link" size="20"></lucide-icon>
+          <JIcon [icon]="Icons.Link" size="20" [ariaHidden]="true" />
         </a>
       }
     } @else if (column.isLinkImage && getValue(item, column)) {
@@ -1617,10 +1566,10 @@
         <JButton
           [icon]="
             column.valueData?.(item)
-              ? iconsService.icons.img
-              : iconsService.icons.imageOff
+              ? Icons.Image
+              : Icons.ImageOff
           "
-          [iconChange]="iconsService.icons.imgs"
+          [iconChange]="Icons.Images"
           [isChangeIcon]="
             keyDialog === getValue(item, column).split(',')[0] &&
             dialog.isOpen(keyDialog)
@@ -1647,19 +1596,15 @@
     } @else if (column.isDecoratorDateTime && getValue(item, column)) {
       <div class="flex flex-col items-end gap-1 text-[11px]">
         <div class="flex items-center gap-1">
-          <lucide-icon
-            [name]="iconsService.icons.calendar"
+          <JIcon [icon]="Icons.Calendar"
             size="13"
-            class="text-gray-500 dark:text-gray-400"
-          ></lucide-icon>
+            iconClass="text-gray-500 dark:text-gray-400" [ariaHidden]="true" />
           <span>{{ getValue(item, column).split(",")[0] }}</span>
         </div>
         <div class="flex items-center gap-1">
-          <lucide-icon
-            [name]="iconsService.icons.clock"
+          <JIcon [icon]="Icons.Clock"
             size="13"
-            class="text-gray-500 dark:text-gray-400"
-          ></lucide-icon>
+            iconClass="text-gray-500 dark:text-gray-400" [ariaHidden]="true" />
           <span>{{ getValue(item, column).split(",")[1]?.trim() }}</span>
         </div>
       </div>