tailjng 0.0.1 → 0.0.2

package/fesm2022/tailjng.mjs

@@ -1,34 +1,70 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, TemplateRef, HostListener, Input, Directive } from '@angular/core';
+import { PLATFORM_ID, Inject, Component, Injectable, TemplateRef, HostListener, Input, Directive, forwardRef, ViewChild, ViewEncapsulation, inject, EventEmitter, Output, CUSTOM_ELEMENTS_SCHEMA, signal, computed, InjectionToken, HostBinding, ContentChildren } from '@angular/core';
+import * as i2 from 'lucide-angular';
+import { Moon, Sun, LucideAngularModule, X, Loader2, Check, CircleHelp, Info, TriangleAlert, CircleX, CircleCheck, Search, Eye, ChevronDown, Copy, ChevronsRight, ChevronRight, ChevronLeft, ChevronsLeft, Cpu, Trash2, Eraser, ArrowDownWideNarrow, Filter, Trash, Edit, ChevronUp, ChevronsUpDown, MousePointerClick, CircleCheckBig, UserRoundSearch, KeyRound, Power, Ban, Plus, Asterisk, Save } from 'lucide-angular';
+import * as i1$1 from '@angular/common';
+import { isPlatformBrowser, NgClass, CommonModule } from '@angular/common';
+import * as i1 from '@angular/forms';
+import { FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { trigger, transition, style, animate, state } from '@angular/animations';
+import { isObservable, firstValueFrom, map, Subject, debounceTime, distinctUntilChanged, filter, BehaviorSubject } from 'rxjs';
+import * as i1$2 from '@angular/common/http';
+import { HttpParams } from '@angular/common/http';
+import { formatDistanceToNowStrict } from 'date-fns';
+import { es } from 'date-fns/locale';
+import 'highlight.js/styles/github-dark.css';
+import hljs from 'highlight.js/lib/core';
+import javascript from 'highlight.js/lib/languages/javascript';
+import typescript from 'highlight.js/lib/languages/typescript';
+import bash from 'highlight.js/lib/languages/bash';
+import css from 'highlight.js/lib/languages/css';
+import scss from 'highlight.js/lib/languages/scss';
+import html from 'highlight.js/lib/languages/xml';
+import json from 'highlight.js/lib/languages/json';
 
-class TailjngService {
-    constructor() { }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TailjngService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TailjngService, providedIn: 'root' });
+class JModeToggleComponent {
+    platformId;
+    icons = {
+        sun: Sun,
+        moon: Moon
+    };
+    title = 'frontend';
+    theme = 'light';
+    constructor(platformId) {
+        this.platformId = platformId;
+        this.loadTheme();
+    }
+    // Guardar el tema en localStorage solo en el navegador y actualizar la variable
+    setTheme(theme) {
+        if (isPlatformBrowser(this.platformId)) {
+            localStorage.setItem('theme', theme);
+        }
+        this.theme = theme; // Actualizar la variable theme
+        document.documentElement.classList.toggle('dark', theme === 'dark');
+    }
+    // Cargar el tema solo si está en el navegador y asignarlo a la variable
+    loadTheme() {
+        if (isPlatformBrowser(this.platformId)) {
+            const storedTheme = localStorage.getItem('theme');
+            this.theme = storedTheme ? storedTheme : 'light'; // Asegurar que siempre haya un valor válido
+            document.documentElement.classList.toggle('dark', this.theme === 'dark');
+        }
+    }
+    // Alternar entre claro y oscuro, y actualizar la variable
+    toggleDarkMode() {
+        const newTheme = this.theme === 'dark' ? 'light' : 'dark';
+        this.setTheme(newTheme);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: JModeToggleComponent, deps: [{ token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: JModeToggleComponent, isStandalone: true, selector: "JModeToggle", ngImport: i0, template: "<button (click)=\"toggleDarkMode()\"\n    class=\"p-2 bg-gray-300 dark:bg-gray-700 text-black dark:text-white rounded-full cursor-pointer\">\n    @if (theme === 'dark') {\n    <lucide-icon [name]=\"icons['moon']\"></lucide-icon>\n    } @else {\n    <lucide-icon [name]=\"icons['sun']\"></lucide-icon>\n    }\n</button>", styles: [""], dependencies: [{ 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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TailjngService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [] });
-
-class TailjngComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TailjngComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: TailjngComponent, isStandalone: true, selector: "lib-tailjng", ngImport: i0, template: `
-    <p>
-      tailjng works!
-    </p>
-  `, isInline: true, styles: [""] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TailjngComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-tailjng', imports: [], template: `
-    <p>
-      tailjng works!
-    </p>
-  ` }]
-        }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: JModeToggleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'JModeToggle', imports: [LucideAngularModule], template: "<button (click)=\"toggleDarkMode()\"\n    class=\"p-2 bg-gray-300 dark:bg-gray-700 text-black dark:text-white rounded-full cursor-pointer\">\n    @if (theme === 'dark') {\n    <lucide-icon [name]=\"icons['moon']\"></lucide-icon>\n    } @else {\n    <lucide-icon [name]=\"icons['sun']\"></lucide-icon>\n    }\n</button>" }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }] });
 
 class TooltipService {
     tooltipElement = null;
@@ -239,13 +275,4249 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                 args: ['mouseleave']
             }] } });
 
+class JLabelComponent {
+    for = '';
+    isRequired = false;
+    isConditioned = false;
+    isAutomated = false;
+    classes = '';
+    ngClass = {};
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: JLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: JLabelComponent, isStandalone: true, selector: "JLabel", inputs: { for: "for", isRequired: "isRequired", isConditioned: "isConditioned", isAutomated: "isAutomated", classes: "classes", ngClass: "ngClass" }, ngImport: i0, template: "<label \r\n  [for]=\"for\"\r\n  [ngClass]=\"ngClass\"\r\n  [class]=\"classes\"\r\n  class=\"flex gap-1 items-center text-black dark:text-white\"\r\n>\r\n    <ng-content></ng-content>\r\n\r\n  @if (isRequired || isConditioned || isAutomated) {\r\n    <span class=\"text-[8px]\" [ngClass]=\"{\r\n      'text-red-600 dark:text-red-300': isRequired,\r\n      'text-blue-600 dark:text-blue-300': !isRequired && isConditioned,\r\n      'text-purple-600 dark:text-purple-300': !isRequired && !isConditioned && isAutomated\r\n    }\">\u2731</span>\r\n  }\r\n</label>\r\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: JLabelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'JLabel', standalone: true, imports: [NgClass], template: "<label \r\n  [for]=\"for\"\r\n  [ngClass]=\"ngClass\"\r\n  [class]=\"classes\"\r\n  class=\"flex gap-1 items-center text-black dark:text-white\"\r\n>\r\n    <ng-content></ng-content>\r\n\r\n  @if (isRequired || isConditioned || isAutomated) {\r\n    <span class=\"text-[8px]\" [ngClass]=\"{\r\n      'text-red-600 dark:text-red-300': isRequired,\r\n      'text-blue-600 dark:text-blue-300': !isRequired && isConditioned,\r\n      'text-purple-600 dark:text-purple-300': !isRequired && !isConditioned && isAutomated\r\n    }\">\u2731</span>\r\n  }\r\n</label>\r\n" }]
+        }], propDecorators: { for: [{
+                type: Input
+            }], isRequired: [{
+                type: Input
+            }], isConditioned: [{
+                type: Input
+            }], isAutomated: [{
+                type: Input
+            }], classes: [{
+                type: Input
+            }], ngClass: [{
+                type: Input
+            }] } });
+
+class JInputComponent {
+    icons = {
+        x: X,
+    };
+    type = 'text';
+    placeholder = '';
+    disabled = false;
+    required = false;
+    name;
+    id;
+    classes = '';
+    ngClass = {};
+    accept = '';
+    multiple = false;
+    showImage = false;
+    clearButton = false;
+    min = 0;
+    max = 100;
+    step = 1;
+    isLabel = false;
+    simbol = '';
+    fileInputRef;
+    innerValue = '';
+    previewUrl = null;
+    get value() {
+        return this.innerValue;
+    }
+    get combinedNgClass() {
+        return {
+            ...(this.ngClass || {}),
+            'opacity-50': this.disabled
+        };
+    }
+    set value(val) {
+        if (val !== this.innerValue) {
+            this.innerValue = val;
+            this.onChange(val);
+        }
+    }
+    // ControlValueAccessor
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(val) {
+        if (this.type !== 'file') {
+            this.innerValue = val ?? '';
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        // Si es tipo archivo, limpia
+        if (isDisabled && this.type === 'file') {
+            this.innerValue = null;
+            this.previewUrl = null;
+        }
+    }
+    onInput(event) {
+        const target = event.target;
+        this.value = target.value;
+        this.onChange(this.value);
+        this.onTouched();
+    }
+    onFileSelected(event) {
+        const input = event.target;
+        const files = input.files;
+        if (files) {
+            const value = this.multiple ? Array.from(files) : files[0];
+            this.innerValue = value;
+            this.onChange(value);
+            this.onTouched();
+            if (!this.multiple && value instanceof File && value.type?.startsWith('image')) {
+                const reader = new FileReader();
+                reader.onload = () => {
+                    this.previewUrl = reader.result;
+                };
+                reader.readAsDataURL(value);
+            }
+            else {
+                this.previewUrl = null;
+            }
+        }
+    }
+    clearInput() {
+        this.value = '';
+        this.onChange('');
+        this.onTouched();
+    }
+    clearFile() {
+        this.innerValue = null;
+        this.previewUrl = null;
+        this.onChange(this.multiple ? [] : null);
+        this.onTouched();
+        if (this.fileInputRef?.nativeElement) {
+            this.fileInputRef.nativeElement.value = '';
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: JInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: JInputComponent, isStandalone: true, selector: "JInput", inputs: { type: "type", placeholder: "placeholder", disabled: "disabled", required: "required", name: "name", id: "id", classes: "classes", ngClass: "ngClass", accept: "accept", multiple: "multiple", showImage: "showImage", clearButton: "clearButton", min: "min", max: "max", step: "step", isLabel: "isLabel", simbol: "simbol" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => JInputComponent),
+                multi: true
+            }
+        ], viewQueries: [{ propertyName: "fileInputRef", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "@if (type === 'file') {\r\n  <div class=\"relative w-full\">\r\n    <input\r\n      #fileInput\r\n      type=\"file\"\r\n      [accept]=\"accept\"\r\n      [multiple]=\"multiple\"\r\n      (change)=\"onFileSelected($event)\"\r\n      [disabled]=\"disabled\"\r\n      [required]=\"required\"\r\n      [name]=\"name ?? ''\"\r\n      [id]=\"id\"\r\n      [ngClass]=\"combinedNgClass\"\r\n      [class]=\"classes\"\r\n      class=\"input w-full h-[40px] pr-10 bg-background dark:bg-dark-background border border-border dark:border-dark-border text-black dark:text-white rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary transition duration-200 cursor-pointer\"\r\n      (blur)=\"onTouched()\" />\r\n\r\n    @if (value && clearButton) {\r\n      <button type=\"button\"\r\n        class=\"absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-500 pr-1 mr-1 text-gray-400 hover:text-gray-600 focus:outline-none cursor-pointer\"\r\n        (click)=\"clearFile()\">\r\n        <lucide-icon [name]=\"icons['x']\" class=\"w-4 h-4\" />\r\n      </button>\r\n    }\r\n  </div>\r\n\r\n  @if (previewUrl && showImage) {\r\n    <div class=\"mt-2 w-full\">\r\n      <img [src]=\"previewUrl\" alt=\"Vista previa\"\r\n        class=\"w-full max-w-full h-auto rounded border border-border dark:border-dark-border shadow-sm\" />\r\n    </div>\r\n  }\r\n}\r\n\r\n@else if (type === 'textarea') {\r\n  <div class=\"relative w-full\">\r\n    <textarea\r\n      [value]=\"value\"\r\n      (input)=\"onInput($event)\"\r\n      [placeholder]=\"placeholder\"\r\n      [disabled]=\"disabled\"\r\n      [required]=\"required\"\r\n      [name]=\"name ?? ''\"\r\n      [id]=\"id\"\r\n      (blur)=\"onTouched()\"\r\n      [ngClass]=\"combinedNgClass\"\r\n      [class]=\"classes\"\r\n      class=\"input w-full h-[70px] min-h-[70px] pr-10 bg-background dark:bg-dark-background border border-border dark:border-dark-border text-black dark:text-white rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary transition duration-200\"\r\n    ></textarea>\r\n\r\n    @if (value && clearButton) {\r\n      <button type=\"button\" class=\"absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-red-500\" (click)=\"clearInput()\">\r\n        <lucide-icon [name]=\"icons['x']\" class=\"w-4 h-4\" />\r\n      </button>\r\n    }\r\n  </div>\r\n}\r\n\r\n@else if (type === 'range') {\r\n  <div class=\"w-full\">\r\n\r\n    @if (placeholder) {\r\n      @if (isLabel) {\r\n        <label [for]=\"id\" class=\"flex text-[15px] font-bold text-black dark:text-white justify-between mb-1 opacity-80\">\r\n          <span>{{ placeholder }}</span>\r\n          <span>{{ value | number:'1.0-2' }}{{simbol}}</span>\r\n        </label>\r\n      }@else {\r\n        <label [for]=\"id\" class=\"block text-[15px] font-bold text-black dark:text-white text-center mb-1 opacity-80\">{{ placeholder }}</label>\r\n      }\r\n    }\r\n\r\n    <div class=\"relative flex gap-2 w-full items-center justify-center align-center items-center justify-center align-center\">\r\n      @if (min !== null) {\r\n        <span class=\"text-[15px] font-bold text-gray-500 mt-1 text-center\">{{min}}{{simbol}}</span>\r\n      }\r\n      <input\r\n        type=\"range\"\r\n        [min]=\"min\"\r\n        [max]=\"max\"\r\n        [step]=\"step\"\r\n        [disabled]=\"disabled\"\r\n        [required]=\"required\"\r\n        [name]=\"name ?? ''\"\r\n        [id]=\"id\"\r\n        [(ngModel)]=\"value\"\r\n        (blur)=\"onTouched()\"\r\n        [ngClass]=\"combinedNgClass\"\r\n        [class]=\"classes\"\r\n        class=\"\r\n        w-full h-5 bg-background dark:bg-dark-background border border-border dark:border-dark-border \r\n        rounded-lg appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-primary transition duration-200\r\n      \r\n        [&::-webkit-slider-thumb]:appearance-none\r\n        [&::-webkit-slider-thumb]:h-8\r\n        [&::-webkit-slider-thumb]:w-8\r\n        [&::-webkit-slider-thumb]:rounded-full\r\n        [&::-webkit-slider-thumb]:cursor-pointer\r\n        [&::-webkit-slider-thumb]:bg-dark-primary\r\n        dark:[&::-webkit-slider-thumb]:bg-primary\r\n        [&::-webkit-slider-thumb:hover]:bg-primary\r\n        dark:[&::-webkit-slider-thumb:hover]:bg-dark-primary\r\n      \r\n        [&::-moz-range-thumb]:h-4\r\n        [&::-moz-range-thumb]:w-4\r\n        [&::-moz-range-thumb]:rounded-full\r\n        [&::-moz-range-thumb]:bg-primary\r\n        [&::-moz-range-thumb]:cursor-pointer\r\n        [&::-moz-range-thumb:hover]:bg-primary\r\n        dark:[&::-moz-range-thumb:hover]:bg-dark-primary\r\n      \r\n      \r\n        \" />\r\n\r\n        @if (max) {\r\n        <span class=\"text-[15px] font-bold text-gray-500 mt-1 text-center\">{{max}}{{simbol}}</span>\r\n        }\r\n    </div>\r\n\r\n    @if (!isLabel) {\r\n      <div class=\"text-xl font-bold text-gray-500 mt-1 text-center\">{{ value }}</div>\r\n    }\r\n  </div>\r\n}\r\n\r\n\r\n@else {\r\n  <div class=\"relative w-full\">\r\n    <input\r\n      [type]=\"type\"\r\n      [value]=\"value\"\r\n      (input)=\"onInput($event)\"\r\n      [placeholder]=\"placeholder\"\r\n      [disabled]=\"disabled\"\r\n      [required]=\"required\"\r\n      [name]=\"name ?? ''\"\r\n      [id]=\"id\"\r\n      (blur)=\"onTouched()\"\r\n      [ngClass]=\"combinedNgClass\"\r\n      [class]=\"classes\"\r\n      class=\"input w-full h-[40px] bg-background dark:bg-dark-background border border-border dark:border-dark-border text-black dark:text-white rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary transition duration-200\" />\r\n\r\n    @if (value && clearButton) {\r\n      <button type=\"button\"\r\n        class=\"absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-red-500\"\r\n        (click)=\"clearInput()\">\r\n        <lucide-icon [name]=\"icons['x']\" class=\"w-4 h-4\" />\r\n      </button>\r\n    }\r\n  </div>\r\n}\r\n", styles: [".input::placeholder{color:#0006;transition:opacity .2s ease}.input:-webkit-autofill{-webkit-text-fill-color:black!important;-webkit-box-shadow:0 0 0px 1000px color-mix(in srgb,var(--color-primary) 15%,white) inset!important;caret-color:var(--color-primary)!important}.input:-webkit-autofill:hover,.input:-webkit-autofill:focus,.input:-webkit-autofill:active{-webkit-text-fill-color:black!important;-webkit-box-shadow:0 0 0px 1000px color-mix(in srgb,var(--color-primary) 15%,white) inset!important;caret-color:var(--color-primary)!important}.input[type=date]::-webkit-calendar-picker-indicator,.input[type=datetime-local]::-webkit-calendar-picker-indicator{filter:none!important;opacity:1!important;color:#000!important;background-color:transparent!important;-webkit-filter:brightness(0) invert(0)!important}.dark .input::placeholder{color:#fff6}.dark .input:-webkit-autofill{-webkit-text-fill-color:white!important;-webkit-box-shadow:0 0 0px 1000px color-mix(in srgb,var(--color-background) 15%,black) inset!important;caret-color:var(--color-dark-primary)!important}.dark .input:-webkit-autofill:hover,.dark .input:-webkit-autofill:focus,.dark .input:-webkit-autofill:active{-webkit-text-fill-color:white!important;-webkit-box-shadow:0 0 0px 1000px color-mix(in srgb,var(--color-background) 15%,black) inset!important;caret-color:var(--color-primary)!important}.dark .input[type=date]::-webkit-calendar-picker-indicator,.dark .input[type=datetime-local]::-webkit-calendar-picker-indicator{filter:none!important;opacity:1!important;color:#fff!important;background-color:transparent!important;-webkit-filter:brightness(0) invert(1)!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: JInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'JInput', standalone: true, imports: [FormsModule, ReactiveFormsModule, NgClass, LucideAngularModule, CommonModule], encapsulation: ViewEncapsulation.None, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => JInputComponent),
+                            multi: true
+                        }
+                    ], template: "@if (type === 'file') {\r\n  <div class=\"relative w-full\">\r\n    <input\r\n      #fileInput\r\n      type=\"file\"\r\n      [accept]=\"accept\"\r\n      [multiple]=\"multiple\"\r\n      (change)=\"onFileSelected($event)\"\r\n      [disabled]=\"disabled\"\r\n      [required]=\"required\"\r\n      [name]=\"name ?? ''\"\r\n      [id]=\"id\"\r\n      [ngClass]=\"combinedNgClass\"\r\n      [class]=\"classes\"\r\n      class=\"input w-full h-[40px] pr-10 bg-background dark:bg-dark-background border border-border dark:border-dark-border text-black dark:text-white rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary transition duration-200 cursor-pointer\"\r\n      (blur)=\"onTouched()\" />\r\n\r\n    @if (value && clearButton) {\r\n      <button type=\"button\"\r\n        class=\"absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-500 pr-1 mr-1 text-gray-400 hover:text-gray-600 focus:outline-none cursor-pointer\"\r\n        (click)=\"clearFile()\">\r\n        <lucide-icon [name]=\"icons['x']\" class=\"w-4 h-4\" />\r\n      </button>\r\n    }\r\n  </div>\r\n\r\n  @if (previewUrl && showImage) {\r\n    <div class=\"mt-2 w-full\">\r\n      <img [src]=\"previewUrl\" alt=\"Vista previa\"\r\n        class=\"w-full max-w-full h-auto rounded border border-border dark:border-dark-border shadow-sm\" />\r\n    </div>\r\n  }\r\n}\r\n\r\n@else if (type === 'textarea') {\r\n  <div class=\"relative w-full\">\r\n    <textarea\r\n      [value]=\"value\"\r\n      (input)=\"onInput($event)\"\r\n      [placeholder]=\"placeholder\"\r\n      [disabled]=\"disabled\"\r\n      [required]=\"required\"\r\n      [name]=\"name ?? ''\"\r\n      [id]=\"id\"\r\n      (blur)=\"onTouched()\"\r\n      [ngClass]=\"combinedNgClass\"\r\n      [class]=\"classes\"\r\n      class=\"input w-full h-[70px] min-h-[70px] pr-10 bg-background dark:bg-dark-background border border-border dark:border-dark-border text-black dark:text-white rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary transition duration-200\"\r\n    ></textarea>\r\n\r\n    @if (value && clearButton) {\r\n      <button type=\"button\" class=\"absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-red-500\" (click)=\"clearInput()\">\r\n        <lucide-icon [name]=\"icons['x']\" class=\"w-4 h-4\" />\r\n      </button>\r\n    }\r\n  </div>\r\n}\r\n\r\n@else if (type === 'range') {\r\n  <div class=\"w-full\">\r\n\r\n    @if (placeholder) {\r\n      @if (isLabel) {\r\n        <label [for]=\"id\" class=\"flex text-[15px] font-bold text-black dark:text-white justify-between mb-1 opacity-80\">\r\n          <span>{{ placeholder }}</span>\r\n          <span>{{ value | number:'1.0-2' }}{{simbol}}</span>\r\n        </label>\r\n      }@else {\r\n        <label [for]=\"id\" class=\"block text-[15px] font-bold text-black dark:text-white text-center mb-1 opacity-80\">{{ placeholder }}</label>\r\n      }\r\n    }\r\n\r\n    <div class=\"relative flex gap-2 w-full items-center justify-center align-center items-center justify-center align-center\">\r\n      @if (min !== null) {\r\n        <span class=\"text-[15px] font-bold text-gray-500 mt-1 text-center\">{{min}}{{simbol}}</span>\r\n      }\r\n      <input\r\n        type=\"range\"\r\n        [min]=\"min\"\r\n        [max]=\"max\"\r\n        [step]=\"step\"\r\n        [disabled]=\"disabled\"\r\n        [required]=\"required\"\r\n        [name]=\"name ?? ''\"\r\n        [id]=\"id\"\r\n        [(ngModel)]=\"value\"\r\n        (blur)=\"onTouched()\"\r\n        [ngClass]=\"combinedNgClass\"\r\n        [class]=\"classes\"\r\n        class=\"\r\n        w-full h-5 bg-background dark:bg-dark-background border border-border dark:border-dark-border \r\n        rounded-lg appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-primary transition duration-200\r\n      \r\n        [&::-webkit-slider-thumb]:appearance-none\r\n        [&::-webkit-slider-thumb]:h-8\r\n        [&::-webkit-slider-thumb]:w-8\r\n        [&::-webkit-slider-thumb]:rounded-full\r\n        [&::-webkit-slider-thumb]:cursor-pointer\r\n        [&::-webkit-slider-thumb]:bg-dark-primary\r\n        dark:[&::-webkit-slider-thumb]:bg-primary\r\n        [&::-webkit-slider-thumb:hover]:bg-primary\r\n        dark:[&::-webkit-slider-thumb:hover]:bg-dark-primary\r\n      \r\n        [&::-moz-range-thumb]:h-4\r\n        [&::-moz-range-thumb]:w-4\r\n        [&::-moz-range-thumb]:rounded-full\r\n        [&::-moz-range-thumb]:bg-primary\r\n        [&::-moz-range-thumb]:cursor-pointer\r\n        [&::-moz-range-thumb:hover]:bg-primary\r\n        dark:[&::-moz-range-thumb:hover]:bg-dark-primary\r\n      \r\n      \r\n        \" />\r\n\r\n        @if (max) {\r\n        <span class=\"text-[15px] font-bold text-gray-500 mt-1 text-center\">{{max}}{{simbol}}</span>\r\n        }\r\n    </div>\r\n\r\n    @if (!isLabel) {\r\n      <div class=\"text-xl font-bold text-gray-500 mt-1 text-center\">{{ value }}</div>\r\n    }\r\n  </div>\r\n}\r\n\r\n\r\n@else {\r\n  <div class=\"relative w-full\">\r\n    <input\r\n      [type]=\"type\"\r\n      [value]=\"value\"\r\n      (input)=\"onInput($event)\"\r\n      [placeholder]=\"placeholder\"\r\n      [disabled]=\"disabled\"\r\n      [required]=\"required\"\r\n      [name]=\"name ?? ''\"\r\n      [id]=\"id\"\r\n      (blur)=\"onTouched()\"\r\n      [ngClass]=\"combinedNgClass\"\r\n      [class]=\"classes\"\r\n      class=\"input w-full h-[40px] bg-background dark:bg-dark-background border border-border dark:border-dark-border text-black dark:text-white rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary transition duration-200\" />\r\n\r\n    @if (value && clearButton) {\r\n      <button type=\"button\"\r\n        class=\"absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-red-500\"\r\n        (click)=\"clearInput()\">\r\n        <lucide-icon [name]=\"icons['x']\" class=\"w-4 h-4\" />\r\n      </button>\r\n    }\r\n  </div>\r\n}\r\n", styles: [".input::placeholder{color:#0006;transition:opacity .2s ease}.input:-webkit-autofill{-webkit-text-fill-color:black!important;-webkit-box-shadow:0 0 0px 1000px color-mix(in srgb,var(--color-primary) 15%,white) inset!important;caret-color:var(--color-primary)!important}.input:-webkit-autofill:hover,.input:-webkit-autofill:focus,.input:-webkit-autofill:active{-webkit-text-fill-color:black!important;-webkit-box-shadow:0 0 0px 1000px color-mix(in srgb,var(--color-primary) 15%,white) inset!important;caret-color:var(--color-primary)!important}.input[type=date]::-webkit-calendar-picker-indicator,.input[type=datetime-local]::-webkit-calendar-picker-indicator{filter:none!important;opacity:1!important;color:#000!important;background-color:transparent!important;-webkit-filter:brightness(0) invert(0)!important}.dark .input::placeholder{color:#fff6}.dark .input:-webkit-autofill{-webkit-text-fill-color:white!important;-webkit-box-shadow:0 0 0px 1000px color-mix(in srgb,var(--color-background) 15%,black) inset!important;caret-color:var(--color-dark-primary)!important}.dark .input:-webkit-autofill:hover,.dark .input:-webkit-autofill:focus,.dark .input:-webkit-autofill:active{-webkit-text-fill-color:white!important;-webkit-box-shadow:0 0 0px 1000px color-mix(in srgb,var(--color-background) 15%,black) inset!important;caret-color:var(--color-primary)!important}.dark .input[type=date]::-webkit-calendar-picker-indicator,.dark .input[type=datetime-local]::-webkit-calendar-picker-indicator{filter:none!important;opacity:1!important;color:#fff!important;background-color:transparent!important;-webkit-filter:brightness(0) invert(1)!important}\n"] }]
+        }], propDecorators: { type: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], classes: [{
+                type: Input
+            }], ngClass: [{
+                type: Input
+            }], accept: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], showImage: [{
+                type: Input
+            }], clearButton: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], step: [{
+                type: Input
+            }], isLabel: [{
+                type: Input
+            }], simbol: [{
+                type: Input
+            }], fileInputRef: [{
+                type: ViewChild,
+                args: ['fileInput']
+            }] } });
+
+class JCheckboxComponent {
+    // Lucide icons
+    icons = {
+        check: Check,
+        loading: Loader2,
+    };
+    type = 'checkbox'; // Default type;
+    icon = this.icons['check']; // Default icon
+    iconSize = 15; // Default icon size
+    disabled; // Desactivar el checkbox
+    isLoading; // Indicar que el checkbox esta cargando
+    classes = ''; // Clases adicionales para el checkbox
+    title; // Estado del checkbox
+    isChecked = false; // Estado del checkbox
+    item; // Item 
+    column; // Columna
+    // Funciones
+    getValue = () => false;
+    onCheckboxChange = () => { };
+    toggleSwitch = () => { };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: JCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: JCheckboxComponent, isStandalone: true, selector: "JCheckbox", inputs: { type: "type", icon: "icon", iconSize: "iconSize", disabled: "disabled", isLoading: "isLoading", classes: "classes", title: "title", isChecked: "isChecked", item: "item", column: "column", getValue: "getValue", onCheckboxChange: "onCheckboxChange", toggleSwitch: "toggleSwitch" }, ngImport: i0, template: "<div class=\"flex flex-col items-center justify-center gap-2\">\r\n    @if (title) {\r\n        <span class=\"text-[8px] opacity-80\">{{title}}</span>\r\n    }\r\n\r\n    @if (type === 'checkbox') {\r\n    <label class=\"relative inline-flex items-center justify-center\">\r\n        <input \r\n            type=\"checkbox\" \r\n            class=\"absolute opacity-0 cursor-pointer peer\" \r\n            [checked]=\"getValue(item, column)\"\r\n            (change)=\"onCheckboxChange(item, column)\" \r\n            [disabled]=\"disabled || column?.isDisaled\"\r\n        >\r\n        <span\r\n            class=\"inline-flex items-center justify-center w-[25px] h-[25px] bg-white border border-primary dark:border-dark-border rounded transition-all duration-200 ease-in-out relative peer cursor-pointer peer-checked:bg-primary peer-checked:border-primary dark:peer-checked:bg-dark-primary dark:peer-checked:border-dark-primary\"\r\n            [class]=\"classes\"\r\n            [ngClass]=\"{'opacity-50' : column?.isDisaled}\"\r\n        >\r\n            <lucide-icon [name]=\"icon\" [size]=\"iconSize\" class=\"text-white\"></lucide-icon>\r\n        </span>\r\n    </label>\r\n    }\r\n\r\n    @if (type === 'switch') {\r\n    @if (!isLoading) {\r\n        <div onKeyPress \r\n            class=\"relative inline-block w-[40px] h-[20px] cursor-pointer\" \r\n            (click)=\"toggleSwitch(isChecked)\"\r\n        >\r\n            <!-- Slider background -->\r\n            <div class=\"absolute inset-0 rounded-full transition-all duration-300\"\r\n                 [ngClass]=\"isChecked ? 'bg-blue-500' : 'bg-gray-200 dark:bg-gray-300'\">\r\n            </div>\r\n\r\n            <!-- Circle -->\r\n            <div \r\n                class=\"absolute top-[2px] left-[2px] bg-white rounded-full w-[16px] h-[16px] shadow-md transition-all duration-300\"\r\n                [class]=\"classes\" \r\n                [ngStyle]=\"{'transform': isChecked ? 'translateX(20px)' : 'translateX(0)'}\">\r\n            </div>\r\n        </div>\r\n    } @else {\r\n        <lucide-icon [name]=\"icons['loading']\" size=\"20\" class=\"text-white animate-spin\"></lucide-icon>}\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: LucideAngularModule }, { kind: "component", type: i2.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: JCheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'JCheckbox', standalone: true, imports: [CommonModule, LucideAngularModule], template: "<div class=\"flex flex-col items-center justify-center gap-2\">\r\n    @if (title) {\r\n        <span class=\"text-[8px] opacity-80\">{{title}}</span>\r\n    }\r\n\r\n    @if (type === 'checkbox') {\r\n    <label class=\"relative inline-flex items-center justify-center\">\r\n        <input \r\n            type=\"checkbox\" \r\n            class=\"absolute opacity-0 cursor-pointer peer\" \r\n            [checked]=\"getValue(item, column)\"\r\n            (change)=\"onCheckboxChange(item, column)\" \r\n            [disabled]=\"disabled || column?.isDisaled\"\r\n        >\r\n        <span\r\n            class=\"inline-flex items-center justify-center w-[25px] h-[25px] bg-white border border-primary dark:border-dark-border rounded transition-all duration-200 ease-in-out relative peer cursor-pointer peer-checked:bg-primary peer-checked:border-primary dark:peer-checked:bg-dark-primary dark:peer-checked:border-dark-primary\"\r\n            [class]=\"classes\"\r\n            [ngClass]=\"{'opacity-50' : column?.isDisaled}\"\r\n        >\r\n            <lucide-icon [name]=\"icon\" [size]=\"iconSize\" class=\"text-white\"></lucide-icon>\r\n        </span>\r\n    </label>\r\n    }\r\n\r\n    @if (type === 'switch') {\r\n    @if (!isLoading) {\r\n        <div onKeyPress \r\n            class=\"relative inline-block w-[40px] h-[20px] cursor-pointer\" \r\n            (click)=\"toggleSwitch(isChecked)\"\r\n        >\r\n            <!-- Slider background -->\r\n            <div class=\"absolute inset-0 rounded-full transition-all duration-300\"\r\n                 [ngClass]=\"isChecked ? 'bg-blue-500' : 'bg-gray-200 dark:bg-gray-300'\">\r\n            </div>\r\n\r\n            <!-- Circle -->\r\n            <div \r\n                class=\"absolute top-[2px] left-[2px] bg-white rounded-full w-[16px] h-[16px] shadow-md transition-all duration-300\"\r\n                [class]=\"classes\" \r\n                [ngStyle]=\"{'transform': isChecked ? 'translateX(20px)' : 'translateX(0)'}\">\r\n            </div>\r\n        </div>\r\n    } @else {\r\n        <lucide-icon [name]=\"icons['loading']\" size=\"20\" class=\"text-white animate-spin\"></lucide-icon>}\r\n    }\r\n</div>" }]
+        }], propDecorators: { type: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], iconSize: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], isLoading: [{
+                type: Input
+            }], classes: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], isChecked: [{
+                type: Input
+            }], item: [{
+                type: Input
+            }], column: [{
+                type: Input
+            }], getValue: [{
+                type: Input
+            }], onCheckboxChange: [{
+                type: Input
+            }], toggleSwitch: [{
+                type: Input
+            }] } });
+
+class JColorsService {
+    // Variants
+    variants = {
+        primary: 'bg-primary dark:bg-dark-primary text-white dark:text-white hover:bg-dark-primary dark:hover:bg-dark-primary/60 dark:hover:text-white',
+        primary_secondary: 'bg-none text-dark-border dark:text-border border-dark-border dark:border-border hover:bg-dark-border/10 dark:hover:bg-border/10 shadow-md',
+        secondary: 'bg-background dark:bg-dark-background text-black dark:text-white hover:bg-accent dark:hover:bg-dark-accent/50',
+        success: 'bg-green-500 hover:bg-green-600 text-white border border-green-500 dark:border-green-600 shadow-md',
+        success_secondary: 'bg-none text-green-500 border-green-500 dark:border-green-600 hover:bg-green-500/10 dark:hover:bg-green-600/10 shadow-md',
+        info: 'bg-blue-500 hover:bg-blue-600 text-white border border-blue-500 dark:border-blue-600 shadow-md',
+        info_secondary: 'bg-none text-blue-500 border-blue-500 dark:border-blue-600 hover:bg-blue-500/10 dark:hover:bg-blue-600/10 shadow-md',
+        warning: 'bg-yellow-600 hover:bg-yellow-700 text-white border border-yellow-600 dark:border-yellow-700 shadow-md',
+        warning_secondary: 'bg-none text-yellow-600 border-yellow-600 dark:border-yellow-700 hover:bg-yellow-600/10 dark:hover:bg-yellow-700/10 shadow-md',
+        question: 'bg-purple-500 hover:bg-purple-600 text-white border border-purple-500 dark:border-purple-600 shadow-md',
+        question_secondary: 'bg-none text-purple-500 border-purple-500 dark:border-purple-600 hover:bg-purple-500/10 dark:hover:bg-purple-600/10 shadow-md',
+        error: 'bg-red-500 hover:bg-red-600 text-white border border-red-500 dark:border-red-600 shadow-md',
+        error_secondary: 'bg-none text-red-500 border-red-500 dark:border-red-600 hover:bg-red-500/10 dark:hover:bg-red-600/10 shadow-md',
+        loading: 'bg-gray-500 hover:bg-gray-600 text-white border border-gray-500 dark:border-gray-600 shadow-md',
+        loading_secondary: 'bg-none text-gray-500 border-gray-500 dark:border-gray-600 hover:bg-gray-500/10 dark:hover:bg-gray-600/10 shadow-md',
+        orange: 'bg-orange-500 hover:bg-orange-600 text-white border border-orange-500 dark:border-orange-600 shadow-md',
+        orange_secondary: 'bg-none text-orange-500 border-orange-500 dark:border-orange-600 hover:bg-orange-500/10 dark:hover:bg-orange-600/10 shadow-md',
+        cyan: 'bg-cyan-500 hover:bg-cyan-600 text-white border border-cyan-500 dark:border-cyan-600 shadow-md',
+        cyan_secondary: 'bg-none text-cyan-500 border-cyan-500 dark:border-cyan-600 hover:bg-cyan-500/10 dark:hover:bg-cyan-600/10 shadow-md',
+        purple: 'bg-purple-500 hover:bg-purple-600 text-white border border-purple-500 dark:border-purple-600 shadow-md',
+        purple_secondary: 'bg-none text-purple-500 border-purple-500 dark:border-purple-600 hover:bg-purple-500/10 dark:hover:bg-purple-600/10 shadow-md',
+        teal: 'bg-teal-500 hover:bg-teal-600 text-white border border-teal-500 dark:border-teal-600 shadow-md',
+        teal_secondary: 'bg-none text-teal-500 border-teal-500 dark:border-teal-600 hover:bg-teal-500/10 dark:hover:bg-teal-600/10 shadow-md',
+        pink: 'bg-pink-500 hover:bg-pink-600 text-white border border-pink-500 dark:border-pink-600 shadow-md',
+        pink_secondary: 'bg-none text-pink-500 border-pink-500 dark:border-pink-600 hover:bg-pink-500/10 dark:hover:bg-pink-600/10 shadow-md',
+        green: 'bg-green-500 hover:bg-green-600 text-white border border-green-500 dark:border-green-600 shadow-md',
+        green_secondary: 'bg-none text-green-500 border-green-500 dark:border-green-600 hover:bg-green-500/10 dark:hover:bg-green-600/10 shadow-md',
+        default: ' text-black dark:text-white shadow-md',
+    };
+    // Alerts
+    getAlertClass(type, monocromatic) {
+        if (!monocromatic) {
+            switch (type) {
+                case 'success': return 'border-green-500 bg-green-50 dark:bg-[#15241f]';
+                case 'error': return 'border-red-500 bg-red-50 dark:bg-[#21181c]';
+                case 'warning': return 'border-yellow-500 bg-yellow-50 dark:bg-[#1f1c1a]';
+                case 'info': return 'border-blue-500 bg-blue-50 dark:bg-[#1a1a24]';
+                case 'question': return 'border-purple-500 bg-purple-50 dark:bg-[#241732]';
+                case 'loading': return 'border-gray-500 bg-gray-50 dark:bg-[#15181e]';
+                default: return 'border-gray-500';
+            }
+        }
+        else {
+            return 'bg-white dark:bg-dark-popover border-border dark:border-dark-border';
+        }
+    }
+    // Icons
+    getIconClass(type, monocromatic) {
+        if (!monocromatic) {
+            switch (type) {
+                case 'success': return 'text-green-500';
+                case 'error': return 'text-red-500';
+                case 'warning': return 'text-yellow-500';
+                case 'info': return 'text-blue-500';
+                case 'question': return 'text-purple-500';
+                case 'loading': return 'text-gray-500';
+                default: return 'text-primary';
+            }
+        }
+        else {
+            return 'text-primary';
+        }
+    }
+    // Buttons
+    getButtonClass(type, monocromatic) {
+        if (!monocromatic) {
+            switch (type) {
+                case 'success': return { 'success': true };
+                case 'error': return { 'error': true };
+                case 'warning': return { 'warning': true };
+                case 'info': return { 'info': true };
+                case 'question': return { 'question': true };
+                case 'loading': return { 'loading': true };
+                default: return { 'primary': true };
+            }
+        }
+        else {
+            return { 'primary': true };
+        }
+    }
+    getButtonSecondaryClass(type, monocromatic) {
+        if (!monocromatic) {
+            switch (type) {
+                case 'success': return { 'success_secondary': true };
+                case 'error': return { 'error_secondary': true };
+                case 'warning': return { 'warning_secondary': true };
+                case 'info': return { 'info_secondary': true };
+                case 'question': return { 'question_secondary': true };
+                case 'loading': return { 'loading_secondary': true };
+                default: return { 'secondary': true };
+            }
+        }
+        else {
+            return { 'secondary': true };
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: JColorsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: JColorsService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: JColorsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class JButtonComponent {
+    icons = { loading: Loader2 };
+    colorsService = inject(JColorsService);
+    type = "button"; // Tipo de botón
+    disabled = false; // Estado deshabilitado
+    isLoading = false; // Estado de carga
+    icon; // Icono por defecto
+    iconSize = 15; // Tamaño de icono por defecto
+    text; // Color de icono por defecto
+    isChangeIcon = false; // Cambiar icono
+    iconChange; // Icono de cambio
+    tooltip = ""; // Texto de tooltip
+    tooltipPosition = "top"; // Posición de tooltip
+    clicked = new EventEmitter(); // Evento de clic
+    classes = ""; // Clases adicionales
+    ngClasses = {}; // Clases dinámicas con [ngClass]
+    // Verificar si una clase está presente en `classes` o `ngClasses`
+    hasClass(className) {
+        // Dividir la cadena de clases por espacios para verificar cada clase individualmente
+        const classArray = this.classes.split(" ");
+        return classArray.includes(className) || this.ngClasses[className];
+    }
+    // Definir clases según el tipo de botón (switch)
+    get variantClasses() {
+        return this.colorsService.variants[this.getActiveVariant()] || "min-w-[100px] text-black dark:text-white shadow-md";
+    }
+    // Obtener la variante activa
+    getActiveVariant() {
+        // Buscar la primera variante que coincida con las clases proporcionadas
+        const variant = Object.keys(this.colorsService.variants).find((variant) => this.hasClass(variant));
+        return variant ?? "default";
+    }
+    // Combina las clases base con las variantes
+    get computedClasses() {
+        return {
+            "flex gap-3 items-center justify-center font-semibold border border-border dark:border-dark-border px-3 py-2 rounded transition duration-300 select-none": true,
+            [this.variantClasses]: true, // Aplica las clases de la variante según el switch
+            "cursor-pointer": !this.disabled && !this.isLoading, // Cursor por defecto cuando está activo
+            "cursor-default opacity-50 pointer-events-none": this.disabled || this.isLoading, // Cursor deshabilitado
+            ...this.ngClasses, // Permite usar validaciones dinámicas con [ngClass]
+        };
+    }
+    handleClick(event) {
+        if (!this.disabled && !this.isLoading) {
+            this.clicked.emit(event);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: JButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: JButtonComponent, isStandalone: true, selector: "JButton", inputs: { type: "type", disabled: "disabled", isLoading: "isLoading", icon: "icon", iconSize: "iconSize", text: "text", isChangeIcon: "isChangeIcon", iconChange: "iconChange", tooltip: "tooltip", tooltipPosition: "tooltipPosition", classes: "classes", ngClasses: "ngClasses" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\r\n  [attr.type]=\"type\"\r\n  [jTooltip]=\"tooltip\"\r\n  [jTooltipPosition]=\"tooltipPosition\"\r\n  [disabled]=\"disabled || isLoading\"\r\n  [ngClass]=\"computedClasses\"\r\n  [class]=\"classes\"\r\n  (click)=\"handleClick($event)\"\r\n>\r\n  <div class=\"flex items-center justify-center gap-2\">\r\n    @if (isLoading) {\r\n      <div [ngClass]=\"{ 'pt-1 pb-1': icon }\">\r\n        <lucide-icon [name]=\"icons['loading']\" [size]=\"iconSize || 15\" class=\"animate-spin\" />\r\n      </div>\r\n    }\r\n    @if (!isLoading && icon) {\r\n      <div class=\"pt-1 pb-1\">\r\n        @if (!isChangeIcon) {\r\n          <lucide-icon [name]=\"icon\" [size]=\"iconSize\" />\r\n        } @else {\r\n          <lucide-icon [name]=\"iconChange\" [size]=\"iconSize\" />\r\n        }\r\n      </div>\r\n    }\r\n    @if (!isLoading && text) {\r\n      <span>{{ text }}</span>\r\n    }\r\n    <ng-content></ng-content>\r\n  </div>\r\n</button>\r\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "directive", type: JTooltipModule, selector: "[jTooltip]", inputs: ["jTooltip", "jTooltipPosition", "jTooltipShowArrow", "jTooltipOffsetX", "jTooltipOffsetY"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: JButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "JButton", standalone: true, imports: [NgClass, LucideAngularModule, JTooltipModule], template: "<button\r\n  [attr.type]=\"type\"\r\n  [jTooltip]=\"tooltip\"\r\n  [jTooltipPosition]=\"tooltipPosition\"\r\n  [disabled]=\"disabled || isLoading\"\r\n  [ngClass]=\"computedClasses\"\r\n  [class]=\"classes\"\r\n  (click)=\"handleClick($event)\"\r\n>\r\n  <div class=\"flex items-center justify-center gap-2\">\r\n    @if (isLoading) {\r\n      <div [ngClass]=\"{ 'pt-1 pb-1': icon }\">\r\n        <lucide-icon [name]=\"icons['loading']\" [size]=\"iconSize || 15\" class=\"animate-spin\" />\r\n      </div>\r\n    }\r\n    @if (!isLoading && icon) {\r\n      <div class=\"pt-1 pb-1\">\r\n        @if (!isChangeIcon) {\r\n          <lucide-icon [name]=\"icon\" [size]=\"iconSize\" />\r\n        } @else {\r\n          <lucide-icon [name]=\"iconChange\" [size]=\"iconSize\" />\r\n        }\r\n      </div>\r\n    }\r\n    @if (!isLoading && text) {\r\n      <span>{{ text }}</span>\r\n    }\r\n    <ng-content></ng-content>\r\n  </div>\r\n</button>\r\n" }]
+        }], propDecorators: { type: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], isLoading: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], iconSize: [{
+                type: Input
+            }], text: [{
+                type: Input
+            }], isChangeIcon: [{
+                type: Input
+            }], iconChange: [{
+                type: Input
+            }], tooltip: [{
+                type: Input
+            }], tooltipPosition: [{
+                type: Input
+            }], clicked: [{
+                type: Output
+            }], classes: [{
+                type: Input
+            }], ngClasses: [{
+                type: Input
+            }] } });
+
+// src/app/core/shared/form.shared.ts
+class JDialogShared {
+    openDialog = false;
+    constructor() { }
+    onOpen() {
+        this.openDialog = true;
+    }
+    onClose() {
+        this.openDialog = false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: JDialogShared, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: JDialogShared, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: JDialogShared, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class JDialogComponent {
+    icons = {
+        x: X
+    };
+    position = 'center';
+    offset = {};
+    openModal = false;
+    closeModal = new EventEmitter();
+    dialogTemplate;
+    title = 'Dialog Title';
+    width = 500;
+    height = 300;
+    overlay = true;
+    draggable = false;
+    isDragging = false;
+    dragOffset = { x: 0, y: 0 };
+    constructor() { }
+    onOpen() {
+        this.openModal = true;
+    }
+    onClose() {
+        this.closeModal.emit();
+    }
+    getModalWidth() {
+        return typeof this.width === 'number' ? `${this.width}px` : this.width;
+    }
+    getModalHeight() {
+        if (this.height === 'auto')
+            return 'auto';
+        if (typeof this.height === 'number')
+            return `${this.height}px`;
+        return `${this.height || 40}px`;
+    }
+    handleEscape(event) {
+        if (this.openModal) {
+            this.onClose();
+        }
+    }
+    getPositionClass() {
+        switch (this.position) {
+            case 'leftCenter': return 'justify-start items-center';
+            case 'rightCenter': return 'justify-end items-center';
+            case 'topCenter': return 'justify-center items-start';
+            case 'bottomCenter': return 'justify-center items-end';
+            case 'leftTop': return 'justify-start items-start';
+            case 'leftBottom': return 'justify-start items-end';
+            case 'rightTop': return 'justify-end items-start';
+            case 'rightBottom': return 'justify-end items-end';
+            case 'center':
+            default: return 'justify-center items-center';
+        }
+    }
+    getOffsetStyles() {
+        return {
+            marginTop: this.offset.top !== undefined ? `${this.offset.top}px` : '',
+            marginBottom: this.offset.bottom !== undefined ? `${this.offset.bottom}px` : '',
+            marginLeft: this.offset.left !== undefined ? `${this.offset.left}px` : '',
+            marginRight: this.offset.right !== undefined ? `${this.offset.right}px` : '',
+        };
+    }
+    startDrag(event) {
+        if (!this.draggable)
+            return;
+        this.isDragging = true;
+        const dialogElement = event.currentTarget.closest('[data-draggable-dialog]');
+        if (!dialogElement)
+            return;
+        const rect = dialogElement.getBoundingClientRect();
+        this.dragOffset = {
+            x: event.clientX - rect.left,
+            y: event.clientY - rect.top
+        };
+        dialogElement.style.position = 'fixed';
+        dialogElement.style.margin = '0';
+        dialogElement.style.transform = 'none';
+        dialogElement.style.zIndex = '1001';
+        const mouseMoveHandler = (moveEvent) => {
+            if (!this.isDragging)
+                return;
+            const newLeft = moveEvent.clientX - this.dragOffset.x;
+            const newTop = moveEvent.clientY - this.dragOffset.y;
+            // límites del viewport
+            const maxLeft = window.innerWidth - dialogElement.offsetWidth;
+            const maxTop = window.innerHeight - dialogElement.offsetHeight;
+            // aplicar límites
+            const boundedLeft = Math.min(Math.max(newLeft, 0), maxLeft);
+            const boundedTop = Math.min(Math.max(newTop, 0), maxTop);
+            dialogElement.style.left = `${boundedLeft}px`;
+            dialogElement.style.top = `${boundedTop}px`;
+        };
+        const mouseUpHandler = () => {
+            this.isDragging = false;
+            document.removeEventListener('mousemove', mouseMoveHandler);
+            document.removeEventListener('mouseup', mouseUpHandler);
+        };
+        document.addEventListener('mousemove', mouseMoveHandler);
+        document.addEventListener('mouseup', mouseUpHandler);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: JDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: JDialogComponent, isStandalone: true, selector: "JDialog", inputs: { position: "position", offset: "offset", openModal: "openModal", dialogTemplate: "dialogTemplate", title: "title", width: "width", height: "height", overlay: "overlay", draggable: "draggable" }, outputs: { closeModal: "closeModal" }, host: { listeners: { "document:keydown.escape": "handleEscape($event)" } }, ngImport: i0, template: "@if (openModal) {\r\n    <!-- Overlay solo si se activa -->\r\n    @if (overlay) {\r\n      <div class=\"fixed inset-0 z-[999] bg-black/50\"></div>\r\n    }\r\n  \r\n    <!-- Modal -->\r\n    <div class=\"fixed inset-0 z-[1000] flex pointer-events-none\" [ngClass]=\"getPositionClass()\">\r\n  \r\n      <div @modalTransition\r\n           class=\"pointer-events-auto bg-white dark:bg-foreground rounded-[12px] shadow-lg border-2 border-border dark:border-dark-border\"\r\n           [ngStyle]=\"getOffsetStyles()\"\r\n           data-draggable-dialog>\r\n  \r\n        <!-- Header draggable -->\r\n        @if (draggable) {\r\n          <div class=\"flex p-1 pl-4 pr-4 justify-between items-center bg-primary dark:bg-dark-primary border-b border-border dark:border-dark-border  rounded-[10px] font-semibold text-2sm cursor-move\"\r\n               (mousedown)=\"startDrag($event)\">\r\n            <h3 class=\"text-[1.1em] font-semibold text-white leading-none\">{{ title }}</h3>\r\n            <button type=\"button\" (click)=\"onClose()\"\r\n                    class=\"p-2 rounded-full border border-border dark:border-dark-border text-white hover:bg-dark-background focus:outline-none cursor-pointer\">\r\n              <lucide-icon [name]=\"icons['x']\" size=\"16\"></lucide-icon>\r\n            </button>\r\n          </div>\r\n        }\r\n  \r\n        <!-- Header normal -->\r\n        @if (!draggable) {\r\n          <div class=\"flex p-1 pl-4 pr-4 justify-between items-center bg-primary dark:bg-dark-primary border-b border-border dark:border-dark-border rounded-[10px] font-semibold text-2sm\">\r\n            <h3 class=\"text-[1.1em] font-semibold text-white leading-none\">{{ title }}</h3>\r\n            <button type=\"button\" (click)=\"onClose()\"\r\n                    class=\"p-2 rounded-full border border-border dark:border-dark-border text-white hover:bg-dark-background focus:outline-none cursor-pointer\">\r\n              <lucide-icon [name]=\"icons['x']\" size=\"16\"></lucide-icon>\r\n            </button>\r\n          </div>\r\n        }\r\n  \r\n        <!-- Content -->\r\n        <div class=\"m-2\"\r\n             [ngStyle]=\"{\r\n                width: getModalWidth(),\r\n                height: getModalHeight(),\r\n                'min-height': '40px',\r\n             }\">\r\n          @if (dialogTemplate) {\r\n            <ng-container [ngTemplateOutlet]=\"dialogTemplate\"></ng-container>\r\n          }\r\n        </div>\r\n  \r\n      </div>\r\n    </div>\r\n  }\r\n  ", styles: [""], dependencies: [{ 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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], animations: [
+            trigger('modalTransition', [
+                transition(':enter', [
+                    style({ transform: 'translateY(1rem)', opacity: 0 }),
+                    animate('300ms ease-out', style({ transform: 'translateY(0)', opacity: 1 }))
+                ]),
+                transition(':leave', [
+                    animate('150ms ease-in', style({ transform: 'translateY(1rem)', opacity: 0 }))
+                ])
+            ])
+        ] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: JDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'JDialog', standalone: true, imports: [LucideAngularModule, CommonModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], animations: [
+                        trigger('modalTransition', [
+                            transition(':enter', [
+                                style({ transform: 'translateY(1rem)', opacity: 0 }),
+                                animate('300ms ease-out', style({ transform: 'translateY(0)', opacity: 1 }))
+                            ]),
+                            transition(':leave', [
+                                animate('150ms ease-in', style({ transform: 'translateY(1rem)', opacity: 0 }))
+                            ])
+                        ])
+                    ], template: "@if (openModal) {\r\n    <!-- Overlay solo si se activa -->\r\n    @if (overlay) {\r\n      <div class=\"fixed inset-0 z-[999] bg-black/50\"></div>\r\n    }\r\n  \r\n    <!-- Modal -->\r\n    <div class=\"fixed inset-0 z-[1000] flex pointer-events-none\" [ngClass]=\"getPositionClass()\">\r\n  \r\n      <div @modalTransition\r\n           class=\"pointer-events-auto bg-white dark:bg-foreground rounded-[12px] shadow-lg border-2 border-border dark:border-dark-border\"\r\n           [ngStyle]=\"getOffsetStyles()\"\r\n           data-draggable-dialog>\r\n  \r\n        <!-- Header draggable -->\r\n        @if (draggable) {\r\n          <div class=\"flex p-1 pl-4 pr-4 justify-between items-center bg-primary dark:bg-dark-primary border-b border-border dark:border-dark-border  rounded-[10px] font-semibold text-2sm cursor-move\"\r\n               (mousedown)=\"startDrag($event)\">\r\n            <h3 class=\"text-[1.1em] font-semibold text-white leading-none\">{{ title }}</h3>\r\n            <button type=\"button\" (click)=\"onClose()\"\r\n                    class=\"p-2 rounded-full border border-border dark:border-dark-border text-white hover:bg-dark-background focus:outline-none cursor-pointer\">\r\n              <lucide-icon [name]=\"icons['x']\" size=\"16\"></lucide-icon>\r\n            </button>\r\n          </div>\r\n        }\r\n  \r\n        <!-- Header normal -->\r\n        @if (!draggable) {\r\n          <div class=\"flex p-1 pl-4 pr-4 justify-between items-center bg-primary dark:bg-dark-primary border-b border-border dark:border-dark-border rounded-[10px] font-semibold text-2sm\">\r\n            <h3 class=\"text-[1.1em] font-semibold text-white leading-none\">{{ title }}</h3>\r\n            <button type=\"button\" (click)=\"onClose()\"\r\n                    class=\"p-2 rounded-full border border-border dark:border-dark-border text-white hover:bg-dark-background focus:outline-none cursor-pointer\">\r\n              <lucide-icon [name]=\"icons['x']\" size=\"16\"></lucide-icon>\r\n            </button>\r\n          </div>\r\n        }\r\n  \r\n        <!-- Content -->\r\n        <div class=\"m-2\"\r\n             [ngStyle]=\"{\r\n                width: getModalWidth(),\r\n                height: getModalHeight(),\r\n                'min-height': '40px',\r\n             }\">\r\n          @if (dialogTemplate) {\r\n            <ng-container [ngTemplateOutlet]=\"dialogTemplate\"></ng-container>\r\n          }\r\n        </div>\r\n  \r\n      </div>\r\n    </div>\r\n  }\r\n  " }]
+        }], ctorParameters: () => [], propDecorators: { position: [{
+                type: Input
+            }], offset: [{
+                type: Input
+            }], openModal: [{
+                type: Input
+            }], closeModal: [{
+                type: Output
+            }], dialogTemplate: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], overlay: [{
+                type: Input
+            }], draggable: [{
+                type: Input
+            }], handleEscape: [{
+                type: HostListener,
+                args: ['document:keydown.escape', ['$event']]
+            }] } });
+
+class JAlertToastService {
+    toastsSignal = signal([]);
+    autoCloseTimers = new Map();
+    // Default auto-close delay in milliseconds
+    DEFAULT_AUTO_CLOSE_DELAY = 5000;
+    // Default action button text
+    DEFAULT_ACTION_BUTTON_TEXT = "Action";
+    // For compatibility with existing code
+    isOpenSignal = signal(false);
+    configSignal = signal(null);
+    isLoadingAction = signal(false);
+    isLoadingCancel = signal(false);
+    // Computed values for all toasts
+    toasts = computed(() => this.toastsSignal());
+    // For backward compatibility with existing code
+    isOpen = computed(() => this.isOpenSignal());
+    config = computed(() => this.configSignal());
+    isActionLoading = computed(() => this.isLoadingAction());
+    isCancelLoading = computed(() => this.isLoadingCancel());
+    getConfig() {
+        return this.configSignal();
+    }
+    AlertToast(config) {
+        const toastId = crypto.randomUUID();
+        // Store callbacks for this toast
+        const onActionCallback = "onAction" in config ? config.onAction : undefined;
+        const onCancelCallback = "onCancel" in config ? config.onCancel : undefined;
+        // Get action button text or use default
+        const actionNameButton = config.actionButtonText ?? this.DEFAULT_ACTION_BUTTON_TEXT;
+        const toast = {
+            id: toastId,
+            config,
+            isActionLoading: false,
+            isCancelLoading: false,
+            onActionCallback,
+            onCancelCallback,
+            actionNameButton, // Add the button text
+            createdAt: Date.now()
+        };
+        // Add the toast to our list
+        this.toastsSignal.update(toasts => [...toasts, toast]);
+        // Check if this toast should auto-close
+        // If autoClose is explicitly set to true OR 
+        // if it's a success toast and autoClose is not explicitly set to false
+        const shouldAutoClose = config.autoClose === true ||
+            (config.type === 'success' && config.autoClose !== false);
+        if (shouldAutoClose) {
+            // Use the provided delay or the default
+            const delay = config.autoCloseDelay ?? this.DEFAULT_AUTO_CLOSE_DELAY;
+            const timerId = setTimeout(() => {
+                this.closeToastById(toastId);
+                this.autoCloseTimers.delete(toastId);
+            }, delay);
+            this.autoCloseTimers.set(toastId, timerId);
+        }
+        return toastId;
+    }
+    closeToastById(toastId) {
+        // Clear any auto-close timer
+        if (this.autoCloseTimers.has(toastId)) {
+            clearTimeout(this.autoCloseTimers.get(toastId));
+            this.autoCloseTimers.delete(toastId);
+        }
+        this.toastsSignal.update(toasts => toasts.filter(toast => toast.id !== toastId));
+    }
+    closeAllToasts() {
+        // Clear all timers
+        this.autoCloseTimers.forEach(timerId => clearTimeout(timerId));
+        this.autoCloseTimers.clear();
+        this.toastsSignal.set([]);
+    }
+    async executeToastAction(toastId, action) {
+        const toast = this.toastsSignal().find(t => t.id === toastId);
+        if (!toast)
+            return;
+        let callback;
+        let loadingProperty;
+        switch (action) {
+            case "action":
+                callback = toast.onActionCallback;
+                loadingProperty = 'isActionLoading';
+                break;
+            case "cancel":
+                callback = toast.onCancelCallback;
+                loadingProperty = 'isCancelLoading';
+                break;
+        }
+        if (callback) {
+            // Update loading state
+            this.toastsSignal.update(toasts => toasts.map(t => t.id === toastId ? { ...t, [loadingProperty]: true } : t));
+            try {
+                await callback();
+            }
+            catch (error) {
+                console.error(`Error en la acción ${action}:`, error);
+            }
+            finally {
+                // Update loading state back to false (in case the toast hasn't been closed)
+                this.toastsSignal.update(toasts => {
+                    const updatedToasts = toasts.map(t => t.id === toastId ? { ...t, [loadingProperty]: false } : t);
+                    return updatedToasts;
+                });
+                this.closeToastById(toastId);
+            }
+        }
+        else {
+            this.closeToastById(toastId);
+        }
+    }
+    // For backward compatibility with existing code
+    closeToast() {
+        this.closeAllToasts();
+        this.isOpenSignal.set(false);
+        this.configSignal.set(null);
+    }
+    // For backward compatibility with existing code
+    async executeAction(action) {
+        let callback;
+        let loadingSignal;
+        switch (action) {
+            case "action":
+                callback = "onAction" in (this.configSignal() || {})
+                    ? this.configSignal().onAction
+                    : undefined;
+                loadingSignal = this.isLoadingAction;
+                break;
+            case "cancel":
+                callback = "onCancel" in (this.configSignal() || {})
+                    ? this.configSignal().onCancel
+                    : undefined;
+                loadingSignal = this.isLoadingCancel;
+                break;
+        }
+        if (callback) {
+            loadingSignal.set(true);
+            try {
+                await callback();
+            }
+            catch (error) {
+                console.error(`Error en la acción ${action}:`, error);
+            }
+            finally {
+                loadingSignal.set(false);
+                this.closeToast();
+            }
+        }
+        else {
+            this.closeToast();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: JAlertToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: JAlertToastService, providedIn: "root" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: JAlertToastService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root",
+                }]
+        }] });
+
+class JAlertToastComponent {
+    colorsService;
+    monocromatic = false;
+    position = 'bottom-right';
+    alertToastService = inject(JAlertToastService);
+    constructor(colorsService) {
+        this.colorsService = colorsService;
+    }
+    toasts = computed(() => this.alertToastService.toasts());
+    icons = {
+        success: CircleCheck,
+        error: CircleX,
+        warning: TriangleAlert,
+        info: Info,
+        question: CircleHelp,
+        loading: Loader2,
+        close: X,
+    };
+    getIcon(type) {
+        return this.icons[type] || this.icons['info'];
+    }
+    handleAction(toastId, action) {
+        this.alertToastService.executeToastAction(toastId, action);
+    }
+    closeToast(toastId) {
+        this.alertToastService.closeToastById(toastId);
+    }
+    // Obtener la clase del toast
+    getToastClass(type) {
+        return this.colorsService.getAlertClass(type, this.monocromatic);
+    }
+    // Obtener la clase del icono
+    getIconClass(type) {
+        return this.colorsService.getIconClass(type, this.monocromatic);
+    }
+    // Obtener clase del boton
+    getButtonClass(type) {
+        return this.colorsService.getButtonClass(type, this.monocromatic);
+    }
+    // Obtener la clase secundaria del botón
+    getButtonSecondaryClass(type) {
+        return this.colorsService.getButtonSecondaryClass(type, this.monocromatic);
+    }
+    // Asignar posision del toast
+    getPositionClass() {
+        const base = 'fixed z-1000 flex flex-col gap-2 max-w-md';
+        switch (this.position) {
+            case 'top-left':
+                return `${base} top-4 left-4`;
+            case 'top-right':
+                return `${base} top-20 right-4`;
+            case 'bottom-left':
+                return `${base} bottom-4 left-4`;
+            case 'bottom-right':
+            default:
+                return `${base} bottom-4 right-4`;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: JAlertToastComponent, deps: [{ token: JColorsService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: JAlertToastComponent, isStandalone: true, selector: "JAlertToast", inputs: { monocromatic: "monocromatic", position: "position" }, ngImport: i0, template: "<div [ngClass]=\"getPositionClass()\">\r\n    @for (toast of toasts(); track toast.id) {\r\n    <div @toastTransition\r\n        class=\"relative w-100 border border-border border-l-4 p-4 rounded-lg shadow-lg overflow-hidden flex gap-3\"\r\n        [ngClass]=\"getToastClass(toast.config.type)\">\r\n\r\n        <!-- Close button -->\r\n        <button\r\n          class=\"absolute p-1 top-2 right-2 cursor-pointer rounded transition duration-300 hover:bg-background dark:hover:bg-dark-background\"\r\n          [ngClass]=\"getIconClass(toast.config.type)\" \r\n          (click)=\"closeToast(toast.id)\"\r\n            >\r\n            <lucide-icon [name]=\"icons['close']\" [size]=\"16\"></lucide-icon>\r\n        </button>\r\n\r\n        <!-- Icono grande en la esquina inferior izquierda -->\r\n        <div [ngClass]=\"{ 'animate-spin': toast.config.type === 'loading'}\"\r\n            class=\"absolute -bottom-5 opacity-15 dark:opacity-15 -left-5 text-black dark:text-white z-2 pointer-events-none\">\r\n            <lucide-icon \r\n                [name]=\"getIcon(toast.config.type)\" \r\n                [size]=\"100\"\r\n                [ngClass]=\"getIconClass(toast.config.type)\"\r\n            >\r\n            </lucide-icon>\r\n        </div>\r\n\r\n        <!-- Icono peque\u00F1o en la esquina superior derecha -->\r\n        <div [ngClass]=\"{ 'animate-spin': toast.config.type === 'loading'}\"\r\n            class=\"absolute top-5 opacity-15 dark:opacity-15 right-5 text-black dark:text-white z-2 pointer-events-none\">\r\n            <lucide-icon \r\n                [name]=\"getIcon(toast.config.type)\" \r\n                [size]=\"30\"\r\n                [ngClass]=\"getIconClass(toast.config.type)\"\r\n            >\r\n            </lucide-icon>\r\n        </div>\r\n\r\n        <!-- Content -->\r\n        <div class=\"flex-1\">\r\n            <h3 class=\"text-sm font-semibold text-black dark:text-white pb-2\">{{ toast.config.title }}</h3>\r\n            <p class=\"text-sm text-black/80 dark:text-dark-muted-foreground\" [innerHTML]=\"toast.config.description\"></p>\r\n\r\n            <!-- Action buttons -->\r\n            <div class=\"flex justify-end gap-2 mt-2\">\r\n                <!-- Bot\u00F3n Cancelar (No se muestra si es \"success\") -->\r\n                @if (toast.config.type !== 'success' && toast.onCancelCallback) {\r\n                <JButton \r\n                  (clicked)=\"handleAction(toast.id, 'cancel')\"\r\n                  [disabled]=\"toast.isCancelLoading || toast.isActionLoading\" \r\n                  [isLoading]=\"toast.isCancelLoading\"\r\n                  classes=\"text-[10px] min-w-auto\"\r\n                  [ngClasses]=\"getButtonSecondaryClass(toast.config.type)\"\r\n                >\r\n                    Cancelar\r\n                </JButton>\r\n                }\r\n\r\n                <!-- Bot\u00F3n action (No se muestra si es \"loading\") -->\r\n                @if (toast.config.type !== 'loading' && toast.onActionCallback) {\r\n                <JButton \r\n                  (clicked)=\"handleAction(toast.id, 'action')\"\r\n                  [disabled]=\"toast.isCancelLoading || toast.isActionLoading\" \r\n                  [isLoading]=\"toast.isActionLoading\"\r\n                  classes=\"text-[10px] min-w-auto\" \r\n                  [ngClasses]=\"getButtonClass(toast.config.type)\"\r\n                >\r\n                  {{toast.actionNameButton}}\r\n                </JButton>\r\n                }\r\n            </div>\r\n        </div>\r\n\r\n    </div>\r\n    }\r\n</div>", styles: [""], dependencies: [{ 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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: JButtonComponent, selector: "JButton", inputs: ["type", "disabled", "isLoading", "icon", "iconSize", "text", "isChangeIcon", "iconChange", "tooltip", "tooltipPosition", "classes", "ngClasses"], outputs: ["clicked"] }], animations: [
+            trigger("toastTransition", [
+                transition(":enter", [
+                    style({ opacity: 0, transform: "translateY(10px)" }),
+                    animate("300ms ease-out", style({ opacity: 1, transform: "translateY(0)" }))
+                ]),
+                transition(":leave", [
+                    animate("150ms ease-in", style({ opacity: 0, transform: "translateY(10px)" }))
+                ])
+            ])
+        ] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: JAlertToastComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'JAlertToast', imports: [LucideAngularModule, NgClass, JButtonComponent], animations: [
+                        trigger("toastTransition", [
+                            transition(":enter", [
+                                style({ opacity: 0, transform: "translateY(10px)" }),
+                                animate("300ms ease-out", style({ opacity: 1, transform: "translateY(0)" }))
+                            ]),
+                            transition(":leave", [
+                                animate("150ms ease-in", style({ opacity: 0, transform: "translateY(10px)" }))
+                            ])
+                        ])
+                    ], template: "<div [ngClass]=\"getPositionClass()\">\r\n    @for (toast of toasts(); track toast.id) {\r\n    <div @toastTransition\r\n        class=\"relative w-100 border border-border border-l-4 p-4 rounded-lg shadow-lg overflow-hidden flex gap-3\"\r\n        [ngClass]=\"getToastClass(toast.config.type)\">\r\n\r\n        <!-- Close button -->\r\n        <button\r\n          class=\"absolute p-1 top-2 right-2 cursor-pointer rounded transition duration-300 hover:bg-background dark:hover:bg-dark-background\"\r\n          [ngClass]=\"getIconClass(toast.config.type)\" \r\n          (click)=\"closeToast(toast.id)\"\r\n            >\r\n            <lucide-icon [name]=\"icons['close']\" [size]=\"16\"></lucide-icon>\r\n        </button>\r\n\r\n        <!-- Icono grande en la esquina inferior izquierda -->\r\n        <div [ngClass]=\"{ 'animate-spin': toast.config.type === 'loading'}\"\r\n            class=\"absolute -bottom-5 opacity-15 dark:opacity-15 -left-5 text-black dark:text-white z-2 pointer-events-none\">\r\n            <lucide-icon \r\n                [name]=\"getIcon(toast.config.type)\" \r\n                [size]=\"100\"\r\n                [ngClass]=\"getIconClass(toast.config.type)\"\r\n            >\r\n            </lucide-icon>\r\n        </div>\r\n\r\n        <!-- Icono peque\u00F1o en la esquina superior derecha -->\r\n        <div [ngClass]=\"{ 'animate-spin': toast.config.type === 'loading'}\"\r\n            class=\"absolute top-5 opacity-15 dark:opacity-15 right-5 text-black dark:text-white z-2 pointer-events-none\">\r\n            <lucide-icon \r\n                [name]=\"getIcon(toast.config.type)\" \r\n                [size]=\"30\"\r\n                [ngClass]=\"getIconClass(toast.config.type)\"\r\n            >\r\n            </lucide-icon>\r\n        </div>\r\n\r\n        <!-- Content -->\r\n        <div class=\"flex-1\">\r\n            <h3 class=\"text-sm font-semibold text-black dark:text-white pb-2\">{{ toast.config.title }}</h3>\r\n            <p class=\"text-sm text-black/80 dark:text-dark-muted-foreground\" [innerHTML]=\"toast.config.description\"></p>\r\n\r\n            <!-- Action buttons -->\r\n            <div class=\"flex justify-end gap-2 mt-2\">\r\n                <!-- Bot\u00F3n Cancelar (No se muestra si es \"success\") -->\r\n                @if (toast.config.type !== 'success' && toast.onCancelCallback) {\r\n                <JButton \r\n                  (clicked)=\"handleAction(toast.id, 'cancel')\"\r\n                  [disabled]=\"toast.isCancelLoading || toast.isActionLoading\" \r\n                  [isLoading]=\"toast.isCancelLoading\"\r\n                  classes=\"text-[10px] min-w-auto\"\r\n                  [ngClasses]=\"getButtonSecondaryClass(toast.config.type)\"\r\n                >\r\n                    Cancelar\r\n                </JButton>\r\n                }\r\n\r\n                <!-- Bot\u00F3n action (No se muestra si es \"loading\") -->\r\n                @if (toast.config.type !== 'loading' && toast.onActionCallback) {\r\n                <JButton \r\n                  (clicked)=\"handleAction(toast.id, 'action')\"\r\n                  [disabled]=\"toast.isCancelLoading || toast.isActionLoading\" \r\n                  [isLoading]=\"toast.isActionLoading\"\r\n                  classes=\"text-[10px] min-w-auto\" \r\n                  [ngClasses]=\"getButtonClass(toast.config.type)\"\r\n                >\r\n                  {{toast.actionNameButton}}\r\n                </JButton>\r\n                }\r\n            </div>\r\n        </div>\r\n\r\n    </div>\r\n    }\r\n</div>" }]
+        }], ctorParameters: () => [{ type: JColorsService }], propDecorators: { monocromatic: [{
+                type: Input
+            }], position: [{
+                type: Input
+            }] } });
+
+class JAlertDialogService {
+    isOpenSignal = signal(false);
+    configSignal = signal(null);
+    // Estados de carga para los botones
+    isLoadingConfirm = signal(false);
+    isLoadingCancel = signal(false);
+    isLoadingRetry = signal(false);
+    // Callbacks
+    onConfirmCallback;
+    onCancelCallback;
+    onRetryCallback;
+    isOpen = computed(() => this.isOpenSignal());
+    config = computed(() => this.configSignal());
+    isConfirmLoading = computed(() => this.isLoadingConfirm());
+    isCancelLoading = computed(() => this.isLoadingCancel());
+    isRetryLoading = computed(() => this.isLoadingRetry());
+    // Add a dialogs computed property that returns an array with a single dialog when open
+    dialogs = computed(() => {
+        if (!this.isOpenSignal())
+            return [];
+        return [{
+                config: this.configSignal(),
+                isConfirmLoading: this.isLoadingConfirm(),
+                isCancelLoading: this.isLoadingCancel(),
+                isRetryLoading: this.isLoadingRetry()
+            }];
+    });
+    getConfig() {
+        return this.configSignal();
+    }
+    AlertDialog(config) {
+        this.onConfirmCallback = "onConfirm" in config ? config.onConfirm : undefined;
+        this.onCancelCallback = "onCancel" in config ? config.onCancel : undefined;
+        this.onRetryCallback = "onRetry" in config ? config.onRetry : undefined;
+        // Reset loading states
+        this.isLoadingConfirm.set(false);
+        this.isLoadingCancel.set(false);
+        this.isLoadingRetry.set(false);
+        this.configSignal.set(config);
+        this.isOpenSignal.set(true);
+    }
+    closeDialog() {
+        this.isOpenSignal.set(false);
+        this.configSignal.set(null);
+    }
+    async executeAction(action) {
+        let callback;
+        let loadingSignal;
+        switch (action) {
+            case "confirm":
+                callback = this.onConfirmCallback;
+                loadingSignal = this.isLoadingConfirm;
+                break;
+            case "cancel":
+                callback = this.onCancelCallback;
+                loadingSignal = this.isLoadingCancel;
+                break;
+            case "retry":
+                callback = this.onRetryCallback;
+                loadingSignal = this.isLoadingRetry;
+                break;
+        }
+        if (!callback) {
+            this.closeDialog();
+            return;
+        }
+        loadingSignal.set(true);
+        try {
+            const result = callback();
+            // Soporte para Observable
+            if (isObservable(result)) {
+                await firstValueFrom(result);
+            }
+            // Soporte para Promise
+            if (result instanceof Promise) {
+                await result;
+            }
+            // Si es void, no hacemos nada extra
+        }
+        catch (error) {
+            console.error(`Error en la acción ${action}:`, error);
+        }
+        finally {
+            loadingSignal.set(false);
+            this.closeDialog();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: JAlertDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: JAlertDialogService, providedIn: "root" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: JAlertDialogService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root",
+                }]
+        }] });
+
+class JAlertDialogComponent {
+    colorsService;
+    monocromatic = false;
+    alertDialogService = inject(JAlertDialogService);
+    constructor(colorsService) {
+        this.colorsService = colorsService;
+    }
+    // Single computed property for dialogs
+    dialogs = computed(() => this.alertDialogService.dialogs());
+    icons = {
+        success: CircleCheck,
+        error: CircleX,
+        warning: TriangleAlert,
+        info: Info,
+        question: CircleHelp,
+        loading: Loader2,
+    };
+    getIcon(type) {
+        return this.icons[type] || this.icons['info'];
+    }
+    handleAction(action) {
+        this.alertDialogService.executeAction(action);
+    }
+    // Get the class for the toast
+    getDialogClass(type) {
+        return this.colorsService.getAlertClass(type, this.monocromatic);
+    }
+    // Get the class for the icon
+    getIconClass(type) {
+        return this.colorsService.getIconClass(type, this.monocromatic);
+    }
+    // Get the class for the button
+    getButtonClass(type) {
+        return this.colorsService.getButtonClass(type, this.monocromatic);
+    }
+    getButtonSecondaryClass(type) {
+        return this.colorsService.getButtonSecondaryClass(type, this.monocromatic);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: JAlertDialogComponent, deps: [{ token: JColorsService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: JAlertDialogComponent, isStandalone: true, selector: "JAlertDialog", inputs: { monocromatic: "monocromatic" }, ngImport: i0, template: "@for (dialog of dialogs(); track dialog.config.title) {\r\n  <div class=\"fixed inset-0 z-1001 flex items-center justify-center bg-black/50\">\r\n    <div @modalTransition\r\n      class=\"relative w-100 border border-border p-4 rounded-lg shadow-5xl overflow-hidden\"\r\n      [ngClass]=\"getDialogClass(dialog.config.type)\">\r\n  \r\n      <!-- Icono grande en la esquina inferior izquierda -->\r\n      <div [ngClass]=\"{ 'animate-spin': dialog.config.type === 'loading'}\"\r\n        class=\"absolute -bottom-5 opacity-25 dark:opacity-15 -left-5 text-black dark:text-white pointer-events-none\">\r\n        <lucide-icon \r\n          [name]=\"getIcon(dialog.config.type)\" \r\n          [size]=\"130\"\r\n          [ngClass]=\"getIconClass(dialog.config.type)\"\r\n        >\r\n      </lucide-icon>\r\n      </div>\r\n  \r\n      <!-- Icono peque\u00F1o en la esquina superior derecha -->\r\n      <div [ngClass]=\"{ 'animate-spin': dialog.config.type === 'loading'}\"\r\n        class=\"absolute top-5 opacity-25 dark:opacity-15 right-5 text-black dark:text-white pointer-events-none\">\r\n        <lucide-icon \r\n          [name]=\"getIcon(dialog.config.type)\" \r\n          [size]=\"30\"\r\n          [ngClass]=\"getIconClass(dialog.config.type)\"\r\n        >\r\n      </lucide-icon>\r\n      </div>\r\n  \r\n      <h3 class=\"text-lg font-semibold text-black dark:text-white pb-2\">{{ dialog.config.title }}</h3>\r\n      <p class=\"text-black/80 dark:text-dark-muted-foreground\" [innerHTML]=\"dialog.config.description\"></p>\r\n  \r\n      <div class=\"flex justify-end gap-2 mt-4\">\r\n        <!-- Bot\u00F3n Reintentar (Solo si el tipo es \"error\") -->\r\n        @if (dialog.config.type === 'error' && dialog.config.onRetry) {\r\n        <JButton \r\n          (clicked)=\"handleAction('retry')\" \r\n          [disabled]=\"dialog.isRetryLoading || dialog.isCancelLoading || dialog.isConfirmLoading\" \r\n          [isLoading]=\"dialog.isRetryLoading\"  \r\n          [ngClasses]=\"getButtonSecondaryClass(dialog.config.type)\"\r\n        >\r\n          Reintentar\r\n        </JButton>\r\n        }\r\n  \r\n        <!-- Bot\u00F3n Cancelar (No se muestra si es \"success\") -->\r\n        @if (dialog.config.type !== 'success' && dialog.config.onCancel) {\r\n        <JButton \r\n          (clicked)=\"handleAction('cancel')\" \r\n          [disabled]=\"dialog.isRetryLoading || dialog.isCancelLoading || dialog.isConfirmLoading\" \r\n          [isLoading]=\"dialog.isCancelLoading\" \r\n          [ngClasses]=\"getButtonSecondaryClass(dialog.config.type)\"\r\n        >\r\n          Cancelar\r\n        </JButton>\r\n        }\r\n  \r\n        <!-- Bot\u00F3n Confirmar (No se muestra si es \"loading\") -->\r\n        @if (dialog.config.type !== 'loading' && dialog?.config?.onConfirm) {\r\n        <JButton \r\n          (clicked)=\"handleAction('confirm')\" \r\n          [disabled]=\"dialog.isRetryLoading || dialog.isCancelLoading || dialog.isConfirmLoading\" \r\n          [isLoading]=\"dialog.isConfirmLoading\" \r\n          [ngClasses]=\"getButtonClass(dialog.config.type)\"\r\n        >\r\n          Confirmar\r\n        </JButton>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n  }", styles: [""], dependencies: [{ 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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: JButtonComponent, selector: "JButton", inputs: ["type", "disabled", "isLoading", "icon", "iconSize", "text", "isChangeIcon", "iconChange", "tooltip", "tooltipPosition", "classes", "ngClasses"], outputs: ["clicked"] }], animations: [
+            trigger("modalTransition", [
+                transition(":enter", [
+                    style({ transform: "translateY(1rem)", opacity: 0 }),
+                    animate("300ms ease-out", style({ transform: "translateY(0)", opacity: 1 })),
+                ]),
+                transition(":leave", [
+                    animate("150ms ease-in", style({ transform: "translateY(1rem)", opacity: 0 })),
+                ]),
+            ]),
+        ] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: JAlertDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "JAlertDialog", imports: [LucideAngularModule, NgClass, JButtonComponent], animations: [
+                        trigger("modalTransition", [
+                            transition(":enter", [
+                                style({ transform: "translateY(1rem)", opacity: 0 }),
+                                animate("300ms ease-out", style({ transform: "translateY(0)", opacity: 1 })),
+                            ]),
+                            transition(":leave", [
+                                animate("150ms ease-in", style({ transform: "translateY(1rem)", opacity: 0 })),
+                            ]),
+                        ]),
+                    ], template: "@for (dialog of dialogs(); track dialog.config.title) {\r\n  <div class=\"fixed inset-0 z-1001 flex items-center justify-center bg-black/50\">\r\n    <div @modalTransition\r\n      class=\"relative w-100 border border-border p-4 rounded-lg shadow-5xl overflow-hidden\"\r\n      [ngClass]=\"getDialogClass(dialog.config.type)\">\r\n  \r\n      <!-- Icono grande en la esquina inferior izquierda -->\r\n      <div [ngClass]=\"{ 'animate-spin': dialog.config.type === 'loading'}\"\r\n        class=\"absolute -bottom-5 opacity-25 dark:opacity-15 -left-5 text-black dark:text-white pointer-events-none\">\r\n        <lucide-icon \r\n          [name]=\"getIcon(dialog.config.type)\" \r\n          [size]=\"130\"\r\n          [ngClass]=\"getIconClass(dialog.config.type)\"\r\n        >\r\n      </lucide-icon>\r\n      </div>\r\n  \r\n      <!-- Icono peque\u00F1o en la esquina superior derecha -->\r\n      <div [ngClass]=\"{ 'animate-spin': dialog.config.type === 'loading'}\"\r\n        class=\"absolute top-5 opacity-25 dark:opacity-15 right-5 text-black dark:text-white pointer-events-none\">\r\n        <lucide-icon \r\n          [name]=\"getIcon(dialog.config.type)\" \r\n          [size]=\"30\"\r\n          [ngClass]=\"getIconClass(dialog.config.type)\"\r\n        >\r\n      </lucide-icon>\r\n      </div>\r\n  \r\n      <h3 class=\"text-lg font-semibold text-black dark:text-white pb-2\">{{ dialog.config.title }}</h3>\r\n      <p class=\"text-black/80 dark:text-dark-muted-foreground\" [innerHTML]=\"dialog.config.description\"></p>\r\n  \r\n      <div class=\"flex justify-end gap-2 mt-4\">\r\n        <!-- Bot\u00F3n Reintentar (Solo si el tipo es \"error\") -->\r\n        @if (dialog.config.type === 'error' && dialog.config.onRetry) {\r\n        <JButton \r\n          (clicked)=\"handleAction('retry')\" \r\n          [disabled]=\"dialog.isRetryLoading || dialog.isCancelLoading || dialog.isConfirmLoading\" \r\n          [isLoading]=\"dialog.isRetryLoading\"  \r\n          [ngClasses]=\"getButtonSecondaryClass(dialog.config.type)\"\r\n        >\r\n          Reintentar\r\n        </JButton>\r\n        }\r\n  \r\n        <!-- Bot\u00F3n Cancelar (No se muestra si es \"success\") -->\r\n        @if (dialog.config.type !== 'success' && dialog.config.onCancel) {\r\n        <JButton \r\n          (clicked)=\"handleAction('cancel')\" \r\n          [disabled]=\"dialog.isRetryLoading || dialog.isCancelLoading || dialog.isConfirmLoading\" \r\n          [isLoading]=\"dialog.isCancelLoading\" \r\n          [ngClasses]=\"getButtonSecondaryClass(dialog.config.type)\"\r\n        >\r\n          Cancelar\r\n        </JButton>\r\n        }\r\n  \r\n        <!-- Bot\u00F3n Confirmar (No se muestra si es \"loading\") -->\r\n        @if (dialog.config.type !== 'loading' && dialog?.config?.onConfirm) {\r\n        <JButton \r\n          (clicked)=\"handleAction('confirm')\" \r\n          [disabled]=\"dialog.isRetryLoading || dialog.isCancelLoading || dialog.isConfirmLoading\" \r\n          [isLoading]=\"dialog.isConfirmLoading\" \r\n          [ngClasses]=\"getButtonClass(dialog.config.type)\"\r\n        >\r\n          Confirmar\r\n        </JButton>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n  }" }]
+        }], ctorParameters: () => [{ type: JColorsService }], propDecorators: { monocromatic: [{
+                type: Input
+            }] } });
+
+const API_URL = new InjectionToken('API_URL');
+
+class JHttpParamsService {
+    constructor() { }
+    // Formatear parámetros para peticiones HTTP
+    resParams(params) {
+        // Construir HttpParams
+        let httpParams = new HttpParams();
+        // Recorrer todos los parámetros
+        if (params) {
+            Object.keys(params).forEach(key => {
+                const value = params[key];
+                // Si el valor es un objeto (ej. filter: { id_status: [1, 2] })
+                if (typeof value === 'object' && value !== null) {
+                    Object.keys(value).forEach(subKey => {
+                        const subValue = value[subKey];
+                        // Si el subValor es un array (ej. id_status: [1, 2])
+                        if (Array.isArray(subValue)) {
+                            subValue.forEach(v => {
+                                httpParams = httpParams.append(`${key}[${subKey}]`, v);
+                            });
+                        }
+                        else {
+                            // Si es un valor único
+                            httpParams = httpParams.append(`${key}[${subKey}]`, subValue);
+                        }
+                    });
+                }
+                else {
+                    // Si es un valor plano (ej. id_status: 1)
+                    httpParams = httpParams.append(key, value);
+                }
+            });
+        }
+        return httpParams;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: JHttpParamsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: JHttpParamsService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: JHttpParamsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], 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;
+    HttpParamsService;
+    converterService;
+    constructor(baseUrl, http, HttpParamsService, converterService) {
+        this.baseUrl = baseUrl;
+        this.http = http;
+        this.HttpParamsService = HttpParamsService;
+        this.converterService = converterService;
+    }
+    /**
+     * Método genérico para obtener todos los registros desde un endpoint.
+     * @param endpoint Distintivo del endpoint ('role', 'status', etc.)
+     * @param params Parámetros de la petición.
+     * @returns Observable con la respuesta de la API.
+     */
+    getAll(endpoint, params) {
+        const url = `${this.baseUrl}/${endpoint}`;
+        // Construir HttpParams
+        let httpParams;
+        if (params)
+            httpParams = this.HttpParamsService.resParams(params);
+        // Hacer la petición GET con los HttpParams formateados
+        return this.http.get(url, { params: httpParams });
+    }
+    /**
+     * Método genérico para obtener un registro desde un endpoint.
+     * @param endpoint Distintivo del endpoint ('role', 'status', etc.)
+     * @param id Identificador del registro.
+     * @returns Observable con la respuesta de la API.
+     */
+    getId(endpoint, id) {
+        const url = `${this.baseUrl}/${endpoint}`;
+        return this.http.get(`${url}/${id}`).pipe(map(response => response.data[endpoint]));
+    }
+    /**
+     * Método genérico para agregar un registro a un endpoint.
+     * @param endpoint Distintivo del endpoint ('role', 'status', etc.)
+     * @param data Datos del registro a agregar.
+     * @returns Observable con la respuesta de la API.
+     */
+    create(endpoint, data) {
+        const url = `${this.baseUrl}/${endpoint}`;
+        return this.http.post(url, data);
+    }
+    /**
+     * Método genérico para actualizar un registro en un endpoint.
+     * @param endpoint Distintivo del endpoint ('role', 'status', etc.)
+     * @param id Identificador del registro.
+     * @param data Datos del registro a actualizar.
+     * @returns Observable con la respuesta de la API.
+     */
+    update(endpoint, id, data) {
+        const url = `${this.baseUrl}/${endpoint}`;
+        return this.http.put(`${url}/${id}`, data);
+    }
+    /**
+     * Método genérico para eliminar un registro de un endpoint.
+     * @param endpoint Distintivo del endpoint ('role', 'status', etc.)
+     * @param id Identificador del registro.
+     * @returns Observable con la respuesta de la API.
+     */
+    delete(endpoint, id) {
+        const url = `${this.baseUrl}/${endpoint}`;
+        return this.http.delete(`${url}/${id}`);
+    }
+    /**
+    * Método genérico para actualizar estados de un registro en un endpoint.
+    * @param endpoint Distintivo del endpoint ('role', 'status', etc.)
+    * @param id Identificador del registro.
+    * @param data Datos de un registro booleano a actualizar.
+    * @returns Observable con la respuesta de la API.
+    */
+    enable(endpoint, id, data) {
+        const url = `${this.baseUrl}/${endpoint}`;
+        return this.http.put(`${url}/enable/${id}`, data);
+    }
+    /**
+    * Método genérico para obtener los parámetros de consulta para una tabla.
+    * @param page Número de página actual.
+    * @param limit Número de registros por página.
+    * @param sort Objeto que contiene la columna y la dirección de ordenamiento.
+    * @param filters Filtros aplicados a la consulta.
+    * @param defaultFilters Filtros predeterminados aplicados a la consulta.
+    * @param searchQuery Cadena de búsqueda.
+    * @param columns Columnas a buscar.
+    * @returns
+    */
+    params({ page, limit, sort, filters, defaultFilters, searchQuery, columns }) {
+        const params = {};
+        if (page)
+            params['page'] = page.toString();
+        if (limit)
+            params['limit'] = limit.toString();
+        // Aplicar los filtros predeterminados enviados desde el padre
+        Object.keys(defaultFilters ?? {}).forEach((key) => {
+            if (!filters.hasOwnProperty(key)) {
+                params[`filter[${key}]`] = defaultFilters[key];
+            }
+        });
+        // Aplicar el ordenamiento si se ha proporcionado
+        if (sort?.column && sort?.direction !== 'none') {
+            const sortKey = this.converterService.getSortKey(sort?.column);
+            params['sortBy'] = sortKey;
+            params['sortOrder'] = sort?.direction?.toUpperCase();
+        }
+        // Aplicar la búsqueda si se ha proporcionado
+        if (searchQuery && searchQuery.trim() !== '') {
+            params['search'] = searchQuery;
+            params['searchFields'] = columns?.map(col => col);
+        }
+        // Aplicar los filtros si se han proporcionado
+        if (Object.keys(filters).length > 0) {
+            params['filter'] = filters;
+        }
+        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 ɵ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: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [API_URL]
+                }] }, { type: i1$2.HttpClient }, { type: JHttpParamsService }, { type: ConverterService }] });
+
+class JErrorHandlerService {
+    /**
+     * Mapeo de códigos de estado HTTP a mensajes amigables y su tipo de alerta.
+     */
+    errorMappings = {
+        400: { type: 'info', title: 'Solicitud incorrecta', message: 'Los datos enviados no son válidos. Verifique e intente de nuevo.', persistent: false },
+        401: { type: 'info', title: 'No autorizado', message: 'Debe iniciar sesión para acceder a esta función.', persistent: true },
+        403: { type: 'error', title: 'Acceso denegado', message: 'No tiene permisos para realizar esta acción.', persistent: true },
+        404: { type: 'info', title: 'No encontrado', message: 'El recurso solicitado no existe o fue eliminado.', persistent: false },
+        409: { type: 'info', title: 'Conflicto', message: 'Conflicto en la solicitud. Verifique los datos ingresados.', persistent: false },
+        422: { type: 'info', title: 'Datos no procesables', message: 'Los datos son válidos, pero no pueden ser procesados en este momento.', persistent: false },
+        429: { type: 'info', title: 'Demasiadas solicitudes', message: 'Ha realizado demasiadas solicitudes. Intente más tarde.', persistent: true },
+        500: { type: 'error', title: 'Error del servidor', message: 'Ocurrió un error inesperado. Intente más tarde.', persistent: true },
+        503: { type: 'error', title: 'Servicio no disponible', message: 'El servidor está en mantenimiento o sobrecargado.', persistent: true }
+    };
+    constructor() { }
+    /**
+     * Manejo de errores HTTP y retorno de un mensaje estructurado con tipo de alerta.
+     */
+    handleHttpError(error) {
+        console.error('HTTP Error:', error); // Log para depuración
+        // Si no hay error definido, retornamos mensaje genérico
+        if (!error) {
+            return {
+                type: 'error',
+                title: 'Error desconocido',
+                message: 'Ocurrió un error inesperado. Intente de nuevo más tarde.',
+                persistent: true
+            };
+        }
+        const status = error?.status || 0;
+        const backendMessage = error?.error?.msg || error?.message;
+        const errorInfo = this.errorMappings[status] || {
+            title: 'Error desconocido',
+            message: 'Ocurrió un error inesperado. Intente de nuevo más tarde.',
+            type: 'error',
+            persistent: true
+        };
+        return {
+            type: errorInfo.type,
+            title: errorInfo.title,
+            message: backendMessage || errorInfo.message,
+            persistent: errorInfo.persistent
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: JErrorHandlerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: JErrorHandlerService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: JErrorHandlerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class OptionComponent {
+    elementRef;
+    value;
+    disabled = false;
+    // Used internally by JSelect
+    get dataValue() {
+        return this.value;
+    }
+    // Store the text content for display in the select
+    _text = '';
+    get text() {
+        return this._text;
+    }
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+    }
+    ngAfterViewInit() {
+        // Extract text content after view is initialized
+        this._text = this.elementRef.nativeElement.textContent.trim();
+    }
+    // This will be called by JSelect to set the text content
+    setTextContent(text) {
+        this._text = text;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: OptionComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: OptionComponent, isStandalone: true, selector: "JOption", inputs: { value: "value", disabled: "disabled" }, host: { properties: { "attr.data-value": "this.dataValue" } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: OptionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'JOption', standalone: true, imports: [CommonModule], template: `<ng-content></ng-content>` }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { value: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], dataValue: [{
+                type: HostBinding,
+                args: ['attr.data-value']
+            }] } });
+
+class JSelectComponent {
+    cdr;
+    elementRef;
+    genericService;
+    // Lucide icons
+    icons = {
+        chevronDown: ChevronDown,
+        view: Eye,
+        x: X,
+        check: Check,
+        search: Search, // xxx
+        loading: Loader2,
+    };
+    type = 'dropdown'; // Tipo de select
+    btnIcon = this.icons['view']; // Icono del botón
+    btnText = ''; // Texto del botón
+    title = 'Seleccionar'; // Titulo del dropdown
+    placeholder = 'Seleccione una opción'; // Texto cuando no hay selección
+    showClear = false; // Mostrar botón para limpiar selección
+    columns = []; // Columnas a mostrar en el dropdown ideal para la tabla
+    options = []; // Opciones quemadas para el dropdown
+    optionLabel = 'text'; // Propiedad a mostrar en el dropdown
+    optionValue = 'value'; // Propiedad a usar como valor en el dropdown
+    labelSeparator = ' ';
+    isLoading = false;
+    // Datos para el searchable
+    endpoint = ''; // Endpoint para buscar datos
+    loadOnInit = false; // Cargar datos al inicializar
+    defaultFilters = {}; // Parámetros adicionales para la api
+    searchFields = []; // Filtros adicionales para la búsqueda
+    isSearch = true; // Habilitar la búsqueda
+    isFilterSelect = false; // Es un select de filtro
+    sort = 'ASC';
+    updateVisibility = new EventEmitter();
+    selectionChange = new EventEmitter();
+    optionComponents;
+    selectButton;
+    // Selectores
+    isColumnSelectorOpen = false;
+    selectedValue = null;
+    selectedLabel = '';
+    internalOptions = [];
+    // Para la búsqueda
+    searchTerm = '';
+    searchSubject = new Subject();
+    searchSubscription;
+    filteredOptions = [];
+    // Dropdown positioning
+    dropdownTop = 0;
+    dropdownLeft = 0;
+    dropdownWidth = 0;
+    // Para implementar ControlValueAccessor
+    onChange = () => { };
+    onTouched = () => { };
+    disabled = false;
+    // Para detectar clicks fuera del componente
+    clickOutsideListener;
+    constructor(cdr, elementRef, genericService) {
+        this.cdr = cdr;
+        this.elementRef = elementRef;
+        this.genericService = genericService;
+    }
+    ngOnInit() {
+        // Configurar el debounce para la búsqueda
+        this.searchSubscription = this.searchSubject.pipe(debounceTime(1000), distinctUntilChanged()).subscribe(() => {
+            if (this.type === 'searchable') {
+                this.loadData();
+            }
+        });
+        // Cargar datos al inicializar si es necesario
+        if (this.loadOnInit && this.type === 'searchable') {
+            this.loadData();
+        }
+        // Asignar el texto del botón si no se ha proporcionado
+        this.updateSelectedLabel();
+    }
+    ngAfterContentInit() {
+        if (this.type === 'dropdown') {
+            this.setupClickOutsideListener();
+            this.optionComponents.changes.subscribe(() => {
+                this.processOptions();
+            });
+        }
+    }
+    ngAfterViewInit() {
+        this.setupClickOutsideListener();
+        if (this.type === 'dropdown') {
+            setTimeout(() => {
+                this.processOptions();
+            });
+        }
+    }
+    ngOnChanges(changes) {
+        if (changes['options']) {
+            this.processOptions();
+        }
+    }
+    ngOnDestroy() {
+        if (this.clickOutsideListener) {
+            document.removeEventListener('click', this.clickOutsideListener);
+        }
+        if (this.searchSubscription) {
+            this.searchSubscription.unsubscribe();
+        }
+    }
+    // ======================================================
+    // Métodos
+    // ======================================================
+    // Método para procesar las opciones del dropdown
+    processOptions() {
+        this.internalOptions = [];
+        if (this.optionComponents && this.optionComponents.length > 0) {
+            this.optionComponents.forEach(option => {
+                this.internalOptions.push({
+                    value: option.value,
+                    text: option.text || 'Option'
+                });
+            });
+        }
+        else if (this.options && this.options.length > 0 && typeof this.options[0] !== 'object') {
+            this.internalOptions = this.options.map(option => ({
+                value: option,
+                text: option.toString()
+            }));
+        }
+        else if (this.options && this.options.length > 0) {
+            this.internalOptions = this.options.map(option => {
+                const text = Array.isArray(this.optionLabel)
+                    ? this.optionLabel.map(k => this.getNestedValue(option, k)).join(' ')
+                    : this.getNestedValue(option, this.optionLabel);
+                return {
+                    value: option[this.optionValue],
+                    text,
+                    original: option
+                };
+            });
+        }
+        this.filteredOptions = [...this.internalOptions];
+        this.updateSelectedLabel();
+        this.cdr.detectChanges();
+    }
+    // Actualizar la visibilidad de las columnas
+    updateColumnVisibility() {
+        if (this.type === 'multi-table') {
+            this.updateVisibility.emit(this.columns);
+        }
+    }
+    // Seleccionar una opción
+    selectOption(option) {
+        this.selectedValue = option.value;
+        this.selectedLabel = option.text;
+        this.onChange(this.selectedValue);
+        this.selectionChange.emit(option.original ?? option.value);
+        this.isColumnSelectorOpen = false;
+    }
+    // Limpiar la selección
+    clearSelection(event) {
+        event.stopPropagation();
+        this.writeValue(null);
+        this.onChange(null);
+        this.selectionChange.emit(null);
+    }
+    // Limpier el término de búsqueda
+    clearSearchTerm() {
+        this.searchTerm = '';
+        this.onSearchInput();
+    }
+    // Actualizar el texto del botón
+    updateSelectedLabel() {
+        if (this.selectedValue === null) {
+            this.selectedLabel = this.placeholder;
+            return;
+        }
+        const selectedOption = this.internalOptions.find(opt => opt.value === this.selectedValue);
+        this.selectedLabel = selectedOption ? selectedOption.text : this.placeholder;
+    }
+    // Obtener el valor anidado de un objeto
+    getNestedValue(obj, path) {
+        return path.split('.').reduce((acc, part) => acc && acc[part], obj) ?? '';
+    }
+    // ======================================================
+    // Search input service
+    // ======================================================
+    // Cargar datos desde el servicio
+    loadData() {
+        if (!this.endpoint)
+            return;
+        this.isLoading = true;
+        const params = {};
+        params['sortOrder'] = this.sort;
+        // Aplicar los filtros predeterminados enviados desde el padre
+        Object.keys(this.defaultFilters).forEach((key) => {
+            params[`filter[${key}]`] = this.defaultFilters[key];
+        });
+        // Añadir término de búsqueda a los parámetros
+        if (this.searchTerm && this.searchTerm.trim() !== '') {
+            params['search'] = this.searchTerm;
+            // Aplicar filtros de búsqueda adicionales
+            const allSearchFields = [this.optionLabel, ...this.searchFields];
+            params['searchFields'] = allSearchFields;
+        }
+        // Esperar 2s
+        // setTimeout(() => {
+        this.genericService.getAll(this.endpoint, params).subscribe({
+            next: (response) => {
+                // Procesar la respuesta según la estructura de tu API
+                const data = response.data[this.endpoint] || [];
+                this.options = data;
+                // Procesar las opciones para el dropdown
+                this.internalOptions = this.options.map(option => ({
+                    value: option[this.optionValue],
+                    text: this.resolveLabel(option),
+                    original: option
+                }));
+                this.filteredOptions = [...this.internalOptions];
+                this.isLoading = false;
+                this.updateSelectedLabel();
+                this.cdr.detectChanges();
+            },
+            error: (error) => {
+                console.error('Error fetching data:', error);
+                this.isLoading = false;
+                this.cdr.detectChanges();
+            }
+        });
+        // }, 2000);
+    }
+    // Manejar la entrada de búsqueda
+    onSearchInput() {
+        if (this.type === 'searchable') {
+            // Para el tipo searchable, enviar la búsqueda al servicio
+            this.searchSubject.next(this.searchTerm);
+        }
+        else {
+            // Para otros tipos, filtrar localmente
+            this.filterOptions();
+        }
+    }
+    // Filtrar opciones localmente
+    filterOptions() {
+        if (!this.searchTerm || this.searchTerm.trim() === '') {
+            this.filteredOptions = [...this.internalOptions];
+            return;
+        }
+        const searchTermLower = this.searchTerm.toLowerCase();
+        this.filteredOptions = this.internalOptions.filter(option => option.text.toLowerCase().includes(searchTermLower));
+    }
+    resolveLabel(option) {
+        if (Array.isArray(this.optionLabel)) {
+            return this.optionLabel
+                .map((key) => this.getNestedValue(option, key))
+                .filter(Boolean)
+                .join(this.labelSeparator); // <-- usar separador personalizado
+        }
+        return this.getNestedValue(option, this.optionLabel);
+    }
+    // ======================================================
+    // Elemento
+    // ======================================================
+    // Abrir o cerrar el dropdown
+    toggleColumnSelector() {
+        if (this.disabled)
+            return;
+        this.isColumnSelectorOpen = !this.isColumnSelectorOpen;
+        if (this.isColumnSelectorOpen) {
+            this.onTouched();
+            this.updateDropdownPosition();
+            // Cargar datos cuando se abre el dropdown si es de tipo searchable
+            if (this.type === 'searchable' && !this.loadOnInit && this.shouldTriggerLoad()) {
+                this.loadData();
+            }
+        }
+    }
+    // Detectar clicks fuera del componente
+    setupClickOutsideListener() {
+        this.clickOutsideListener = (event) => {
+            const clickedElement = event.target;
+            const isOutsideDropdown = !this.elementRef.nativeElement.contains(clickedElement);
+            if (this.isColumnSelectorOpen && isOutsideDropdown) {
+                this.isColumnSelectorOpen = false;
+                this.cdr.detectChanges();
+            }
+        };
+        document.addEventListener('click', this.clickOutsideListener);
+    }
+    // Obtener el ancho del botón
+    getSelectButtonWidth() {
+        if (this.selectButton) {
+            const width = this.selectButton.nativeElement.offsetWidth;
+            return `${width}px`;
+        }
+        return '250px'; // Default fallback width
+    }
+    // Actualizar la posición del dropdown
+    updateDropdownPosition() {
+        setTimeout(() => {
+            if (!this.selectButton)
+                return;
+            // Get button position
+            const button = this.selectButton.nativeElement;
+            const buttonRect = button.getBoundingClientRect();
+            // Find the closest form container or dialog
+            let offsetParent = this.selectButton.nativeElement;
+            let isInSidebar = false;
+            // Check if we're inside a sidebar form
+            while (offsetParent &&
+                !offsetParent.classList.contains("content_form") &&
+                !offsetParent.classList.contains("p-dialog")) {
+                if (offsetParent.classList.contains("fixed") && offsetParent.classList.contains("right-0")) {
+                    isInSidebar = true;
+                    break;
+                }
+                offsetParent = offsetParent.parentElement;
+            }
+            // Get offsets based on container
+            let offsetTop = 0;
+            let offsetLeft = 0;
+            if (isInSidebar ||
+                (offsetParent &&
+                    (offsetParent.classList.contains("content_form") || offsetParent.classList.contains("p-dialog")))) {
+                offsetTop = offsetParent ? offsetParent.getBoundingClientRect().top : 0;
+                offsetLeft = offsetParent ? offsetParent.getBoundingClientRect().left : 0;
+            }
+            // Position directly below the button by default
+            this.dropdownTop = buttonRect.bottom - offsetTop;
+            this.dropdownLeft = buttonRect.left - offsetLeft;
+            this.dropdownWidth = buttonRect.width;
+            this.cdr.detectChanges();
+            // Wait for dropdown to be in DOM
+            setTimeout(() => {
+                // Get dropdown element
+                const dropdown = this.elementRef.nativeElement.querySelector(".absolute.z-\\[100\\]");
+                if (!dropdown)
+                    return;
+                // First use fixed positioning to handle scroll position correctly
+                dropdown.style.position = 'fixed';
+                dropdown.style.top = buttonRect.bottom + 'px';
+                dropdown.style.left = buttonRect.left + 'px';
+                dropdown.style.width = buttonRect.width + 'px';
+                dropdown.style.zIndex = '100';
+                // Wait for dropdown to render with fixed positioning
+                setTimeout(() => {
+                    // Get dropdown dimensions
+                    const dropdownRect = dropdown.getBoundingClientRect();
+                    const viewportHeight = window.innerHeight;
+                    const documentWidth = document.documentElement.clientWidth;
+                    // Determine if we need to flip or adjust position
+                    let newFixedTop = buttonRect.bottom;
+                    let newFixedLeft = buttonRect.left;
+                    // Check if dropdown goes below viewport and flip it if needed
+                    if (buttonRect.bottom + dropdownRect.height > viewportHeight) {
+                        newFixedTop = buttonRect.top - dropdownRect.height;
+                    }
+                    // Check if dropdown goes beyond right edge
+                    if (buttonRect.left + dropdownRect.width > documentWidth) {
+                        newFixedLeft = buttonRect.left - dropdownRect.width + buttonRect.width;
+                        if (newFixedLeft < 0) {
+                            newFixedLeft = 5;
+                            if (dropdownRect.width > documentWidth) {
+                                dropdown.classList.add("constrain-width");
+                            }
+                        }
+                    }
+                    // Apply adjusted fixed position
+                    dropdown.style.top = newFixedTop - 5 + 'px';
+                    dropdown.style.left = newFixedLeft - 15 + 'px';
+                    // Es boton de filtro
+                    if (this.isFilterSelect) {
+                        setTimeout(() => {
+                            // Calculate absolute position based on the current fixed position
+                            let newAbsoluteTop;
+                            let newAbsoluteLeft;
+                            if (newFixedTop === buttonRect.bottom) {
+                                // Dropdown is below the button
+                                newAbsoluteTop = this.dropdownTop;
+                            }
+                            else {
+                                // Dropdown is above the button (flipped)
+                                newAbsoluteTop = buttonRect.top - dropdownRect.height - offsetTop;
+                            }
+                            if (newFixedLeft === buttonRect.left) {
+                                // Dropdown is aligned with left edge of button
+                                newAbsoluteLeft = this.dropdownLeft;
+                            }
+                            else if (newFixedLeft === buttonRect.left - dropdownRect.width + buttonRect.width) {
+                                // Dropdown is aligned with right edge of button
+                                newAbsoluteLeft = buttonRect.left - dropdownRect.width + buttonRect.width - offsetLeft;
+                            }
+                            else {
+                                // Dropdown is at a fixed position from left edge
+                                newAbsoluteLeft = newFixedLeft;
+                            }
+                            // Switch to absolute positioning
+                            dropdown.style.position = 'absolute';
+                            dropdown.style.top = newAbsoluteTop + 'px';
+                            dropdown.style.left = newAbsoluteLeft - 2 + 'px';
+                            // Update internal state
+                            this.dropdownTop = newAbsoluteTop;
+                            this.dropdownLeft = newAbsoluteLeft;
+                            this.cdr.detectChanges();
+                        }, 0);
+                    }
+                    else {
+                        // After positioning is done, switch to absolute positioning
+                        setTimeout(() => {
+                            // Get the current visual position of the dropdown (relative to viewport)
+                            const dropdownRect = dropdown.getBoundingClientRect();
+                            // Find the dropdown's offset parent for absolute positioning
+                            const dropdownOffsetParent = this.findPositionedParent(dropdown) || document.body;
+                            const parentRect = dropdownOffsetParent.getBoundingClientRect();
+                            // Calculate absolute position that will maintain the same visual position
+                            // Absolute positioning is relative to the offset parent
+                            const absoluteTop = dropdownRect.top - parentRect.top + dropdownOffsetParent.scrollTop;
+                            const absoluteLeft = dropdownRect.left - parentRect.left + dropdownOffsetParent.scrollLeft;
+                            // Switch to absolute positioning with calculated coordinates
+                            dropdown.style.position = 'absolute';
+                            dropdown.style.top = absoluteTop + 'px';
+                            dropdown.style.left = absoluteLeft + 'px';
+                            // Update internal state
+                            this.dropdownTop = absoluteTop;
+                            this.dropdownLeft = absoluteLeft;
+                            this.cdr.detectChanges();
+                        }, 0);
+                    }
+                }, 0);
+            }, 0);
+        });
+    }
+    // Helper method to find the offset parent for absolute positioning
+    findPositionedParent(element) {
+        if (!element)
+            return null;
+        let parent = element.parentElement;
+        while (parent) {
+            const position = window.getComputedStyle(parent).position;
+            if (position === 'relative' || position === 'absolute' || position === 'fixed') {
+                return parent;
+            }
+            parent = parent.parentElement;
+        }
+        return document.body; // Default to body if no positioned parent found
+    }
+    // Leer el valor seleccionado
+    writeValue(value) {
+        this.selectedValue = value;
+        // Si las opciones ya están cargadas, intenta mostrar el label ahora mismo
+        if (this.internalOptions.length > 0) {
+            this.updateSelectedLabel();
+        }
+        // Si no hay opciones cargadas aún, espera a que se carguen en loadData()
+        this.cdr.markForCheck();
+    }
+    // ================================================
+    // Registrar cambios
+    // ================================================
+    // Registrar el cambio del valor seleccionado
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    // Registrar el evento de tocar
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    // Cargar elementos del searhable cuando es necesario
+    shouldTriggerLoad() {
+        const isSearchActive = this.searchTerm && this.searchTerm.trim() !== '';
+        const isInitialState = this.selectedValue === null;
+        return isSearchActive || isInitialState;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: JSelectComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: JGenericService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: JSelectComponent, isStandalone: true, selector: "JSelect", inputs: { type: "type", btnIcon: "btnIcon", btnText: "btnText", title: "title", placeholder: "placeholder", showClear: "showClear", columns: "columns", options: "options", optionLabel: "optionLabel", optionValue: "optionValue", labelSeparator: "labelSeparator", isLoading: "isLoading", endpoint: "endpoint", loadOnInit: "loadOnInit", defaultFilters: "defaultFilters", searchFields: "searchFields", isSearch: "isSearch", isFilterSelect: "isFilterSelect", sort: "sort", disabled: "disabled" }, outputs: { updateVisibility: "updateVisibility", selectionChange: "selectionChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: JSelectComponent,
+                multi: true,
+            }
+        ], queries: [{ propertyName: "optionComponents", predicate: OptionComponent }], viewQueries: [{ propertyName: "selectButton", first: true, predicate: ["selectButton"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"relative w-full h-full\">\r\n    <!-- Bot\u00F3n para multi-checkbox -->\r\n    @if (type === 'multi-table') {\r\n    <div #selectButton class=\"min-w-[40px]\">\r\n        <JButton (clicked)=\"toggleColumnSelector()\" classes=\"secondary\" [icon]=\"btnIcon\">{{btnText}}</JButton>\r\n    </div>\r\n    }\r\n\r\n    <!-- Bot\u00F3n para dropdown -->\r\n    @if (type === 'dropdown' || type === 'searchable') {\r\n    <div #selectButton class=\"w-auto\">\r\n        <button type=\"button\" [disabled]=\"disabled || isLoading\" (click)=\"toggleColumnSelector()\"\r\n            class=\"flex w-full h-[40px] items-center justify-between px-3 py-2 text-sm bg-background dark:bg-dark-background border border-border dark:border-dark-border rounded focus:outline-none focus:ring-2 focus:ring-primary select-none\" [ngClass]=\"{\r\n                'opacity-50 cursor-not-allowed pointer-events-none': disabled || isLoading\r\n              }\"\r\n            >\r\n            <span class=\"truncate text-black dark:text-white\"\r\n                [ngClass]=\"{'opacity-50' : selectedValue === null}\">{{selectedLabel}}</span>\r\n            <div class=\"flex items-center\">\r\n                @if (showClear && selectedValue !== null) {\r\n                <button type=\"button\" (click)=\"clearSelection($event)\"\r\n                    class=\"pr-1 mr-1 text-gray-400 hover:text-gray-600 focus:outline-none cursor-pointer\">\r\n                    <lucide-icon [name]=\"icons['x']\" size=\"14\"></lucide-icon>\r\n                </button>\r\n                }\r\n\r\n                @if (!isLoading) {\r\n                    <lucide-icon [name]=\"icons['chevronDown']\" size=\"16\" class=\"transition duration-300 ease-in-out text-gray-400\" [ngClass]=\"{'rotate-180': isColumnSelectorOpen}\"></lucide-icon>\r\n                } @else {\r\n                    <lucide-icon [name]=\"icons['loading']\" size=\"16\" class=\"text-gray-400 animate-spin\"></lucide-icon>\r\n                }\r\n            </div>\r\n        </button>\r\n    </div>\r\n    }\r\n</div>\r\n\r\n<!-- Dropdown positioned outside the flow -->\r\n@if (isColumnSelectorOpen) {\r\n<div @modalTransition\r\n    class=\"absolute z-[100] min-w-[250px] mt-1 bg-background dark:bg-dark-background rounded-lg shadow-lg border border-border border-dark-border\"\r\n    [ngClass]=\"{'max-w-[250px]' :type === 'multi-table' }\" \r\n    [style.width.px]=\"dropdownWidth\"\r\n    [style.top.px]=\"dropdownTop\" \r\n    [style.left.px]=\"dropdownLeft\"\r\n    >\r\n    <div class=\"pt-1 pl-3 pr-3 pb-3\">\r\n        <div class=\"text-[10px] font-medium text-gray-500 dark:text-gray-500 mb-1\">{{title}}</div>\r\n\r\n        <!-- Campo de b\u00FAsqueda para tipo searchable -->\r\n        @if (type === 'searchable' && isSearch) {\r\n        <div class=\"mb-2 relative\">\r\n            <input \r\n                type=\"text\" \r\n                [(ngModel)]=\"searchTerm\" \r\n                (input)=\"onSearchInput()\"\r\n                placeholder=\"Buscar...\" \r\n                class=\"text-black dark:text-white w-full px-3 py-2 text-sm border border-border dark:border-dark-border rounded focus:outline-none focus:ring-2 focus:ring-primary\"\r\n            />\r\n\r\n            <div class=\"absolute flex right-3 top-1/2 transform -translate-y-1/2 \">\r\n                @if (searchTerm) {\r\n                <button type=\"button\" (click)=\"clearSearchTerm()\" class=\"pr-1 mr-1 text-gray-400 hover:text-gray-600 focus:outline-none cursor-pointer\">\r\n                    <lucide-icon [name]=\"icons['x']\" size=\"16\"></lucide-icon>\r\n                </button>\r\n                }\r\n\r\n                <lucide-icon \r\n                    [name]=\"icons['search']\" \r\n                    size=\"16\" \r\n                    class=\"text-gray-400\">\r\n                </lucide-icon>\r\n            </div>\r\n\r\n        </div>\r\n        }\r\n\r\n        <!-- Multi-checkbox para columnas -->\r\n        <div class=\"max-h-60 overflow-auto flex flex-col gap-1 scroll-element\">\r\n            @if (type === 'multi-table') {\r\n            @for (column of columns; track column.key) {\r\n            <div onKeyDown\r\n                class=\"flex gap-5 items-center border border-accent dark:border-dark-accent/50 px-4 py-2 cursor-pointer group rounded-md transition-all hover:bg-accent dark:hover:bg-dark-accent/50\"\r\n                [ngClass]=\"{'bg-accent dark:bg-dark-accent/50' : column.visible}\"\r\n                (click)=\"column.visible = !column.visible; updateColumnVisibility()\">\r\n\r\n                <!-- Checkbox oculto -->\r\n                <input type=\"checkbox\" [id]=\"'col-' + column.key\" [(ngModel)]=\"column.visible\" class=\"hidden\">\r\n\r\n                <!-- \u00CDcono Check Visible Solo al Seleccionar -->\r\n                <lucide-icon [name]=\"icons['check']\" size=\"15\" class=\"transition text-gray-400\"\r\n                    [ngClass]=\"{'opacity-100 text-white': column.visible, 'opacity-0': !column.visible}\">\r\n                </lucide-icon>\r\n\r\n                <!-- Etiqueta con Efectos de Hover e Iluminaci\u00F3n -->\r\n                <label [for]=\"'col-' + column.key\" class=\"text-black dark:text-white text-sm font-medium w-full\">\r\n                    {{ column.label }}\r\n                </label>\r\n            </div>\r\n            }\r\n            @if (columns.length === 0) {\r\n                <div class=\"px-3 py-2 text-sm text-gray-500\">No hay opciones disponibles</div>\r\n            }\r\n            }\r\n        </div>\r\n\r\n        <!-- Dropdown con opciones -->\r\n        @if (type === 'dropdown' || type === 'searchable') {\r\n        <div class=\"max-h-40 overflow-x-hidden overflow-y-auto flex flex-col gap-1 scroll-element\">\r\n            @if (isLoading) {\r\n                <div class=\"flex gap-3 text-black/50 dark:text-white/50 items-center justify-center py-4\">\r\n                    <lucide-icon [name]=\"icons['loading']\" size=\"20\" class=\"animate-spin\"></lucide-icon>\r\n                    Cargando...\r\n                </div>\r\n            } @else {\r\n                @for (option of filteredOptions; track option.value) {\r\n                <div onKeyDown (click)=\"selectOption(option)\"\r\n                    class=\"px-3 py-2 rounded text-sm cursor-pointer text-black! dark:text-white! hover:bg-accent hover:dark:bg-dark-accent/50\"\r\n                    [ngClass]=\"{'bg-accent dark:bg-dark-accent/50': selectedValue === option.value, 'text-black': selectedValue === option.value}\">\r\n                    <div class=\"flex items-center break-all whitespace-normal overflow-hidden\">\r\n                        {{option.text}}\r\n                    </div>\r\n                </div>\r\n                }\r\n                @if (filteredOptions.length === 0) {\r\n                <div class=\"px-3 py-2 text-sm text-gray-500\">No hay opciones disponibles</div>\r\n                }\r\n            }\r\n        </div>\r\n        }\r\n    </div>\r\n</div>\r\n}", styles: [""], dependencies: [{ 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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }], animations: [
+            trigger("modalTransition", [
+                transition(":enter", [
+                    style({ transform: "translateX(1rem)", opacity: 0 }),
+                    animate("300ms ease-out", style({ transform: "translateY(0)", opacity: 1 })),
+                ]),
+                transition(":leave", [
+                    animate("150ms ease-in", style({ transform: "translateX(1rem)", opacity: 0 })),
+                ]),
+            ]),
+        ] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: JSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'JSelect', standalone: true, imports: [LucideAngularModule, JButtonComponent, CommonModule, FormsModule, ReactiveFormsModule], animations: [
+                        trigger("modalTransition", [
+                            transition(":enter", [
+                                style({ transform: "translateX(1rem)", opacity: 0 }),
+                                animate("300ms ease-out", style({ transform: "translateY(0)", opacity: 1 })),
+                            ]),
+                            transition(":leave", [
+                                animate("150ms ease-in", style({ transform: "translateX(1rem)", opacity: 0 })),
+                            ]),
+                        ]),
+                    ], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: JSelectComponent,
+                            multi: true,
+                        }
+                    ], template: "<div class=\"relative w-full h-full\">\r\n    <!-- Bot\u00F3n para multi-checkbox -->\r\n    @if (type === 'multi-table') {\r\n    <div #selectButton class=\"min-w-[40px]\">\r\n        <JButton (clicked)=\"toggleColumnSelector()\" classes=\"secondary\" [icon]=\"btnIcon\">{{btnText}}</JButton>\r\n    </div>\r\n    }\r\n\r\n    <!-- Bot\u00F3n para dropdown -->\r\n    @if (type === 'dropdown' || type === 'searchable') {\r\n    <div #selectButton class=\"w-auto\">\r\n        <button type=\"button\" [disabled]=\"disabled || isLoading\" (click)=\"toggleColumnSelector()\"\r\n            class=\"flex w-full h-[40px] items-center justify-between px-3 py-2 text-sm bg-background dark:bg-dark-background border border-border dark:border-dark-border rounded focus:outline-none focus:ring-2 focus:ring-primary select-none\" [ngClass]=\"{\r\n                'opacity-50 cursor-not-allowed pointer-events-none': disabled || isLoading\r\n              }\"\r\n            >\r\n            <span class=\"truncate text-black dark:text-white\"\r\n                [ngClass]=\"{'opacity-50' : selectedValue === null}\">{{selectedLabel}}</span>\r\n            <div class=\"flex items-center\">\r\n                @if (showClear && selectedValue !== null) {\r\n                <button type=\"button\" (click)=\"clearSelection($event)\"\r\n                    class=\"pr-1 mr-1 text-gray-400 hover:text-gray-600 focus:outline-none cursor-pointer\">\r\n                    <lucide-icon [name]=\"icons['x']\" size=\"14\"></lucide-icon>\r\n                </button>\r\n                }\r\n\r\n                @if (!isLoading) {\r\n                    <lucide-icon [name]=\"icons['chevronDown']\" size=\"16\" class=\"transition duration-300 ease-in-out text-gray-400\" [ngClass]=\"{'rotate-180': isColumnSelectorOpen}\"></lucide-icon>\r\n                } @else {\r\n                    <lucide-icon [name]=\"icons['loading']\" size=\"16\" class=\"text-gray-400 animate-spin\"></lucide-icon>\r\n                }\r\n            </div>\r\n        </button>\r\n    </div>\r\n    }\r\n</div>\r\n\r\n<!-- Dropdown positioned outside the flow -->\r\n@if (isColumnSelectorOpen) {\r\n<div @modalTransition\r\n    class=\"absolute z-[100] min-w-[250px] mt-1 bg-background dark:bg-dark-background rounded-lg shadow-lg border border-border border-dark-border\"\r\n    [ngClass]=\"{'max-w-[250px]' :type === 'multi-table' }\" \r\n    [style.width.px]=\"dropdownWidth\"\r\n    [style.top.px]=\"dropdownTop\" \r\n    [style.left.px]=\"dropdownLeft\"\r\n    >\r\n    <div class=\"pt-1 pl-3 pr-3 pb-3\">\r\n        <div class=\"text-[10px] font-medium text-gray-500 dark:text-gray-500 mb-1\">{{title}}</div>\r\n\r\n        <!-- Campo de b\u00FAsqueda para tipo searchable -->\r\n        @if (type === 'searchable' && isSearch) {\r\n        <div class=\"mb-2 relative\">\r\n            <input \r\n                type=\"text\" \r\n                [(ngModel)]=\"searchTerm\" \r\n                (input)=\"onSearchInput()\"\r\n                placeholder=\"Buscar...\" \r\n                class=\"text-black dark:text-white w-full px-3 py-2 text-sm border border-border dark:border-dark-border rounded focus:outline-none focus:ring-2 focus:ring-primary\"\r\n            />\r\n\r\n            <div class=\"absolute flex right-3 top-1/2 transform -translate-y-1/2 \">\r\n                @if (searchTerm) {\r\n                <button type=\"button\" (click)=\"clearSearchTerm()\" class=\"pr-1 mr-1 text-gray-400 hover:text-gray-600 focus:outline-none cursor-pointer\">\r\n                    <lucide-icon [name]=\"icons['x']\" size=\"16\"></lucide-icon>\r\n                </button>\r\n                }\r\n\r\n                <lucide-icon \r\n                    [name]=\"icons['search']\" \r\n                    size=\"16\" \r\n                    class=\"text-gray-400\">\r\n                </lucide-icon>\r\n            </div>\r\n\r\n        </div>\r\n        }\r\n\r\n        <!-- Multi-checkbox para columnas -->\r\n        <div class=\"max-h-60 overflow-auto flex flex-col gap-1 scroll-element\">\r\n            @if (type === 'multi-table') {\r\n            @for (column of columns; track column.key) {\r\n            <div onKeyDown\r\n                class=\"flex gap-5 items-center border border-accent dark:border-dark-accent/50 px-4 py-2 cursor-pointer group rounded-md transition-all hover:bg-accent dark:hover:bg-dark-accent/50\"\r\n                [ngClass]=\"{'bg-accent dark:bg-dark-accent/50' : column.visible}\"\r\n                (click)=\"column.visible = !column.visible; updateColumnVisibility()\">\r\n\r\n                <!-- Checkbox oculto -->\r\n                <input type=\"checkbox\" [id]=\"'col-' + column.key\" [(ngModel)]=\"column.visible\" class=\"hidden\">\r\n\r\n                <!-- \u00CDcono Check Visible Solo al Seleccionar -->\r\n                <lucide-icon [name]=\"icons['check']\" size=\"15\" class=\"transition text-gray-400\"\r\n                    [ngClass]=\"{'opacity-100 text-white': column.visible, 'opacity-0': !column.visible}\">\r\n                </lucide-icon>\r\n\r\n                <!-- Etiqueta con Efectos de Hover e Iluminaci\u00F3n -->\r\n                <label [for]=\"'col-' + column.key\" class=\"text-black dark:text-white text-sm font-medium w-full\">\r\n                    {{ column.label }}\r\n                </label>\r\n            </div>\r\n            }\r\n            @if (columns.length === 0) {\r\n                <div class=\"px-3 py-2 text-sm text-gray-500\">No hay opciones disponibles</div>\r\n            }\r\n            }\r\n        </div>\r\n\r\n        <!-- Dropdown con opciones -->\r\n        @if (type === 'dropdown' || type === 'searchable') {\r\n        <div class=\"max-h-40 overflow-x-hidden overflow-y-auto flex flex-col gap-1 scroll-element\">\r\n            @if (isLoading) {\r\n                <div class=\"flex gap-3 text-black/50 dark:text-white/50 items-center justify-center py-4\">\r\n                    <lucide-icon [name]=\"icons['loading']\" size=\"20\" class=\"animate-spin\"></lucide-icon>\r\n                    Cargando...\r\n                </div>\r\n            } @else {\r\n                @for (option of filteredOptions; track option.value) {\r\n                <div onKeyDown (click)=\"selectOption(option)\"\r\n                    class=\"px-3 py-2 rounded text-sm cursor-pointer text-black! dark:text-white! hover:bg-accent hover:dark:bg-dark-accent/50\"\r\n                    [ngClass]=\"{'bg-accent dark:bg-dark-accent/50': selectedValue === option.value, 'text-black': selectedValue === option.value}\">\r\n                    <div class=\"flex items-center break-all whitespace-normal overflow-hidden\">\r\n                        {{option.text}}\r\n                    </div>\r\n                </div>\r\n                }\r\n                @if (filteredOptions.length === 0) {\r\n                <div class=\"px-3 py-2 text-sm text-gray-500\">No hay opciones disponibles</div>\r\n                }\r\n            }\r\n        </div>\r\n        }\r\n    </div>\r\n</div>\r\n}" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: JGenericService }], propDecorators: { type: [{
+                type: Input
+            }], btnIcon: [{
+                type: Input
+            }], btnText: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], showClear: [{
+                type: Input
+            }], columns: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], optionLabel: [{
+                type: Input
+            }], optionValue: [{
+                type: Input
+            }], labelSeparator: [{
+                type: Input
+            }], isLoading: [{
+                type: Input
+            }], endpoint: [{
+                type: Input
+            }], loadOnInit: [{
+                type: Input
+            }], defaultFilters: [{
+                type: Input
+            }], searchFields: [{
+                type: Input
+            }], isSearch: [{
+                type: Input
+            }], isFilterSelect: [{
+                type: Input
+            }], sort: [{
+                type: Input
+            }], updateVisibility: [{
+                type: Output
+            }], selectionChange: [{
+                type: Output
+            }], optionComponents: [{
+                type: ContentChildren,
+                args: [OptionComponent]
+            }], selectButton: [{
+                type: ViewChild,
+                args: ['selectButton']
+            }], disabled: [{
+                type: Input
+            }] } });
+
+class JToggleRadioComponent {
+    genericService;
+    icons = {
+        loading: Loader2,
+    };
+    options = [];
+    optionLabel = 'label'; // Propiedad anidada para label
+    optionValue = 'value'; // Propiedad para value
+    endpoint = '';
+    loadOnInit = false;
+    defaultFilters = {};
+    showClear = false;
+    classes = '';
+    classesElement = '';
+    disabled = false;
+    sort = 'ASC';
+    selectFirstOnLoad = false;
+    selectionChange = new EventEmitter();
+    internalOptions = [];
+    selectedValue = null;
+    isLoading = false;
+    constructor(genericService) {
+        this.genericService = genericService;
+    }
+    ngOnInit() {
+        if (this.endpoint && this.loadOnInit) {
+            this.loadOptionsFromApi();
+        }
+        else {
+            this.processOptions();
+        }
+    }
+    isComponentDisabled = false;
+    setDisabledState(isDisabled) {
+        this.isComponentDisabled = isDisabled;
+    }
+    // Cargar opciones desde el API
+    loadOptionsFromApi() {
+        this.isLoading = true;
+        const params = {};
+        params['sortOrder'] = this.sort;
+        Object.keys(this.defaultFilters).forEach((key) => {
+            params[`filter[${key}]`] = this.defaultFilters[key];
+        });
+        this.genericService.getAll(this.endpoint, params).subscribe({
+            next: (res) => {
+                const data = res.data[this.endpoint] || [];
+                this.options = data;
+                this.processOptions();
+                this.isLoading = false;
+                // Si el parámetro selectFirstOnLoad es true, seleccionar el primer elemento
+                if (this.selectFirstOnLoad && this.internalOptions.length > 0) {
+                    this.selectedValue = this.internalOptions[0].value;
+                    this.onChange(this.selectedValue);
+                    this.selectionChange.emit(this.selectedValue);
+                }
+            },
+            error: () => (this.isLoading = false),
+        });
+    }
+    // Función para obtener valores anidados de un objeto
+    getNestedValue(obj, path) {
+        return path.split('.').reduce((acc, part) => acc && acc[part], obj) ?? '';
+    }
+    // Procesar opciones para tener el valor y el label
+    processOptions() {
+        if (this.options.length > 0 && typeof this.options[0] === 'object') {
+            this.internalOptions = this.options.map((opt) => ({
+                value: opt[this.optionValue],
+                label: this.getNestedValue(opt, this.optionLabel), // Usar la función para obtener propiedades anidadas
+            }));
+        }
+        else {
+            this.internalOptions = this.options.map((opt) => ({
+                value: opt,
+                label: opt.toString(),
+            }));
+        }
+    }
+    select(value) {
+        if (this.disabled || this.isComponentDisabled)
+            return;
+        this.selectedValue = value;
+        this.onChange(this.selectedValue);
+        this.selectionChange.emit(this.selectedValue);
+    }
+    clear() {
+        this.selectedValue = null;
+        this.onChange(null);
+        this.selectionChange.emit(null);
+    }
+    // ControlValueAccessor
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(value) {
+        this.selectedValue = value;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    // Método para recargar las opciones cuando cambia el filtro
+    reloadOptions() {
+        this.loadOptionsFromApi(); // Recargar las opciones con los nuevos filtros
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: JToggleRadioComponent, deps: [{ token: JGenericService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: JToggleRadioComponent, isStandalone: true, selector: "JToggleRadio", inputs: { options: "options", optionLabel: "optionLabel", optionValue: "optionValue", endpoint: "endpoint", loadOnInit: "loadOnInit", defaultFilters: "defaultFilters", showClear: "showClear", classes: "classes", classesElement: "classesElement", disabled: "disabled", sort: "sort", selectFirstOnLoad: "selectFirstOnLoad" }, outputs: { selectionChange: "selectionChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => JToggleRadioComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: "@if (internalOptions.length > 0) {\r\n<div class=\"flex rounded-md overflow-hidden border border-border dark:border-dark-border text-sm min-h-[40px] select-none\" [ngClass]=\"{ 'opacity-50': disabled || isComponentDisabled }\" [class]=\"classes\">\r\n    <ng-container>\r\n        @for (opt of internalOptions; track $index) {\r\n            <button\r\n              type=\"button\"\r\n              [disabled]=\"disabled || isComponentDisabled\"\r\n              (click)=\"select(opt.value)\"\r\n              [ngClass]=\"{\r\n                'bg-primary dark:bg-dark-primary text-white': selectedValue === opt.value,\r\n                'bg-background dark:bg-dark-background hover:bg-muted/80 hover:dark:bg-dark-muted/30 text-gray-700 dark:text-white': selectedValue !== opt.value,\r\n                'cursor-not-allowed pointer-events-none': disabled || isComponentDisabled\r\n              }\"\r\n              class=\"w-full py-2 px-4 font-medium border-r border-border last:border-none focus:outline-none transition-colors duration-200 ease-in-out cursor-pointer\"\r\n              [class]=\"classesElement\"\r\n              >\r\n              {{ opt.label }}\r\n            </button>\r\n          }\r\n          \r\n    </ng-container>\r\n</div>\r\n} @else if (isLoading) {\r\n<div class=\"flex gap-2 items-center justify-center rounded-md overflow-hidden border border-border dark:border-dark-border h-[40px]\">\r\n    <lucide-icon [name]=\"icons['loading']\" [size]=\"15\" class=\"text-gray-400 animate-spin\" />\r\n    <span>Cargando...</span>\r\n</div>  \r\n}@else {\r\n<div class=\"flex items-center justify-center rounded-md overflow-hidden border border-border dark:border-dark-border h-[40px]\">\r\n    No hay opciones\r\n</div>  \r\n}\r\n  \r\n<!-- Clear button -->\r\n@if (showClear && selectedValue !== null) {\r\n    <div class=\"mt-2\">\r\n      <button \r\n        type=\"button\" \r\n        (click)=\"clear()\" \r\n        [disabled]=\"disabled || isComponentDisabled\"\r\n        class=\"text-xs text-red-500 underline disabled:opacity-50 disabled:cursor-not-allowed\">\r\n        Limpiar selecci\u00F3n\r\n      </button>\r\n    </div>\r\n  }\r\n  ", styles: [""], dependencies: [{ 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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: JToggleRadioComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'JToggleRadio', imports: [LucideAngularModule, CommonModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => JToggleRadioComponent),
+                            multi: true,
+                        },
+                    ], template: "@if (internalOptions.length > 0) {\r\n<div class=\"flex rounded-md overflow-hidden border border-border dark:border-dark-border text-sm min-h-[40px] select-none\" [ngClass]=\"{ 'opacity-50': disabled || isComponentDisabled }\" [class]=\"classes\">\r\n    <ng-container>\r\n        @for (opt of internalOptions; track $index) {\r\n            <button\r\n              type=\"button\"\r\n              [disabled]=\"disabled || isComponentDisabled\"\r\n              (click)=\"select(opt.value)\"\r\n              [ngClass]=\"{\r\n                'bg-primary dark:bg-dark-primary text-white': selectedValue === opt.value,\r\n                'bg-background dark:bg-dark-background hover:bg-muted/80 hover:dark:bg-dark-muted/30 text-gray-700 dark:text-white': selectedValue !== opt.value,\r\n                'cursor-not-allowed pointer-events-none': disabled || isComponentDisabled\r\n              }\"\r\n              class=\"w-full py-2 px-4 font-medium border-r border-border last:border-none focus:outline-none transition-colors duration-200 ease-in-out cursor-pointer\"\r\n              [class]=\"classesElement\"\r\n              >\r\n              {{ opt.label }}\r\n            </button>\r\n          }\r\n          \r\n    </ng-container>\r\n</div>\r\n} @else if (isLoading) {\r\n<div class=\"flex gap-2 items-center justify-center rounded-md overflow-hidden border border-border dark:border-dark-border h-[40px]\">\r\n    <lucide-icon [name]=\"icons['loading']\" [size]=\"15\" class=\"text-gray-400 animate-spin\" />\r\n    <span>Cargando...</span>\r\n</div>  \r\n}@else {\r\n<div class=\"flex items-center justify-center rounded-md overflow-hidden border border-border dark:border-dark-border h-[40px]\">\r\n    No hay opciones\r\n</div>  \r\n}\r\n  \r\n<!-- Clear button -->\r\n@if (showClear && selectedValue !== null) {\r\n    <div class=\"mt-2\">\r\n      <button \r\n        type=\"button\" \r\n        (click)=\"clear()\" \r\n        [disabled]=\"disabled || isComponentDisabled\"\r\n        class=\"text-xs text-red-500 underline disabled:opacity-50 disabled:cursor-not-allowed\">\r\n        Limpiar selecci\u00F3n\r\n      </button>\r\n    </div>\r\n  }\r\n  " }]
+        }], ctorParameters: () => [{ type: JGenericService }], propDecorators: { options: [{
+                type: Input
+            }], optionLabel: [{
+                type: Input
+            }], optionValue: [{
+                type: Input
+            }], endpoint: [{
+                type: Input
+            }], loadOnInit: [{
+                type: Input
+            }], defaultFilters: [{
+                type: Input
+            }], showClear: [{
+                type: Input
+            }], classes: [{
+                type: Input
+            }], classesElement: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], sort: [{
+                type: Input
+            }], selectFirstOnLoad: [{
+                type: Input
+            }], selectionChange: [{
+                type: Output
+            }] } });
+
+class ThemeService {
+    _theme = signal('light');
+    themeSignal = this._theme.asReadonly();
+    constructor() {
+        this.initializeTheme();
+        this.listenToExternalChanges(); // 👈 importante
+    }
+    initializeTheme() {
+        const savedTheme = localStorage.getItem('theme');
+        if (savedTheme) {
+            this._theme.set(savedTheme);
+        }
+        else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            this._theme.set('dark');
+        }
+        this.applyTheme();
+    }
+    listenToExternalChanges() {
+        window.addEventListener('storage', (event) => {
+            if (event.key === 'theme' && event.newValue) {
+                const newTheme = event.newValue;
+                this._theme.set(newTheme);
+                this.applyTheme();
+            }
+        });
+    }
+    applyTheme() {
+        const current = this._theme();
+        document.documentElement.classList.toggle('dark', current === 'dark');
+    }
+    toggleTheme() {
+        const newTheme = this._theme() === 'light' ? 'dark' : 'light';
+        localStorage.setItem('theme', newTheme);
+        this._theme.set(newTheme);
+        this.applyTheme();
+    }
+    setTheme(theme) {
+        localStorage.setItem('theme', theme);
+        this._theme.set(theme);
+        this.applyTheme();
+    }
+    getThemeMode() {
+        return this._theme();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ThemeService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ThemeService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+class JContentFormComponent {
+    columns = 1;
+    rows = false;
+    getClasses() {
+        if (this.rows)
+            return 'flex flex-row gap-3 items-center';
+        const base = 'grid gap-2';
+        const columnClassMap = {
+            1: 'flex flex-col gap-1',
+            2: 'grid-cols-1 sm:grid-cols-2',
+            3: 'grid-cols-1 sm:grid-cols-3',
+            4: 'grid-cols-1 sm:grid-cols-4',
+            5: 'grid-cols-1 sm:grid-cols-5',
+            6: 'grid-cols-1 sm:grid-cols-6',
+        };
+        return `${base} ${columnClassMap[this.columns] || columnClassMap[1]}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: JContentFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: JContentFormComponent, isStandalone: true, selector: "JContentForm", inputs: { columns: "columns", rows: "rows" }, ngImport: i0, template: "<div [ngClass]=\"getClasses()\">\r\n    <ng-content></ng-content>\r\n</div>", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: JContentFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'JContentForm', imports: [NgClass], template: "<div [ngClass]=\"getClasses()\">\r\n    <ng-content></ng-content>\r\n</div>" }]
+        }], propDecorators: { columns: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }] } });
+
+class JThemeComponent {
+    themeService = inject(ThemeService);
+    icons = {
+        copy: Copy,
+        check: Check,
+        sun: Sun,
+        moon: Moon,
+    };
+    // Color picker state
+    baseColor = '#415884';
+    saturation = 34.01;
+    lightness = 38.63;
+    huePosition = 219;
+    colorPickerPosition = { x: 50, y: 50 };
+    // Sync preview with signal
+    previewMode = localStorage.getItem('theme') || 'light';
+    lastTheme = this.previewMode;
+    isPickingColor = false;
+    copied = false;
+    themeCode = '';
+    generatedColors;
+    ngOnInit() {
+        this.syncFromHSL();
+        // Sincronizacion del tema con el localStorage
+        setInterval(() => {
+            const current = localStorage.getItem('theme');
+            if (current && current !== this.lastTheme) {
+                this.previewMode = current;
+                this.lastTheme = current;
+                this.generateTheme();
+            }
+        }, 300); // verifica cada 300ms
+    }
+    // Color picker gradient
+    get hueGradient() {
+        return `linear-gradient(to right, 
+      hsl(0, 100%, 50%),
+      hsl(60, 100%, 50%),
+      hsl(120, 100%, 50%),
+      hsl(180, 100%, 50%),
+      hsl(240, 100%, 50%),
+      hsl(300, 100%, 50%),
+      hsl(360, 100%, 50%))`;
+    }
+    getCurrentTheme() {
+        return this.themeService.getThemeMode();
+    }
+    toggleTheme() {
+        this.themeService.toggleTheme();
+    }
+    setPreviewMode(mode) {
+        this.previewMode = mode;
+    }
+    startColorPicking(event) {
+        this.isPickingColor = true;
+        this.updateColorFromPosition(event);
+    }
+    updateColorPicking(event) {
+        if (this.isPickingColor) {
+            this.updateColorFromPosition(event);
+        }
+    }
+    stopColorPicking() {
+        this.isPickingColor = false;
+    }
+    updateColorFromPosition(event) {
+        const target = event.target;
+        const rect = target.getBoundingClientRect();
+        const x = Math.max(0, Math.min(1, (event.clientX - rect.left) / rect.width));
+        const y = Math.max(0, Math.min(1, (event.clientY - rect.top) / rect.height));
+        this.colorPickerPosition = { x: x * 100, y: y * 100 };
+        this.saturation = x * 100;
+        this.lightness = (1 - y) * 100;
+        this.syncFromHSL();
+    }
+    updateHueFromInput(event) {
+        const input = event.target;
+        this.huePosition = parseInt(input.value);
+        this.syncFromHSL();
+    }
+    updateFromHexInput() {
+        if (!this.baseColor.startsWith('#'))
+            this.baseColor = '#' + this.baseColor;
+        const hexRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
+        if (!hexRegex.test(this.baseColor))
+            return;
+        const { h, s, l } = this.hexToHSL(this.baseColor);
+        this.huePosition = h;
+        this.saturation = s;
+        this.lightness = l;
+        this.colorPickerPosition = { x: s, y: 100 - l };
+        this.syncFromHSL();
+    }
+    syncFromHSL() {
+        this.baseColor = this.hslToHex(this.huePosition, this.saturation, this.lightness);
+        this.generateTheme();
+    }
+    hexToHSL(hex) {
+        hex = hex.replace(/^#/, '');
+        if (hex.length === 3)
+            hex = hex.split('').map(c => c + c).join('');
+        const r = parseInt(hex.slice(0, 2), 16) / 255;
+        const g = parseInt(hex.slice(2, 4), 16) / 255;
+        const b = parseInt(hex.slice(4, 6), 16) / 255;
+        const max = Math.max(r, g, b), min = Math.min(r, g, b);
+        let h = 0, s = 0, l = (max + min) / 2;
+        if (max !== min) {
+            const d = max - min;
+            s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+            switch (max) {
+                case r:
+                    h = (g - b) / d + (g < b ? 6 : 0);
+                    break;
+                case g:
+                    h = (b - r) / d + 2;
+                    break;
+                case b:
+                    h = (r - g) / d + 4;
+                    break;
+            }
+            h *= 60;
+        }
+        return { h, s: s * 100, l: l * 100 };
+    }
+    hslToHex(h, s, l) {
+        h %= 360;
+        s /= 100;
+        l /= 100;
+        const c = (1 - Math.abs(2 * l - 1)) * s;
+        const x = c * (1 - Math.abs((h / 60) % 2 - 1));
+        const m = l - c / 2;
+        let r = 0, g = 0, b = 0;
+        if (h < 60)
+            [r, g, b] = [c, x, 0];
+        else if (h < 120)
+            [r, g, b] = [x, c, 0];
+        else if (h < 180)
+            [r, g, b] = [0, c, x];
+        else if (h < 240)
+            [r, g, b] = [0, x, c];
+        else if (h < 300)
+            [r, g, b] = [x, 0, c];
+        else
+            [r, g, b] = [c, 0, x];
+        r = Math.round((r + m) * 255);
+        g = Math.round((g + m) * 255);
+        b = Math.round((b + m) * 255);
+        return `#${[r, g, b].map(v => v.toString(16).padStart(2, '0')).join('')}`;
+    }
+    generateTheme() {
+        this.baseColor = this.hslToHex(this.huePosition, this.saturation * 0.9, this.lightness);
+        const vars = this.generatedColors = {
+            background: this.hslToHex(this.huePosition, this.saturation, 95),
+            foreground: this.hslToHex(210, 6, 10),
+            card: this.hslToHex(this.huePosition, this.saturation * 0.3, 90),
+            cardForeground: this.hslToHex(this.huePosition, this.saturation * 0.8, 15),
+            popover: this.hslToHex(this.huePosition, this.saturation * 0.2, 95),
+            popoverForeground: this.hslToHex(this.huePosition, this.saturation, 7),
+            primary: this.baseColor,
+            primaryForeground: '#FFFFFF',
+            secondary: this.hslToHex(this.huePosition, this.saturation * 0.4, 75),
+            secondaryForeground: '#000000',
+            muted: this.hslToHex(this.huePosition, this.saturation * 0.1, 85),
+            mutedForeground: this.hslToHex(this.huePosition, this.saturation * 0.5, 40),
+            accent: this.hslToHex(this.huePosition, this.saturation * 0.1, 82),
+            accentForeground: this.hslToHex(this.huePosition, this.saturation * 0.8, 15),
+            destructive: '#BF3F3F',
+            destructiveForeground: this.hslToHex(this.huePosition, this.saturation * 0.2, 95),
+            border: this.hslToHex(this.huePosition, this.saturation * 0.5, 60),
+            input: this.hslToHex(this.huePosition, this.saturation * 0.5, 60),
+            ring: this.baseColor,
+            darkBackground: this.mixHsl(this.huePosition, this.saturation * 0.7, 8, // base
+            210, 6, 10, // toque azulado oscuro
+            0.6 // intensidad del mix (15%)
+            ),
+            darkForeground: this.hslToHex(this.huePosition, this.saturation * 0.2, 90),
+            darkCard: this.hslToHex(this.huePosition, this.saturation * 0.8, 8),
+            darkCardForeground: this.hslToHex(this.huePosition, this.saturation * 0.2, 90),
+            darkPopover: this.hslToHex(this.huePosition, this.saturation * 0.8, 3),
+            darkPopoverForeground: this.hslToHex(this.huePosition, this.saturation * 0.2, 90),
+            darkPrimary: this.hslToHex(this.huePosition, this.saturation * 0.7, 28),
+            darkPrimaryForeground: '#FFFFFF',
+            darkSecondary: this.hslToHex(this.huePosition, this.saturation * 0.6, 20),
+            darkSecondaryForeground: '#FFFFFF',
+            darkMuted: this.hslToHex(this.huePosition, this.saturation * 0.3, 25),
+            darkMutedForeground: this.hslToHex(this.huePosition, this.saturation * 0.2, 60),
+            darkAccent: this.hslToHex(this.huePosition, this.saturation * 0.3, 25),
+            darkAccentForeground: this.hslToHex(this.huePosition, this.saturation * 0.2, 90),
+            darkDestructive: '#BF3F3F',
+            darkDestructiveForeground: this.hslToHex(this.huePosition, this.saturation * 0.2, 90),
+            darkBorder: this.hslToHex(this.huePosition, this.saturation * 0.5, 45),
+            darkInput: this.hslToHex(this.huePosition, this.saturation * 0.5, 45),
+            darkRing: this.hslToHex(this.huePosition, this.saturation * 0.7, 28),
+        };
+        const toCssVar = (key, value) => `  --color-${key.replace(/[A-Z]/g, m => '-' + m.toLowerCase())}: ${value};`;
+        const keys = Object.keys(vars);
+        const lines = [];
+        let darkStarted = false;
+        for (const key of keys) {
+            if (!darkStarted && key.startsWith('dark')) {
+                lines.push(''); // Insertamos línea vacía justo antes del primer dark
+                darkStarted = true;
+            }
+            lines.push(toCssVar(key, vars[key]));
+        }
+        lines.push(`  --color-radius: 0.5rem;`);
+        lines.push(`  --color-dark-radius: 0.5rem;`);
+        this.themeCode = `@theme {\n${lines.join('\n')}\n}`;
+    }
+    copyThemeToClipboard() {
+        navigator.clipboard.writeText(this.themeCode);
+        this.copied = true;
+        setTimeout(() => (this.copied = false), 2000);
+    }
+    mixHsl(h1, s1, l1, h2, s2, l2, ratio) {
+        const h = h1 * (1 - ratio) + h2 * ratio;
+        const s = s1 * (1 - ratio) + s2 * ratio;
+        const l = l1 * (1 - ratio) + l2 * ratio;
+        return this.hslToHex(h, s, l);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: JThemeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: JThemeComponent, isStandalone: true, selector: "JTheme", ngImport: i0, template: "<!-- Main Content -->\r\n<main class=\"container mx-auto\">\r\n    <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-8\">\r\n        <!-- Controls Panel -->\r\n        <div class=\"space-y-8 select-none\">\r\n            <div>\r\n                <h2 class=\"text-sm font-bold mb-1 opacity-60\">Selector de color</h2>\r\n                <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n                    <!-- Color Picker -->\r\n                    <div\r\n                        class=\"relative h-64 w-full overflow-hidden rounded-lg border border-border dark:border-dark-border\">\r\n                        <div class=\"absolute inset-0 bg-gradient-to-br from-white to-transparent\" style=\"z-index: 1;\">\r\n                        </div>\r\n                        <div class=\"absolute inset-0 bg-gradient-to-b from-transparent to-black\" style=\"z-index: 2;\">\r\n                        </div>\r\n                        <div class=\"absolute inset-0\"\r\n                            [style.background]=\"'linear-gradient(to right, hsl(' + huePosition + ', 0%, 50%), hsl(' + huePosition + ', 100%, 50%))'\"\r\n                            style=\"z-index: 0;\"></div>\r\n                        <div class=\"absolute w-6 h-6 rounded-full border-2 border-white transform -translate-x-1/2 -translate-y-1/2 cursor-pointer\"\r\n                            [style.left.%]=\"colorPickerPosition.x\" [style.top.%]=\"colorPickerPosition.y\"\r\n                            style=\"z-index: 3;\"></div>\r\n                        <div class=\"absolute inset-0 cursor-pointer\" (mousedown)=\"startColorPicking($event)\"\r\n                            (mousemove)=\"updateColorPicking($event)\" (mouseup)=\"stopColorPicking()\"\r\n                            (mouseleave)=\"stopColorPicking()\" style=\"z-index: 4;\"></div>\r\n                    </div>\r\n\r\n                    <!-- Color Spectrum -->\r\n                    <div class=\"space-y-4\">\r\n                        <div class=\"relative\">\r\n\r\n                            <!-- Picker bar -->\r\n                            <div class=\"h-8 w-full rounded-lg overflow-hidden border border-border dark:border-dark-border relative\">\r\n                              <div class=\"absolute inset-0\" [style.background]=\"hueGradient\"></div>\r\n                              <input type=\"range\" min=\"0\" max=\"360\" [value]=\"huePosition\"\r\n                                     (input)=\"updateHueFromInput($event)\"\r\n                                     class=\"absolute inset-0 w-full h-full opacity-0 cursor-pointer\" />\r\n                            </div>\r\n                          \r\n                            <!-- Bolita fuera del flujo para que sobresalga -->\r\n                            <div class=\"absolute top-1/2 transform -translate-y-1/2 -translate-x-1/2 w-9 h-9 rounded-full border-2 border-white z-10 pointer-events-none\"\r\n                                 [style.left.%]=\"(huePosition / 360) * 100\"\r\n                                 [style.backgroundColor]=\"hslToHex(huePosition, 100, 50)\">\r\n                            </div>\r\n                          \r\n                        </div>\r\n                        \r\n\r\n                        <!-- Hex Input -->\r\n                        <JContentForm>\r\n                            <JContentForm>\r\n\r\n                                <JLabel for=\"baseColor\" text=\"Ingresa un valor Hex\" classes=\"opacity-60\" />\r\n\r\n                                <JContentForm [rows]=\"true\">\r\n                                    <JContentForm class=\"flex-1\">\r\n                                        <JInput id=\"baseColor\" type=\"text\" [(ngModel)]=\"baseColor\"\r\n                                            (input)=\"updateFromHexInput()\" placeholder=\"#000000\" />\r\n                                    </JContentForm>\r\n\r\n                                    <!-- Color Preview -->\r\n                                    <div class=\"h-[35px] w-[60px] rounded shadow-md \"\r\n                                        [style.background-color]=\"baseColor\"></div>\r\n                                </JContentForm>\r\n                            </JContentForm>\r\n\r\n\r\n                            <!-- Saturation Slider -->\r\n                            <JInput type=\"range\" [min]=\"0\" [max]=\"100\" [(ngModel)]=\"saturation\"\r\n                                (input)=\"generateTheme()\" placeholder=\"Saturaci\u00F3n\" [isLabel]=\"true\" simbol=\"%\" />\r\n\r\n\r\n                            <!-- Lightness Slider -->\r\n                            <JInput type=\"range\" [min]=\"0\" [max]=\"100\" [(ngModel)]=\"lightness\" (input)=\"generateTheme()\"\r\n                                placeholder=\"Luminosidad\" [isLabel]=\"true\" simbol=\"%\" />\r\n\r\n                        </JContentForm>\r\n\r\n                    </div>\r\n                </div>\r\n\r\n            </div>\r\n        </div>\r\n\r\n        <!-- Code Preview -->\r\n        <div class=\"relative\">\r\n            <div\r\n                class=\"h-70 bg-background dark:bg-dark-background overflow-auto rounded-lg font-mono text-sm whitespace-pre-wrap border border-border dark:border-dark-border scroll-element\">\r\n                <div class=\"p-4 text-black dark:text-white\">\r\n                    <span>{{ themeCode }}</span>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"absolute top-4 right-4\">\r\n                <JButton (clicked)=\"copyThemeToClipboard()\" [icon]=\"icons['copy']\" [iconChange]=\"icons['check']\"\r\n                    [isChangeIcon]=\"copied\" [iconSize]=\"15\" tooltip=\"Copiar\" classes=\"w-[25px] h-[25px]\" />\r\n            </div>\r\n        </div>\r\n\r\n    </div>\r\n</main>", styles: [""], dependencies: [{ kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: JInputComponent, selector: "JInput", inputs: ["type", "placeholder", "disabled", "required", "name", "id", "classes", "ngClass", "accept", "multiple", "showImage", "clearButton", "min", "max", "step", "isLabel", "simbol"] }, { kind: "component", type: JButtonComponent, selector: "JButton", inputs: ["type", "disabled", "isLoading", "icon", "iconSize", "text", "isChangeIcon", "iconChange", "tooltip", "tooltipPosition", "classes", "ngClasses"], outputs: ["clicked"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: JLabelComponent, selector: "JLabel", inputs: ["for", "isRequired", "isConditioned", "isAutomated", "classes", "ngClass"] }, { kind: "component", type: JContentFormComponent, selector: "JContentForm", inputs: ["columns", "rows"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: JThemeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'JTheme', standalone: true, imports: [LucideAngularModule, JInputComponent, JButtonComponent, FormsModule, JLabelComponent, JContentFormComponent], template: "<!-- Main Content -->\r\n<main class=\"container mx-auto\">\r\n    <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-8\">\r\n        <!-- Controls Panel -->\r\n        <div class=\"space-y-8 select-none\">\r\n            <div>\r\n                <h2 class=\"text-sm font-bold mb-1 opacity-60\">Selector de color</h2>\r\n                <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n                    <!-- Color Picker -->\r\n                    <div\r\n                        class=\"relative h-64 w-full overflow-hidden rounded-lg border border-border dark:border-dark-border\">\r\n                        <div class=\"absolute inset-0 bg-gradient-to-br from-white to-transparent\" style=\"z-index: 1;\">\r\n                        </div>\r\n                        <div class=\"absolute inset-0 bg-gradient-to-b from-transparent to-black\" style=\"z-index: 2;\">\r\n                        </div>\r\n                        <div class=\"absolute inset-0\"\r\n                            [style.background]=\"'linear-gradient(to right, hsl(' + huePosition + ', 0%, 50%), hsl(' + huePosition + ', 100%, 50%))'\"\r\n                            style=\"z-index: 0;\"></div>\r\n                        <div class=\"absolute w-6 h-6 rounded-full border-2 border-white transform -translate-x-1/2 -translate-y-1/2 cursor-pointer\"\r\n                            [style.left.%]=\"colorPickerPosition.x\" [style.top.%]=\"colorPickerPosition.y\"\r\n                            style=\"z-index: 3;\"></div>\r\n                        <div class=\"absolute inset-0 cursor-pointer\" (mousedown)=\"startColorPicking($event)\"\r\n                            (mousemove)=\"updateColorPicking($event)\" (mouseup)=\"stopColorPicking()\"\r\n                            (mouseleave)=\"stopColorPicking()\" style=\"z-index: 4;\"></div>\r\n                    </div>\r\n\r\n                    <!-- Color Spectrum -->\r\n                    <div class=\"space-y-4\">\r\n                        <div class=\"relative\">\r\n\r\n                            <!-- Picker bar -->\r\n                            <div class=\"h-8 w-full rounded-lg overflow-hidden border border-border dark:border-dark-border relative\">\r\n                              <div class=\"absolute inset-0\" [style.background]=\"hueGradient\"></div>\r\n                              <input type=\"range\" min=\"0\" max=\"360\" [value]=\"huePosition\"\r\n                                     (input)=\"updateHueFromInput($event)\"\r\n                                     class=\"absolute inset-0 w-full h-full opacity-0 cursor-pointer\" />\r\n                            </div>\r\n                          \r\n                            <!-- Bolita fuera del flujo para que sobresalga -->\r\n                            <div class=\"absolute top-1/2 transform -translate-y-1/2 -translate-x-1/2 w-9 h-9 rounded-full border-2 border-white z-10 pointer-events-none\"\r\n                                 [style.left.%]=\"(huePosition / 360) * 100\"\r\n                                 [style.backgroundColor]=\"hslToHex(huePosition, 100, 50)\">\r\n                            </div>\r\n                          \r\n                        </div>\r\n                        \r\n\r\n                        <!-- Hex Input -->\r\n                        <JContentForm>\r\n                            <JContentForm>\r\n\r\n                                <JLabel for=\"baseColor\" text=\"Ingresa un valor Hex\" classes=\"opacity-60\" />\r\n\r\n                                <JContentForm [rows]=\"true\">\r\n                                    <JContentForm class=\"flex-1\">\r\n                                        <JInput id=\"baseColor\" type=\"text\" [(ngModel)]=\"baseColor\"\r\n                                            (input)=\"updateFromHexInput()\" placeholder=\"#000000\" />\r\n                                    </JContentForm>\r\n\r\n                                    <!-- Color Preview -->\r\n                                    <div class=\"h-[35px] w-[60px] rounded shadow-md \"\r\n                                        [style.background-color]=\"baseColor\"></div>\r\n                                </JContentForm>\r\n                            </JContentForm>\r\n\r\n\r\n                            <!-- Saturation Slider -->\r\n                            <JInput type=\"range\" [min]=\"0\" [max]=\"100\" [(ngModel)]=\"saturation\"\r\n                                (input)=\"generateTheme()\" placeholder=\"Saturaci\u00F3n\" [isLabel]=\"true\" simbol=\"%\" />\r\n\r\n\r\n                            <!-- Lightness Slider -->\r\n                            <JInput type=\"range\" [min]=\"0\" [max]=\"100\" [(ngModel)]=\"lightness\" (input)=\"generateTheme()\"\r\n                                placeholder=\"Luminosidad\" [isLabel]=\"true\" simbol=\"%\" />\r\n\r\n                        </JContentForm>\r\n\r\n                    </div>\r\n                </div>\r\n\r\n            </div>\r\n        </div>\r\n\r\n        <!-- Code Preview -->\r\n        <div class=\"relative\">\r\n            <div\r\n                class=\"h-70 bg-background dark:bg-dark-background overflow-auto rounded-lg font-mono text-sm whitespace-pre-wrap border border-border dark:border-dark-border scroll-element\">\r\n                <div class=\"p-4 text-black dark:text-white\">\r\n                    <span>{{ themeCode }}</span>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"absolute top-4 right-4\">\r\n                <JButton (clicked)=\"copyThemeToClipboard()\" [icon]=\"icons['copy']\" [iconChange]=\"icons['check']\"\r\n                    [isChangeIcon]=\"copied\" [iconSize]=\"15\" tooltip=\"Copiar\" classes=\"w-[25px] h-[25px]\" />\r\n            </div>\r\n        </div>\r\n\r\n    </div>\r\n</main>" }]
+        }] });
+
+class JPaginatorComponent {
+    Math = Math;
+    // Lucide icons
+    icons = {
+        firstPage: ChevronsLeft,
+        prevPage: ChevronLeft,
+        nextPage: ChevronRight,
+        lastPage: ChevronsRight,
+    };
+    isLoading = false;
+    // Para rastrear qué botón está siendo cargado
+    loadingButton = null;
+    // Paginacion
+    currentPage = 1;
+    itemsPerPageOptions = [10];
+    itemsPerPage = this.itemsPerPageOptions[0];
+    totalItems = 0;
+    // Paginas a mostrar
+    pages = [];
+    // Eventos de salida
+    pageChange = new EventEmitter();
+    get startIndex() {
+        return (this.currentPage - 1) * this.itemsPerPage;
+    }
+    get endIndex() {
+        return Math.min(this.startIndex + this.itemsPerPage - 1, this.totalItems - 1);
+    }
+    get totalPages() {
+        return Math.ceil(this.totalItems / this.itemsPerPage);
+    }
+    onPageChange(page) {
+        if (page >= 1 && page <= this.totalPages && page !== this.currentPage) {
+            this.loadingButton = page;
+            this.currentPage = page;
+            this.pageChange.emit(this.currentPage);
+        }
+    }
+    goToFirstPage() {
+        if (!this.isLoading && this.currentPage !== 1) {
+            this.loadingButton = 'first';
+            this.onPageChange(1);
+        }
+    }
+    goToPreviousPage() {
+        if (!this.isLoading && this.currentPage > 1) {
+            this.loadingButton = 'prev';
+            this.onPageChange(this.currentPage - 1);
+        }
+    }
+    goToNextPage() {
+        if (!this.isLoading && this.currentPage < this.totalPages) {
+            this.loadingButton = 'next';
+            this.onPageChange(this.currentPage + 1);
+        }
+    }
+    goToLastPage() {
+        if (!this.isLoading && this.currentPage !== this.totalPages) {
+            this.loadingButton = 'last';
+            this.onPageChange(this.totalPages);
+        }
+    }
+    // Verificar si un botón específico está cargando
+    isButtonLoading(button) {
+        return this.isLoading && this.loadingButton === button;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: JPaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: JPaginatorComponent, isStandalone: true, selector: "JPaginator", inputs: { isLoading: "isLoading", currentPage: "currentPage", itemsPerPageOptions: "itemsPerPageOptions", itemsPerPage: "itemsPerPage", totalItems: "totalItems", pages: "pages" }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<!-- Pagination -->\r\n<div class=\"flex flex-col sm:flex-row justify-between items-center mt-4 gap-5\">\r\n    <div class=\"text-sm text-gray-700 dark:text-gray-300\">\r\n        Mostrando {{ totalItems ? startIndex + 1 : 0 }} a {{ Math.min(endIndex + 1, totalItems) }} de {{ totalItems }}\r\n        registros\r\n    </div>\r\n\r\n    <div class=\"flex space-x-1 justify-center items-center\">\r\n        <!-- First page -->\r\n        <JButton onKeyPress \r\n        [icon]=\"icons['firstPage']\"\r\n        [iconSize]=\"16\"\r\n        (click)=\"goToFirstPage()\" \r\n        [disabled]=\"currentPage === 1 || isLoading\"\r\n        [isLoading]=\"isButtonLoading('first')\"\r\n        classes=\"secondary h-[35px]\"\r\n        [class.disabled]=\"currentPage === 1 || isLoading\" />\r\n\r\n        <!-- Previous page -->\r\n        <JButton onKeyPress \r\n        [icon]=\"icons['prevPage']\"\r\n        [iconSize]=\"16\"\r\n        (click)=\"goToPreviousPage()\" \r\n        [disabled]=\"currentPage === 1 || isLoading\"\r\n        classes=\"secondary h-[35px]\"\r\n        [isLoading]=\"isButtonLoading('prev')\"\r\n        [class.disabled]=\"currentPage === 1 || isLoading\" />\r\n\r\n        <!-- Page numbers -->\r\n        @for (page of pages; track page) {\r\n        <JButton onKeyPress \r\n        [text]=\"page\"\r\n        [iconSize]=\"10\"\r\n        (click)=\"onPageChange(page)\" \r\n        classes=\"secondary h-[30px]\" \r\n        [disabled]=\"currentPage === page || isLoading\"\r\n        [isLoading]=\"isButtonLoading(page)\"\r\n        [ngClasses]=\"{ 'primary' : currentPage === page }\" />\r\n        }\r\n\r\n        <!-- Next page -->\r\n        <JButton onKeyPress \r\n        [icon]=\"icons['nextPage']\"\r\n        [iconSize]=\"16\"\r\n        (click)=\"goToNextPage()\" \r\n        [disabled]=\"currentPage === totalPages || isLoading\" \r\n        classes=\"secondary h-[35px]\"\r\n        [isLoading]=\"isButtonLoading('next')\"\r\n        [class.disabled]=\"currentPage === totalPages || isLoading\" />\r\n\r\n        <!-- Last page -->\r\n        <JButton onKeyPress \r\n        [icon]=\"icons['lastPage']\"\r\n        [iconSize]=\"16\"\r\n        (click)=\"goToLastPage()\" \r\n        [disabled]=\"currentPage === totalPages || isLoading\" \r\n        classes=\"secondary h-[35px]\"\r\n        [isLoading]=\"isButtonLoading('last')\"\r\n        [class.disabled]=\"currentPage === totalPages || isLoading\" />\r\n    </div>\r\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: JButtonComponent, selector: "JButton", inputs: ["type", "disabled", "isLoading", "icon", "iconSize", "text", "isChangeIcon", "iconChange", "tooltip", "tooltipPosition", "classes", "ngClasses"], outputs: ["clicked"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: JPaginatorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'JPaginator', imports: [LucideAngularModule, JButtonComponent], template: "<!-- Pagination -->\r\n<div class=\"flex flex-col sm:flex-row justify-between items-center mt-4 gap-5\">\r\n    <div class=\"text-sm text-gray-700 dark:text-gray-300\">\r\n        Mostrando {{ totalItems ? startIndex + 1 : 0 }} a {{ Math.min(endIndex + 1, totalItems) }} de {{ totalItems }}\r\n        registros\r\n    </div>\r\n\r\n    <div class=\"flex space-x-1 justify-center items-center\">\r\n        <!-- First page -->\r\n        <JButton onKeyPress \r\n        [icon]=\"icons['firstPage']\"\r\n        [iconSize]=\"16\"\r\n        (click)=\"goToFirstPage()\" \r\n        [disabled]=\"currentPage === 1 || isLoading\"\r\n        [isLoading]=\"isButtonLoading('first')\"\r\n        classes=\"secondary h-[35px]\"\r\n        [class.disabled]=\"currentPage === 1 || isLoading\" />\r\n\r\n        <!-- Previous page -->\r\n        <JButton onKeyPress \r\n        [icon]=\"icons['prevPage']\"\r\n        [iconSize]=\"16\"\r\n        (click)=\"goToPreviousPage()\" \r\n        [disabled]=\"currentPage === 1 || isLoading\"\r\n        classes=\"secondary h-[35px]\"\r\n        [isLoading]=\"isButtonLoading('prev')\"\r\n        [class.disabled]=\"currentPage === 1 || isLoading\" />\r\n\r\n        <!-- Page numbers -->\r\n        @for (page of pages; track page) {\r\n        <JButton onKeyPress \r\n        [text]=\"page\"\r\n        [iconSize]=\"10\"\r\n        (click)=\"onPageChange(page)\" \r\n        classes=\"secondary h-[30px]\" \r\n        [disabled]=\"currentPage === page || isLoading\"\r\n        [isLoading]=\"isButtonLoading(page)\"\r\n        [ngClasses]=\"{ 'primary' : currentPage === page }\" />\r\n        }\r\n\r\n        <!-- Next page -->\r\n        <JButton onKeyPress \r\n        [icon]=\"icons['nextPage']\"\r\n        [iconSize]=\"16\"\r\n        (click)=\"goToNextPage()\" \r\n        [disabled]=\"currentPage === totalPages || isLoading\" \r\n        classes=\"secondary h-[35px]\"\r\n        [isLoading]=\"isButtonLoading('next')\"\r\n        [class.disabled]=\"currentPage === totalPages || isLoading\" />\r\n\r\n        <!-- Last page -->\r\n        <JButton onKeyPress \r\n        [icon]=\"icons['lastPage']\"\r\n        [iconSize]=\"16\"\r\n        (click)=\"goToLastPage()\" \r\n        [disabled]=\"currentPage === totalPages || isLoading\" \r\n        classes=\"secondary h-[35px]\"\r\n        [isLoading]=\"isButtonLoading('last')\"\r\n        [class.disabled]=\"currentPage === totalPages || isLoading\" />\r\n    </div>\r\n</div>" }]
+        }], propDecorators: { isLoading: [{
+                type: Input
+            }], currentPage: [{
+                type: Input
+            }], itemsPerPageOptions: [{
+                type: Input
+            }], itemsPerPage: [{
+                type: Input
+            }], totalItems: [{
+                type: Input
+            }], pages: [{
+                type: Input
+            }], pageChange: [{
+                type: Output
+            }] } });
+
+class JFilterComponent {
+    dialog;
+    alertToastService;
+    cdr;
+    // Lucide icons
+    icons = {
+        filter: Filter,
+        filterList: ArrowDownWideNarrow,
+        eraser: Eraser,
+        transh: Trash2,
+        check: Check,
+        clear: X,
+        search: Search,
+        loading: Loader2,
+        default: Cpu
+    };
+    isLoadingSearch = false;
+    isLoadingPerPage = false;
+    isLoadingAditionalButtons = {};
+    searchPlaceholder = 'Buscar...';
+    // Inputs
+    columns = [];
+    itemsPerPageOptions = [];
+    // Outputs
+    search = new EventEmitter();
+    itemsPerPageChange = new EventEmitter();
+    searchQueryChange = new EventEmitter();
+    onItemsPerPageChangeEvent = new EventEmitter();
+    clearFilters = new EventEmitter();
+    // Para el binding bidireccional de itemsPerPage
+    _itemsPerPage = 0;
+    get itemsPerPage() {
+        return this._itemsPerPage;
+    }
+    // Para el binding bidireccional de searchQuery
+    _searchQuery = '';
+    get searchQuery() {
+        return this._searchQuery;
+    }
+    // Para el debounce de la búsqueda
+    searchSubject = new Subject();
+    searchSubscription;
+    isInitialized = false;
+    // Configuración de botones
+    filtersButton = [];
+    // Filtros de tabla
+    filtersSelect = [];
+    get visibleColumns() {
+        return this.columns.filter(col => !col.hidden);
+    }
+    constructor(dialog, alertToastService, cdr) {
+        this.dialog = dialog;
+        this.alertToastService = alertToastService;
+        this.cdr = cdr;
+    }
+    ngOnInit() {
+        // Configurar el debounce para la búsqueda después de la inicialización
+        this.searchSubscription = this.searchSubject
+            .pipe(debounceTime(1000), // 1 segundo de debounce
+        filter(() => this.isInitialized) // Solo procesar si está inicializado
+        )
+            .subscribe(() => { this.onSearch(); });
+        // Marcar como inicializado después de configurar la suscripción
+        setTimeout(() => { this.isInitialized = true; }, 0);
+        // Normalizar botones
+        this.filtersButton = this.normalizeFilterButtons(this.filtersButton);
+    }
+    ngOnDestroy() {
+        // Limpiar la suscripción al destruir el componente
+        if (this.searchSubscription) {
+            this.searchSubscription.unsubscribe();
+        }
+    }
+    // =====================================================
+    // Bindings
+    // =====================================================
+    // Binding bidireccional de itemsPerPage
+    set itemsPerPage(value) {
+        this._itemsPerPage = value;
+        this.itemsPerPageChange.emit(value);
+    }
+    // Binding bidireccional de searchQuery
+    set searchQuery(value) {
+        // Solo emitir eventos si el valor ha cambiado
+        if (this._searchQuery !== value) {
+            this._searchQuery = value;
+            this.searchQueryChange.emit(value);
+            // Solo emitir al subject si ya se ha inicializado el componente
+            if (this.isInitialized) {
+                this.searchSubject.next(value);
+            }
+        }
+    }
+    // =====================================================
+    // Metodos
+    // =====================================================
+    // Buscar
+    onSearch() {
+        this.search.emit();
+    }
+    // Eliminar busqueda
+    clearSearch() {
+        this.searchQuery = '';
+        this.onSearch();
+    }
+    // Mostrar items por pagina
+    onItemsPerPageChange() {
+        this.onItemsPerPageChangeEvent.emit();
+    }
+    // =====================================================
+    // Botones de filtro
+    // =====================================================
+    // Normaliza los botones de filtro
+    normalizeFilterButtons(buttons) {
+        return buttons.map((button) => {
+            // Si es un botón de filtro
+            if (button.type === 'filter') {
+                return {
+                    ...button,
+                    icon: this.icons['filter'],
+                    iconChange: this.icons['filterList'],
+                    isChangeIcon: () => this.dialog.openDialog,
+                    clicked: () => {
+                        this.dialog.openDialog = !this.dialog.openDialog;
+                    },
+                    classes: 'bg-[#20638f] hover:bg-[#1d5a82] text-white'
+                };
+            }
+            // Si es un botón de limpiar
+            if (button.type === 'clear') {
+                return {
+                    ...button,
+                    icon: this.icons['eraser'],
+                    iconChange: this.icons['transh'],
+                    tooltip: 'Limpiar filtros',
+                    clicked: () => {
+                        const hasActiveSearch = this.searchQuery?.trim().length > 0;
+                        const hasSelectedFilters = this.filtersSelect.some(f => {
+                            const actual = f.selected;
+                            const inicial = f.initSelected ?? null;
+                            return JSON.stringify(actual) !== JSON.stringify(inicial);
+                        });
+                        if (!hasActiveSearch && !hasSelectedFilters) {
+                            this.alertToastService.AlertToast({
+                                type: 'info',
+                                title: 'No se ha filtrado nada...',
+                                description: 'No hay filtros activos para limpiar',
+                                autoClose: true
+                            });
+                            return;
+                        }
+                        // Limpiar búsqueda
+                        if (hasActiveSearch) {
+                            this.clearSearch();
+                        }
+                        // Limpiar selects
+                        for (const filter of this.filtersSelect) {
+                            const initial = filter.initSelected ?? null;
+                            const current = filter.selected;
+                            if (JSON.stringify(current) !== JSON.stringify(initial)) {
+                                filter.selected = initial;
+                                setTimeout(() => {
+                                    if (typeof filter.onSelected === 'function') {
+                                        filter.onSelected(initial);
+                                    }
+                                });
+                            }
+                        }
+                        this.clearFilters.emit('clear');
+                    },
+                    isChangeIcon: () => {
+                        const hasActiveSearch = this.searchQuery?.trim().length > 0;
+                        const hasSelectedFilters = this.filtersSelect.some(f => {
+                            const actual = f.selected;
+                            const inicial = f.initSelected ?? null;
+                            return JSON.stringify(actual) !== JSON.stringify(inicial);
+                        });
+                        return !hasActiveSearch && !hasSelectedFilters ? false : true;
+                    },
+                    classes: 'bg-[#164666] hover:bg-[#133d5a] text-white'
+                };
+            }
+            // Podés extenderlo para otros tipos como 'clear', 'excel', etc.
+            return button;
+        });
+    }
+    // Manejar el click en un botón de filtro
+    filterBottomClick(button) {
+        // Ejecuta la acción del padre si está definida
+        if (button.clicked) {
+            button.clicked();
+        }
+        this.isButtonLoading(button);
+    }
+    isButtonLoading(button) {
+        return button.type ? this.isLoadingAditionalButtons[button.type] === 'loading' : false;
+    }
+    // =====================================================
+    // Acciones para validacion de un tipo a funcion
+    // =====================================================
+    // Obtener el ícono de un botón de filtro
+    getIsChangeIcon(button) {
+        if (typeof button.isChangeIcon === 'function') {
+            return button.isChangeIcon();
+        }
+        return button.isChangeIcon ?? false;
+    }
+    // Obtener el valor del tooltip de un botón
+    getTooltip(button) {
+        if (typeof button.tooltip === 'function') {
+            return button.tooltip(); // Puedes pasarle data si necesitas
+        }
+        return button.tooltip ?? '';
+    }
+    // Evaluar si un botón está deshabilitado
+    getDisabled(button) {
+        if (typeof button.disabled === 'function') {
+            return button.disabled();
+        }
+        return button.disabled ?? false;
+    }
+    // Evaluar si un botón es visible
+    getIsVisible(button) {
+        if (typeof button.isVisible === 'function') {
+            return button.isVisible();
+        }
+        // Si no se define, por defecto es visible
+        return button.isVisible !== false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: JFilterComponent, deps: [{ token: JDialogShared }, { token: JAlertToastService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: JFilterComponent, isStandalone: true, selector: "JFilter", inputs: { isLoadingSearch: "isLoadingSearch", isLoadingPerPage: "isLoadingPerPage", isLoadingAditionalButtons: "isLoadingAditionalButtons", searchPlaceholder: "searchPlaceholder", columns: "columns", itemsPerPageOptions: "itemsPerPageOptions", itemsPerPage: "itemsPerPage", searchQuery: "searchQuery", filtersButton: "filtersButton", filtersSelect: "filtersSelect" }, outputs: { search: "search", itemsPerPageChange: "itemsPerPageChange", searchQueryChange: "searchQueryChange", onItemsPerPageChangeEvent: "onItemsPerPageChangeEvent", clearFilters: "clearFilters" }, ngImport: i0, template: "<div class=\"flex flex-col md:flex-row-reverse justify-between items-center mb-4 gap-3 select-none\">\r\n    <div class=\"flex items-center gap-3 md:w-auto w-full\">\r\n        <div class=\"relative w-full\">\r\n            <input type=\"text\" [(ngModel)]=\"searchQuery\" [placeholder]=\"searchPlaceholder\"\r\n                class=\"input w-full h-[40px] bg-background dark:bg-dark-background border border-border dark:border-dark-border text-black dark:text-white rounded px-3 py-2 pr-16 focus:outline-none focus:ring-2 focus:ring-primary\" />\r\n\r\n            <!-- Iconos dentro del input -->\r\n            <div class=\"absolute right-3 top-1/2 transform -translate-y-1/2 flex items-center gap-2\">\r\n                <!-- Icono de carga -->\r\n                @if (isLoadingSearch) {\r\n                <lucide-icon [name]=\"icons['loading']\" size=\"18\" class=\"text-gray-400 animate-spin\">\r\n                </lucide-icon>\r\n                }\r\n\r\n                <!-- Bot\u00F3n X para limpiar -->\r\n                @if (searchQuery && !isLoadingSearch) {\r\n                <button (click)=\"clearSearch()\"\r\n                    class=\"pr-1 mr-1 text-gray-400 hover:text-gray-600 focus:outline-none cursor-pointer\"\r\n                    aria-label=\"Limpiar b\u00FAsqueda\">\r\n                    <lucide-icon [name]=\"icons['clear']\" size=\"16\"></lucide-icon>\r\n                </button>\r\n                }\r\n\r\n                <!-- Icono de b\u00FAsqueda -->\r\n                @if (!isLoadingSearch && !searchQuery) {\r\n                <lucide-icon [name]=\"icons['search']\" size=\"16\" class=\"text-gray-400\">\r\n                </lucide-icon>\r\n                }\r\n            </div>\r\n        </div>\r\n\r\n        <!-- Boton de elementos por pagina -->\r\n        <div class=\"min-w-[75px]\">\r\n            <JSelect \r\n                [isLoading]=\"isLoadingPerPage\"\r\n                [(ngModel)]=\"itemsPerPage\" \r\n                (selectionChange)=\"onItemsPerPageChange()\" \r\n                placeholder=\"Mostrar\"\r\n                title=\"Mostrar elementos\" [options]=\"itemsPerPageOptions\" \r\n            />\r\n        </div>\r\n\r\n        <!-- Boton de mostrar columnas -->\r\n        @if (columns.length > 0) {\r\n            <div>\r\n                <JSelect \r\n                    type=\"multi-table\" \r\n                    title=\"Seleccionar columnas\" \r\n                    [columns]=\"visibleColumns\" \r\n                />\r\n            </div>\r\n        }\r\n    </div>\r\n\r\n    <div class=\"flex gap-3 text-sm w-full md:w-auto md:justify-center justify-between \"  >\r\n\r\n        <!-- Botones interactivos adicionales -->\r\n        <div class=\"flex flex-row  flex-wrap gap-2\">\r\n            @for (button of filtersButton; track $index) {\r\n                @if (getIsVisible(button)) {\r\n                    <JButton \r\n                    [icon]=\"button.icon\" \r\n                    [iconSize]=\"22\"\r\n                    [iconChange]=\"button.iconChange\" \r\n                    [isChangeIcon]=\"getIsChangeIcon(button)\"\r\n                    [isLoading]=\"isButtonLoading(button)\"\r\n                    [disabled]=\"getDisabled(button)\"\r\n                    [tooltip]=\"getTooltip(button)\"\r\n                    [tooltipPosition]=\"button.tooltipPosition ?? 'top'\"\r\n                    (clicked)=\"filterBottomClick(button)\" \r\n                    [classes]=\"button.classes ?? ''\" \r\n                    [ngClasses]=\"{'min-w-auto p-1! pl-2! pr-2!' : true}\"\r\n                    />\r\n                }\r\n            }\r\n        </div>\r\n        \r\n    </div>\r\n</div>\r\n\r\n\r\n<!-- Contenedor defiltros -->\r\n <div class=\"select-none\">\r\n    <JDialog\r\n        [openModal]=\"dialog.openDialog\"\r\n        (closeModal)=\"dialog.onClose()\"\r\n        [dialogTemplate]=\"templateDialog\" \r\n        position=\"leftCenter\"\r\n        title=\"Filtros\"\r\n        [width]=\"220\"\r\n        height=\"auto\"\r\n        [overlay]=\"false\"\r\n        [draggable]=\"true\"\r\n    />\r\n</div>\r\n\r\n<ng-template #templateDialog>\r\n    <div class=\"m-0 pt-1\">\r\n        @if (filtersSelect.length > 0) {\r\n            <div class=\"flex flex-col gap-2\">\r\n            @for (filter of filtersSelect; track $index) {\r\n                  <!-- Dropdown -->\r\n                  @if (filter.type === 'dropdown') {\r\n                    <div>\r\n                        <JSelect\r\n                        [type]=\"'dropdown'\"\r\n                        [(ngModel)]=\"filter.selected\"\r\n                        (selectionChange)=\"filter.onSelected ? filter.onSelected($event) : null\"\r\n                        [optionLabel]=\"filter.optionLabel ?? ''\"\r\n                        [optionValue]=\"filter.optionValue ?? ''\"\r\n                        [placeholder]=\"filter.placeholder ?? ''\"\r\n                        [showClear]=\"filter.showClear ?? false\"\r\n                        [options]=\"filter.options\"\r\n                        />\r\n                    </div>\r\n\r\n                  }\r\n              \r\n                  <!-- Searchable -->\r\n                  @if (filter.type === 'searchable') {\r\n                    <div>\r\n                        <JSelect\r\n                        [type]=\"'searchable'\"\r\n                        [(ngModel)]=\"filter.selected\"\r\n                        (selectionChange)=\"filter.onSelected?.($event)\"\r\n                        [endpoint]=\"filter.endpoint\"\r\n                        [optionLabel]=\"filter.optionLabel\"\r\n                        [optionValue]=\"filter.optionValue\"\r\n                        [placeholder]=\"filter.placeholder ?? ''\"\r\n                        [showClear]=\"filter.showClear ?? false\"\r\n                        [loadOnInit]=\"filter.loadOnInit ?? false\"\r\n                        [isSearch]=\"filter.isSearch ?? true\"\r\n                        [searchFields]=\"filter.searchFields || []\"\r\n                        [defaultFilters]=\"filter.defaultFilters || []\"\r\n                        />\r\n                    </div>\r\n                  }\r\n              \r\n                  <!-- Multi-table -->\r\n                  @if (filter.type === 'multi-table') {\r\n                    <div>\r\n                        <JSelect\r\n                        [type]=\"'multi-table'\"\r\n                        [(ngModel)]=\"filter.selected\"\r\n                        (selectionChange)=\"filter.onSelected ? filter.onSelected($event) : null\"\r\n                        [columns]=\"filter.columns\"\r\n                        [btnText]=\"filter.btnText ?? ''\"\r\n                        [isFilterSelect]=\"true\"\r\n                        />\r\n                    </div>\r\n\r\n                  }\r\n                }\r\n            </div>\r\n              \r\n        } @else {\r\n            <div class=\"text-center text-sm text-black dark:text-white pt-5 pb-5\">\r\n                <p>No hay filtros disponibles</p>\r\n            </div>\r\n        }\r\n    </div>\r\n</ng-template>\r\n\r\n", styles: [""], dependencies: [{ 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: JSelectComponent, selector: "JSelect", inputs: ["type", "btnIcon", "btnText", "title", "placeholder", "showClear", "columns", "options", "optionLabel", "optionValue", "labelSeparator", "isLoading", "endpoint", "loadOnInit", "defaultFilters", "searchFields", "isSearch", "isFilterSelect", "sort", "disabled"], outputs: ["updateVisibility", "selectionChange"] }, { kind: "component", type: JButtonComponent, selector: "JButton", inputs: ["type", "disabled", "isLoading", "icon", "iconSize", "text", "isChangeIcon", "iconChange", "tooltip", "tooltipPosition", "classes", "ngClasses"], outputs: ["clicked"] }, { kind: "component", type: JDialogComponent, selector: "JDialog", inputs: ["position", "offset", "openModal", "dialogTemplate", "title", "width", "height", "overlay", "draggable"], outputs: ["closeModal"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: JFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'JFilter', standalone: true, imports: [LucideAngularModule, JSelectComponent, JButtonComponent, JDialogComponent, FormsModule], template: "<div class=\"flex flex-col md:flex-row-reverse justify-between items-center mb-4 gap-3 select-none\">\r\n    <div class=\"flex items-center gap-3 md:w-auto w-full\">\r\n        <div class=\"relative w-full\">\r\n            <input type=\"text\" [(ngModel)]=\"searchQuery\" [placeholder]=\"searchPlaceholder\"\r\n                class=\"input w-full h-[40px] bg-background dark:bg-dark-background border border-border dark:border-dark-border text-black dark:text-white rounded px-3 py-2 pr-16 focus:outline-none focus:ring-2 focus:ring-primary\" />\r\n\r\n            <!-- Iconos dentro del input -->\r\n            <div class=\"absolute right-3 top-1/2 transform -translate-y-1/2 flex items-center gap-2\">\r\n                <!-- Icono de carga -->\r\n                @if (isLoadingSearch) {\r\n                <lucide-icon [name]=\"icons['loading']\" size=\"18\" class=\"text-gray-400 animate-spin\">\r\n                </lucide-icon>\r\n                }\r\n\r\n                <!-- Bot\u00F3n X para limpiar -->\r\n                @if (searchQuery && !isLoadingSearch) {\r\n                <button (click)=\"clearSearch()\"\r\n                    class=\"pr-1 mr-1 text-gray-400 hover:text-gray-600 focus:outline-none cursor-pointer\"\r\n                    aria-label=\"Limpiar b\u00FAsqueda\">\r\n                    <lucide-icon [name]=\"icons['clear']\" size=\"16\"></lucide-icon>\r\n                </button>\r\n                }\r\n\r\n                <!-- Icono de b\u00FAsqueda -->\r\n                @if (!isLoadingSearch && !searchQuery) {\r\n                <lucide-icon [name]=\"icons['search']\" size=\"16\" class=\"text-gray-400\">\r\n                </lucide-icon>\r\n                }\r\n            </div>\r\n        </div>\r\n\r\n        <!-- Boton de elementos por pagina -->\r\n        <div class=\"min-w-[75px]\">\r\n            <JSelect \r\n                [isLoading]=\"isLoadingPerPage\"\r\n                [(ngModel)]=\"itemsPerPage\" \r\n                (selectionChange)=\"onItemsPerPageChange()\" \r\n                placeholder=\"Mostrar\"\r\n                title=\"Mostrar elementos\" [options]=\"itemsPerPageOptions\" \r\n            />\r\n        </div>\r\n\r\n        <!-- Boton de mostrar columnas -->\r\n        @if (columns.length > 0) {\r\n            <div>\r\n                <JSelect \r\n                    type=\"multi-table\" \r\n                    title=\"Seleccionar columnas\" \r\n                    [columns]=\"visibleColumns\" \r\n                />\r\n            </div>\r\n        }\r\n    </div>\r\n\r\n    <div class=\"flex gap-3 text-sm w-full md:w-auto md:justify-center justify-between \"  >\r\n\r\n        <!-- Botones interactivos adicionales -->\r\n        <div class=\"flex flex-row  flex-wrap gap-2\">\r\n            @for (button of filtersButton; track $index) {\r\n                @if (getIsVisible(button)) {\r\n                    <JButton \r\n                    [icon]=\"button.icon\" \r\n                    [iconSize]=\"22\"\r\n                    [iconChange]=\"button.iconChange\" \r\n                    [isChangeIcon]=\"getIsChangeIcon(button)\"\r\n                    [isLoading]=\"isButtonLoading(button)\"\r\n                    [disabled]=\"getDisabled(button)\"\r\n                    [tooltip]=\"getTooltip(button)\"\r\n                    [tooltipPosition]=\"button.tooltipPosition ?? 'top'\"\r\n                    (clicked)=\"filterBottomClick(button)\" \r\n                    [classes]=\"button.classes ?? ''\" \r\n                    [ngClasses]=\"{'min-w-auto p-1! pl-2! pr-2!' : true}\"\r\n                    />\r\n                }\r\n            }\r\n        </div>\r\n        \r\n    </div>\r\n</div>\r\n\r\n\r\n<!-- Contenedor defiltros -->\r\n <div class=\"select-none\">\r\n    <JDialog\r\n        [openModal]=\"dialog.openDialog\"\r\n        (closeModal)=\"dialog.onClose()\"\r\n        [dialogTemplate]=\"templateDialog\" \r\n        position=\"leftCenter\"\r\n        title=\"Filtros\"\r\n        [width]=\"220\"\r\n        height=\"auto\"\r\n        [overlay]=\"false\"\r\n        [draggable]=\"true\"\r\n    />\r\n</div>\r\n\r\n<ng-template #templateDialog>\r\n    <div class=\"m-0 pt-1\">\r\n        @if (filtersSelect.length > 0) {\r\n            <div class=\"flex flex-col gap-2\">\r\n            @for (filter of filtersSelect; track $index) {\r\n                  <!-- Dropdown -->\r\n                  @if (filter.type === 'dropdown') {\r\n                    <div>\r\n                        <JSelect\r\n                        [type]=\"'dropdown'\"\r\n                        [(ngModel)]=\"filter.selected\"\r\n                        (selectionChange)=\"filter.onSelected ? filter.onSelected($event) : null\"\r\n                        [optionLabel]=\"filter.optionLabel ?? ''\"\r\n                        [optionValue]=\"filter.optionValue ?? ''\"\r\n                        [placeholder]=\"filter.placeholder ?? ''\"\r\n                        [showClear]=\"filter.showClear ?? false\"\r\n                        [options]=\"filter.options\"\r\n                        />\r\n                    </div>\r\n\r\n                  }\r\n              \r\n                  <!-- Searchable -->\r\n                  @if (filter.type === 'searchable') {\r\n                    <div>\r\n                        <JSelect\r\n                        [type]=\"'searchable'\"\r\n                        [(ngModel)]=\"filter.selected\"\r\n                        (selectionChange)=\"filter.onSelected?.($event)\"\r\n                        [endpoint]=\"filter.endpoint\"\r\n                        [optionLabel]=\"filter.optionLabel\"\r\n                        [optionValue]=\"filter.optionValue\"\r\n                        [placeholder]=\"filter.placeholder ?? ''\"\r\n                        [showClear]=\"filter.showClear ?? false\"\r\n                        [loadOnInit]=\"filter.loadOnInit ?? false\"\r\n                        [isSearch]=\"filter.isSearch ?? true\"\r\n                        [searchFields]=\"filter.searchFields || []\"\r\n                        [defaultFilters]=\"filter.defaultFilters || []\"\r\n                        />\r\n                    </div>\r\n                  }\r\n              \r\n                  <!-- Multi-table -->\r\n                  @if (filter.type === 'multi-table') {\r\n                    <div>\r\n                        <JSelect\r\n                        [type]=\"'multi-table'\"\r\n                        [(ngModel)]=\"filter.selected\"\r\n                        (selectionChange)=\"filter.onSelected ? filter.onSelected($event) : null\"\r\n                        [columns]=\"filter.columns\"\r\n                        [btnText]=\"filter.btnText ?? ''\"\r\n                        [isFilterSelect]=\"true\"\r\n                        />\r\n                    </div>\r\n\r\n                  }\r\n                }\r\n            </div>\r\n              \r\n        } @else {\r\n            <div class=\"text-center text-sm text-black dark:text-white pt-5 pb-5\">\r\n                <p>No hay filtros disponibles</p>\r\n            </div>\r\n        }\r\n    </div>\r\n</ng-template>\r\n\r\n" }]
+        }], ctorParameters: () => [{ type: JDialogShared }, { type: JAlertToastService }, { type: i0.ChangeDetectorRef }], propDecorators: { isLoadingSearch: [{
+                type: Input
+            }], isLoadingPerPage: [{
+                type: Input
+            }], isLoadingAditionalButtons: [{
+                type: Input
+            }], searchPlaceholder: [{
+                type: Input
+            }], columns: [{
+                type: Input
+            }], itemsPerPageOptions: [{
+                type: Input
+            }], search: [{
+                type: Output
+            }], itemsPerPageChange: [{
+                type: Output
+            }], searchQueryChange: [{
+                type: Output
+            }], onItemsPerPageChangeEvent: [{
+                type: Output
+            }], clearFilters: [{
+                type: Output
+            }], itemsPerPage: [{
+                type: Input
+            }], searchQuery: [{
+                type: Input
+            }], filtersButton: [{
+                type: Input
+            }], filtersSelect: [{
+                type: Input
+            }] } });
+
+class JCalendarService {
+    // Variables
+    nameDaysAb = ['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb'];
+    nameDays = ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'];
+    nameMontsAb = ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'];
+    nameMonts = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'];
+    // visualizacion de calendario
+    dialogState = new BehaviorSubject(false);
+    dialogState$ = this.dialogState.asObservable();
+    constructor() { }
+    //===================================================================
+    // Transformaciones de fecha
+    //===================================================================
+    // Mostrar calendario
+    showDialog() {
+        this.dialogState.next(true);
+    }
+    // Ocultar calendario
+    hideDialog() {
+        this.dialogState.next(false);
+    }
+    // Obtener solo el mes
+    getMonthFromDate(date) {
+        const parsedDate = typeof date === 'string' ? new Date(date) : date;
+        const monthIndex = parsedDate.getMonth(); // getMonth() devuelve un índice basado en 0
+        return this.nameMonts[monthIndex]; // Devuelve el nombre completo del mes en español
+    }
+    //===================================================================
+    // Transformaciones de fecha
+    //===================================================================
+    // Obtener edad de la persona
+    calculateAge(birth) {
+        const birthDate = typeof birth === 'string' ? new Date(birth) : birth;
+        const today = new Date();
+        let age = today.getFullYear() - birthDate.getFullYear();
+        const m = today.getMonth() - birthDate.getMonth();
+        if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
+            age--;
+        }
+        return age;
+    }
+    // Obtener edad de la persona en años, meses y días
+    calculateAgeComplete(birth) {
+        const birthDate = typeof birth === 'string' ? new Date(birth) : birth;
+        const today = new Date();
+        let years = today.getFullYear() - birthDate.getFullYear();
+        let months = today.getMonth() - birthDate.getMonth();
+        let days = today.getDate() - birthDate.getDate();
+        if (days < 0) {
+            months--;
+            const previousMonth = new Date(today.getFullYear(), today.getMonth(), 0);
+            days += previousMonth.getDate();
+        }
+        if (months < 0) {
+            years--;
+            months += 12;
+        }
+        return { years, months, days };
+    }
+    // Transformar fecha en formato de string
+    formatearFechaString(date, month) {
+        const partesFecha = date.split('-'); // Dividir la fecha en partes [año, mes, día]
+        const año = partesFecha[0];
+        const mes = this.nameMonts[parseInt(partesFecha[1], 10) - 1];
+        const día = parseInt(partesFecha[2], 10);
+        let mes_fin;
+        if (month) {
+            mes_fin = mes + month;
+        }
+        else {
+            mes_fin = mes;
+        }
+        return `${día} de ${mes_fin} del ${año}`;
+    }
+    // transformar fecha con formato de Date
+    formatearFechaDate(date, month) {
+        let new_date;
+        if (month) {
+            new_date = new Date(date.setMonth(month));
+        }
+        else {
+            new_date = date;
+        }
+        const año = new_date.getFullYear();
+        const mes = this.nameMonts[new_date.getMonth()];
+        const día = new_date.getDate();
+        return `${día} de ${mes} del ${año}`;
+    }
+    // Formatea una fecha como "MMM YYYY"
+    formatMonthYear(date) {
+        const months = this.nameMontsAb.map(month => month.toUpperCase());
+        const month = months[date.getMonth()];
+        const year = date.getFullYear().toString().slice(-2);
+        return `${month} ${year}`;
+    }
+    // Formatear fecha y hora a region bogota
+    formatDateToBogota(date) {
+        // Ajustar la fecha a la zona horaria de Bogotá (UTC-5)
+        const bogotaOffset = -5 * 60; // Offset en minutos
+        const localTime = date.getTime();
+        const localOffset = date.getTimezoneOffset() * 60000;
+        const utc = localTime + localOffset;
+        const bogotaTime = utc + (bogotaOffset * 60000);
+        const bogotaDate = new Date(bogotaTime);
+        // Formatear la fecha a una cadena en el formato 'yyyy-MM-ddTHH:mm:ss'
+        const year = bogotaDate.getFullYear();
+        const month = String(bogotaDate.getMonth() + 1).padStart(2, '0');
+        const day = String(bogotaDate.getDate()).padStart(2, '0');
+        const hours = String(bogotaDate.getHours()).padStart(2, '0');
+        const minutes = String(bogotaDate.getMinutes()).padStart(2, '0');
+        const seconds = String(bogotaDate.getSeconds()).padStart(2, '0');
+        return `${year}-${month}-${day}T${hours}:${minutes}:${seconds}`;
+    }
+    // Formatear el tiempo restante
+    formatRelativeDate(date) {
+        return formatDistanceToNowStrict(new Date(date), {
+            locale: {
+                ...es,
+                formatDistance: (token, count, options) => {
+                    const formatDistanceLocale = {
+                        lessThanXSeconds: 'hace menos de {{count}} segundos',
+                        xSeconds: 'hace {{count}} segundos',
+                        halfAMinute: 'hace medio minuto',
+                        lessThanXMinutes: 'hace menos de {{count}} minutos',
+                        xMinutes: 'hace {{count}} minutos',
+                        aboutXHours: 'hace aproximadamente {{count}} horas',
+                        xHours: 'hace {{count}} horas',
+                        xDays: 'hace {{count}} días',
+                        aboutXWeeks: 'hace aproximadamente {{count}} semanas',
+                        xWeeks: 'hace {{count}} semanas',
+                        aboutXMonths: 'hace aproximadamente {{count}} meses',
+                        xMonths: 'hace {{count}} meses',
+                        aboutXYears: 'hace aproximadamente {{count}} años',
+                        xYears: 'hace {{count}} años',
+                        overXYears: 'hace más de {{count}} años',
+                        almostXYears: 'hace casi {{count}} años'
+                    };
+                    let result = formatDistanceLocale[token];
+                    if (typeof count === 'number') {
+                        result = result.replace('{{count}}', count.toString());
+                        // Manejar el singular y plural
+                        if (token === 'xHours' && count === 1) {
+                            result = result.replace('horas', 'hora');
+                        }
+                        if (token === 'xDays' && count === 1) {
+                            result = result.replace('días', 'día');
+                        }
+                        if (token === 'xWeeks' && count === 1) {
+                            result = result.replace('semanas', 'semana');
+                        }
+                        if (token === 'xMonths' && count === 1) {
+                            result = result.replace('meses', 'mes');
+                        }
+                        if (token === 'xYears' && count === 1) {
+                            result = result.replace('años', 'año');
+                        }
+                    }
+                    return result;
+                }
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: JCalendarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: JCalendarService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: JCalendarService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class CardComponent {
+    currencyPipe;
+    genericService;
+    alertToastService;
+    converterService;
+    calendarService;
+    Math = Math;
+    // Estados de carga
+    dataLoaded = new EventEmitter();
+    loadingStates = {
+        initialLoad: 'idle',
+        search: 'idle',
+        itemsPerPage: 'idle',
+        pagination: 'idle',
+        sort: 'idle',
+        aditionalButtons: {},
+        checked: 'idle',
+        action: 'idle',
+    };
+    // Lucide icons
+    icons = {
+        sortDefault: ChevronsUpDown,
+        sortAsc: ChevronUp,
+        sortDesc: ChevronDown,
+        chevronLeft: ChevronLeft,
+        chevronRight: ChevronRight,
+        view: Eye,
+        edit: Edit,
+        delete: Trash,
+        search: Search,
+        check: Check,
+        loading: Loader2
+    };
+    endpoint;
+    columns = [];
+    defaultFilters = {};
+    isPaginator = true;
+    isSearch = true;
+    data = [];
+    itemTemplate;
+    // Expansion
+    expandTemplate;
+    expandedRows = new Set();
+    // Pagination
+    currentPage = 1;
+    itemsPerPageOptions = [10, 25, 50, 100];
+    itemsPerPage = this.itemsPerPageOptions[0];
+    totalItems = 0;
+    // Sorting
+    sortColumn = null;
+    sortDirection = 'none';
+    sortingColumn = null;
+    // Search
+    searchQuery = '';
+    searchPlaceholder = 'Buscar...';
+    // Filters
+    filters = {};
+    // Datos filtrados y paginados
+    displayData = [];
+    // Pagination display
+    pages = [];
+    // Propiedades calculadas para su visualización
+    get startIndex() {
+        return (this.currentPage - 1) * this.itemsPerPage;
+    }
+    get totalPages() {
+        return Math.ceil(this.totalItems / this.itemsPerPage);
+    }
+    // Configuración de botones
+    filtersButton = [];
+    // Filtros de tabla
+    filtersSelect = [];
+    constructor(currencyPipe, genericService, alertToastService, converterService, calendarService) {
+        this.currencyPipe = currencyPipe;
+        this.genericService = genericService;
+        this.alertToastService = alertToastService;
+        this.converterService = converterService;
+        this.calendarService = calendarService;
+    }
+    ngOnInit() {
+        this.columnDefaults();
+        this.loadData();
+        this.overrideFilterEvents();
+    }
+    overrideFilterEvents() {
+        for (const filter of this.filtersSelect) {
+            if (filter.type === 'dropdown' || filter.type === 'searchable') {
+                const key = filter.optionValue ?? 'value';
+                const deepKey = filter.deep ? `${filter.deep}.${key}` : key;
+                const originalOnSelected = filter.onSelected;
+                filter.onSelected = (value) => {
+                    const selectedValue = value?.[key] ?? value;
+                    if (selectedValue === null || selectedValue === undefined) {
+                        delete this.filters[deepKey];
+                    }
+                    else {
+                        this.filters[deepKey] = selectedValue;
+                    }
+                    // Llama al original
+                    if (typeof originalOnSelected === 'function') {
+                        originalOnSelected(value);
+                    }
+                    this.loadData('search');
+                };
+            }
+        }
+    }
+    // =====================================================
+    // Obtener datos
+    // =====================================================
+    // Cargar datos desde el servidor
+    loadData(loadingType = 'initialLoad', onFinally) {
+        this.setLoadingState(loadingType, 'loading');
+        const params = this.getQueryParams();
+        // Simulando espera de API
+        // setTimeout(() => {
+        this.genericService.getAll(this.endpoint, params).subscribe({
+            next: (response) => {
+                this.data = response.data[this.endpoint] ?? [];
+                if (response.meta?.page) {
+                    this.totalItems = response.meta.page.totalRecords;
+                    this.currentPage = response.meta.page.currentPage;
+                }
+                else {
+                    this.totalItems = this.data.length;
+                }
+                if (response.meta?.sort) {
+                    this.sortColumn = response.meta.sort.by;
+                    this.sortDirection = response.meta.sort.order.toLowerCase();
+                }
+                this.updateDisplayData();
+                this.generatePagination();
+                this.setLoadingState(loadingType, 'success');
+            },
+            error: (error) => {
+                console.error('Error fetching data:', error);
+                this.setLoadingState(loadingType, 'error');
+            }
+        }).add(() => {
+            this.dataLoaded.emit();
+            if (loadingType === 'sort') {
+                this.sortingColumn = null;
+            }
+            // Llamar al callback si fue proporcionado
+            if (onFinally) {
+                onFinally();
+            }
+        });
+        // }, 2000);
+    }
+    // Actualizar los datos que se muestran en la tabla
+    updateDisplayData() {
+        this.displayData = this.data;
+    }
+    // =====================================================
+    // Cambiar estado en campos booleanos
+    // =====================================================
+    // Método para cambiar el estado de un checkbox
+    onCheckboxChange(item, column) {
+        // Get the ID field name based on dataProperty
+        const idField = `id_${this.endpoint}`;
+        // Get the record ID
+        const recordId = item[idField];
+        // Get the current boolean value
+        const currentValue = this.getValue(item, column);
+        // Actualizar estado
+        this.genericService.enable(this.endpoint, recordId, { [column.key]: !currentValue }).subscribe({
+            next: (response) => {
+                item[column.key] = !currentValue;
+                this.alertToastService.AlertToast({
+                    type: "success",
+                    title: "Registro actualizado!",
+                    description: response.msg,
+                });
+            }
+        });
+    }
+    // Eliminar filtros
+    onClearFilters(buttonType) {
+        this.setAditionalButtonLoading(buttonType);
+        this.loadData('initialLoad', () => {
+            this.clearAditionalButtonLoading(buttonType);
+        });
+    }
+    // =====================================================
+    // Columnas
+    // =====================================================
+    // Valores por defecto de las columnas
+    columnDefaults() {
+        // Valores por defecto de las columnas
+        this.columns.forEach(column => {
+            if (column.visible === undefined) {
+                column.visible = true;
+            }
+            if (column.sortable === undefined) {
+                column.sortable = true;
+            }
+            if (column.isSearchable === undefined) {
+                column.isSearchable = true;
+            }
+        });
+    }
+    // Obtener el recuento de columnas visibles para colspan en estado vacío
+    getVisibleColumnsCount() {
+        return this.columns.filter(col => col.visible).length;
+    }
+    // =====================================================
+    // Prosesamiento de datos
+    // =====================================================
+    // Obtener el valor de las celdas para identificar un campo booleano
+    isBoolean(value) {
+        return typeof value === 'boolean';
+    }
+    // Método para obtener el valor de las celdas dinámicamente
+    getValue(item, column) {
+        let value;
+        // Si existe un valueGetter, se usa directamente
+        if (typeof column.valueGetter === 'function') {
+            value = column.valueGetter(item);
+        }
+        else {
+            // Si no, se busca el valor por key (con soporte para claves anidadas)
+            const keys = column.key.split('.');
+            value = item;
+            for (const key of keys) {
+                if (value != null) {
+                    value = value[key];
+                }
+                else {
+                    value = null;
+                    break;
+                }
+            }
+        }
+        // Si value es null o undefined, retornar 'S/N'
+        if (value === null || value === undefined) {
+            return 'S/N';
+        }
+        // Aplicar formato según configuración de columna
+        const formatted = this.formatData(value, column);
+        // Si formatData no devuelve nada (valor no formateado), devolver el valor original
+        return formatted ?? value;
+    }
+    // Formatear datos para la tabla
+    formatData(value, column) {
+        // Añadir formato de moneda pero solo con el simbolo de $
+        if (column.isdollar && value !== null) {
+            const transformedValue = this.currencyPipe.transform(value, 'USD', 'symbol', '1.2-2');
+            return transformedValue ? transformedValue.replace('US', '') : null;
+        }
+        if (column.isCurrency && value !== null) {
+            return this.currencyPipe.transform(value, 'USD', 'symbol', '1.2-2');
+        }
+        if (column.isDate && value !== null) {
+            return new Date(value).toLocaleDateString();
+        }
+        if (column.isDateText && value !== null) {
+            return this.calendarService.formatearFechaString(`${value}`);
+        }
+        if (column.isDateTime && value !== null) {
+            return new Date(value).toLocaleString();
+        }
+        if (column.isDateTimeText && value !== null) {
+            return new Date(value).toString();
+        }
+        if (column.isRelativeTime && value !== null) {
+            return this.calendarService.formatRelativeDate(value);
+        }
+        if (column.isFirstWord && value !== null) {
+            return value.split(' ')[0];
+        }
+        // Si no se aplica ningún formato, retornar el valor original
+        return value;
+    }
+    // =====================================================
+    // Parametros de busqueda
+    // =====================================================
+    // Obtener los parámetros de consulta para la solicitud de datos
+    getQueryParams() {
+        const params = this.genericService.params({
+            page: this.currentPage,
+            limit: this.itemsPerPage,
+            sort: {
+                column: this.sortColumn,
+                direction: this.sortDirection,
+            },
+            filters: this.filters,
+            defaultFilters: this.defaultFilters,
+        });
+        if (this.searchQuery && this.searchQuery.trim() !== '') {
+            const baseSearchKeys = this.columns
+                .filter(col => col.isSearchable)
+                .map(col => col.key);
+            const extraSearchKeys = this.columns
+                .flatMap(col => col.extraSearchFields || []);
+            const allSearchKeys = [...baseSearchKeys, ...extraSearchKeys];
+            params['search'] = this.searchQuery;
+            params['searchFields'] = allSearchKeys;
+        }
+        return params;
+    }
+    // =====================================================
+    // Ordenamiento
+    // =====================================================
+    // Numero de pagina
+    getRowNumber(index) {
+        return this.startIndex + index + 1;
+    }
+    // Ordenamiento de columnas
+    onSort(column) {
+        // Evitar múltiples solicitudes de ordenamiento simultáneas
+        if (this.isLoading('sort')) {
+            return;
+        }
+        if (!column.sortable)
+            return;
+        // Guardar la columna que está siendo ordenada
+        this.sortingColumn = column.key;
+        // Verificamos si estamos tratando con la misma columna que el último ordenamiento
+        const currentSortKey = this.converterService.getSortKey(this.sortColumn);
+        const columnSortKey = this.converterService.getSortKey(column.key);
+        // Sort direction logic
+        if (currentSortKey === columnSortKey) {
+            // Alternar la dirección del ordenamiento
+            if (this.sortDirection === 'asc') {
+                this.sortDirection = 'desc';
+            }
+            else if (this.sortDirection === 'desc') {
+                this.sortDirection = 'none';
+            }
+            else {
+                this.sortDirection = 'asc';
+            }
+        }
+        else {
+            // Si se selecciona una nueva columna para ordenar, iniciar con orden ascendente
+            this.sortColumn = column.key;
+            this.sortDirection = 'asc';
+        }
+        this.loadData('sort');
+    }
+    // Obtener la dirección de ordenamiento
+    getSortKey(value) {
+        return this.converterService.getSortKey(value);
+    }
+    // Manejar el evento de tecla presionada en la ordenación
+    onSortKeyPress(event, column) {
+        // Si ya hay una ordenación en progreso, no permitir otra
+        if (this.isLoading('sort')) {
+            return;
+        }
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.onSort(column);
+        }
+    }
+    // =====================================================
+    // Search
+    // =====================================================
+    // Search functionality
+    onSearch() {
+        this.currentPage = 1;
+        this.loadData('search');
+    }
+    // Selector de items por página
+    onItemsPerPageChange() {
+        this.currentPage = 1;
+        this.loadData('itemsPerPage');
+    }
+    // =====================================================
+    // Paginator
+    // =====================================================
+    // Generar numeros de paginación
+    generatePagination() {
+        const totalPages = this.totalPages;
+        const currentPage = this.currentPage;
+        // Ver los 5 numeros de paginación
+        const maxPagesToShow = 3;
+        let startPage = Math.max(1, currentPage - Math.floor(maxPagesToShow / 2));
+        let endPage = Math.min(totalPages, startPage + maxPagesToShow - 1);
+        // Adjust if we're near the end
+        if (endPage - startPage + 1 < maxPagesToShow) {
+            startPage = Math.max(1, endPage - maxPagesToShow + 1);
+        }
+        this.pages = Array.from({ length: endPage - startPage + 1 }, (_, i) => startPage + i);
+    }
+    // Paginar
+    handlePageChange(page) {
+        this.currentPage = page;
+        this.loadData('pagination');
+    }
+    // =====================================================
+    // Opciones
+    // =====================================================
+    // Método para manejar el clic de un botón
+    onButtonClick(button, element) {
+        // Ejecuta la acción del padre si está definida
+        if (button.clicked) {
+            button.clicked(element);
+        }
+    }
+    // Método para obtener un tooltip
+    getTooltip(tooltip, data) {
+        if (typeof tooltip === 'function') {
+            return tooltip(data);
+        }
+        return tooltip ?? '';
+    }
+    // Método para obtener un icono
+    getIcon(icon, data) {
+        if (typeof icon === 'function') {
+            return icon(data);
+        }
+        return icon;
+    }
+    // Evaluar si un botón está deshabilitado
+    getDisabled(option, data) {
+        if (typeof option.disabled === 'function') {
+            return option.disabled(data);
+        }
+        return !!option.disabled;
+    }
+    // Evaluar si un botón es visible
+    getIsVisible(option, data) {
+        if (typeof option.isVisible === 'function') {
+            return option.isVisible(data);
+        }
+        // Si no se define, por defecto es visible
+        return option.isVisible !== false;
+    }
+    // Método para obtener la clase CSS de un botón
+    mergeNgClasses(optionNgClass, data) {
+        const baseClass = {
+            'min-w-auto p-1! pl-2! pr-2!': true
+        };
+        let dynamicClass = {};
+        if (typeof optionNgClass === 'function') {
+            dynamicClass = optionNgClass(data);
+        }
+        else {
+            dynamicClass = optionNgClass ?? {};
+        }
+        return {
+            ...baseClass,
+            ...(typeof dynamicClass === 'string' ? { [dynamicClass]: true } : dynamicClass)
+        };
+    }
+    // =====================================================
+    // Parametros de carga
+    // =====================================================
+    // Método para verificar si un estado específico está cargando
+    isLoading(state) {
+        return this.loadingStates[state] === 'loading';
+    }
+    // Método para verificar si cualquier estado está cargando
+    isAnyLoading() {
+        return Object.values(this.loadingStates).some(state => state === 'loading');
+    }
+    // Método para actualizar un estado de carga
+    setLoadingState(state, value) {
+        if (state === 'aditionalButtons') {
+            if (typeof value === 'string') {
+                // Evita asignar un string directamente si se espera un objeto
+                console.warn(`No puedes asignar '${value}' directamente a aditionalButtons. Usa setAditionalButtonLoading en su lugar.`);
+            }
+            else {
+                this.loadingStates.aditionalButtons = value;
+            }
+        }
+        else {
+            this.loadingStates[state] = value;
+        }
+    }
+    // Activar loading
+    setAditionalButtonLoading(buttonType, id) {
+        const key = id !== undefined ? `${buttonType}_${id}` : buttonType;
+        this.loadingStates.aditionalButtons[key] = 'loading';
+    }
+    // Limpiar loading
+    clearAditionalButtonLoading(buttonType, id) {
+        const key = id !== undefined ? `${buttonType}_${id}` : buttonType;
+        this.loadingStates.aditionalButtons[key] = 'idle';
+    }
+    // Verificar loading
+    isAditionalButtonLoading(buttonType, id) {
+        const key = id !== undefined ? `${buttonType}_${id}` : buttonType;
+        return this.loadingStates.aditionalButtons[key] === 'loading';
+    }
+    // ==================================================
+    // Expandir filas
+    // ==================================================
+    // Método para verificar si la tabla tiene filas expandibles
+    hasExpandable() {
+        return this.columns.some(col => typeof col.expandTemplate === 'function');
+    }
+    // Método para verificar si una fila está expandida
+    toggleRow(row) {
+        if (this.expandedRows.has(row)) {
+            this.expandedRows.delete(row);
+        }
+        else {
+            this.expandedRows.add(row);
+        }
+    }
+    // Método para obtener contenido expandido de una fila
+    getExpandedContent(row) {
+        const expandableColumn = this.columns.find(col => typeof col.expandTemplate === 'function');
+        return expandableColumn?.expandTemplate?.(row) ?? '';
+    }
+    // Método para obtener el estado de expansión de una fila
+    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 ɵ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({
+                    height: '0',
+                    opacity: 0,
+                    overflow: 'hidden',
+                })),
+                state('expanded', style({
+                    height: '*',
+                    opacity: 1,
+                })),
+                transition('collapsed <=> expanded', [
+                    animate('0.3s ease-in-out')
+                ])
+            ])
+        ] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: CardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'JCrudCard', standalone: true, imports: [CommonModule, FormsModule, JPaginatorComponent, JFilterComponent, LucideAngularModule], animations: [
+                        trigger('slideToggle', [
+                            state('collapsed', style({
+                                height: '0',
+                                opacity: 0,
+                                overflow: 'hidden',
+                            })),
+                            state('expanded', style({
+                                height: '*',
+                                opacity: 1,
+                            })),
+                            transition('collapsed <=> expanded', [
+                                animate('0.3s ease-in-out')
+                            ])
+                        ])
+                    ], 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: [{
+                type: Output
+            }], endpoint: [{
+                type: Input
+            }], columns: [{
+                type: Input
+            }], defaultFilters: [{
+                type: Input
+            }], isPaginator: [{
+                type: Input
+            }], isSearch: [{
+                type: Input
+            }], itemTemplate: [{
+                type: Input
+            }], itemsPerPageOptions: [{
+                type: Input
+            }], searchPlaceholder: [{
+                type: Input
+            }], filtersButton: [{
+                type: Input
+            }], filtersSelect: [{
+                type: Input
+            }] } });
+
+class JFormShared {
+    alertToastService;
+    icons = {
+        add: Plus,
+        edit: Edit,
+        delete: Trash,
+        ban: Ban,
+        power: Power,
+        default: Cpu,
+        keyRound: KeyRound,
+        userRoundSearch: UserRoundSearch,
+        circleCheckBig: CircleCheckBig,
+        mousePointerClick: MousePointerClick,
+    };
+    // Resetear formulario
+    onResetCallback = null;
+    isLoading = false;
+    openForm = false;
+    typeForm = 'create';
+    formControls = {};
+    messages = null;
+    constructor(alertToastService) {
+        this.alertToastService = alertToastService;
+    }
+    onOpen() {
+        this.openForm = true;
+        if (this.onResetCallback) {
+            this.onResetCallback();
+        }
+    }
+    onClose() {
+        this.openForm = false;
+    }
+    onValidateChange(validation) {
+        if (validation) {
+            this.alertToastService.AlertToast({
+                type: "info",
+                title: "Sin cambios...",
+                description: "No se han realizado cambios en el formulario"
+            });
+            return true;
+        }
+        return false;
+    }
+    onTableDataLoaded() {
+        this.isLoading = false;
+        this.openForm = false;
+        if (this.messages) {
+            this.alertToastService.AlertToast({
+                type: "success",
+                ...this.messages
+            });
+            this.messages = null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: JFormShared, deps: [{ token: JAlertToastService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: JFormShared, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: JFormShared, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: JAlertToastService }] });
+
+class JFormComponent {
+    icons = {
+        x: X,
+        save: Save,
+        circleX: CircleX,
+        info: Info,
+        asterisk: Asterisk
+    };
+    formTemplate;
+    submitForm = new EventEmitter();
+    // Mostrar formulario lateral
+    openForm = false;
+    closeForm = new EventEmitter();
+    typeForm = 'none';
+    titleForm = 'REGISTRO';
+    isLoading = false;
+    checkboxes = [];
+    constructor() { }
+    onSubmit() {
+        this.submitForm.emit();
+    }
+    onClose() {
+        this.closeForm.emit();
+    }
+    handleEscape(event) {
+        if (this.openForm) {
+            this.onClose();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: JFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: JFormComponent, isStandalone: true, selector: "JCrudForm", inputs: { formTemplate: "formTemplate", openForm: "openForm", typeForm: "typeForm", isLoading: "isLoading", checkboxes: "checkboxes" }, outputs: { submitForm: "submitForm", closeForm: "closeForm" }, host: { listeners: { "document:keydown.escape": "handleEscape($event)" } }, ngImport: i0, template: "<section class=\"content_form\">\r\n    <!-- Overlay -->\r\n    @if (openForm) {\r\n    <div onKeyPress class=\"fixed top-0 left-0 w-full h-full bg-black/50 z-[998] transition duration-300\" (click)=\"onClose()\"></div>\r\n    }\r\n\r\n    <!-- Sidebar personalizado -->\r\n    @if (openForm) {\r\n    <div @sidebarTransition\r\n        class=\"fixed top-0 right-0 h-full w-[30em] max-w-full border border-border dark:border-dark-border rounded-tl-[15px] rounded-bl-[15px] text-white bg-white dark:bg-dark-background shadow-lg z-[999] flex flex-col\">\r\n        <!-- Header -->\r\n        <div class=\"flex p-2 pl-4 pr-4 justify-between items-center bg-primary dark:bg-dark-primary border-b border-border dark:border-dark-border rounded-tl-[15px] font-semibold text-2sm\">\r\n            <div class=\"flex items-center gap-2\">\r\n                <span>\r\n                    {{ typeForm !== 'none' ? typeForm === 'create' ? 'AGREGAR' : 'ACTUALIZAR' : 'REGISTROS' }} {{ typeForm !== 'none' ? titleForm : '' }}\r\n                </span>\r\n                \r\n                <div class=\"cursor-pointer\" \r\n                    [jTooltip]=\"tooltipContentChangePassword\" \r\n                    [jTooltipPosition]=\"'bottom'\" \r\n                    [jTooltipOffsetX]=\"25\"\r\n                    [jTooltipOffsetY]=\"-20\"\r\n                >\r\n                    <lucide-icon [name]=\"icons['info']\" [size]=\"15\"></lucide-icon>\r\n                </div>\r\n            </div>\r\n\r\n\r\n            <ng-template #tooltipContentChangePassword>\r\n            <div class=\"text-[12px] leading-[15px]\">\r\n                <span>Las etiquetas con \u2731 indican campos requeridos.</span> <br>\r\n                <span><span class=\"text-red-600 dark:text-red-300\">\u2731</span> Obligatorio</span> <br>\r\n                <span><span class=\"text-blue-600 dark:text-blue-300\">\u2731</span> Condicionado</span> <br>\r\n                <span><span class=\"text-purple-600 dark:text-purple-300\">\u2731</span> Autom\u00E1tico</span> <br>\r\n            </div>\r\n            </ng-template>\r\n\r\n            <div class=\"flex gap-2\">\r\n                @for (cb of checkboxes; track $index) {\r\n                    @if (cb.isVisible) {\r\n                        <JCheckbox onKeyPress\r\n                            type=\"switch\"\r\n                            [title]=\"cb.title\"\r\n                            [isChecked]=\"cb.isChecked\"\r\n                            [isLoading]=\"cb.isLoading\"\r\n                            (click)=\"cb.onClick(!cb.isChecked, $index)\"\r\n                        />\r\n                    }\r\n                }\r\n              </div>\r\n\r\n            <button type=\"button\" (click)=\"onClose()\" class=\"p-2 rounded-full border border-border dark:border-dark-border text-white hover:bg-dark-background focus:outline-none cursor-pointer\">\r\n                <lucide-icon [name]=\"icons['x']\" size=\"16\"></lucide-icon>\r\n            </button>\r\n        </div>\r\n\r\n        <!-- Content -->\r\n        <div class=\"p-4 flex-1 overflow-x-hidden overflow-y-auto scroll-element\">\r\n            @if (formTemplate) {\r\n            <ng-container [ngTemplateOutlet]=\"formTemplate\"></ng-container>\r\n            }\r\n        </div>\r\n\r\n        <!-- Footer -->\r\n        @if (typeForm !== 'none') {\r\n        <div class=\"p-4 border-t border-border dark:border-dark-border rounded-bl-[15px] flex justify-center gap-3\">\r\n            <JButton\r\n             type=\"submit\" \r\n             (clicked)=\"onSubmit()\" \r\n             classes=\"primary\" \r\n             [icon]=\"icons['save']\" \r\n             [isLoading]=\"isLoading\"\r\n             >{{typeForm === 'create' ? 'AGREGAR' : 'ACTUALIZAR'}}</JButton>  \r\n\r\n            <JButton \r\n            type=\"button\" \r\n            (clicked)=\"onClose()\" \r\n            classes=\"secondary\" \r\n            [icon]=\"icons['circleX']\" \r\n            text=\"CANCELAR\" \r\n            />\r\n        </div>\r\n        }\r\n    </div>\r\n    }\r\n</section>", styles: [""], dependencies: [{ 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: "directive", type: JTooltipModule, selector: "[jTooltip]", inputs: ["jTooltip", "jTooltipPosition", "jTooltipShowArrow", "jTooltipOffsetX", "jTooltipOffsetY"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: JCheckboxComponent, selector: "JCheckbox", inputs: ["type", "icon", "iconSize", "disabled", "isLoading", "classes", "title", "isChecked", "item", "column", "getValue", "onCheckboxChange", "toggleSwitch"] }], animations: [
+            trigger('sidebarTransition', [
+                transition(':enter', [
+                    style({ opacity: 0, transform: 'translateX(100%)' }),
+                    animate('300ms ease-out', style({ opacity: 1, transform: 'translateX(0)' }))
+                ]),
+                transition(':leave', [
+                    animate('200ms ease-in', style({ opacity: 0, transform: 'translateX(100%)' }))
+                ])
+            ])
+        ] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: JFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'JCrudForm', standalone: true, imports: [LucideAngularModule, JButtonComponent, JTooltipModule, ReactiveFormsModule, FormsModule, CommonModule, JCheckboxComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], animations: [
+                        trigger('sidebarTransition', [
+                            transition(':enter', [
+                                style({ opacity: 0, transform: 'translateX(100%)' }),
+                                animate('300ms ease-out', style({ opacity: 1, transform: 'translateX(0)' }))
+                            ]),
+                            transition(':leave', [
+                                animate('200ms ease-in', style({ opacity: 0, transform: 'translateX(100%)' }))
+                            ])
+                        ])
+                    ], template: "<section class=\"content_form\">\r\n    <!-- Overlay -->\r\n    @if (openForm) {\r\n    <div onKeyPress class=\"fixed top-0 left-0 w-full h-full bg-black/50 z-[998] transition duration-300\" (click)=\"onClose()\"></div>\r\n    }\r\n\r\n    <!-- Sidebar personalizado -->\r\n    @if (openForm) {\r\n    <div @sidebarTransition\r\n        class=\"fixed top-0 right-0 h-full w-[30em] max-w-full border border-border dark:border-dark-border rounded-tl-[15px] rounded-bl-[15px] text-white bg-white dark:bg-dark-background shadow-lg z-[999] flex flex-col\">\r\n        <!-- Header -->\r\n        <div class=\"flex p-2 pl-4 pr-4 justify-between items-center bg-primary dark:bg-dark-primary border-b border-border dark:border-dark-border rounded-tl-[15px] font-semibold text-2sm\">\r\n            <div class=\"flex items-center gap-2\">\r\n                <span>\r\n                    {{ typeForm !== 'none' ? typeForm === 'create' ? 'AGREGAR' : 'ACTUALIZAR' : 'REGISTROS' }} {{ typeForm !== 'none' ? titleForm : '' }}\r\n                </span>\r\n                \r\n                <div class=\"cursor-pointer\" \r\n                    [jTooltip]=\"tooltipContentChangePassword\" \r\n                    [jTooltipPosition]=\"'bottom'\" \r\n                    [jTooltipOffsetX]=\"25\"\r\n                    [jTooltipOffsetY]=\"-20\"\r\n                >\r\n                    <lucide-icon [name]=\"icons['info']\" [size]=\"15\"></lucide-icon>\r\n                </div>\r\n            </div>\r\n\r\n\r\n            <ng-template #tooltipContentChangePassword>\r\n            <div class=\"text-[12px] leading-[15px]\">\r\n                <span>Las etiquetas con \u2731 indican campos requeridos.</span> <br>\r\n                <span><span class=\"text-red-600 dark:text-red-300\">\u2731</span> Obligatorio</span> <br>\r\n                <span><span class=\"text-blue-600 dark:text-blue-300\">\u2731</span> Condicionado</span> <br>\r\n                <span><span class=\"text-purple-600 dark:text-purple-300\">\u2731</span> Autom\u00E1tico</span> <br>\r\n            </div>\r\n            </ng-template>\r\n\r\n            <div class=\"flex gap-2\">\r\n                @for (cb of checkboxes; track $index) {\r\n                    @if (cb.isVisible) {\r\n                        <JCheckbox onKeyPress\r\n                            type=\"switch\"\r\n                            [title]=\"cb.title\"\r\n                            [isChecked]=\"cb.isChecked\"\r\n                            [isLoading]=\"cb.isLoading\"\r\n                            (click)=\"cb.onClick(!cb.isChecked, $index)\"\r\n                        />\r\n                    }\r\n                }\r\n              </div>\r\n\r\n            <button type=\"button\" (click)=\"onClose()\" class=\"p-2 rounded-full border border-border dark:border-dark-border text-white hover:bg-dark-background focus:outline-none cursor-pointer\">\r\n                <lucide-icon [name]=\"icons['x']\" size=\"16\"></lucide-icon>\r\n            </button>\r\n        </div>\r\n\r\n        <!-- Content -->\r\n        <div class=\"p-4 flex-1 overflow-x-hidden overflow-y-auto scroll-element\">\r\n            @if (formTemplate) {\r\n            <ng-container [ngTemplateOutlet]=\"formTemplate\"></ng-container>\r\n            }\r\n        </div>\r\n\r\n        <!-- Footer -->\r\n        @if (typeForm !== 'none') {\r\n        <div class=\"p-4 border-t border-border dark:border-dark-border rounded-bl-[15px] flex justify-center gap-3\">\r\n            <JButton\r\n             type=\"submit\" \r\n             (clicked)=\"onSubmit()\" \r\n             classes=\"primary\" \r\n             [icon]=\"icons['save']\" \r\n             [isLoading]=\"isLoading\"\r\n             >{{typeForm === 'create' ? 'AGREGAR' : 'ACTUALIZAR'}}</JButton>  \r\n\r\n            <JButton \r\n            type=\"button\" \r\n            (clicked)=\"onClose()\" \r\n            classes=\"secondary\" \r\n            [icon]=\"icons['circleX']\" \r\n            text=\"CANCELAR\" \r\n            />\r\n        </div>\r\n        }\r\n    </div>\r\n    }\r\n</section>" }]
+        }], ctorParameters: () => [], propDecorators: { formTemplate: [{
+                type: Input
+            }], submitForm: [{
+                type: Output
+            }], openForm: [{
+                type: Input
+            }], closeForm: [{
+                type: Output
+            }], typeForm: [{
+                type: Input
+            }], isLoading: [{
+                type: Input
+            }], checkboxes: [{
+                type: Input
+            }], handleEscape: [{
+                type: HostListener,
+                args: ['document:keydown.escape', ['$event']]
+            }] } });
+
+class JTableComponent {
+    currencyPipe;
+    genericService;
+    alertToastService;
+    converterService;
+    calendarService;
+    Math = Math;
+    // Estados de carga
+    dataLoaded = new EventEmitter();
+    loadingStates = {
+        initialLoad: 'idle',
+        search: 'idle',
+        itemsPerPage: 'idle',
+        pagination: 'idle',
+        sort: 'idle',
+        aditionalButtons: {},
+        checked: 'idle',
+        action: 'idle',
+    };
+    // Lucide icons
+    icons = {
+        sortDefault: ChevronsUpDown,
+        sortAsc: ChevronUp,
+        sortDesc: ChevronDown,
+        chevronLeft: ChevronLeft,
+        chevronRight: ChevronRight,
+        view: Eye,
+        edit: Edit,
+        delete: Trash,
+        search: Search,
+        check: Check,
+        loading: Loader2
+    };
+    endpoint;
+    columns = [];
+    defaultFilters = {};
+    isPaginator = true;
+    isSearch = true;
+    data = [];
+    // Expansion 
+    expandTemplate;
+    expandedRows = new Set();
+    // Pagination
+    currentPage = 1;
+    itemsPerPageOptions = [10, 25, 50, 100];
+    itemsPerPage = this.itemsPerPageOptions[0];
+    totalItems = 0;
+    // Sorting
+    sortColumn = null;
+    sortDirection = 'none';
+    sortingColumn = null;
+    // Search
+    searchQuery = '';
+    searchPlaceholder = 'Buscar...';
+    // Filters
+    filters = {};
+    // Datos filtrados y paginados
+    displayData = [];
+    // Pagination display
+    pages = [];
+    // Check
+    checked = false;
+    checkedValues = [[true], [false]];
+    checkedTitles = ["Activos", "Inactivos"];
+    isChecked;
+    titleChecked;
+    // Propiedades calculadas para su visualización
+    get startIndex() {
+        return (this.currentPage - 1) * this.itemsPerPage;
+    }
+    get totalPages() {
+        return Math.ceil(this.totalItems / this.itemsPerPage);
+    }
+    // Configuración de botones
+    filtersButton = [];
+    // Filtros de tabla
+    filtersSelect = [];
+    // Opciones de botones
+    optionsTable = [];
+    constructor(currencyPipe, genericService, alertToastService, converterService, calendarService) {
+        this.currencyPipe = currencyPipe;
+        this.genericService = genericService;
+        this.alertToastService = alertToastService;
+        this.converterService = converterService;
+        this.calendarService = calendarService;
+    }
+    ngOnInit() {
+        this.isChecked = this.checkedValues[0][0];
+        this.titleChecked = this.checkedTitles[0];
+        this.columnDefaults();
+        this.loadData();
+        this.overrideFilterEvents();
+    }
+    overrideFilterEvents() {
+        for (const filter of this.filtersSelect) {
+            if (filter.type === 'dropdown' || filter.type === 'searchable') {
+                const key = filter.optionValue ?? 'value';
+                const deepKey = filter.deep ? `${filter.deep}.${key}` : key;
+                const originalOnSelected = filter.onSelected;
+                filter.onSelected = (value) => {
+                    const selectedValue = value?.[key] ?? value;
+                    if (selectedValue === null || selectedValue === undefined) {
+                        delete this.filters[deepKey];
+                    }
+                    else {
+                        this.filters[deepKey] = selectedValue;
+                    }
+                    // Llama al original
+                    if (typeof originalOnSelected === 'function') {
+                        originalOnSelected(value);
+                    }
+                    this.loadData('search');
+                };
+            }
+        }
+    }
+    // =====================================================
+    // Obtener datos
+    // =====================================================
+    // Cargar datos desde el servidor
+    loadData(loadingType = 'initialLoad', onFinally) {
+        this.setLoadingState(loadingType, 'loading');
+        const params = this.getQueryParams();
+        // Simulando espera de API
+        // setTimeout(() => {
+        this.genericService.getAll(this.endpoint, params).subscribe({
+            next: (response) => {
+                this.data = response.data[this.endpoint] ?? [];
+                if (response.meta?.page) {
+                    this.totalItems = response.meta.page.totalRecords;
+                    this.currentPage = response.meta.page.currentPage;
+                }
+                else {
+                    this.totalItems = this.data.length;
+                }
+                if (response.meta?.sort) {
+                    this.sortColumn = response.meta.sort.by;
+                    this.sortDirection = response.meta.sort.order.toLowerCase();
+                }
+                this.updateDisplayData();
+                this.generatePagination();
+                this.setLoadingState(loadingType, 'success');
+            },
+            error: (error) => {
+                console.error('Error fetching data:', error);
+                this.setLoadingState(loadingType, 'error');
+            }
+        }).add(() => {
+            this.dataLoaded.emit();
+            if (loadingType === 'sort') {
+                this.sortingColumn = null;
+            }
+            // Llamar al callback si fue proporcionado
+            if (onFinally) {
+                onFinally();
+            }
+        });
+        // }, 2000);
+    }
+    // Actualizar los datos que se muestran en la tabla
+    updateDisplayData() {
+        this.displayData = this.data;
+    }
+    // =====================================================
+    // Cambiar estado en campos booleanos
+    // =====================================================
+    // Método para cambiar el estado de un checkbox
+    onCheckboxChange(item, column) {
+        // Get the ID field name based on dataProperty
+        const idField = `id_${this.endpoint}`;
+        // Get the record ID
+        const recordId = item[idField];
+        // Get the current boolean value
+        const currentValue = this.getValue(item, column);
+        // Actualizar estado
+        this.genericService.enable(this.endpoint, recordId, { [column.key]: !currentValue }).subscribe({
+            next: (response) => {
+                item[column.key] = !currentValue;
+                this.alertToastService.AlertToast({
+                    type: "success",
+                    title: "Registro actualizado!",
+                    description: response.msg,
+                });
+            }
+        });
+    }
+    // Cambiar activos o inactivos
+    checkActiveInactive(isChecked) {
+        this.isChecked = !isChecked;
+        const index = this.isChecked ? 0 : 1;
+        this.titleChecked = this.checkedTitles[index];
+        // SOLO actualizamos la propiedad id_status sin tocar los demás filtros
+        this.filters['id_status'] = this.checkedValues[index];
+        this.filtersSelect = this.filtersSelect.map(filter => {
+            if ('optionValue' in filter && filter.optionValue === 'id_status') {
+                return {
+                    ...filter,
+                    defaultFilters: {
+                        ...(filter.hasOwnProperty('defaultFilters') ? filter.defaultFilters : {}),
+                        id_status: this.filters['id_status']
+                    },
+                    selected: null // limpia la selección previa para forzar el reload
+                };
+            }
+            return filter;
+        });
+        this.currentPage = 1;
+        this.loadData('checked');
+    }
+    // Eliminar filtros
+    onClearFilters(buttonType) {
+        this.setAditionalButtonLoading(buttonType);
+        this.loadData('initialLoad', () => {
+            this.clearAditionalButtonLoading(buttonType);
+        });
+    }
+    // =====================================================
+    // Columnas
+    // =====================================================
+    // Valores por defecto de las columnas
+    columnDefaults() {
+        // Valores por defecto de las columnas
+        this.columns.forEach(column => {
+            if (column.visible === undefined) {
+                column.visible = true;
+            }
+            if (column.sortable === undefined) {
+                column.sortable = true;
+            }
+            if (column.isSearchable === undefined) {
+                column.isSearchable = true;
+            }
+        });
+    }
+    // Obtener el recuento de columnas visibles para colspan en estado vacío
+    getVisibleColumnsCount() {
+        return this.columns.filter(col => col.visible).length;
+    }
+    // =====================================================
+    // Prosesamiento de datos
+    // =====================================================
+    // Obtener el valor de las celdas para identificar un campo booleano
+    isBoolean(value) {
+        return typeof value === 'boolean';
+    }
+    // Método para obtener el valor de las celdas dinámicamente
+    getValue(item, column) {
+        let value;
+        // Si existe un valueGetter, se usa directamente
+        if (typeof column.valueGetter === 'function') {
+            value = column.valueGetter(item);
+        }
+        else {
+            // Si no, se busca el valor por key (con soporte para claves anidadas)
+            const keys = column.key.split('.');
+            value = item;
+            for (const key of keys) {
+                if (value != null) {
+                    value = value[key];
+                }
+                else {
+                    value = null;
+                    break;
+                }
+            }
+        }
+        // Si value es null o undefined, retornar 'S/N'
+        if (value === null || value === undefined) {
+            return 'S/N';
+        }
+        // Aplicar formato según configuración de columna
+        const formatted = this.formatData(value, column);
+        // Si formatData no devuelve nada (valor no formateado), devolver el valor original
+        return formatted ?? value;
+    }
+    // Formatear datos para la tabla
+    formatData(value, column) {
+        // Añadir formato de moneda pero solo con el simbolo de $
+        if (column.isdollar && value !== null) {
+            const transformedValue = this.currencyPipe.transform(value, 'USD', 'symbol', '1.2-2');
+            return transformedValue ? transformedValue.replace('US', '') : null;
+        }
+        if (column.isCurrency && value !== null) {
+            return this.currencyPipe.transform(value, 'USD', 'symbol', '1.2-2');
+        }
+        if (column.isDate && value !== null) {
+            return new Date(value).toLocaleDateString();
+        }
+        if (column.isDateText && value !== null) {
+            return this.calendarService.formatearFechaString(`${value}`);
+        }
+        if (column.isDateTime && value !== null) {
+            return new Date(value).toLocaleString();
+        }
+        if (column.isDateTimeText && value !== null) {
+            return new Date(value).toString();
+        }
+        // Si no se aplica ningún formato, retornar el valor original
+        return value;
+    }
+    // =====================================================
+    // Parametros de busqueda
+    // =====================================================
+    // Obtener los parámetros de consulta para la solicitud de datos
+    getQueryParams() {
+        const params = this.genericService.params({
+            page: this.currentPage,
+            limit: this.itemsPerPage,
+            sort: {
+                column: this.sortColumn,
+                direction: this.sortDirection,
+            },
+            filters: this.filters,
+            defaultFilters: this.defaultFilters,
+        });
+        if (this.searchQuery && this.searchQuery.trim() !== '') {
+            const baseSearchKeys = this.columns
+                .filter(col => col.isSearchable)
+                .map(col => col.key);
+            const extraSearchKeys = this.columns
+                .flatMap(col => col.extraSearchFields || []);
+            const allSearchKeys = [...baseSearchKeys, ...extraSearchKeys];
+            params['search'] = this.searchQuery;
+            params['searchFields'] = allSearchKeys;
+        }
+        return params;
+    }
+    // =====================================================
+    // Ordenamiento
+    // =====================================================
+    // Numero de pagina
+    getRowNumber(index) {
+        return this.startIndex + index + 1;
+    }
+    // Ordenamiento de columnas
+    onSort(column) {
+        // Evitar múltiples solicitudes de ordenamiento simultáneas
+        if (this.isLoading('sort')) {
+            return;
+        }
+        if (!column.sortable)
+            return;
+        // Guardar la columna que está siendo ordenada
+        this.sortingColumn = column.key;
+        // Verificamos si estamos tratando con la misma columna que el último ordenamiento
+        const currentSortKey = this.converterService.getSortKey(this.sortColumn);
+        const columnSortKey = this.converterService.getSortKey(column.key);
+        // Sort direction logic
+        if (currentSortKey === columnSortKey) {
+            // Alternar la dirección del ordenamiento
+            if (this.sortDirection === 'asc') {
+                this.sortDirection = 'desc';
+            }
+            else if (this.sortDirection === 'desc') {
+                this.sortDirection = 'none';
+            }
+            else {
+                this.sortDirection = 'asc';
+            }
+        }
+        else {
+            // Si se selecciona una nueva columna para ordenar, iniciar con orden ascendente
+            this.sortColumn = column.key;
+            this.sortDirection = 'asc';
+        }
+        this.loadData('sort');
+    }
+    // Obtener la dirección de ordenamiento
+    getSortKey(value) {
+        return this.converterService.getSortKey(value);
+    }
+    // Manejar el evento de tecla presionada en la ordenación
+    onSortKeyPress(event, column) {
+        // Si ya hay una ordenación en progreso, no permitir otra
+        if (this.isLoading('sort')) {
+            return;
+        }
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.onSort(column);
+        }
+    }
+    // =====================================================
+    // Search
+    // =====================================================
+    // Search functionality
+    onSearch() {
+        this.currentPage = 1;
+        this.loadData('search');
+    }
+    // Selector de items por página
+    onItemsPerPageChange() {
+        this.currentPage = 1;
+        this.loadData('itemsPerPage');
+    }
+    // =====================================================
+    // Paginator
+    // =====================================================
+    // Generar numeros de paginación
+    generatePagination() {
+        const totalPages = this.totalPages;
+        const currentPage = this.currentPage;
+        // Ver los 5 numeros de paginación
+        const maxPagesToShow = 3;
+        let startPage = Math.max(1, currentPage - Math.floor(maxPagesToShow / 2));
+        let endPage = Math.min(totalPages, startPage + maxPagesToShow - 1);
+        // Adjust if we're near the end
+        if (endPage - startPage + 1 < maxPagesToShow) {
+            startPage = Math.max(1, endPage - maxPagesToShow + 1);
+        }
+        this.pages = Array.from({ length: endPage - startPage + 1 }, (_, i) => startPage + i);
+    }
+    // Paginar
+    handlePageChange(page) {
+        this.currentPage = page;
+        this.loadData('pagination');
+    }
+    // =====================================================
+    // Opciones
+    // =====================================================
+    // Método para manejar el clic de un botón
+    onButtonClick(button, element) {
+        // Ejecuta la acción del padre si está definida
+        if (button.clicked) {
+            button.clicked(element);
+        }
+    }
+    // Método para obtener un tooltip
+    getTooltip(tooltip, data) {
+        if (typeof tooltip === 'function') {
+            return tooltip(data);
+        }
+        return tooltip ?? '';
+    }
+    // Método para obtener un icono
+    getIcon(icon, data) {
+        if (typeof icon === 'function') {
+            return icon(data);
+        }
+        return icon;
+    }
+    // Evaluar si un botón está deshabilitado
+    getDisabled(option, data) {
+        if (typeof option.disabled === 'function') {
+            return option.disabled(data);
+        }
+        return !!option.disabled;
+    }
+    // Evaluar si un botón es visible
+    getIsVisible(option, data) {
+        if (typeof option.isVisible === 'function') {
+            return option.isVisible(data);
+        }
+        // Si no se define, por defecto es visible
+        return option.isVisible !== false;
+    }
+    // Método para obtener la clase CSS de un botón
+    mergeNgClasses(optionNgClass, data) {
+        const baseClass = {
+            'min-w-auto p-1! pl-2! pr-2!': true
+        };
+        let dynamicClass = {};
+        if (typeof optionNgClass === 'function') {
+            dynamicClass = optionNgClass(data);
+        }
+        else {
+            dynamicClass = optionNgClass ?? {};
+        }
+        return {
+            ...baseClass,
+            ...(typeof dynamicClass === 'string' ? { [dynamicClass]: true } : dynamicClass)
+        };
+    }
+    // =====================================================
+    // Parametros de carga
+    // =====================================================
+    // Método para verificar si un estado específico está cargando
+    isLoading(state) {
+        return this.loadingStates[state] === 'loading';
+    }
+    // Método para verificar si cualquier estado está cargando
+    isAnyLoading() {
+        return Object.values(this.loadingStates).some(state => state === 'loading');
+    }
+    // Método para actualizar un estado de carga
+    setLoadingState(state, value) {
+        if (state === 'aditionalButtons') {
+            if (typeof value === 'string') {
+                // Evita asignar un string directamente si se espera un objeto
+                console.warn(`No puedes asignar '${value}' directamente a aditionalButtons. Usa setAditionalButtonLoading en su lugar.`);
+            }
+            else {
+                this.loadingStates.aditionalButtons = value;
+            }
+        }
+        else {
+            this.loadingStates[state] = value;
+        }
+    }
+    // Activar loading
+    setAditionalButtonLoading(buttonType, id) {
+        const key = id !== undefined ? `${buttonType}_${id}` : buttonType;
+        this.loadingStates.aditionalButtons[key] = 'loading';
+    }
+    // Limpiar loading
+    clearAditionalButtonLoading(buttonType, id) {
+        const key = id !== undefined ? `${buttonType}_${id}` : buttonType;
+        this.loadingStates.aditionalButtons[key] = 'idle';
+    }
+    // Verificar loading
+    isAditionalButtonLoading(buttonType, id) {
+        const key = id !== undefined ? `${buttonType}_${id}` : buttonType;
+        return this.loadingStates.aditionalButtons[key] === 'loading';
+    }
+    // ==================================================
+    // Expandir filas
+    // ==================================================
+    // Método para verificar si la tabla tiene filas expandibles
+    hasExpandable() {
+        return this.columns.some(col => typeof col.expandTemplate === 'function');
+    }
+    // Método para verificar si una fila está expandida
+    toggleRow(row) {
+        if (this.expandedRows.has(row)) {
+            this.expandedRows.delete(row);
+        }
+        else {
+            this.expandedRows.add(row);
+        }
+    }
+    // Método para obtener contenido expandido de una fila
+    getExpandedContent(row) {
+        const expandableColumn = this.columns.find(col => typeof col.expandTemplate === 'function');
+        return expandableColumn?.expandTemplate?.(row) ?? '';
+    }
+    // Método para obtener el estado de expansión de una fila
+    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 ɵ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({
+                    height: '0',
+                    opacity: 0,
+                    overflow: 'hidden',
+                })),
+                state('expanded', style({
+                    height: '*',
+                    opacity: 1,
+                })),
+                transition('collapsed <=> expanded', [
+                    animate('0.3s ease-in-out')
+                ])
+            ])
+        ] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: JTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'JCrudTable', standalone: true, imports: [CommonModule, FormsModule, JPaginatorComponent, JFilterComponent, LucideAngularModule, JButtonComponent, JCheckboxComponent], animations: [
+                        trigger('slideToggle', [
+                            state('collapsed', style({
+                                height: '0',
+                                opacity: 0,
+                                overflow: 'hidden',
+                            })),
+                            state('expanded', style({
+                                height: '*',
+                                opacity: 1,
+                            })),
+                            transition('collapsed <=> expanded', [
+                                animate('0.3s ease-in-out')
+                            ])
+                        ])
+                    ], 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: [{
+                type: Output
+            }], endpoint: [{
+                type: Input
+            }], columns: [{
+                type: Input
+            }], defaultFilters: [{
+                type: Input
+            }], isPaginator: [{
+                type: Input
+            }], isSearch: [{
+                type: Input
+            }], itemsPerPageOptions: [{
+                type: Input
+            }], searchPlaceholder: [{
+                type: Input
+            }], checked: [{
+                type: Input
+            }], checkedValues: [{
+                type: Input
+            }], checkedTitles: [{
+                type: Input
+            }], filtersButton: [{
+                type: Input
+            }], filtersSelect: [{
+                type: Input
+            }], optionsTable: [{
+                type: Input
+            }] } });
+
+hljs.registerLanguage('ts', typescript);
+hljs.registerLanguage('js', javascript);
+hljs.registerLanguage('bash', bash);
+hljs.registerLanguage('css', css);
+hljs.registerLanguage('scss', scss);
+hljs.registerLanguage('html', html);
+hljs.registerLanguage('json', json);
+class JCodeBlockComponent {
+    icons = {
+        copy: Copy,
+        check: Check
+    };
+    copied = false;
+    code = '';
+    language = 'ts';
+    codeRef;
+    highlightedCode = '';
+    ngAfterViewInit() {
+        this.codeRef.nativeElement.textContent = this.code;
+        hljs.highlightElement(this.codeRef.nativeElement);
+    }
+    copyCode() {
+        navigator.clipboard.writeText(this.code).then(() => {
+            console.log('Copiado al portapapeles');
+        });
+        this.copied = true;
+        setTimeout(() => (this.copied = false), 2000);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: JCodeBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: JCodeBlockComponent, isStandalone: true, selector: "JCodeBlock", inputs: { code: "code", language: "language" }, viewQueries: [{ propertyName: "codeRef", first: true, predicate: ["codeRef"], descendants: true }], ngImport: i0, template: "<div class=\"relative rounded bg-foreground pl-5 pt-3 m-0 border border-border dark:border-dark-border\">\r\n    <div class=\"absolute top-4 right-4\">\r\n        <JButton (clicked)=\"copyCode()\" [icon]=\"icons['copy']\" [iconChange]=\"icons['check']\"\r\n            [isChangeIcon]=\"copied\" [iconSize]=\"15\" tooltip=\"Copiar\" classes=\"w-[25px] h-[25px] text-white\" />\r\n    </div>\r\n    <pre class=\"p-5\">\r\n        <code #codeRef class=\"language-{{language}}\"></code>\r\n    </pre>\r\n</div>", styles: ["pre,code{margin:0!important;padding:0!important;background:transparent!important;line-height:1.5;font-size:.85rem}.hljs{background:transparent!important;border-radius:0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: JButtonComponent, selector: "JButton", inputs: ["type", "disabled", "isLoading", "icon", "iconSize", "text", "isChangeIcon", "iconChange", "tooltip", "tooltipPosition", "classes", "ngClasses"], outputs: ["clicked"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: JCodeBlockComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'JCodeBlock', imports: [CommonModule, JButtonComponent], template: "<div class=\"relative rounded bg-foreground pl-5 pt-3 m-0 border border-border dark:border-dark-border\">\r\n    <div class=\"absolute top-4 right-4\">\r\n        <JButton (clicked)=\"copyCode()\" [icon]=\"icons['copy']\" [iconChange]=\"icons['check']\"\r\n            [isChangeIcon]=\"copied\" [iconSize]=\"15\" tooltip=\"Copiar\" classes=\"w-[25px] h-[25px] text-white\" />\r\n    </div>\r\n    <pre class=\"p-5\">\r\n        <code #codeRef class=\"language-{{language}}\"></code>\r\n    </pre>\r\n</div>", styles: ["pre,code{margin:0!important;padding:0!important;background:transparent!important;line-height:1.5;font-size:.85rem}.hljs{background:transparent!important;border-radius:0!important}\n"] }]
+        }], propDecorators: { code: [{
+                type: Input
+            }], language: [{
+                type: Input
+            }], codeRef: [{
+                type: ViewChild,
+                args: ['codeRef']
+            }] } });
+
+// =======================================
+// Publicar libreria
+// =======================================
+// ng build tailjng
+// cd .\dist\tailjng\
+// npm publish --access public
 /*
  * Public API Surface of tailjng
  */
+// export * from './lib/tailjng.service';
+// export * from './lib/tailjng.component';
+// Mode Toggle
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { JTooltipModule, TailjngComponent, TailjngService };
+export { API_URL, CardComponent, JAlertDialogComponent, JAlertDialogService, JAlertToastComponent, JAlertToastService, JButtonComponent, JCheckboxComponent, JCodeBlockComponent, JDialogComponent, JDialogShared, JErrorHandlerService, JFilterComponent, JFormComponent, JFormShared, JGenericService, JHttpParamsService, JInputComponent, JLabelComponent, JModeToggleComponent, JPaginatorComponent, JSelectComponent, JTableComponent, JThemeComponent, JToggleRadioComponent, JTooltipModule };
 //# sourceMappingURL=tailjng.mjs.map