tailjng 0.1.7 → 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>
@@ -155,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"
@@ -489,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">
@@ -567,7 +567,7 @@
                     [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"
                     >
                       <JIcon [icon]="Icons.ChevronRight"
                         size="22"
@@ -603,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
@@ -659,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) {
@@ -671,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>
@@ -684,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) *
@@ -806,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"
@@ -1632,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;
 }

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

@@ -834,10 +834,10 @@ export class JCompleteCrudTableComponent implements OnInit {
     this.loadingStates.aditionalButtons[key] = 'idle';
   }
 
-  isAditionalButtonLoading(buttonType: string, id?: number | string): boolean {
+  isAditionalButtonLoading = (buttonType: string, id?: number | string): boolean => {
     const key = id !== undefined ? `${buttonType}_${id}` : buttonType;
     return this.loadingStates.aditionalButtons[key] === 'loading';
-  }
+  };
 
   // =====================================================
   // Expand rows

package/src/lib/components/theme-generator/theme-generator.component.html

@@ -10,15 +10,13 @@
             class="relative h-64 w-full overflow-hidden rounded-lg border border-border dark:border-dark-border"
           >
             <div
-              class="absolute inset-0 bg-gradient-to-br from-white to-transparent"
-              style="z-index: 1"
+              class="absolute inset-0 z-[1] bg-gradient-to-br from-white to-transparent"
             ></div>
             <div
-              class="absolute inset-0 bg-gradient-to-b from-transparent to-black"
-              style="z-index: 2"
+              class="absolute inset-0 z-[2] bg-gradient-to-b from-transparent to-black"
             ></div>
             <div
-              class="absolute inset-0"
+              class="absolute inset-0 z-0"
               [style.background]="
                 'linear-gradient(to right, hsl(' +
                 huePosition +
@@ -26,21 +24,18 @@
                 huePosition +
                 ', 100%, 50%))'
               "
-              style="z-index: 0"
             ></div>
             <div
-              class="absolute w-6 h-6 rounded-full border-2 border-white transform -translate-x-1/2 -translate-y-1/2 cursor-pointer"
+              class="absolute z-[3] w-6 h-6 rounded-full border-2 border-white transform -translate-x-1/2 -translate-y-1/2 cursor-pointer"
               [style.left.%]="colorPickerPosition.x"
               [style.top.%]="colorPickerPosition.y"
-              style="z-index: 3"
             ></div>
             <div
-              class="absolute inset-0 cursor-pointer"
+              class="absolute inset-0 z-[4] cursor-pointer"
               (mousedown)="startColorPicking($event)"
               (mousemove)="updateColorPicking($event)"
               (mouseup)="stopColorPicking()"
               (mouseleave)="stopColorPicking()"
-              style="z-index: 4"
             ></div>
           </div>
 

package/src/lib/components/toggle-radio/shared/toggle-options.util.ts

