tailjng 0.1.14 → 0.1.15

package/cli/file-operations.js

@@ -189,7 +189,10 @@ async function copyComponentFiles(componentName, componentPath, isDependency = f
 
     fs.mkdirSync(targetPath, { recursive: true })
     copyDirectoryRecursive(nodeModulesPath, targetPath, projectRoot)
-    await copySharedFolderIfNeeded(componentPath, isDependency, { forceSync: true })
+    const sharedOk = await copySharedFolderIfNeeded(componentPath, isDependency, { forceSync: true })
+    if (!sharedOk) {
+        process.exit(1)
+    }
 
     return true
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailjng",
-  "version": "0.1.14",
+  "version": "0.1.15",
   "peerDependencies": {
     "@angular/common": "^19.2.0",
     "@angular/core": "^19.2.0",

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

@@ -53,9 +53,17 @@
   } @else if (displayData.length > 0) {
 
     @if (itemTemplate) {
-      <div class="grid grid-cols-4 max-[1200px]:grid-cols-3 max-[950px]:grid-cols-2 max-[650px]:grid-cols-1 items-start gap-4 my-4">
+      <div
+        class="grid grid-cols-4 max-[1200px]:grid-cols-3 max-[950px]:grid-cols-2 max-[650px]:grid-cols-1 gap-4 my-4"
+        [class.items-stretch]="useStretchCards"
+        [class.items-start]="!useStretchCards"
+      >
         @for (item of displayData; track trackById($index, item)) {
-          <div class="flex flex-col rounded-xl border border-border dark:border-dark-border bg-white dark:bg-foreground shadow-sm hover:shadow-lg hover:border-primary/50 hover:dark:border-primary transition-all duration-300">
+          <div
+            class="flex w-full flex-col rounded-xl border border-border dark:border-dark-border bg-white dark:bg-foreground shadow-sm hover:shadow-lg hover:border-primary/50 hover:dark:border-primary transition-all duration-300"
+            [class.h-full]="useStretchCards"
+            [class.self-start]="!useStretchCards"
+          >
             <ng-container
               *ngTemplateOutlet="
                 itemTemplate; 

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

@@ -629,6 +629,12 @@ export class JCompleteCrudCardComponent implements OnInit {
 
   @Input() expandTemplate?: TemplateRef<any>;
   @Input() onExpandData?: (item: any) => Promise<any>;
+  /** false = cards no se estiran a la altura de la fila (útil con expand). Por defecto: !expandTemplate */
+  @Input() stretchCards?: boolean;
+
+  get useStretchCards(): boolean {
+    return this.stretchCards ?? !this.expandTemplate;
+  }
 
   expandedItems: { [key: string]: boolean } = {};
   expandData: { [key: string]: any } = {};

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

@@ -6,7 +6,7 @@
     [value]="value"
     (input)="onInput($event)"
     [required]="required"
-    [disabled]="isDisabled"
+    [disabled]="isActuallyDisabled"
     [readonly]="isReadonly"
     [rows]="rows"
     (blur)="onBlur()"
@@ -20,7 +20,7 @@
       class="absolute right-2 top-2 flex cursor-pointer items-center justify-center p-0 focus:outline-none"
       [ngClass]="clearButtonClasses"
       (click)="clearInput()"
-      [disabled]="isDisabled"
+      [disabled]="isActuallyDisabled"
       aria-label="Clear"
     >
       <JIcon

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

@@ -47,6 +47,7 @@ export class JTextareaInputComponent implements ControlValueAccessor {
   @Input() name?: string;
   @Input() placeholder = '';
 
+  /** Consumer-driven disabled (e.g. `[isDisabled]="true"`). */
   @Input() isDisabled = false;
   @Input() isReadonly = false;
   @Input() required = false;
@@ -67,6 +68,7 @@ export class JTextareaInputComponent implements ControlValueAccessor {
   @Input() ngClasses: Record<string, boolean> = {};
 
   innerValue = '';
+  private formDisabled = false;
 
   private onChange: (value: string) => void = () => {};
   private onTouched: () => void = () => {};
@@ -109,7 +111,7 @@ export class JTextareaInputComponent implements ControlValueAccessor {
       this.ngClasses,
       { 'pr-3': !this.clearButton, 'pr-7': this.clearButton },
       { 'scroll-element': true },
-      this.isDisabled ? INPUT_DISABLED_OVERLAY_CLASSES : {},
+      this.isActuallyDisabled ? INPUT_DISABLED_OVERLAY_CLASSES : {},
     );
   }
 
@@ -118,7 +120,12 @@ export class JTextareaInputComponent implements ControlValueAccessor {
    * @returns Hover and disabled utilities for the clear control.
    */
   get clearButtonClasses(): Record<string, boolean> {
-    return inputActionButtonClasses(this.isDisabled);
+    return inputActionButtonClasses(this.isActuallyDisabled);
+  }
+
+  /** Final disabled state (input OR reactive-forms). */
+  get isActuallyDisabled(): boolean {
+    return this.isDisabled || this.formDisabled;
   }
 
   /** Tailwind resize utilities keyed by {@link TextareaResize}. */
@@ -158,7 +165,7 @@ export class JTextareaInputComponent implements ControlValueAccessor {
    * @param isDisabled Whether the control is disabled.
    */
   setDisabledState(isDisabled: boolean): void {
-    this.isDisabled = isDisabled;
+    this.formDisabled = isDisabled;
   }
 
   /**

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

@@ -12,14 +12,25 @@
       "
       [ngClass]="getButtonNgClass()"
     >
-      <span
-        class="truncate text-black dark:text-white"
-        [ngClass]="{
-          'opacity-70 text-muted-foreground dark:text-dark-muted-foreground':
-            selectedValue === null,
-        }"
-        >{{ selectedLabel }}</span
-      >
+      @if (selectedLabelHtml) {
+        <span
+          class="truncate text-black dark:text-white [&_strong]:font-bold"
+          [ngClass]="{
+            'opacity-70 text-muted-foreground dark:text-dark-muted-foreground':
+              selectedValue === null,
+          }"
+          [innerHTML]="selectedLabelHtml"
+        ></span>
+      } @else {
+        <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) {
@@ -159,9 +170,13 @@
               }
 
               <div
-                class="flex items-center break-words whitespace-normal overflow-hidden"
+                class="flex items-center break-words whitespace-normal overflow-hidden [&_strong]:font-bold"
               >
-                {{ option.text }}
+                @if (option.html) {
+                  <span [innerHTML]="option.html"></span>
+                } @else {
+                  {{ option.text }}
+                }
               </div>
             </div>
           }

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

@@ -1,3 +1,4 @@
+
 import { animate, style, transition, trigger } from '@angular/animations';
 import { CommonModule } from '@angular/common';
 import {
@@ -47,6 +48,7 @@ import {
   readDropdownPaginationMeta,
   rebuildEndpointUrl,
   resetDropdownPanelStyles,
+  serializeDropdownFilters,
 } from './dropdown-select.util';
 
 export type {
@@ -71,8 +73,10 @@ export {
   readDropdownPaginationMeta,
   rebuildEndpointUrl,
   resetDropdownPanelStyles,
+  serializeDropdownFilters,
   resolveOptionLabel,
   resolveOptionLabelFromTemplate,
+  resolveOptionLabelHtmlFromTemplate,
   getOptionValueFilterKey,
   canResolveSelectedByFindOne,
 } from './dropdown-select.util';
@@ -272,6 +276,7 @@ export class JDropdownSelectComponent
   isColumnSelectorOpen = false;
   selectedValue: unknown = null;
   selectedLabel = '';
+  selectedLabelHtml: string | null = null;
   internalOptions: DropdownOption[] = [];
   filteredOptions: DropdownOption[] = [];
 
@@ -296,6 +301,7 @@ export class JDropdownSelectComponent
 
   private currentPage = 1;
   private totalPages = 1;
+  private defaultFiltersSnapshot = '';
   private resolvedSelectedOption: DropdownOption | null = null;
   private isResolvingSelected = false;
 
@@ -334,6 +340,7 @@ export class JDropdownSelectComponent
       this.loadData(true);
     }
 
+    this.defaultFiltersSnapshot = serializeDropdownFilters(this.defaultFilters);
     this.updateSelectedLabel();
   }
 
@@ -346,6 +353,41 @@ export class JDropdownSelectComponent
     if (changes['options']) {
       this.processOptions();
     }
+
+    if (changes['isDisabled']?.currentValue === true) {
+      this.closePanel();
+    }
+
+    if (changes['defaultFilters']) {
+      this.syncDefaultFilters();
+    }
+  }
+
+  /** Reloads or clears options when dependent `defaultFilters` change. */
+  private syncDefaultFilters(): void {
+    const snapshot = serializeDropdownFilters(this.defaultFilters);
+    if (snapshot === this.defaultFiltersSnapshot) {
+      return;
+    }
+
+    this.defaultFiltersSnapshot = snapshot;
+    this.searchTerm = '';
+    this.options = [];
+    this.internalOptions = [];
+    this.filteredOptions = [];
+
+    if (this.isColumnSelectorOpen) {
+      this.closePanel();
+    }
+
+    if (this.type === 'searchable' && this.endpoint && !this.isDisabled && this.genericService) {
+      if (this.loadOnInit) {
+        this.loadData(true);
+      }
+    }
+
+    this.updateSelectedLabel();
+    this.cdr.markForCheck();
   }
 
   ngOnDestroy(): void {
@@ -368,7 +410,9 @@ export class JDropdownSelectComponent
    * @param value Selected option value or `null`.
    */
   writeValue(value: unknown): void {
-    if (!optionValuesEqual(this.selectedValue, value)) {
+    const valueChanged = !optionValuesEqual(this.selectedValue, value);
+
+    if (valueChanged) {
       if (
         value == null ||
         !this.resolvedSelectedOption ||
@@ -379,9 +423,17 @@ export class JDropdownSelectComponent
     }
 
     this.selectedValue = value;
+
+    if (value == null) {
+      this.selectedLabel = this.placeholder;
+      this.selectedLabelHtml = null;
+      this.cdr.markForCheck();
+      return;
+    }
+
     this.updateSelectedLabel();
 
-    if (value != null && this.type === 'searchable' && !this.findSelectedOption()) {
+    if (this.type === 'searchable' && !this.findSelectedOption()) {
       this.resolveSelectedOption();
     }
 
@@ -452,6 +504,7 @@ export class JDropdownSelectComponent
   selectOption(option: DropdownOption): void {
     this.selectedValue = option.value;
     this.selectedLabel = option.text;
+    this.selectedLabelHtml = option.html ?? null;
     this.resolvedSelectedOption = option;
     this.onChange(this.selectedValue);
     this.selectionChange.emit(option.original ?? option.value);
@@ -465,7 +518,9 @@ export class JDropdownSelectComponent
   clearSelection(event: Event): void {
     event.stopPropagation();
     this.resolvedSelectedOption = null;
-    this.writeValue(null);
+    this.selectedValue = null;
+    this.selectedLabel = this.placeholder;
+    this.selectedLabelHtml = null;
     this.onChange(null);
     this.selectionChange.emit(null);
   }
@@ -485,12 +540,14 @@ export class JDropdownSelectComponent
   updateSelectedLabel(): void {
     if (this.selectedValue === null) {
       this.selectedLabel = this.placeholder;
+      this.selectedLabelHtml = null;
       return;
     }
 
     const selectedOption = this.findSelectedOption();
     if (selectedOption) {
       this.selectedLabel = selectedOption.text;
+      this.selectedLabelHtml = selectedOption.html ?? null;
       this.resolvedSelectedOption = selectedOption;
       return;
     }
@@ -500,17 +557,17 @@ export class JDropdownSelectComponent
       optionValuesEqual(this.resolvedSelectedOption.value, this.selectedValue)
     ) {
       this.selectedLabel = this.resolvedSelectedOption.text;
+      this.selectedLabelHtml = this.resolvedSelectedOption.html ?? null;
       this.ensureSelectedOptionPinned();
       return;
     }
 
+    this.selectedLabel = this.placeholder;
+    this.selectedLabelHtml = null;
+
     if (this.type === 'searchable' && this.resolveSelected) {
       this.resolveSelectedOption();
     }
-
-    if (!this.selectedLabel || this.selectedLabel === this.placeholder) {
-      this.selectedLabel = this.placeholder;
-    }
   }
 
   /** Keeps a resolved selection visible even if it is not in the current page. */
@@ -536,12 +593,13 @@ export class JDropdownSelectComponent
 
   private applyResolvedRecord(record: Record<string, unknown>): void {
     const [option] = this.mapOptions([record]);
-    if (!option) {
+    if (!option || !optionValuesEqual(option.value, this.selectedValue)) {
       return;
     }
 
     this.resolvedSelectedOption = option;
     this.selectedLabel = option.text;
+    this.selectedLabelHtml = option.html ?? null;
     this.ensureSelectedOptionPinned();
     this.cdr.detectChanges();
   }
@@ -825,6 +883,12 @@ export class JDropdownSelectComponent
 
       if (this.type === 'searchable' && !this.loadOnInit && this.shouldTriggerLoad()) {
         this.loadData(true);
+      } else if (
+        this.type === 'searchable' &&
+        this.endpoint &&
+        this.internalOptions.length === 0
+      ) {
+        this.loadData(true);
       }
 
       return;

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

@@ -7,7 +7,10 @@ export type DropdownSortOrder = 'ASC' | 'DESC';
 /** Normalized option shown in the panel list. */
 export type DropdownOption<TOriginal = unknown> = {
   value: unknown;
+  /** Plain text label (search, accessibility, fallback). */
   text: string;
+  /** Rich label when `optionLabelTemplate` uses `{b:field}` placeholders. */
+  html?: string;
   original?: TOriginal;
 };
 

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

@@ -72,19 +72,64 @@ export function extractOptionsFromResponse(
   return Array.isArray(responseData) ? (responseData as unknown[]) : [];
 }
 
-/** Builds the display label from a template like `El valor es {value} de {label}`. */
+function escapeOptionLabelHtml(value: string): string {
+  return value
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+
+function resolveTemplatePlaceholder(
+  option: Record<string, unknown>,
+  rawPath: string,
+): string {
+  const path = rawPath.trim().replace(/^b:/, '');
+  const value = getNestedValue(option, path);
+  if (value == null || value === '') {
+    return '';
+  }
+
+  return String(value);
+}
+
+/**
+ * Builds the display label from a template like `El valor es {value} de {label}`.
+ * Use `{b:field}` for bold segments in the panel (rendered as `<strong>`).
+ */
 export function resolveOptionLabelFromTemplate(
   option: Record<string, unknown>,
   template: string,
 ): string {
-  return template.replace(/\{([^}]+)\}/g, (_, path: string) => {
-    const value = getNestedValue(option, path.trim());
-    if (value == null || value === '') {
-      return '';
-    }
+  return template.replace(/\{(?:b:)?([^}]+)\}/g, (_, path: string) =>
+    resolveTemplatePlaceholder(option, path),
+  );
+}
 
-    return String(value);
+/**
+ * HTML label when the template contains `{b:field}` placeholders.
+ * Returns `null` when no bold placeholders are used.
+ */
+export function resolveOptionLabelHtmlFromTemplate(
+  option: Record<string, unknown>,
+  template: string,
+): string | null {
+  if (!template.includes('{b:')) {
+    return null;
+  }
+
+  let html = template.replace(/\{b:([^}]+)\}/g, (_, path: string) => {
+    const value = resolveTemplatePlaceholder(option, `b:${path}`);
+    return value ? `<strong>${escapeOptionLabelHtml(value)}</strong>` : '';
   });
+
+  html = html.replace(/\{([^}]+)\}/g, (_, path: string) => {
+    const value = resolveTemplatePlaceholder(option, path);
+    return value ? escapeOptionLabelHtml(value) : '';
+  });
+
+  return html;
 }
 
 /** Builds the display label for one option object. */
@@ -124,11 +169,24 @@ export function mapObjectOptions(
   labelSeparator: string,
   optionLabelTemplate?: string,
 ): DropdownOption[] {
-  return options.map((option) => ({
-    value: getNestedValue(option, optionValue),
-    text: resolveOptionLabel(option, optionLabel, labelSeparator, optionLabelTemplate),
-    original: option,
-  }));
+  return options.map((option) => {
+    const text = resolveOptionLabel(
+      option,
+      optionLabel,
+      labelSeparator,
+      optionLabelTemplate,
+    );
+    const html = optionLabelTemplate?.includes('{b:')
+      ? resolveOptionLabelHtmlFromTemplate(option, optionLabelTemplate) ?? undefined
+      : undefined;
+
+    return {
+      value: getNestedValue(option, optionValue),
+      text,
+      html,
+      original: option,
+    };
+  });
 }
 
 /** Local text filter for static dropdown mode. */
@@ -144,6 +202,25 @@ export function filterOptionsBySearch(
   return options.filter((option) => option.text.toLowerCase().includes(normalized));
 }
 
+/** Stable JSON key for default filter change detection. */
+export function serializeDropdownFilters(filters: Record<string, unknown>): string {
+  const normalized = Object.keys(filters)
+    .sort()
+    .reduce<Record<string, unknown>>((acc, key) => {
+      const value = filters[key];
+
+      if (Array.isArray(value)) {
+        acc[key] = [...value].map(String).sort();
+        return acc;
+      }
+
+      acc[key] = value;
+      return acc;
+    }, {});
+
+  return JSON.stringify(normalized);
+}
+
 /** Compares option values loosely (`1` equals `"1"`). */
 export function optionValuesEqual(a: unknown, b: unknown): boolean {
   if (a === b) {

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

@@ -180,9 +180,15 @@
                   [ariaHidden]="true"
                 />
               }
-              <label class="text-black dark:text-white text-sm font-medium w-full">{{
-                option.text
-              }}</label>
+              <label
+                class="text-black dark:text-white text-sm font-medium w-full [&_strong]:font-bold"
+              >
+                @if (option.html) {
+                  <span [innerHTML]="option.html"></span>
+                } @else {
+                  {{ option.text }}
+                }
+              </label>
             </div>
           }
           @if (filteredProcessedOptions.length === 0 && !isLoading) {

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

@@ -48,6 +48,7 @@ import {
   readDropdownPaginationMeta,
   rebuildEndpointUrl,
   resetDropdownPanelStyles,
+  serializeDropdownFilters,
 } from './multi-dropdown-select.util';
 
 export type {
@@ -74,6 +75,9 @@ export {
   rebuildEndpointUrl,
   resetDropdownPanelStyles,
   resolveOptionLabel,
+  resolveOptionLabelFromTemplate,
+  resolveOptionLabelHtmlFromTemplate,
+  serializeDropdownFilters,
 } from './multi-dropdown-select.util';
 
 /**
@@ -278,6 +282,7 @@ export class JMultiDropdownSelectComponent
 
   private currentPage = 1;
   private totalPages = 1;
+  private defaultFiltersSnapshot = '';
   private resolvedSelectedOptions = new Map<string, MultiDropdownOption>();
   private isResolvingSelected = false;
 
@@ -321,6 +326,8 @@ export class JMultiDropdownSelectComponent
     if (this.type === 'searchable' && this.loadOnInit) {
       this.loadData(true);
     }
+
+    this.defaultFiltersSnapshot = serializeDropdownFilters(this.defaultFilters);
   }
 
   ngAfterViewInit(): void {
@@ -332,6 +339,41 @@ export class JMultiDropdownSelectComponent
     if (changes['options']) {
       this.processOptions();
     }
+
+    if (changes['isDisabled']?.currentValue === true) {
+      this.closePanel();
+    }
+
+    if (changes['defaultFilters']) {
+      this.syncDefaultFilters();
+    }
+  }
+
+  /** Reloads or clears options when dependent `defaultFilters` change. */
+  private syncDefaultFilters(): void {
+    const snapshot = serializeDropdownFilters(this.defaultFilters);
+    if (snapshot === this.defaultFiltersSnapshot) {
+      return;
+    }
+
+    this.defaultFiltersSnapshot = snapshot;
+    this.searchTerm = '';
+    this.options = [];
+    this.processedOptions = [];
+    this.filteredProcessedOptions = [];
+
+    if (this.isDropdownOpen) {
+      this.closePanel();
+    }
+
+    if (this.type === 'searchable' && this.endpoint && !this.isDisabled && this.genericService) {
+      if (this.loadOnInit) {
+        this.loadData(true);
+      }
+    }
+
+    this.updateDisplayLabel();
+    this.cdr.markForCheck();
   }
 
   ngOnDestroy(): void {

package/src/lib/components/select/select-multi-dropdown/multi-dropdown-select.util.ts

@@ -15,6 +15,8 @@ export {
   resetDropdownPanelStyles,
   resolveOptionLabel,
   resolveOptionLabelFromTemplate,
+  resolveOptionLabelHtmlFromTemplate,
+  serializeDropdownFilters,
 } from '../select-dropdown/dropdown-select.util';
 
 /** Coerces numeric strings to numbers so checkbox matching stays stable. */

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

@@ -9,8 +9,8 @@ export const crudTableSlideToggleAnimation = trigger('slideToggle', [
 
 /** Group header expand/collapse animation. */
 export const crudTableGroupSlideToggleAnimation = trigger('groupSlideToggle', [
-  state('collapsed', style({ height: '0', opacity: 0, overflow: 'hidden' })),
-  state('expanded', style({ height: '*', opacity: 1, overflow: 'visible' })),
+  state('collapsed', style({ height: '0', opacity: 0 })),
+  state('expanded', style({ height: '*', opacity: 1 })),
   transition('collapsed => expanded', [animate('380ms cubic-bezier(0.4, 0, 0.2, 1)')]),
   transition('expanded => collapsed', [animate('300ms cubic-bezier(0.4, 0, 0.6, 1)')]),
 ]);

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

@@ -130,7 +130,7 @@
                               size="16"
                               iconClass="text-white animate-spin" [ariaHidden]="true" />
                           } @else if (
-                            getSortKey(sortColumn) !== column.key ||
+                            getSortKey(sortColumn) !== getSortKey(column.key) ||
                             sortDirection === "none"
                           ) {
                             <JIcon [icon]="Icons.ChevronsUpDown"
@@ -656,7 +656,9 @@
                     >
                       <div
                         [@groupSlideToggle]="getGroupExpansionState(item)"
-                        class="j-group-expand-panel overflow-hidden"
+                        class="j-group-expand-panel"
+                        [class.overflow-hidden]="getGroupExpansionState(item) === 'collapsed'"
+                        [class.overflow-visible]="getGroupExpansionState(item) === 'expanded'"
                       >
                         <table
                           class="j-group-inner-table table-fixed w-full min-w-full border-collapse bg-white dark:bg-foreground"

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

@@ -437,7 +437,7 @@ export class JCompleteCrudTableComponent implements OnInit {
             this.totalItems = this.data.length;
           }
 
-          if (response.meta?.sort) {
+          if (response.meta?.sort?.by && typeof response.meta.sort.by === 'string') {
             this.sortColumn = response.meta.sort.by;
             this.sortDirection = response.meta.sort.order.toLowerCase() as SortDirection;
           }
@@ -783,9 +783,8 @@ export class JCompleteCrudTableComponent implements OnInit {
     return resolveOptionIcon(icon, data);
   }
 
-  getDisabled(option: OptionsTable, data: any): boolean {
-    return resolveOptionDisabled(option, data);
-  }
+  getDisabled = (option: OptionsTable, data: any): boolean =>
+    resolveOptionDisabled(option, data);
 
   getIsVisible(option: OptionsTable, data: any): boolean {
     return resolveOptionVisible(option, data);

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

@@ -220,6 +220,18 @@ export function cacheExpandedRowKeys(
 
 // ── Row styling ──────────────────────────────────────────────────────────────
 
+function normalizeRowColorConditionKey(value: unknown): string {
+  if (value === null || value === undefined) {
+    return 'null';
+  }
+
+  if (typeof value === 'boolean') {
+    return String(value);
+  }
+
+  return String(value).toUpperCase();
+}
+
 export function buildRowNgClass(
   row: Record<string, unknown>,
   columns: TableColumn<any>[],
@@ -241,8 +253,7 @@ export function buildRowNgClass(
     value = (value as Record<string, unknown> | undefined)?.[key];
   }
 
-  const normalizedValue =
-    value === null || value === undefined ? 'null' : String(value).toUpperCase();
+  const normalizedValue = normalizeRowColorConditionKey(value);
   const semanticClass = columnWithColor.rowColorCondition?.[normalizedValue] as
     | CrudTableRowColorSemantic
     | undefined;

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

@@ -1,9 +1,9 @@
-export type ToggleOption<T = unknown> = {
-  value: T;
-  label: string;
-  original?: unknown;
-};
-
-export type ToggleSortOrder = 'ASC' | 'DESC';
-
-export type ToggleRadioLayout = 'vertical' | 'horizontal';
+export type ToggleOption<T = unknown> = {
+  value: T;
+  label: string;
+  original?: unknown;
+};
+
+export type ToggleSortOrder = 'ASC' | 'DESC';
+
+export type ToggleRadioLayout = 'vertical' | 'horizontal';

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

@@ -20,8 +20,9 @@ import {
   normalizeToggleOptions,
 } from '../shared/toggle-options.util';
 import { ToggleOption, ToggleSortOrder } from '../shared/toggle-options.types';
+import { ToggleSegmentType } from './segment-toggle.types';
 
-export type { ToggleOption, ToggleSortOrder } from './segment-toggle.types';
+export type { ToggleOption, ToggleSortOrder, ToggleSegmentType } from './segment-toggle.types';
 
 /**
  * Segmented single-select control (pill/tab style).
@@ -56,6 +57,8 @@ export type { ToggleOption, ToggleSortOrder } from './segment-toggle.types';
 export class JToggleSegmentComponent implements OnInit, OnChanges, ControlValueAccessor {
   readonly Icons = Icons;
 
+  /** `static` = local `options` · `searchable` = loads from `endpoint` on init. */
+  @Input() type: ToggleSegmentType = 'static';
   @Input() endpoint = '';
   @Input() options: unknown[] = [];
   @Input() optionLabel: string | string[] = 'label';
@@ -126,7 +129,7 @@ export class JToggleSegmentComponent implements OnInit, OnChanges, ControlValueA
   }
 
   ngOnInit(): void {
-    if (this.endpoint && this.loadOnInit) {
+    if (this.shouldLoadFromApi()) {
       this.loadOptionsFromApi();
       return;
     }
@@ -135,6 +138,21 @@ export class JToggleSegmentComponent implements OnInit, OnChanges, ControlValueA
   }
 
   ngOnChanges(changes: SimpleChanges): void {
+    const loadTriggers = [
+      'endpoint',
+      'type',
+      'loadOnInit',
+      'defaultFilters',
+      'dataPath',
+      'responseKey',
+      'sort',
+    ];
+
+    if (loadTriggers.some((key) => changes[key]) && this.shouldLoadFromApi()) {
+      this.loadOptionsFromApi();
+      return;
+    }
+
     const optionInputs = [
       'options',
       'optionLabel',
@@ -144,11 +162,16 @@ export class JToggleSegmentComponent implements OnInit, OnChanges, ControlValueA
       'optionLabelFn',
     ];
 
-    if (optionInputs.some((key) => changes[key]) && !this.endpoint) {
+    if (optionInputs.some((key) => changes[key]) && !this.shouldLoadFromApi()) {
       this.processOptions();
     }
   }
 
+  /** Whether options should be fetched from `endpoint`. */
+  private shouldLoadFromApi(): boolean {
+    return !!this.endpoint && (this.loadOnInit || this.type === 'searchable');
+  }
+
   setDisabledState(isDisabled: boolean): void {
     this.isComponentDisabled = isDisabled;
   }

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

@@ -1 +1,4 @@
-export type { ToggleOption, ToggleSortOrder } from '../shared/toggle-options.types';
+export type { ToggleOption, ToggleSortOrder } from '../shared/toggle-options.types';
+
+/** `static` = local options · `searchable` = API endpoint (loads on init). */
+export type ToggleSegmentType = 'static' | 'searchable';