tailjng 0.1.6 → 0.1.8

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

@@ -62,7 +62,7 @@
         @if (isGroupTable && expandedRows.size > 0) {
           <colgroup>
             @if (isNumbering) {
-              <col class="j-group-number-col" />
+              <col class="j-group-number-col box-border w-11 min-w-11 max-w-11" />
             }
             @for (column of columns; track $index) {
               @if (column.visible) {
@@ -70,7 +70,7 @@
               }
             }
             @if (isOptions) {
-              <col class="j-table-options-col" />
+              <col class="j-table-options-col box-border w-[var(--j-table-options-col-width)] min-w-[var(--j-table-options-col-width)] max-w-[var(--j-table-options-col-width)]" />
             }
           </colgroup>
         }
@@ -91,7 +91,7 @@
               <!-- Counter column -->
               @if (isNumbering) {
                 <th
-                  class="j-group-number-col px-4 py-2 text-center text-xs font-medium uppercase tracking-wider border-b border-border dark:border-dark-border font-bold text-white"
+                  class="j-group-number-col box-border w-11 min-w-11 max-w-11 !px-[0.35rem] px-4 py-2 text-center text-xs font-medium uppercase tracking-wider border-b border-border dark:border-dark-border font-bold text-white"
                 >
                   N°
                 </th>
@@ -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>
                       }
@@ -163,7 +155,7 @@
               <!-- Actions column - Sticky header -->
               @if (isOptions) {
                 <th
-                  class="j-table-options-col !sticky !right-0 relative z-[2] bg-primary px-4 py-2 text-center text-xs font-medium font-bold uppercase tracking-wider text-white shadow-[-4px_0_5px_rgba(0,0,0,0.1)] border-b border-border dark:border-dark-border dark:bg-dark-primary"
+                  class="j-table-options-col box-border w-[var(--j-table-options-col-width)] min-w-[var(--j-table-options-col-width)] max-w-[var(--j-table-options-col-width)] !sticky !right-0 relative z-[2] bg-primary px-4 py-2 text-center text-xs font-medium font-bold uppercase tracking-wider text-white shadow-[-4px_0_5px_rgba(0,0,0,0.1)] border-b border-border dark:border-dark-border dark:bg-dark-primary"
                 >
                   <span
                     class="text-[10px] opacity-80 border border-border dark:border-dark-border p-2 pl-3 pr-3 rounded-full"
@@ -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]
@@ -508,7 +489,7 @@
                       <td
                         onKeyPress
                         (click)="$event.stopPropagation()"
-                        class="j-table-options-col !sticky !right-0 relative overflow-visible border-b border-border bg-white text-center text-sm whitespace-nowrap shadow-[-4px_0_5px_rgba(0,0,0,0.1)] dark:border-dark-border dark:bg-foreground"
+                        class="j-table-options-col box-border w-[var(--j-table-options-col-width)] min-w-[var(--j-table-options-col-width)] max-w-[var(--j-table-options-col-width)] !sticky !right-0 relative overflow-visible border-b border-border bg-white text-center text-sm whitespace-nowrap shadow-[-4px_0_5px_rgba(0,0,0,0.1)] dark:border-dark-border dark:bg-foreground"
                         [ngStyle]="{ 'z-index': 1 + 1 }"
                       >
                         <div class="flex justify-center items-center">
@@ -586,12 +567,11 @@
                     [class.expanded]="expandedRows.has(item)"
                   >
                     <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"
+                      class="j-group-number-col box-border w-11 min-w-11 max-w-11 !px-[0.35rem] 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>
@@ -625,10 +603,10 @@
                       <td
                         onKeyPress
                         (click)="$event.stopPropagation()"
-                        class="j-table-options-col j-group-pagination-cell !sticky !right-0 z-[2] border-b border-border bg-primary/10 dark:bg-primary/20 text-center text-sm whitespace-nowrap shadow-[-4px_0_5px_rgba(0,0,0,0.1)] dark:border-dark-border"
+                        class="j-table-options-col j-group-pagination-cell box-border w-[var(--j-table-options-col-width)] min-w-[var(--j-table-options-col-width)] max-w-[var(--j-table-options-col-width)] align-middle !sticky !right-0 z-[2] border-b border-border bg-primary/10 dark:bg-primary/20 text-center text-sm whitespace-nowrap shadow-[-4px_0_5px_rgba(0,0,0,0.1)] dark:border-dark-border"
                       >
                         <div
-                          class="j-group-paginator"
+                          class="j-group-paginator flex flex-col items-center justify-center gap-1 opacity-0 invisible pointer-events-none transition-[opacity,visibility] duration-[320ms] ease-out"
                           [class.is-expanded]="expandedRows.has(item)"
                         >
                           <span