@@ -1,4 +1,22 @@
-import { ToggleOption } from './toggle-options.types';
+import { ToggleOption, ToggleSortOrder } from './toggle-options.types';
+
+/**
+ * Query params for toggle API loads (`findAll`).
+ * Arrays are kept as arrays so `JParamsHttpService` serializes them as
+ * `filter[key][0]`, `filter[key][1]`, …
+ */
+export function buildToggleLoadParams(
+  sort: ToggleSortOrder,
+  defaultFilters: Record<string, unknown>,
+): Record<string, unknown> {
+  const params: Record<string, unknown> = { sortOrder: sort };
+
+  Object.keys(defaultFilters).forEach((key) => {
+    params[`filter[${key}]`] = defaultFilters[key];
+  });
+
+  return params;
+}
 
 /**
  * Reads a nested property using dot notation.

package/src/lib/components/toggle-radio/toggle-radio/toggle-radio.component.css

@@ -3,12 +3,6 @@
   width: 100%;
 }
 
-.j-radio-group {
-  display: flex;
-  flex-direction: column;
-  gap: 0.625rem;
-}
-
 .j-radio-group--horizontal {
   flex-flow: row wrap;
   gap: 1rem 1.25rem;
@@ -18,118 +12,11 @@
   opacity: 0.55;
 }
 
-.j-radio-option {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.625rem;
-  cursor: pointer;
-  user-select: none;
-}
-
 .j-radio-option--disabled {
   cursor: not-allowed;
 }
 
-.j-radio-input {
-  position: absolute;
-  opacity: 0;
-  width: 0;
-  height: 0;
-  margin: 0;
-  pointer-events: none;
-}
-
 .j-radio-input:focus-visible + .j-radio-indicator {
   outline: 2px solid var(--color-ring);
   outline-offset: 2px;
 }
-
-.j-radio-indicator {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.125rem;
-  height: 1.125rem;
-  flex-shrink: 0;
-  border: 1.5px solid var(--color-border);
-  border-radius: 9999px;
-  background-color: var(--color-background);
-  transition:
-    border-color 0.15s ease,
-    background-color 0.15s ease;
-}
-
-:host-context(.dark) .j-radio-indicator,
-:host-context(html.dark) .j-radio-indicator {
-  border-color: var(--color-dark-border);
-  background-color: var(--color-dark-background);
-}
-
-.j-radio-dot {
-  width: 0.4375rem;
-  height: 0.4375rem;
-  border-radius: 9999px;
-  background-color: var(--color-primary);
-  transform: scale(0);
-  transition: transform 0.15s ease;
-}
-
-:host-context(.dark) .j-radio-dot,
-:host-context(html.dark) .j-radio-dot {
-  background-color: var(--color-dark-primary);
-}
-
-.j-radio-option--selected .j-radio-indicator {
-  border-color: var(--color-primary);
-}
-
-:host-context(.dark) .j-radio-option--selected .j-radio-indicator,
-:host-context(html.dark) .j-radio-option--selected .j-radio-indicator {
-  border-color: var(--color-dark-primary);
-}
-
-.j-radio-option--selected .j-radio-dot {
-  transform: scale(1);
-}
-
-.j-radio-label {
-  font-size: 0.875rem;
-  line-height: 1.35;
-  color: var(--color-foreground);
-}
-
-:host-context(.dark) .j-radio-label,
-:host-context(html.dark) .j-radio-label {
-  color: var(--color-dark-foreground);
-}
-
-.j-radio-state {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  gap: 0.5rem;
-  min-height: 2rem;
-  color: var(--color-muted-foreground);
-  font-size: 0.875rem;
-}
-
-:host-context(.dark) .j-radio-state,
-:host-context(html.dark) .j-radio-state {
-  color: var(--color-dark-muted-foreground);
-}
-
-.j-radio-clear {
-  margin-top: 0.625rem;
-  padding: 0;
-  border: 0;
-  background: transparent;
-  color: var(--color-destructive);
-  font-size: 0.75rem;
-  text-decoration: underline;
-  cursor: pointer;
-}
-
-.j-radio-clear:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}

package/src/lib/components/toggle-radio/toggle-radio/toggle-radio.component.html

@@ -1,14 +1,14 @@
 @if (internalOptions.length > 0) {
-  <div [ngClass]="groupClasses" role="radiogroup">
+  <div [ngClass]="groupClasses" role="radiogroup" class="flex flex-col gap-2.5">
     @for (opt of internalOptions; track $index) {
       <label
-        class="j-radio-option"
+        class="j-radio-option inline-flex items-center gap-2.5 cursor-pointer select-none"
         [class.j-radio-option--selected]="isSelected(opt.value)"
         [class.j-radio-option--disabled]="isInteractionDisabled"
         [for]="optionId(opt.value, $index)"
       >
         <input
-          class="j-radio-input"
+          class="j-radio-input absolute opacity-0 w-0 h-0 m-0 pointer-events-none"
           type="radio"
           [id]="optionId(opt.value, $index)"
           [name]="name"
@@ -18,16 +18,27 @@
           (change)="select(opt.value)"
         />
 
-        <span class="j-radio-indicator" aria-hidden="true">
-          <span class="j-radio-dot"></span>
+        <span
+          class="j-radio-indicator inline-flex items-center justify-center w-[1.125rem] h-[1.125rem] shrink-0 border-[1.5px] rounded-full bg-background dark:bg-dark-background transition-[border-color,background-color] duration-150 ease-in-out"
+          [ngClass]="{
+            'border-primary dark:border-dark-primary': isSelected(opt.value),
+            'border-border dark:border-dark-border': !isSelected(opt.value),
+          }"
+          aria-hidden="true"
+        >
+          <span
+            class="j-radio-dot w-[0.4375rem] h-[0.4375rem] rounded-full bg-primary dark:bg-dark-primary transition-transform duration-150 ease-in-out"
+            [class.scale-0]="!isSelected(opt.value)"
+            [class.scale-100]="isSelected(opt.value)"
+          ></span>
         </span>
 
-        <span class="j-radio-label">{{ opt.label }}</span>
+        <span class="text-sm leading-[1.35] text-foreground dark:text-dark-foreground">{{ opt.label }}</span>
       </label>
     }
   </div>
 } @else if (isLoading) {
-  <div class="j-radio-state">
+  <div class="flex items-center justify-start gap-2 min-h-8 text-muted-foreground dark:text-dark-muted-foreground text-sm">
     <JIcon
       [icon]="Icons.Loader2"
       [size]="16"
@@ -37,13 +48,15 @@
     <span>Cargando...</span>
   </div>
 } @else {
-  <div class="j-radio-state">No hay opciones</div>
+  <div class="flex items-center justify-start gap-2 min-h-8 text-muted-foreground dark:text-dark-muted-foreground text-sm">
+    No hay opciones
+  </div>
 }
 
 @if (showClear && selectedValue !== null) {
   <button
     type="button"
-    class="j-radio-clear"
+    class="mt-2.5 p-0 border-0 bg-transparent text-destructive text-xs underline cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
     (click)="clear()"
     [disabled]="isInteractionDisabled"
   >

package/src/lib/components/toggle-radio/toggle-radio/toggle-radio.component.ts

@@ -14,7 +14,7 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { JGenericCrudService } from 'tailjng';
 import { Icons } from '../../.config/icons/icons.lucide';
 import { JIconComponent } from '../../icon/icon.component';
-import { normalizeToggleOptions } from '../shared/toggle-options.util';
+import { normalizeToggleOptions, buildToggleLoadParams } from '../shared/toggle-options.util';
 import { ToggleOption, ToggleRadioLayout, ToggleSortOrder } from '../shared/toggle-options.types';
 
 export type { ToggleOption, ToggleRadioLayout, ToggleSortOrder } from './toggle-radio.types';
@@ -57,7 +57,7 @@ export class JToggleRadioComponent implements OnInit, OnChanges, ControlValueAcc
   @Input() classes = '';
   @Input() ngClasses: Record<string, boolean> = {};
 
-  @Output() selectionChange = new EventEmitter<unknown>();
+  @Output() selectionChange = new EventEmitter<any>();
 
   internalOptions: ToggleOption[] = [];
   selectedValue: unknown = null;
@@ -115,13 +115,7 @@ export class JToggleRadioComponent implements OnInit, OnChanges, ControlValueAcc
 
     this.isLoading = true;
 
-    const params: Record<string, string> = {
-      sortOrder: this.sort,
-    };
-
-    Object.keys(this.defaultFilters).forEach((key) => {
-      params[`filter[${key}]`] = String(this.defaultFilters[key]);
-    });
+    const params = buildToggleLoadParams(this.sort, this.defaultFilters);
 
     this.genericService.findAll<unknown>({ endpoint: this.endpoint, params }).subscribe({
       next: (res) => {

package/src/lib/components/toggle-radio/toggle-segment/segment-toggle.component.css

@@ -3,43 +3,10 @@
   width: 100%;
 }
 
-.j-segment-track {
-  display: flex;
-  min-height: 2.5rem;
-  overflow: hidden;
-  border: 1px solid var(--color-border);
-  border-radius: 0.5rem;
-  font-size: 0.875rem;
-  user-select: none;
-}
-
-:host-context(.dark) .j-segment-track,
-:host-context(html.dark) .j-segment-track {
-  border-color: var(--color-dark-border);
-}
-
 .j-segment-track--disabled {
   opacity: 0.5;
 }
 
-.j-segment-item {
-  flex: 1 1 0;
-  padding: 0.5rem 1rem;
-  border: 0;
-  border-right: 1px solid var(--color-border);
-  background-color: var(--color-background);
-  color: var(--color-foreground);
-  font-weight: 500;
-  cursor: pointer;
-  transition:
-    background-color 0.2s ease,
-    color 0.2s ease;
-}
-
-.j-segment-item:last-child {
-  border-right: 0;
-}
-
 .j-segment-item:hover:not(.j-segment-item--selected):not(.j-segment-item--disabled) {
   background-color: color-mix(in srgb, var(--color-muted) 45%, var(--color-background));
 }
@@ -49,13 +16,6 @@
   color: var(--color-primary-foreground);
 }
 
-:host-context(.dark) .j-segment-item,
-:host-context(html.dark) .j-segment-item {
-  border-right-color: var(--color-dark-border);
-  background-color: var(--color-dark-background);
-  color: var(--color-dark-foreground);
-}
-
 :host-context(.dark) .j-segment-item--selected,
 :host-context(html.dark) .j-segment-item--selected {
   background-color: var(--color-dark-primary);
@@ -72,37 +32,3 @@
   outline-offset: -2px;
   z-index: 1;
 }
-
-.j-segment-state {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  min-height: 2.5rem;
-  border: 1px solid var(--color-border);
-  border-radius: 0.5rem;
-  color: var(--color-foreground);
-  font-size: 0.875rem;
-}
-
-:host-context(.dark) .j-segment-state,
-:host-context(html.dark) .j-segment-state {
-  border-color: var(--color-dark-border);
-  color: var(--color-dark-foreground);
-}
-
-.j-segment-clear {
-  margin-top: 0.5rem;
-  padding: 0;
-  border: 0;
-  background: transparent;
-  color: var(--color-destructive);
-  font-size: 0.75rem;
-  text-decoration: underline;
-  cursor: pointer;
-}
-
-.j-segment-clear:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}

package/src/lib/components/toggle-radio/toggle-segment/segment-toggle.component.html

@@ -1,10 +1,14 @@
 @if (internalOptions.length > 0) {
-  <div [ngClass]="trackClasses">
+  <div
+    [ngClass]="trackClasses"
+    class="flex min-h-10 overflow-hidden border border-border dark:border-dark-border rounded-lg text-sm select-none"
+  >
     @for (opt of internalOptions; track $index) {
       <button
         type="button"
         [disabled]="isInteractionDisabled"
         [ngClass]="segmentClasses(opt.value)"
+        class="flex-1 basis-0 py-2 px-4 border-0 border-r border-border dark:border-dark-border bg-background dark:bg-dark-background text-foreground dark:text-dark-foreground font-medium cursor-pointer transition-[background-color,color] duration-200 ease-in-out last:border-r-0"
         (click)="select(opt.value)"
       >
         {{ opt.label }}
@@ -12,7 +16,9 @@
     }
   </div>
 } @else if (isLoading) {
-  <div class="j-segment-state">
+  <div
+    class="flex items-center justify-center gap-2 min-h-10 border border-border dark:border-dark-border rounded-lg text-foreground dark:text-dark-foreground text-sm"
+  >
     <JIcon
       [icon]="Icons.Loader2"
       [size]="16"
@@ -22,13 +28,17 @@
     <span>Cargando...</span>
   </div>
 } @else {
-  <div class="j-segment-state">No hay opciones</div>
+  <div
+    class="flex items-center justify-center gap-2 min-h-10 border border-border dark:border-dark-border rounded-lg text-foreground dark:text-dark-foreground text-sm"
+  >
+    No hay opciones
+  </div>
 }
 
 @if (showClear && selectedValue !== null) {
   <button
     type="button"
-    class="j-segment-clear"
+    class="mt-2 p-0 border-0 bg-transparent text-destructive text-xs underline cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
     (click)="clear()"
     [disabled]="isInteractionDisabled"
   >

package/src/lib/components/toggle-radio/toggle-segment/segment-toggle.component.ts

@@ -14,7 +14,7 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { JGenericCrudService } from 'tailjng';
 import { Icons } from '../../.config/icons/icons.lucide';
 import { JIconComponent } from '../../icon/icon.component';
-import { normalizeToggleOptions } from '../shared/toggle-options.util';
+import { normalizeToggleOptions, buildToggleLoadParams } from '../shared/toggle-options.util';
 import { ToggleOption, ToggleSortOrder } from '../shared/toggle-options.types';
 
 export type { ToggleOption, ToggleSortOrder } from './segment-toggle.types';
@@ -54,7 +54,7 @@ export class JToggleSegmentComponent implements OnInit, OnChanges, ControlValueA
   @Input() classesElement = '';
   @Input() ngClasses: Record<string, boolean> = {};
 
-  @Output() selectionChange = new EventEmitter<unknown>();
+  @Output() selectionChange = new EventEmitter<any>();
 
   internalOptions: ToggleOption[] = [];
   selectedValue: unknown = null;
@@ -111,13 +111,7 @@ export class JToggleSegmentComponent implements OnInit, OnChanges, ControlValueA
 
     this.isLoading = true;
 
-    const params: Record<string, string> = {
-      sortOrder: this.sort,
-    };
-
-    Object.keys(this.defaultFilters).forEach((key) => {
-      params[`filter[${key}]`] = String(this.defaultFilters[key]);
-    });
+    const params = buildToggleLoadParams(this.sort, this.defaultFilters);
 
     this.genericService.findAll<unknown>({ endpoint: this.endpoint, params }).subscribe({
       next: (res) => {