tailjng 0.0.4 → 0.0.6

package/fesm2022/tailjng.mjs

@@ -1280,6 +1280,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
 
 const API_URL = new InjectionToken('API_URL');
 
+class JConverterService {
+    constructor() { }
+    /**
+     * Obtener la clave de ordenación correcta
+     * @param sortColumn
+     * @returns
+     */
+    getSortKey(sortColumn) {
+        // Verifica si sortColumn es un objeto y retorna la propiedad 'col'
+        if (typeof sortColumn === 'object' && sortColumn !== null) {
+            return sortColumn.col;
+        }
+        // Si no es un objeto, asume que es una cadena directa
+        return sortColumn;
+    }
+    /**
+     * Convierte un objeto a un array de objetos con clave y valor para iniciar el formulario
+     * @param formGroup
+     * @returns
+     */
+    initializeFormControls(formGroup) {
+        const formControls = {};
+        Object.keys(formGroup.controls).forEach(key => {
+            formControls[`${key}_control`] = formGroup.get(key);
+        });
+        return formControls;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: JConverterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: JConverterService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: JConverterService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
 class JHttpParamsService {
     constructor() { }
     // Formatear parámetros para peticiones HTTP
@@ -1324,43 +1361,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
-class ConverterService {
-    constructor() { }
-    /**
-     * Obtener la clave de ordenación correcta
-     * @param sortColumn
-     * @returns
-     */
-    getSortKey(sortColumn) {
-        // Verifica si sortColumn es un objeto y retorna la propiedad 'col'
-        if (typeof sortColumn === 'object' && sortColumn !== null) {
-            return sortColumn.col;
-        }
-        // Si no es un objeto, asume que es una cadena directa
-        return sortColumn;
-    }
-    /**
-     * Convierte un objeto a un array de objetos con clave y valor para iniciar el formulario
-     * @param formGroup
-     * @returns
-     */
-    initializeFormControls(formGroup) {
-        const formControls = {};
-        Object.keys(formGroup.controls).forEach(key => {
-            formControls[`${key}_control`] = formGroup.get(key);
-        });
-        return formControls;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ConverterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ConverterService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ConverterService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [] });
-
 class JGenericService {
     baseUrl;
     http;
@@ -1479,7 +1479,7 @@ class JGenericService {
         }
         return params;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: JGenericService, deps: [{ token: API_URL }, { token: i1$2.HttpClient }, { token: JHttpParamsService }, { token: ConverterService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: JGenericService, deps: [{ token: API_URL }, { token: i1$2.HttpClient }, { token: JHttpParamsService }, { token: JConverterService }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: JGenericService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: JGenericService, decorators: [{
@@ -1490,7 +1490,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [API_URL]
-                }] }, { type: i1$2.HttpClient }, { type: JHttpParamsService }, { type: ConverterService }] });
+                }] }, { type: i1$2.HttpClient }, { type: JHttpParamsService }, { type: JConverterService }] });
 
 class JErrorHandlerService {
     /**
@@ -3646,7 +3646,7 @@ class CardComponent {
     getExpansionState(row) {
         return this.expandedRows.has(row) ? 'expanded' : 'collapsed';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: CardComponent, deps: [{ token: i1$1.CurrencyPipe }, { token: JGenericService }, { token: JAlertToastService }, { token: ConverterService }, { token: JCalendarService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: CardComponent, deps: [{ token: i1$1.CurrencyPipe }, { token: JGenericService }, { token: JAlertToastService }, { token: JConverterService }, { token: JCalendarService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: CardComponent, isStandalone: true, selector: "JCrudCard", inputs: { endpoint: "endpoint", columns: "columns", defaultFilters: "defaultFilters", isPaginator: "isPaginator", isSearch: "isSearch", itemTemplate: "itemTemplate", itemsPerPageOptions: "itemsPerPageOptions", searchPlaceholder: "searchPlaceholder", filtersButton: "filtersButton", filtersSelect: "filtersSelect" }, outputs: { dataLoaded: "dataLoaded" }, ngImport: i0, template: "<div class=\"w-full\">\r\n  @if (isSearch) {\r\n    <JFilter\r\n      [(searchQuery)]=\"searchQuery\" \r\n      (search)=\"onSearch()\" \r\n      [searchPlaceholder]=\"searchPlaceholder\"\r\n      [(itemsPerPage)]=\"itemsPerPage\"\r\n      [itemsPerPageOptions]=\"itemsPerPageOptions\" \r\n      (onItemsPerPageChangeEvent)=\"onItemsPerPageChange()\"\r\n      [isLoadingSearch]=\"isLoading('search')\" \r\n      [isLoadingPerPage]=\"isLoading('itemsPerPage')\" \r\n      [isLoadingAditionalButtons]=\"loadingStates.aditionalButtons\"\r\n      (clearFilters)=\"onClearFilters($event)\"\r\n      [filtersButton]=\"filtersButton\"\r\n      [filtersSelect]=\"filtersSelect\"\r\n    />\r\n  }\r\n\r\n  @if (isLoading('initialLoad') && displayData.length === 0) {\r\n    <div class=\"w-full flex justify-center items-center h-100 bg-white dark:bg-foreground rounded-[20px] border border-border dark:border-dark-border\">\r\n      <div class=\"flex flex-col gap-3 items-center justify-center py-4\">\r\n        <lucide-icon [name]=\"icons['loading']\" size=\"30\" class=\"text-primary animate-spin\"></lucide-icon>\r\n        <p>Cargando datos...</p>\r\n      </div>\r\n    </div>\r\n  } @else if (displayData.length > 0) {\r\n\r\n    @if (itemTemplate) {\r\n    <div class=\"flex flex-wrap gap-4 my-4\">\r\n      @for (item of displayData; track item?.id) {\r\n        <div class=\"w-full sm:w-[48%] md:w-[31%] xl:w-[23.5%] min-w-[250px] max-w-full flex flex-col gap-3 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\">\r\n          <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item, getValue: getValue.bind(this), columns: columns, item: item }\" />\r\n        </div>\r\n      }\r\n    </div>\r\n    } @else {\r\n      <div class=\"w-full flex justify-center items-center h-100 bg-white dark:bg-foreground rounded-[20px]\">\r\n        <p>No se ha definido ninguna plantilla personalizada (<code>itemTemplate</code>).</p>\r\n      </div>\r\n    }\r\n\r\n  } @else if (!isLoading('pagination')) {\r\n    <div class=\"w-full flex justify-center items-center h-100 bg-white dark:bg-foreground rounded-[20px] border border-border dark:border-dark-border\">\r\n      No hay datos disponibles\r\n    </div>\r\n  }\r\n\r\n  @if (isPaginator) {\r\n    <JPaginator\r\n      [currentPage]=\"currentPage\" \r\n      [itemsPerPageOptions]=\"itemsPerPageOptions\" \r\n      [itemsPerPage]=\"itemsPerPage\"\r\n      [totalItems]=\"totalItems\" \r\n      [pages]=\"pages\" \r\n      (pageChange)=\"handlePageChange($event)\" \r\n      [isLoading]=\"isLoading('pagination')\"\r\n    />\r\n  }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: JPaginatorComponent, selector: "JPaginator", inputs: ["isLoading", "currentPage", "itemsPerPageOptions", "itemsPerPage", "totalItems", "pages"], outputs: ["pageChange"] }, { kind: "component", type: JFilterComponent, selector: "JFilter", inputs: ["isLoadingSearch", "isLoadingPerPage", "isLoadingAditionalButtons", "searchPlaceholder", "columns", "itemsPerPageOptions", "itemsPerPage", "searchQuery", "filtersButton", "filtersSelect"], outputs: ["search", "itemsPerPageChange", "searchQueryChange", "onItemsPerPageChangeEvent", "clearFilters"] }, { kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: i2.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }], animations: [
             trigger('slideToggle', [
                 state('collapsed', style({
@@ -3682,7 +3682,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                             ])
                         ])
                     ], template: "<div class=\"w-full\">\r\n  @if (isSearch) {\r\n    <JFilter\r\n      [(searchQuery)]=\"searchQuery\" \r\n      (search)=\"onSearch()\" \r\n      [searchPlaceholder]=\"searchPlaceholder\"\r\n      [(itemsPerPage)]=\"itemsPerPage\"\r\n      [itemsPerPageOptions]=\"itemsPerPageOptions\" \r\n      (onItemsPerPageChangeEvent)=\"onItemsPerPageChange()\"\r\n      [isLoadingSearch]=\"isLoading('search')\" \r\n      [isLoadingPerPage]=\"isLoading('itemsPerPage')\" \r\n      [isLoadingAditionalButtons]=\"loadingStates.aditionalButtons\"\r\n      (clearFilters)=\"onClearFilters($event)\"\r\n      [filtersButton]=\"filtersButton\"\r\n      [filtersSelect]=\"filtersSelect\"\r\n    />\r\n  }\r\n\r\n  @if (isLoading('initialLoad') && displayData.length === 0) {\r\n    <div class=\"w-full flex justify-center items-center h-100 bg-white dark:bg-foreground rounded-[20px] border border-border dark:border-dark-border\">\r\n      <div class=\"flex flex-col gap-3 items-center justify-center py-4\">\r\n        <lucide-icon [name]=\"icons['loading']\" size=\"30\" class=\"text-primary animate-spin\"></lucide-icon>\r\n        <p>Cargando datos...</p>\r\n      </div>\r\n    </div>\r\n  } @else if (displayData.length > 0) {\r\n\r\n    @if (itemTemplate) {\r\n    <div class=\"flex flex-wrap gap-4 my-4\">\r\n      @for (item of displayData; track item?.id) {\r\n        <div class=\"w-full sm:w-[48%] md:w-[31%] xl:w-[23.5%] min-w-[250px] max-w-full flex flex-col gap-3 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\">\r\n          <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item, getValue: getValue.bind(this), columns: columns, item: item }\" />\r\n        </div>\r\n      }\r\n    </div>\r\n    } @else {\r\n      <div class=\"w-full flex justify-center items-center h-100 bg-white dark:bg-foreground rounded-[20px]\">\r\n        <p>No se ha definido ninguna plantilla personalizada (<code>itemTemplate</code>).</p>\r\n      </div>\r\n    }\r\n\r\n  } @else if (!isLoading('pagination')) {\r\n    <div class=\"w-full flex justify-center items-center h-100 bg-white dark:bg-foreground rounded-[20px] border border-border dark:border-dark-border\">\r\n      No hay datos disponibles\r\n    </div>\r\n  }\r\n\r\n  @if (isPaginator) {\r\n    <JPaginator\r\n      [currentPage]=\"currentPage\" \r\n      [itemsPerPageOptions]=\"itemsPerPageOptions\" \r\n      [itemsPerPage]=\"itemsPerPage\"\r\n      [totalItems]=\"totalItems\" \r\n      [pages]=\"pages\" \r\n      (pageChange)=\"handlePageChange($event)\" \r\n      [isLoading]=\"isLoading('pagination')\"\r\n    />\r\n  }\r\n</div>\r\n" }]
-        }], ctorParameters: () => [{ type: i1$1.CurrencyPipe }, { type: JGenericService }, { type: JAlertToastService }, { type: ConverterService }, { type: JCalendarService }], propDecorators: { dataLoaded: [{
+        }], ctorParameters: () => [{ type: i1$1.CurrencyPipe }, { type: JGenericService }, { type: JAlertToastService }, { type: JConverterService }, { type: JCalendarService }], propDecorators: { dataLoaded: [{
                 type: Output
             }], endpoint: [{
                 type: Input
@@ -3706,6 +3706,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                 type: Input
             }] } });
 
+// =====================================================
+
 class JFormShared {
     alertToastService;
     icons = {
@@ -3845,7 +3847,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                 args: ['document:keydown.escape', ['$event']]
             }] } });
 
-class ErrorMessageComponent {
+class JErrorMessageComponent {
     control;
     errorMessages = {};
     classes = '';
@@ -3859,10 +3861,10 @@ class ErrorMessageComponent {
             .filter(errorKey => this.errorMessages[errorKey])
             .map(errorKey => this.errorMessages[errorKey]);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ErrorMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: ErrorMessageComponent, isStandalone: true, selector: "JErrorMessage", inputs: { control: "control", errorMessages: "errorMessages", classes: "classes" }, ngImport: i0, template: "@if (hasErrors) {\r\n<div class=\"flex flex-col text-red-600 dark:text-red-300 text-sm\">\r\n    @for (message of errors; track $index) {\r\n    <span [class]=\"classes\">{{ message }}</span>\r\n    }\r\n</div>\r\n}", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: JErrorMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: JErrorMessageComponent, isStandalone: true, selector: "JErrorMessage", inputs: { control: "control", errorMessages: "errorMessages", classes: "classes" }, ngImport: i0, template: "@if (hasErrors) {\r\n<div class=\"flex flex-col text-red-600 dark:text-red-300 text-sm\">\r\n    @for (message of errors; track $index) {\r\n    <span [class]=\"classes\">{{ message }}</span>\r\n    }\r\n</div>\r\n}", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ErrorMessageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: JErrorMessageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'JErrorMessage', standalone: true, imports: [CommonModule], template: "@if (hasErrors) {\r\n<div class=\"flex flex-col text-red-600 dark:text-red-300 text-sm\">\r\n    @for (message of errors; track $index) {\r\n    <span [class]=\"classes\">{{ message }}</span>\r\n    }\r\n</div>\r\n}" }]
         }], propDecorators: { control: [{
@@ -4412,7 +4414,7 @@ class JTableComponent {
     getExpansionState(row) {
         return this.expandedRows.has(row) ? 'expanded' : 'collapsed';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: JTableComponent, deps: [{ token: i1$1.CurrencyPipe }, { token: JGenericService }, { token: JAlertToastService }, { token: ConverterService }, { token: JCalendarService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: JTableComponent, deps: [{ token: i1$1.CurrencyPipe }, { token: JGenericService }, { token: JAlertToastService }, { token: JConverterService }, { token: JCalendarService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: JTableComponent, isStandalone: true, selector: "JCrudTable", inputs: { endpoint: "endpoint", columns: "columns", defaultFilters: "defaultFilters", isPaginator: "isPaginator", isSearch: "isSearch", itemsPerPageOptions: "itemsPerPageOptions", searchPlaceholder: "searchPlaceholder", checked: "checked", checkedValues: "checkedValues", checkedTitles: "checkedTitles", filtersButton: "filtersButton", filtersSelect: "filtersSelect", optionsTable: "optionsTable" }, outputs: { dataLoaded: "dataLoaded" }, ngImport: i0, template: "<div class=\"w-full mb-3\">\r\n\r\n  @if (isSearch) {\r\n  <JFilter \r\n    [columns]=\"columns\" \r\n    [(searchQuery)]=\"searchQuery\" \r\n    (search)=\"onSearch()\" \r\n    [searchPlaceholder]=\"searchPlaceholder\"\r\n    [(itemsPerPage)]=\"itemsPerPage\"\r\n    [itemsPerPageOptions]=\"itemsPerPageOptions\" \r\n    (onItemsPerPageChangeEvent)=\"onItemsPerPageChange()\"\r\n    [isLoadingSearch]=\"isLoading('search')\" \r\n    [isLoadingPerPage]=\"isLoading('itemsPerPage')\" \r\n    [isLoadingAditionalButtons]=\"loadingStates.aditionalButtons\"\r\n    (clearFilters)=\"onClearFilters($event)\"\r\n    [filtersButton]=\"filtersButton\"\r\n    [filtersSelect]=\"filtersSelect\"\r\n  />\r\n  }\r\n\r\n  <!-- Table -->\r\n  <div class=\"relative border border-border dark:border-dark-border rounded\">\r\n    <div class=\"overflow-x-auto rounded scroll-element pr-0!\">\r\n      <table class=\"min-w-full bg-background dark:bg-dark-background rounded\">\r\n        <thead class=\"bg-primary dark:bg-dark-primary text-white dark:text-white select-none\">\r\n          <tr>\r\n\r\n            <!-- Expandable column -->\r\n            @if (hasExpandable()) {\r\n              <th class=\"px-4 py-2 text-center text-xs font-medium text-white uppercase tracking-wider border-b border-border dark:border-dark-border font-bold\"></th>\r\n            }\r\n\r\n            <!-- Counter column -->\r\n            <th\r\n              class=\"px-4 py-2 text-center text-xs font-medium text-white uppercase tracking-wider border-b border-border dark:border-dark-border font-bold\">\r\n              N\u00B0\r\n            </th>\r\n\r\n            <!-- Data columns -->\r\n            @for (column of columns; track column.key) {\r\n            @if (column.visible) {\r\n            <th\r\n              class=\"px-2 py-2 text-xs font-medium text-white uppercase tracking-wider border-b border-border dark:border-dark-border font-bold\"\r\n              (click)=\"onSort(column)\" (keydown)=\"onSortKeyPress($event, column)\" tabindex=\"0\"\r\n              [class.pointer-events-none]=\"isLoading('sort') && column.key !== sortingColumn\">\r\n            \r\n              <div class=\"flex gap-1 items-center rounded p-3 justify-center\"\r\n                [ngClass]=\"{'hover:bg-dark-primary dark:hover:bg-primary transition duration-300 ease-in-out border border-border/10 dark:border-dark-border' : column.sortable, 'text-center' : column.label === 'ID'}\"\r\n                [class.cursor-pointer]=\"column.sortable\">\r\n                {{ column.label }}\r\n            \r\n                @if (column.sortable) {\r\n                <div class=\"ml-1\">\r\n                  <!-- Mostrar icono de carga si esta columna est\u00E1 siendo ordenada -->\r\n                  @if (isLoading('sort') && column.key === sortingColumn) {\r\n                    <lucide-icon [name]=\"icons['loading']\" size=\"16\" class=\"text-white animate-spin\"></lucide-icon>\r\n                  } @else if (getSortKey(sortColumn) !== column.key || sortDirection === 'none') {\r\n                    <lucide-icon [name]=\"icons['sortDefault']\" size=\"16\" class=\"text-white\"></lucide-icon>\r\n                  } @else if (sortDirection === 'asc') {\r\n                    <lucide-icon [name]=\"icons['sortAsc']\" size=\"16\" class=\"text-white\"></lucide-icon>\r\n                  } @else {\r\n                    <lucide-icon [name]=\"icons['sortDesc']\" size=\"16\" class=\"text-white\"></lucide-icon>\r\n                  }\r\n                </div>\r\n                }\r\n              </div>\r\n            </th>\r\n            }\r\n            }\r\n\r\n            <!-- Actions column - Sticky header -->\r\n            <th\r\n              class=\"!sticky !right-0 bg-primary dark:bg-dark-primary min-w-[50px] px-4 py-2 text-center text-xs font-medium text-white uppercase tracking-wider border-b border-border dark:border-dark-border font-bold shadow-[-4px_0_5px_rgba(0,0,0,0.1)]\">\r\n\r\n              @if (checked) {\r\n              <JCheckbox onKeyPress\r\n                type=\"switch\"\r\n                [title]=\"titleChecked\"\r\n                [isChecked]=\"isChecked\"\r\n                (click)=\"checkActiveInactive(isChecked)\"\r\n                [isLoading]=\"isLoading('checked')\"\r\n              />\r\n              } @else {\r\n                <span class=\"text-[10px] opacity-80 border border-border dark:border-dark-border p-2 pl-3 pr-3 rounded-full\">Opciones</span>\r\n              }\r\n              <!-- Pseudoelemento para el borde central -->\r\n              <div class=\"absolute top-[15px] bottom-[15px] left-0 w-[1px] bg-border dark:bg-dark-border\"></div>\r\n            </th>\r\n          </tr>\r\n        </thead>\r\n\r\n        <tbody>\r\n          @if (isLoading('initialLoad') && displayData.length === 0) {\r\n\r\n          <!-- Loading state -->\r\n          <tr>\r\n            <td [attr.colspan]=\"getVisibleColumnsCount() + 3\"\r\n              class=\"px-4 py-8 text-center text-sm text-black dark:text-white\">\r\n              <div class=\"flex flex-col gap-3 items-center justify-center py-4\">\r\n                <lucide-icon [name]=\"icons['loading']\" size=\"30\" class=\"text-primary animate-spin\"></lucide-icon>\r\n                <p>Cargando datos...</p>\r\n              </div>\r\n            </td>\r\n          </tr>\r\n\r\n          } @else if (displayData.length > 0) {\r\n\r\n            <!-- Data rows -->\r\n            @for (item of displayData; track $index) {\r\n              <tr onKeyPress class=\"hover:bg-primary/10 dark:hover:bg-dark-primary/10\" (click)=\"toggleRow(item)\"  [ngClass]=\"{ 'cursor-pointer': hasExpandable() }\">\r\n\r\n                <!-- Expandable column -->\r\n                @if (hasExpandable()) {\r\n                  <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\">\r\n                    <lucide-icon [name]=\"icons['chevronRight']\" size=\"16\" class=\"transition-transform duration-300\"\r\n                    [class]=\"expandedRows.has(item) ? 'rotate-90' : ''\" />\r\n                  </td>\r\n                }\r\n\r\n                <!-- Counter column -->\r\n                <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\">\r\n                  {{ getRowNumber($index) }}\r\n                </td>\r\n\r\n                <!-- Data columns -->\r\n                @for (column of columns; track column.key) {\r\n                  @if (column.visible) {\r\n                    <td\r\n                      class=\"px-4 py-2 h-[50px] text-xs border-b border-border dark:border-dark-border text-black dark:text-white\"\r\n                      [ngClass]=\"{'text-center': column.label === 'ID'}\"\r\n                      [ngStyle]=\"column.styles\">\r\n                      \r\n                      <span [ngClass]=\"{'p-2 pl-4 pr-4 border border-border dark:border-dark-border rounded-full': column.isDecorator}\">\r\n                        @if (isBoolean(getValue(item, column))) {\r\n                          <JCheckbox\r\n                            [item]=\"item\"\r\n                            [column]=\"column\"\r\n                            [getValue]=\"getValue.bind(this)\"\r\n                            [onCheckboxChange]=\"onCheckboxChange.bind(this)\"\r\n                            [iconSize]=\"20\"\r\n                            [disabled]=\"column?.isDisaled\"\r\n                          />\r\n                        } @else {\r\n                          {{ getValue(item, column) }}\r\n                        }\r\n\r\n                      </span>\r\n                    </td>\r\n                  }\r\n                }\r\n\r\n                <!-- Actions column - Sticky cell -->\r\n                <td\r\n                  class=\"!sticky !right-0 bg-background dark:bg-dark-background text-center whitespace-nowrap text-sm border-b border-border dark:border-dark-border shadow-[-4px_0_5px_rgba(0,0,0,0.1)] relative\">\r\n                  <div class=\"flex justify-center items-center space-x-2 min-w-[50px] px-4 py-2 h-[50px]\">\r\n                    @for (option of optionsTable; track $index) {\r\n                      @if (getIsVisible(option, item)) {\r\n                      <JButton onKeyPress \r\n                        [icon]=\"getIcon(option.icon, item)\"\r\n                        [iconSize]=\"20\" \r\n                        (clicked)=\"$event.stopPropagation(); onButtonClick(option, item)\"\r\n                        [tooltip]=\"getTooltip(option.tooltip ?? '', item)\"\r\n                        [tooltipPosition]=\"option.tooltipPosition ?? 'top'\"\r\n                        [disabled]=\"getDisabled(option, item)\"\r\n                        [isLoading]=\"isAditionalButtonLoading(option.type ?? '', item?.id_student_course)\"\r\n                        [classes]=\"option.classes ?? ''\"\r\n                        [ngClasses]=\"mergeNgClasses(option.ngClass, item)\" \r\n                      />\r\n                      }\r\n                    }\r\n                  </div>\r\n\r\n                  <!-- Pseudoelemento para el borde central -->\r\n                  <div class=\"absolute top-[15px] bottom-[15px] left-0 w-[1px] bg-border dark:bg-dark-border\"></div>\r\n                </td>\r\n              </tr>\r\n\r\n              @if (hasExpandable()) {\r\n                <tr>\r\n                  <td [attr.colspan]=\"getVisibleColumnsCount() + 3\">\r\n                    <div [@slideToggle]=\"getExpansionState(item)\" [ngClass]=\"{'border-b border-border dark:border-dark-border': expandedRows.has(item)}\"\r\n                      class=\"overflow-hidden transition-all duration-300 ease-in-out\"\r\n                    >\r\n                      <div class=\"w-full border border-gray-300 dark:border-zinc-700 bg-white dark:bg-zinc-900 p-3\">\r\n                        <div [innerHTML]=\"getExpandedContent(item)\"></div>\r\n                      </div>  \r\n                    </div>\r\n                  </td>\r\n                </tr>\r\n              }\r\n            }\r\n            } @else if (!isLoading('pagination')) {\r\n            <!-- Empty state -->\r\n            <tr>\r\n              <td [attr.colspan]=\"getVisibleColumnsCount() + 3\"\r\n                class=\"px-4 py-8 text-center text-sm text-black dark:text-white\">\r\n                No hay datos disponibles\r\n              </td>\r\n            </tr>\r\n            }\r\n\r\n        </tbody>\r\n      </table>\r\n    </div>\r\n  </div>\r\n\r\n  @if (isPaginator) {\r\n  <JPaginator \r\n    [currentPage]=\"currentPage\" \r\n    [itemsPerPageOptions]=\"itemsPerPageOptions\" \r\n    [itemsPerPage]=\"itemsPerPage\"\r\n    [totalItems]=\"totalItems\" \r\n    [pages]=\"pages\" \r\n    (pageChange)=\"handlePageChange($event)\" \r\n    [isLoading]=\"isLoading('pagination')\"\r\n  />\r\n  }\r\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: JPaginatorComponent, selector: "JPaginator", inputs: ["isLoading", "currentPage", "itemsPerPageOptions", "itemsPerPage", "totalItems", "pages"], outputs: ["pageChange"] }, { kind: "component", type: JFilterComponent, selector: "JFilter", inputs: ["isLoadingSearch", "isLoadingPerPage", "isLoadingAditionalButtons", "searchPlaceholder", "columns", "itemsPerPageOptions", "itemsPerPage", "searchQuery", "filtersButton", "filtersSelect"], outputs: ["search", "itemsPerPageChange", "searchQueryChange", "onItemsPerPageChangeEvent", "clearFilters"] }, { kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: i2.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }, { kind: "component", type: JButtonComponent, selector: "JButton", inputs: ["type", "disabled", "isLoading", "icon", "iconSize", "text", "isChangeIcon", "iconChange", "tooltip", "tooltipPosition", "classes", "ngClasses"], outputs: ["clicked"] }, { kind: "component", type: JCheckboxComponent, selector: "JCheckbox", inputs: ["type", "icon", "iconSize", "disabled", "isLoading", "classes", "title", "isChecked", "item", "column", "getValue", "onCheckboxChange", "toggleSwitch"] }], animations: [
             trigger('slideToggle', [
                 state('collapsed', style({
@@ -4448,7 +4450,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                             ])
                         ])
                     ], template: "<div class=\"w-full mb-3\">\r\n\r\n  @if (isSearch) {\r\n  <JFilter \r\n    [columns]=\"columns\" \r\n    [(searchQuery)]=\"searchQuery\" \r\n    (search)=\"onSearch()\" \r\n    [searchPlaceholder]=\"searchPlaceholder\"\r\n    [(itemsPerPage)]=\"itemsPerPage\"\r\n    [itemsPerPageOptions]=\"itemsPerPageOptions\" \r\n    (onItemsPerPageChangeEvent)=\"onItemsPerPageChange()\"\r\n    [isLoadingSearch]=\"isLoading('search')\" \r\n    [isLoadingPerPage]=\"isLoading('itemsPerPage')\" \r\n    [isLoadingAditionalButtons]=\"loadingStates.aditionalButtons\"\r\n    (clearFilters)=\"onClearFilters($event)\"\r\n    [filtersButton]=\"filtersButton\"\r\n    [filtersSelect]=\"filtersSelect\"\r\n  />\r\n  }\r\n\r\n  <!-- Table -->\r\n  <div class=\"relative border border-border dark:border-dark-border rounded\">\r\n    <div class=\"overflow-x-auto rounded scroll-element pr-0!\">\r\n      <table class=\"min-w-full bg-background dark:bg-dark-background rounded\">\r\n        <thead class=\"bg-primary dark:bg-dark-primary text-white dark:text-white select-none\">\r\n          <tr>\r\n\r\n            <!-- Expandable column -->\r\n            @if (hasExpandable()) {\r\n              <th class=\"px-4 py-2 text-center text-xs font-medium text-white uppercase tracking-wider border-b border-border dark:border-dark-border font-bold\"></th>\r\n            }\r\n\r\n            <!-- Counter column -->\r\n            <th\r\n              class=\"px-4 py-2 text-center text-xs font-medium text-white uppercase tracking-wider border-b border-border dark:border-dark-border font-bold\">\r\n              N\u00B0\r\n            </th>\r\n\r\n            <!-- Data columns -->\r\n            @for (column of columns; track column.key) {\r\n            @if (column.visible) {\r\n            <th\r\n              class=\"px-2 py-2 text-xs font-medium text-white uppercase tracking-wider border-b border-border dark:border-dark-border font-bold\"\r\n              (click)=\"onSort(column)\" (keydown)=\"onSortKeyPress($event, column)\" tabindex=\"0\"\r\n              [class.pointer-events-none]=\"isLoading('sort') && column.key !== sortingColumn\">\r\n            \r\n              <div class=\"flex gap-1 items-center rounded p-3 justify-center\"\r\n                [ngClass]=\"{'hover:bg-dark-primary dark:hover:bg-primary transition duration-300 ease-in-out border border-border/10 dark:border-dark-border' : column.sortable, 'text-center' : column.label === 'ID'}\"\r\n                [class.cursor-pointer]=\"column.sortable\">\r\n                {{ column.label }}\r\n            \r\n                @if (column.sortable) {\r\n                <div class=\"ml-1\">\r\n                  <!-- Mostrar icono de carga si esta columna est\u00E1 siendo ordenada -->\r\n                  @if (isLoading('sort') && column.key === sortingColumn) {\r\n                    <lucide-icon [name]=\"icons['loading']\" size=\"16\" class=\"text-white animate-spin\"></lucide-icon>\r\n                  } @else if (getSortKey(sortColumn) !== column.key || sortDirection === 'none') {\r\n                    <lucide-icon [name]=\"icons['sortDefault']\" size=\"16\" class=\"text-white\"></lucide-icon>\r\n                  } @else if (sortDirection === 'asc') {\r\n                    <lucide-icon [name]=\"icons['sortAsc']\" size=\"16\" class=\"text-white\"></lucide-icon>\r\n                  } @else {\r\n                    <lucide-icon [name]=\"icons['sortDesc']\" size=\"16\" class=\"text-white\"></lucide-icon>\r\n                  }\r\n                </div>\r\n                }\r\n              </div>\r\n            </th>\r\n            }\r\n            }\r\n\r\n            <!-- Actions column - Sticky header -->\r\n            <th\r\n              class=\"!sticky !right-0 bg-primary dark:bg-dark-primary min-w-[50px] px-4 py-2 text-center text-xs font-medium text-white uppercase tracking-wider border-b border-border dark:border-dark-border font-bold shadow-[-4px_0_5px_rgba(0,0,0,0.1)]\">\r\n\r\n              @if (checked) {\r\n              <JCheckbox onKeyPress\r\n                type=\"switch\"\r\n                [title]=\"titleChecked\"\r\n                [isChecked]=\"isChecked\"\r\n                (click)=\"checkActiveInactive(isChecked)\"\r\n                [isLoading]=\"isLoading('checked')\"\r\n              />\r\n              } @else {\r\n                <span class=\"text-[10px] opacity-80 border border-border dark:border-dark-border p-2 pl-3 pr-3 rounded-full\">Opciones</span>\r\n              }\r\n              <!-- Pseudoelemento para el borde central -->\r\n              <div class=\"absolute top-[15px] bottom-[15px] left-0 w-[1px] bg-border dark:bg-dark-border\"></div>\r\n            </th>\r\n          </tr>\r\n        </thead>\r\n\r\n        <tbody>\r\n          @if (isLoading('initialLoad') && displayData.length === 0) {\r\n\r\n          <!-- Loading state -->\r\n          <tr>\r\n            <td [attr.colspan]=\"getVisibleColumnsCount() + 3\"\r\n              class=\"px-4 py-8 text-center text-sm text-black dark:text-white\">\r\n              <div class=\"flex flex-col gap-3 items-center justify-center py-4\">\r\n                <lucide-icon [name]=\"icons['loading']\" size=\"30\" class=\"text-primary animate-spin\"></lucide-icon>\r\n                <p>Cargando datos...</p>\r\n              </div>\r\n            </td>\r\n          </tr>\r\n\r\n          } @else if (displayData.length > 0) {\r\n\r\n            <!-- Data rows -->\r\n            @for (item of displayData; track $index) {\r\n              <tr onKeyPress class=\"hover:bg-primary/10 dark:hover:bg-dark-primary/10\" (click)=\"toggleRow(item)\"  [ngClass]=\"{ 'cursor-pointer': hasExpandable() }\">\r\n\r\n                <!-- Expandable column -->\r\n                @if (hasExpandable()) {\r\n                  <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\">\r\n                    <lucide-icon [name]=\"icons['chevronRight']\" size=\"16\" class=\"transition-transform duration-300\"\r\n                    [class]=\"expandedRows.has(item) ? 'rotate-90' : ''\" />\r\n                  </td>\r\n                }\r\n\r\n                <!-- Counter column -->\r\n                <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\">\r\n                  {{ getRowNumber($index) }}\r\n                </td>\r\n\r\n                <!-- Data columns -->\r\n                @for (column of columns; track column.key) {\r\n                  @if (column.visible) {\r\n                    <td\r\n                      class=\"px-4 py-2 h-[50px] text-xs border-b border-border dark:border-dark-border text-black dark:text-white\"\r\n                      [ngClass]=\"{'text-center': column.label === 'ID'}\"\r\n                      [ngStyle]=\"column.styles\">\r\n                      \r\n                      <span [ngClass]=\"{'p-2 pl-4 pr-4 border border-border dark:border-dark-border rounded-full': column.isDecorator}\">\r\n                        @if (isBoolean(getValue(item, column))) {\r\n                          <JCheckbox\r\n                            [item]=\"item\"\r\n                            [column]=\"column\"\r\n                            [getValue]=\"getValue.bind(this)\"\r\n                            [onCheckboxChange]=\"onCheckboxChange.bind(this)\"\r\n                            [iconSize]=\"20\"\r\n                            [disabled]=\"column?.isDisaled\"\r\n                          />\r\n                        } @else {\r\n                          {{ getValue(item, column) }}\r\n                        }\r\n\r\n                      </span>\r\n                    </td>\r\n                  }\r\n                }\r\n\r\n                <!-- Actions column - Sticky cell -->\r\n                <td\r\n                  class=\"!sticky !right-0 bg-background dark:bg-dark-background text-center whitespace-nowrap text-sm border-b border-border dark:border-dark-border shadow-[-4px_0_5px_rgba(0,0,0,0.1)] relative\">\r\n                  <div class=\"flex justify-center items-center space-x-2 min-w-[50px] px-4 py-2 h-[50px]\">\r\n                    @for (option of optionsTable; track $index) {\r\n                      @if (getIsVisible(option, item)) {\r\n                      <JButton onKeyPress \r\n                        [icon]=\"getIcon(option.icon, item)\"\r\n                        [iconSize]=\"20\" \r\n                        (clicked)=\"$event.stopPropagation(); onButtonClick(option, item)\"\r\n                        [tooltip]=\"getTooltip(option.tooltip ?? '', item)\"\r\n                        [tooltipPosition]=\"option.tooltipPosition ?? 'top'\"\r\n                        [disabled]=\"getDisabled(option, item)\"\r\n                        [isLoading]=\"isAditionalButtonLoading(option.type ?? '', item?.id_student_course)\"\r\n                        [classes]=\"option.classes ?? ''\"\r\n                        [ngClasses]=\"mergeNgClasses(option.ngClass, item)\" \r\n                      />\r\n                      }\r\n                    }\r\n                  </div>\r\n\r\n                  <!-- Pseudoelemento para el borde central -->\r\n                  <div class=\"absolute top-[15px] bottom-[15px] left-0 w-[1px] bg-border dark:bg-dark-border\"></div>\r\n                </td>\r\n              </tr>\r\n\r\n              @if (hasExpandable()) {\r\n                <tr>\r\n                  <td [attr.colspan]=\"getVisibleColumnsCount() + 3\">\r\n                    <div [@slideToggle]=\"getExpansionState(item)\" [ngClass]=\"{'border-b border-border dark:border-dark-border': expandedRows.has(item)}\"\r\n                      class=\"overflow-hidden transition-all duration-300 ease-in-out\"\r\n                    >\r\n                      <div class=\"w-full border border-gray-300 dark:border-zinc-700 bg-white dark:bg-zinc-900 p-3\">\r\n                        <div [innerHTML]=\"getExpandedContent(item)\"></div>\r\n                      </div>  \r\n                    </div>\r\n                  </td>\r\n                </tr>\r\n              }\r\n            }\r\n            } @else if (!isLoading('pagination')) {\r\n            <!-- Empty state -->\r\n            <tr>\r\n              <td [attr.colspan]=\"getVisibleColumnsCount() + 3\"\r\n                class=\"px-4 py-8 text-center text-sm text-black dark:text-white\">\r\n                No hay datos disponibles\r\n              </td>\r\n            </tr>\r\n            }\r\n\r\n        </tbody>\r\n      </table>\r\n    </div>\r\n  </div>\r\n\r\n  @if (isPaginator) {\r\n  <JPaginator \r\n    [currentPage]=\"currentPage\" \r\n    [itemsPerPageOptions]=\"itemsPerPageOptions\" \r\n    [itemsPerPage]=\"itemsPerPage\"\r\n    [totalItems]=\"totalItems\" \r\n    [pages]=\"pages\" \r\n    (pageChange)=\"handlePageChange($event)\" \r\n    [isLoading]=\"isLoading('pagination')\"\r\n  />\r\n  }\r\n</div>" }]
-        }], ctorParameters: () => [{ type: i1$1.CurrencyPipe }, { type: JGenericService }, { type: JAlertToastService }, { type: ConverterService }, { type: JCalendarService }], propDecorators: { dataLoaded: [{
+        }], ctorParameters: () => [{ type: i1$1.CurrencyPipe }, { type: JGenericService }, { type: JAlertToastService }, { type: JConverterService }, { type: JCalendarService }], propDecorators: { dataLoaded: [{
                 type: Output
             }], endpoint: [{
                 type: Input
@@ -4478,6 +4480,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                 type: Input
             }] } });
 
+// ===================================================
+
 // =======================================
 // Publicar libreria
 // =======================================
@@ -4495,5 +4499,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { API_URL, CardComponent, ErrorMessageComponent, JAlertDialogComponent, JAlertDialogService, JAlertToastComponent, JAlertToastService, JButtonComponent, JCheckboxComponent, JContentFormComponent, JDialogComponent, JDialogShared, JErrorHandlerService, JFilterComponent, JFormComponent, JFormShared, JGenericService, JHttpParamsService, JInputComponent, JLabelComponent, JModeToggleComponent, JPaginatorComponent, JSelectComponent, JTableComponent, JThemeComponent, JToggleRadioComponent, JTooltipModule };
+export { API_URL, CardComponent, JAlertDialogComponent, JAlertDialogService, JAlertToastComponent, JAlertToastService, JButtonComponent, JCheckboxComponent, JContentFormComponent, JConverterService, JDialogComponent, JDialogShared, JErrorHandlerService, JErrorMessageComponent, JFilterComponent, JFormComponent, JFormShared, JGenericService, JHttpParamsService, JInputComponent, JLabelComponent, JModeToggleComponent, JPaginatorComponent, JSelectComponent, JTableComponent, JThemeComponent, JToggleRadioComponent, JTooltipModule };
 //# sourceMappingURL=tailjng.mjs.map