@@ -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')
                               "
@@ -681,11 +659,11 @@
                         class="j-group-expand-panel overflow-hidden"
                       >
                         <table
-                          class="j-group-inner-table w-full min-w-full border-collapse bg-white dark:bg-foreground"
+                          class="j-group-inner-table table-fixed w-full min-w-full border-collapse bg-white dark:bg-foreground"
                         >
                           <colgroup>
                             @if (isNumbering) {
-                              <col class="j-group-number-col" />
+                              <col class="j-group-number-col box-border w-11 min-w-11 max-w-11" />
                             }
                             @for (column of columns; track $index) {
                               @if (column.visible) {
@@ -693,7 +671,7 @@
                               }
                             }
                             @if (isOptions) {
-                              <col class="j-table-options-col" />
+                              <col class="j-table-options-col box-border w-[var(--j-table-options-col-width)] min-w-[var(--j-table-options-col-width)] max-w-[var(--j-table-options-col-width)]" />
                             }
                           </colgroup>
                           <tbody>
@@ -706,7 +684,7 @@
                               >
                         @if (isNumbering) {
                           <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"
+                            class="j-group-number-col box-border w-11 min-w-11 max-w-11 !px-[0.35rem] h-[50px] border-b border-border px-2 py-2 text-center text-xs text-black dark:border-dark-border dark:text-white"
                           >
                             {{
                               (item.meta?.page?.currentPage - 1) *
@@ -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]
@@ -832,7 +806,7 @@
                           <td
                             onKeyPress
                             (click)="$event.stopPropagation()"
-                            class="j-table-options-col !sticky !right-0 relative z-[2] overflow-visible border-b border-border bg-white text-center text-sm whitespace-nowrap shadow-[-4px_0_5px_rgba(0,0,0,0.1)] dark:border-dark-border dark:bg-foreground"
+                            class="j-table-options-col box-border w-[var(--j-table-options-col-width)] min-w-[var(--j-table-options-col-width)] max-w-[var(--j-table-options-col-width)] !sticky !right-0 relative z-[2] overflow-visible border-b border-border bg-white text-center text-sm whitespace-nowrap shadow-[-4px_0_5px_rgba(0,0,0,0.1)] dark:border-dark-border dark:bg-foreground"
                           >
                             <div
                               class="relative flex h-[50px] items-center justify-center overflow-visible px-2 py-2"
@@ -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>
@@ -1687,7 +1632,7 @@
 
   <!-- Count register -->
   @if (isGroupTable) {
-    <div class="flex flex-wrap mt-3 gap-3 items-center">
+    <div class="flex flex-wrap mt-3 gap-3 max-[768px]:gap-[8px] max-[400px]:gap-[6px] items-center">
       <ng-container [ngTemplateOutlet]="groupsTemplate"></ng-container>
     </div>
   }

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

@@ -2,79 +2,16 @@
   --j-table-options-col-width: 7.5rem;
 }
 
-.j-table-options-col,
-.j-group-pagination-cell,
-.j-group-expand-table-cell--options {
-  box-sizing: border-box;
-  min-width: var(--j-table-options-col-width);
-  width: var(--j-table-options-col-width);
-  max-width: var(--j-table-options-col-width);
-}
-
-.j-group-pagination-cell {
-  vertical-align: middle;
-}
-
-.j-group-paginator {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 0.25rem;
-  opacity: 0;
-  visibility: hidden;
-  pointer-events: none;
-  transition:
-    opacity 320ms ease-out,
-    visibility 320ms;
-}
-
-.j-group-inner-table {
-  table-layout: fixed;
-}
-
 .j-group-paginator.is-expanded {
   opacity: 1;
   visibility: visible;
   pointer-events: auto;
 }
 
-.j-group-number-col {
-  box-sizing: border-box;
-  width: 2.75rem;
-  min-width: 2.75rem;
-  max-width: 2.75rem;
-  padding-left: 0.35rem !important;
-  padding-right: 0.35rem !important;
-}
-
 .j-group-student-row td {
   vertical-align: middle;
 }
 
-.j-group-expand-table {
-  display: table;
-  width: 100%;
-  min-width: 100%;
-  border-collapse: collapse;
-  table-layout: fixed;
-}
-
-.j-group-expand-table-row {
-  display: table-row;
-}
-
-.j-group-expand-table-cell {
-  display: table-cell;
-  vertical-align: middle;
-}
-
-.j-group-expand-table-cell--options {
-  position: sticky;
-  right: 0;
-  z-index: 2;
-}
-
 :host ::ng-deep thead.j-group-thead-expanded th {
   animation: group-thead-reveal 300ms ease-out both;
 }